Merge pull request #698 from ryanblenis/plugin-admin

Plugin Tab OnStates / Better MeshCore processing

pluginHandler.js

@@ -51,8 +51,8 @@ module.exports.pluginHandler = function (parent) {
                         parent.db.updatePlugin(plugin._id, plugin_config);
                     } catch (e) { console.log("Plugin config file for " + plugin.name + " could not be parsed."); }
                 }
-                obj.parent.updateMeshCore(); // db calls are delayed, lets inject here once we're ready
             });
+            obj.parent.updateMeshCore(); // db calls are async, lets inject here once we're ready
         });
     } else {
         obj.loadList.forEach(function (plugin, index) {
@@ -88,17 +88,26 @@ module.exports.pluginHandler = function (parent) {
                 }
             }
         };
-        
+        // accepts a function returning an object or an object with { tabId: "yourTabIdValue", tabTitle: "Your Tab Title" }
         obj.registerPluginTab = function(pluginRegInfo) {
-            var d = pluginRegInfo();
+            var d = null;
+            if (typeof pluginRegInfo == 'function') d = pluginRegInfo();
+            else d = pluginRegInfo;
+            if (d.tabId == null || d.tabTitle == null) { return false; }
             if (!Q(d.tabId)) {
-                QA('p19headers', '<span onclick="return pluginHandler.callPluginPage(\\''+d.tabId+'\\');">'+d.tabTitle+'</span>');
+                var defaultOn = 'class="on"';
+                if (Q('p19headers').querySelectorAll("span.on").length) defaultOn = '';
+                QA('p19headers', '<span ' + defaultOn + ' onclick="return pluginHandler.callPluginPage(\\''+d.tabId+'\\', this);">'+d.tabTitle+'</span>');
+                QA('p19pages', '<div id="' + d.tabId + '"></div>');
             }
         };
-        obj.callPluginPage = function(id) {
+        obj.callPluginPage = function(id, el) {
             var pages = Q('p19pages').querySelectorAll("#p19pages>div"); 
             for (const i of pages) { i.style.display = 'none'; }
             QV(id, true);
+            var tabs = Q('p19headers').querySelectorAll("span"); 
+            for (const i of tabs) { i.classList.remove('on'); }
+            el.classList.add('on');
         };
         obj.addPluginEx = function() {
             meshserver.send({ action: 'addplugin', url: Q('pluginurlinput').value});

plugin_development.md

@@ -60,7 +60,7 @@ These are separated into the following categories depending on the type of funct
 
 ### Web UI Hooks
 `onDeviceRefeshEnd`: called when a device is selected in the MeshCentral web interface
-`registerPluginTab`: called when a device is selected in the MeshCentral web interface to register a new tab for plugin data, if required
+`registerPluginTab`: callable when a device is selected in the MeshCentral web interface to register a new tab for plugin data, if required. Accepts an object, or function that returns an object, with the following properties: { tabId: "yourShortNameHere", tabTitle: "Your Display Name"}. A tab and div with the associated ID and title will be created for your use
 `onDesktopDisconnect`: called when a remote desktop session is disconnected
 
 #### Exports

public/styles/style.css

@@ -2645,3 +2645,24 @@ a {
     width: 100%;
     height: 100%;
 }
+
+#p19headers {
+    padding-right: 7px;
+    padding-bottom: 10px;
+    font-weight: bold;
+    border-bottom: 1px dotted blue;
+}
+
+#p19headers > span:nth-child(n+2) {
+    border-left: 1px solid black;
+}
+
+#p19headers > span {
+    padding-left: 4px;
+    padding-right: 4px;
+    cursor: pointer;
+    font-weight: lighter;
+}
+#p19headers > span.on {
+    font-weight: bold;
+}

views/default.handlebars

@@ -895,23 +895,6 @@
             </div>
             <div id=p19 style="display:none">
                 <h1>Plugins - <span id=p19deviceName></span></h1>
-                <style>
-                    #p19headers {
-                        padding-right: 7px;
-                        padding-bottom: 10px;
-                        font-weight: bold;
-                        border-bottom: 1px dotted blue;
-                    }
-
-                        #p19headers > span:nth-child(n+2) {
-                            border-left: 1px solid black;
-                        }
-
-                        #p19headers > span {
-                            padding-left: 4px;
-                            padding-right: 4px;
-                        }
-                </style>
                 <div id="p19headers"></div>
                 <div id=p19pages></div>
             </div>