Plugin lifecycle optimization

- Added term flow before plugin is killed
- Updated example implementations
- Added SIGINT to Zoraxy for shutdown sequence (Fixes #561 ?)

src/web/components/plugincontext.html

@@ -4,13 +4,23 @@
     </iframe>
 </div>
 <script>
-    function initPluginUIView(){
+    function initPluginUIView(forceOverwritePluginID = undefined){
+        if (typeof(forceOverwritePluginID) != "undefined"){
+            let pluginID = forceOverwritePluginID;
+            console.log("Launching plugin UI for plugin with ID:", pluginID);
+            loadPluginContext(pluginID);
+            return;
+        }
         let pluginID = getPluginIDFromWindowHash();
+        if (pluginID == ""){
+            return;
+        }
         console.log("Launching plugin UI for plugin with ID:", pluginID);
         loadPluginContext(pluginID);
     }
 
     function loadPluginContext(pluginID){
+        //Check if the iframe is currently visable
         let pluginContextURL = `/plugin.ui/${pluginID}/`;
         $("#pluginContextLoader").attr("src", pluginContextURL);
     }

src/web/components/plugins.html

@@ -24,16 +24,37 @@
 <script>
 
 function initPluginSideMenu(){
-  $("#pluginMenu").html("");
   $.get(`/api/plugins/list`, function(data){
+    $("#pluginMenu").html("");
+    let enabledPluginCount = 0;
     data.forEach(plugin => {
+      if (!plugin.Enabled){
+        return;
+      }
       $("#pluginMenu").append(`
-        <a class="item" tag="pluginContextWindow" pluginid="${plugin.Spec.id}" onclick="loadPluginUIContextIfAvailable();">
+        <a class="item" tag="pluginContextWindow" pluginid="${plugin.Spec.id}">
             <img style="width: 20px;" class="ui mini right spaced image" src="/api/plugins/icon?plugin_id=${plugin.Spec.id}"> ${plugin.Spec.name}
         </a>
       `);
-      
+      enabledPluginCount++;
     });
+    if (enabledPluginCount == 0){
+      $("#pluginMenu").append(`
+         <a class="item" style="pointer-events: none; user-select: none; opacity: 0.6;">
+            <i class="green circle check icon"></i> No Plugins Installed
+        </a>
+      `);
+    }
+
+    //Rebind events for the plugin menu
+    $("#pluginMenu").find(".item").each(function(){
+        $(this).off("click").on("click", function(event){
+            let tabid = $(this).attr("tag");
+            openTabById(tabid, $(this));
+            loadPluginUIContextIfAvailable();
+        });
+    });
+
   });
 }
 initPluginSideMenu();
@@ -44,12 +65,9 @@ function loadPluginUIContextIfAvailable(){
   }
 }
 
-
-
 function initiatePluginList(){
   $.get(`/api/plugins/list`, function(data){
-    const tbody = $("#pluginTable");
-    tbody.empty();
+    $("#pluginTable").html("");
 
     data.forEach(plugin => {
       let authorContact = plugin.Spec.author_contact;
@@ -62,7 +80,7 @@ function initiatePluginList(){
         <tr>
           <td data-label="PluginName">
             <h4 class="ui header">
-              <img onclick="openPluginUI('${plugin.Spec.id}');" class="clickable" src="/api/plugins/icon?plugin_id=${plugin.Spec.id}" class="ui image">
+              <img src="/api/plugins/icon?plugin_id=${plugin.Spec.id}" class="ui image">
               <div class="content">
                 ${plugin.Spec.name}
                 <div class="sub header">${versionString} by <a href="${authorContact}" target="_blank">${plugin.Spec.author}</a></div>
@@ -73,20 +91,76 @@ function initiatePluginList(){
           <a href="${plugin.Spec.url}" target="_blank">${plugin.Spec.url}</a></td>
           <td data-label="Category">${plugin.Spec.type==0?"Router":"Utilities"}</td>
           <td data-label="Action">
-            <div class="ui toggle checkbox">
-              <input type="checkbox" name="enable" ${plugin.Enabled ? 'checked' : ''}>
+            <div class="ui small basic buttons">
+              <button onclick="stopPlugin('${plugin.Spec.id}', this);" class="ui button pluginEnableButton" pluginid="${plugin.Spec.id}" ${plugin.Enabled ? '' : 'style="display:none;"'}>
+                <i class="red stop circle icon"></i> Stop
+              </button>
+              <button onclick="startPlugin('${plugin.Spec.id}', this);" class="ui button pluginDisableButton" pluginid="${plugin.Spec.id}" ${plugin.Enabled ? 'style="display:none;"' : ''}>
+                <i class="green play circle icon"></i> Start
+              </button>
             </div>
           </td>
         </tr>
       `;
-      tbody.append(row);
+      $("#pluginTable").append(row);
     });
+
+    if (data.length == 0){
+      $("#pluginTable").append(`
+        <tr>
+          <td colspan="4" style="text-align: center;"><i class="ui green circle check icon"></i> No plugins installed</td>
+        </tr>
+      `);
+    }
+
     console.log(data);
   });
 }
 
 initiatePluginList();
 
+function startPlugin(pluginId, btn=undefined){
+  if (btn) {
+    $(btn).html('<i class="spinner loading icon"></i> Starting');
+    $(btn).addClass('disabled');
+  }
+  $.cjax({
+    url: '/api/plugins/enable',
+    type: 'POST',
+    data: {plugin_id: pluginId},
+    success: function(data){
+      if (data.error != undefined){
+        msgbox(data.error, false);
+      }else{
+        msgbox("Plugin started", true);
+      }
+      initiatePluginList();
+      initPluginSideMenu();
+    }
+  });
+}
+
+function stopPlugin(pluginId, btn=undefined){
+  if (btn) {
+    $(btn).html('<i class="spinner loading icon"></i> Stopping');
+    $(btn).addClass('disabled');
+  }
+  $.cjax({
+    url: '/api/plugins/disable',
+    type: 'POST',
+    data: {plugin_id: pluginId},
+    success: function(data){
+      if (data.error != undefined){
+        msgbox(data.error, false);
+      }else{
+        msgbox("Plugin stopped", true);
+      }
+      initiatePluginList();
+      initPluginSideMenu();
+    }
+  });
+}
+
 </script>
 
 

src/web/index.html

@@ -99,7 +99,7 @@
                     <div class="ui divider menudivider">Plugins</div>
                     <cx id="pluginMenu"></container>
                         <a class="item" style="pointer-events: none; user-select: none; opacity: 0.6;">
-                            <i class="green circle check icon"></i> No Installed Plugins
+                            <i class="green circle check icon"></i> No Plugins Installed
                         </a>
                     </cx>
                     <!-- Add more components here -->