V12

Lib/appconf/appconf.js

@@ -576,25 +576,26 @@ var config = {
 }
 
 
-var vue_config = new Vue({
-    el: '#vue-config',
-    data: {
-        app_name: "App Name",
-        app_name_color: "#44b3e2",
-        app_description: "",
-        app_instructions: "",
-        config_name: "",
-        config_public: false,
-        config_items: [],
-        config_valid: false,
-        autogen_node: "",
-        autogen_feeds: [],
-        autogen_all_present: false,
-        autogen_status: "",
-        autogen_status_color: "#aaa",
-
-        // Button only currently used by myheatpump app.
-        enable_process_daily: false
+var vue_config_app = Vue.createApp({
+    data: function() {
+        return {
+            app_name: "App Name",
+            app_name_color: "#44b3e2",
+            app_description: "",
+            app_instructions: "",
+            config_name: "",
+            config_public: false,
+            config_items: [],
+            config_valid: false,
+            autogen_node: "",
+            autogen_feeds: [],
+            autogen_all_present: false,
+            autogen_status: "",
+            autogen_status_color: "#aaa",
+
+            // Button only currently used by myheatpump app.
+            enable_process_daily: false
+        };
     },
     methods: {
 
@@ -833,4 +834,6 @@ var vue_config = new Vue({
             config.reset_daily_data();
         }
     }
-});
+});
+
+var vue_config = vue_config_app.mount('#vue-config');

Lib/appconf/appconf.php

@@ -5,9 +5,6 @@
     $app_conf_version = time(); // Use timestamp for cache busting during development, replace with static version for production
 ?>
 
-<script src="<?php echo $path; ?>Lib/vue.min.js"></script>
-
-
 <link href="<?php echo $app_conf_path; ?>appconf.css?v=<?php echo $app_conf_version; ?>" rel="stylesheet">
 
 <div id="vue-config">
@@ -149,4 +146,4 @@
 </div>
 </div>
 
-<script type="text/javascript" src="<?php echo $app_conf_path; ?>appconf.js?v=<?php echo $app_conf_version; ?>"></script>
+<?php load_js('Modules/app/Lib/appconf/appconf.js'); ?>

Views/app_list.php

@@ -2,8 +2,6 @@
 defined('EMONCMS_EXEC') or die('Restricted access');
 global $path;
 ?>
-<script src="<?php echo $path; ?>Lib/vue.min.js"></script>
-
 <div id="app" style="padding:20px">
     <h2><?php echo _("My Apps"); ?></h2>
 
@@ -61,10 +59,11 @@
 
 </div>
 <script>
-var app = new Vue({
-    el: '#app',
-    data: {
-        apps: []
+var app = Vue.createApp({
+    data: function() {
+        return {
+            apps: []
+        };
     },
     mounted() {
         this.getApps();
@@ -142,5 +141,5 @@
             }
         }
     }
-});
+}).mount('#app');
 </script>

Views/app_view.php

@@ -1,108 +1,133 @@
 <?php global $path; ?>
-<script src="<?php echo $path; ?>Lib/vue.min.js"></script>
 
-<div style="padding:20px">
+<div id="app-page" style="padding:20px">
 
-  <h2>Available Apps</h2>
-  <p>Create a new instance of an app by clicking on one of the apps below.</p>
+    <h2>Available Apps</h2>
+    <p>Create a new instance of an app by clicking on one of the apps below.</p>
 
-  <div id="available-apps">
+    <div id="available-apps">
 
-    <p><b>Featured apps:</b></p>
+        <p><b>Featured apps:</b></p>
 
-    <div class="app-group">
-      <div class="app-item" v-for="(app, index) in apps" :key="index" :app="index" v-if="app.primary">
-        <div class="app-item-title">{{ app.title }}</div>
-        <div class="app-item-description">{{ app.description || "no description..." }}</div>
-      </div>
-    </div>
-    <br>
-
-    <p><b>All apps:</b></p>
+        <div class="app-group">
+            <div class="app-item" v-for="entry in featuredApps" :key="entry.id" @click="openCreateModal(entry.id)">
+                <div class="app-item-title">{{ entry.app.title }}</div>
+                <div class="app-item-description">{{ entry.app.description || "no description..." }}</div>
+            </div>
+        </div>
+        <br>
 
-    <div class="app-group">
-      <div class="app-item" v-for="(app, index) in apps" :key="index" :app="index" v-if="!app.primary">
-        <div class="app-item-title">{{ app.title }}</div>
-        <div class="app-item-description">{{ app.description || "no description..." }}</div>
-      </div>
-    </div>
+        <p><b>All apps:</b></p>
 
-  </div>
+        <div class="app-group">
+            <div class="app-item" v-for="entry in otherApps" :key="entry.id" @click="openCreateModal(entry.id)">
+                <div class="app-item-title">{{ entry.app.title }}</div>
+                <div class="app-item-description">{{ entry.app.description || "no description..." }}</div>
+            </div>
+        </div>
 
-</div>
+    </div>
 
 <!-------------------------------------------------------------------------------------------
   MODALS
 -------------------------------------------------------------------------------------------->
 <!-- GROUP CREATE -->
-<div id="app-new-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="app-new-modal-label" aria-hidden="true" data-backdrop="static">
+<dialog id="app-new-modal" class="ec-modal" aria-labelledby="app-new-modal-label" data-backdrop="static" style="--modal-width: 620px;">
     <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-        <h3 id="app-new-modal-label">Please enter name for app</h3>
+        <button type="button" class="modal-close-btn" data-modal-close aria-label="Close">&times;</button>
+        <h3 id="app-new-modal-label">{{ modalTitle }}</h3>
     </div>
     <div class="modal-body">
 
-    <p>Enter a unique name for the app:<br>
-    <input id="app-new-name" type="text"></p>
+        <p>Enter a unique name for the app:<br>
+            <input id="app-new-name" type="text" v-model="appName"></p>
 
     </div>
     <div class="modal-footer">
-        <button id="app-new-cancel" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
-        <button id="app-new-action" class="btn btn-primary">Create</button>
+        <button id="app-new-cancel" class="btn" data-modal-close @click="cancelCreate">Cancel</button>
+        <button id="app-new-action" class="btn btn-primary" @click="createApp">Create</button>
     </div>
+</dialog>
+
 </div>
 
 <script>
 
 var available_apps = JSON.parse('<?php echo json_encode($apps); ?>');
-var selected_app = "";
-var app_new_enable = true;
-
-
-var app_list = new Vue({
-    el: '#available-apps',
-    data: {
-        apps: available_apps
-    }
-});
-
-
-$(function() {
-    $(".app-group").each(function() { $(this).find(".app-item").first().css("border-top","1px solid #ccc"); });
-
-    $(".app-item").click(function(){
-        if (app_new_enable) {
-            var app = $(this).attr("app");
-            selected_app = app;
-            $("#app-new-modal-label").html("Create app: "+available_apps[app].title);
-            $("#app-new-name").val(available_apps[app].title);
-            $('#app-new-modal').modal('show');
-        }
-    });
-
-    $("#app-new-action").click(function(){
-        app_new_enable = false;
-        setTimeout(function(){ app_new_enable = true; }, 500);
-        $('#app-new-modal').modal('hide');
-
-        var app_name = $("#app-new-name").val();
-        app_name =  app_name.replace(/\W/g, '');
-        var nicename = escape(app_name).replace(/%20/g, "+");
-        $.ajax({                                      
-            url: path+"app/add?name="+nicename+"&app="+selected_app,
-            dataType: 'json',
-            async: true,
-            success: function(result) {
-                // console.log(result);
-                window.location = path+"app/view?name="+nicename;
+var app_list = Vue.createApp({
+    data: function() {
+        return {
+            apps: available_apps,
+            selectedApp: "",
+            appName: "",
+            appNewEnable: true
+        };
+    },
+    computed: {
+        appEntries: function() {
+            var entries = [];
+            for (var id in this.apps) {
+                if (Object.prototype.hasOwnProperty.call(this.apps, id) && this.apps[id]) {
+                    entries.push({ id: id, app: this.apps[id] });
+                }
+            }
+            return entries;
+        },
+        featuredApps: function() {
+            return this.appEntries.filter(function(entry) {
+                return !!entry.app.primary;
+            });
+        },
+        otherApps: function() {
+            return this.appEntries.filter(function(entry) {
+                return !entry.app.primary;
+            });
+        },
+        modalTitle: function() {
+            if (this.selectedApp === "") {
+                return "Please enter name for app";
             }
+            return "Create app: " + (this.apps[this.selectedApp] ? this.apps[this.selectedApp].title : "");
+        }
+    },
+    methods: {
+        openCreateModal: function(index) {
+            if (!this.appNewEnable) return;
+            if (!this.apps[index]) return;
+            this.selectedApp = index;
+            this.appName = this.apps[index].title;
+            emoncmsModal.open('app-new-modal');
+        },
+        createApp: function() {
+            var self = this;
+            self.appNewEnable = false;
+            setTimeout(function() { self.appNewEnable = true; }, 500);
+            emoncmsModal.close('app-new-modal');
+
+            var app_name = self.appName;
+            app_name = app_name.replace(/\W/g, '');
+            var nicename = escape(app_name).replace(/%20/g, "+");
+            $.ajax({                                      
+                url: path + "app/add?name=" + nicename + "&app=" + self.selectedApp,
+                dataType: 'json',
+                async: true,
+                success: function(result) {
+                    // console.log(result);
+                    window.location = path + "app/view?name=" + nicename;
+                }
+            });
+        },
+        cancelCreate: function() {
+            var self = this;
+            self.appNewEnable = false;
+            setTimeout(function() { self.appNewEnable = true; }, 500);
+        }
+    },
+    mounted: function() {
+        $(".app-group").each(function() {
+            $(this).find(".app-item").first().css("border-top", "1px solid #ccc");
         });
-    });
-
-    $("#app-new-cancel").click(function(){
-        app_new_enable = false;
-        setTimeout(function(){ app_new_enable = true; }, 500);
-    });
-})
+    }
+}).mount('#app-page');
 
 </script>