Refactor plugin admin views to a more simplistic, reusable, multiple view approach

pluginHandler.js

@@ -199,22 +199,6 @@ module.exports.pluginHandler = function (parent) {
         return isValid;
     };
     
-    obj.getPlugins = function(func) {
-        var plugins = parent.db.getPlugins();
-        if (typeof plugins == 'undefined' || plugins.length == 0) {
-            return null;
-        }
-        
-        plugins.forEach(function(p, x){
-            // check semantic version
-            console.log('FOREACH PLUGIN', p, x);
-            // callbacks to new versions
-            
-        });
-        
-        return plugins;
-    }
-    
     obj.getPluginConfig = function(configUrl) {
         return new Promise(function(resolve, reject) {
             var https = require('https');

public/styles/style.css

@@ -233,7 +233,7 @@ body {
 }
 
 /* #UserDummyMenuSpan,  */
-#MainSubMenuSpan, #MeshSubMenuSpan, #UserSubMenuSpan, #ServerSubMenuSpan, #MainMenuSpan, #MainSubMenu, #MeshSubMenu, #UserSubMenu, #ServerSubMenu, #UserDummyMenu {
+#MainSubMenuSpan, #MeshSubMenuSpan, #UserSubMenuSpan, #ServerSubMenuSpan, #MainMenuSpan, #MainSubMenu, #MeshSubMenu, #UserSubMenu, #ServerSubMenu, #UserDummyMenu, #PluginSubMenu {
     width: 100%;
     height: 24px;
     color: white;
@@ -244,6 +244,10 @@ body {
     display: none;
 }
 
+.menu_stack #PluginSubMenu {
+    display: none;
+}
+
 #MainMenuSpan {
     display: table;
 }
@@ -2629,50 +2633,7 @@ a {
     margin: 50px auto;
 }
 
-.pluginOverlayBg {
+.pluginContent {
-    width: 95%; /* Full width (cover the whole page) */
+    width: 100%;
-    height: 95%; /* Full height (cover the whole page) */
+    height: 100%;
-    margin: 10px;
-    background-color: rgba(0,0,0,0.8); /* Black background with opacity */
-    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
-    position: absolute;
-    cursor: pointer; /* Add a pointer on hover */
-    filter:blur(4px);
-      -o-filter:blur(4px);
-      -ms-filter:blur(4px);
-      -moz-filter:blur(4px);
-      -webkit-filter:blur(4px);
-}
-
-.pluginOverlay {
-    width: 95%; /* Full width (cover the whole page) */
-    height: 95%; /* Full height (cover the whole page) */
-    margin: 10px;
-    background-color: #FFFFFF; /* Black background with opacity */
-    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
-    position: absolute;
-    cursor: pointer; /* Add a pointer on hover */
-}
-.pluginOverlayContent {
-    width: 100%; /* Full width (cover the whole page) */
-    height: 100%; /* Full height (cover the whole page) */
-    background-color: #FFFFFF; /* Black background with opacity */
-    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
-    position: relative;
-}
-
-.pluginTitleBar {
-    padding: 4px;
-    height: 25px;
-    border-bottom: double;
-    font-size: 20px;
-}
-
-.pluginCloseBtn {
-    border: none;
-    outline: none;
-    cursor: pointer;
-    float: right;
-    position: relative;
-    padding: 0;
 }

views/default.handlebars

@@ -57,6 +57,9 @@
         <div id="cxtermnorm" class="cmtext" onclick="cmtermaction(1,event)">Normal Connect</div>
         <div id="cxtermps" class="cmtext" onclick="cmtermaction(2,event)">PowerShell Connect</div>
     </div>
+    <div id="pluginTabContextMenu" class="contextMenu noselect" style="display:none;min-width:0px">
+        <div id="cxclose" class="cmtext" onclick="pluginTabClose(event)">Close Tab</div>
+    </div>
     <!-- main page -->
     <div id=container>
         <div id="notifiyBox" class="notifiyBox" style="display:none"></div>
@@ -160,6 +163,11 @@
                             </tr>
                         </table>
                     </div>
+                    <div id=PluginSubMenuSpan>
+                        <table id=PluginSubMenu cellpadding=0 cellspacing=0 class=style1>
+                            <tr><td onclick="goPlugin(-1)" onkeypress="if (event.key == 'Enter') goPlugin(-1)" class="topbar_td style3x">Home</td></tr>
+                        </table>
+                    </div>
                     <div id=UserDummyMenuSpan>
                         <table id=UserDummyMenu cellpadding=0 cellspacing=0 class=style1>
                             <tr><td class=style3 style="">&nbsp;</td></tr>
@@ -2300,7 +2308,6 @@
                             break;
                         }
                         case 'updatePluginList': {
-                            // @Ylianst - Do we need a rights check here?
                             installedPluginList = message.event.list;
                             updatePluginList();
                             break;
@@ -3519,6 +3526,12 @@
                 contextmenudiv.style.left = event.pageX + 'px';
                 contextmenudiv.style.top = event.pageY + 'px';
                 contextmenudiv.style.display = 'block';
+            } else if (elem && elem != null && elem.classList.contains('pluginTab')) {
+                contextelement = elem;
+                var contextmenudiv = document.getElementById('pluginTabContextMenu');
+                contextmenudiv.style.left = event.pageX + 'px';
+                contextmenudiv.style.top = event.pageY + 'px';
+                contextmenudiv.style.display = 'block';
             } else {
                 while (elem && elem != null && elem.id != 'devs') { elem = elem.parentElement; }
                 if (!elem || elem == null) return true;
@@ -3590,10 +3603,21 @@
             connectTerminal(null, 1, { powershell: (action == 2) });
         }
 
+        function pluginTabClose() {
+            var pluginTab = contextelement;
+            var pname = pluginTab.getAttribute('x-data-plugin-sname');
+            var pdiv = Q('plugin-'+pname);
+            pdiv.parentNode.removeChild(pdiv);
+            pluginTab.parentNode.removeChild(pluginTab);
+            QV('p7', true);
+            goPlugin(-1);
+        }
+        
         function hideContextMenu() {
             QV('contextMenu', false);
             QV('meshContextMenu', false);
             QV('termShellContextMenu', false);
+            QV('pluginTabContextMenu', false);
             contextelement = null;
         }
 
@@ -9412,7 +9436,7 @@
             // Fetch the server timeline stats if needed
             if ((x == 40) && (serverTimelineStats == null)) { refreshServerTimelineStats(); }
 
-            if (x == 7) refreshPluginLatest(); else noGoPlugin();
+            if (x == 7) { refreshPluginLatest(); QV('PluginSubMenuSpan', true); goPlugin(-1); } else { noGoPlugin(); }
             
             // Update the web page title
             if ((currentNode) && (x >= 10) && (x < 20)) {
@@ -9543,37 +9567,66 @@
         }
         
         function goPlugin(pname, title) {
-            let xwin = `<div class="pluginTitleBar"><span>${title}</span><span class="pluginCloseBtn"><button onclick="return noGoPlugin(this);">X</button></span></div>`;
+            let holder = Q('PluginSubMenu').querySelectorAll('tr')[0];
+            let loadedPluginsTDs = holder.querySelectorAll('td');
+            var found = false;
+            loadedPluginsTDs.forEach((p) => {
+                p.classList.remove('style3sel');
+                p.classList.add('style3x');
+                var tname = p.getAttribute('x-data-plugin-sname');
+                if (tname != null) { Q('plugin-'+tname).style.display = 'none'; }
+                if (tname == pname) {
+                    // show existing tab / content
+                    p.classList.remove('style3x');
+                    p.classList.add('style3sel');
+                    QS('p7').display = 'none';
+                    Q('plugin-'+tname).style.display = '';
+                    found = true;
+                }
+            });
+            if (pname == -1) { // go gome
+                QV('p7', true);
+                let homeTab = loadedPluginsTDs[0];
+                homeTab.classList.add('style3sel');
+                homeTab.classList.remove('style3x');
+                found = true;
+            }
+            if (found) return;
+            
+            Q('PluginSubMenu').style.display = 'block';
+            let sif = document.createElement('td');
+            sif.setAttribute('x-data-plugin-sname', pname);
+            sif.classList.add('topbar_td');
+            sif.classList.add('style3sel');
+            sif.classList.add('pluginTab');
+            sif.setAttribute('onclick', 'goPlugin("' + pname + '", "' + title + '")');
+            sif.setAttribute('onkeypress', 'if (event.key == "Enter") goPlugin("' + pname + '", "' + title + '")');
+            sif.innerHTML = title;
+            holder.append(sif);
+            
             let dif = document.createElement('div');
-            let cdif = document.createElement('div');
+            dif.setAttribute('id', 'plugin-'+pname);
-            dif.classList.add('pluginOverlay');
+            dif.classList.add('pluginContent');
-            dif.innerHTML = xwin;
             let pif = document.createElement('iframe');
             pif.src = '/pluginadmin.ashx?pin='+pname;
             pif.setAttribute('frameBorder', '0');
             pif.style.width = '100%';
             pif.style.height = '100%';
             pif.setAttribute('frameBorder', '0');
-            cdif.classList.add('pluginOverlayContent');
+            dif.append(pif);
-            cdif.append(pif);
+            let x = Q('column_l_bottomgap');
-            dif.append(cdif);
+            x.parentNode.insertBefore(dif, x.previousSibling);
-            let x = Q('p7');
+            QS('p7').display = 'none';
-            x.parentNode.insertBefore(dif, x.nextSibling);
+            
-            Q('p7').classList.add('pluginOverlayBg');
         }
         
         function noGoPlugin(el) {
-            if (el == null) {
+            QV('PluginSubMenuSpan', false);
-                var boxes = document.querySelectorAll('.pluginOverlay');
+            let loadedPluginsTDs =  Q('PluginSubMenu').querySelectorAll('td');
-                for (const b in Object.values(boxes)) {
+            loadedPluginsTDs.forEach((p) => {
-                    boxes[b].parentNode.removeChild(boxes[b]);
+                var tname = p.getAttribute('x-data-plugin-sname');
-                }
+                if (tname != null) Q('plugin-'+tname).style.display = 'none';
-                Q('p7').classList.remove('pluginOverlayBg');
+            });
-                return;
-            }
-            var box = document.querySelector('.pluginOverlay').closest(".pluginOverlay");
-            box.parentNode.removeChild(box);
-            Q('p7').classList.remove('pluginOverlayBg');
         }
         
         // Generic methods

webserver.js

@@ -3194,7 +3194,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
         if (domain == null) { res.sendStatus(404); return; }
         if ((!req.session) || (req.session == null) || (!req.session.userid)) { res.sendStatus(401); return; }
         var user = obj.users[req.session.userid];
-        if ((user == null) || ((user.siteadmin & 0xFFFFFFFF) == 0)) { res.sendStatus(401); return; }
+        if (user == null) { res.sendStatus(401); return; }
         
         parent.pluginHandler.handleAdminReq(req, res, user, obj);
     }
@@ -3204,7 +3204,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
         if (domain == null) { res.sendStatus(404); return; }
         if ((!req.session) || (req.session == null) || (!req.session.userid)) { res.sendStatus(401); return; }
         var user = obj.users[req.session.userid];
-        if ((user == null) || ((user.siteadmin & 0xFFFFFFFF) == 0)) { res.sendStatus(401); return; }
+        if (user == null) { res.sendStatus(401); return; }
         
         parent.pluginHandler.handleAdminPostReq(req, res, user, obj);
     }