Refactor plugin admin views to a more simplistic, reusable, multiple view approach
Ryan Blenis committed
Nov 7, 2019 at 22:48 UTC
0cb0f0adf3139fa4411c80541a8a216c82c23f98
4 files changed
+86
-88
pluginHandler.js
-16
@@ -199,22 +199,6 @@ module.exports.pluginHandler = function (parent) {
199
return isValid;
200
};
201
202
- obj.getPlugins = function(func) {
203
- var plugins = parent.db.getPlugins();
204
- if (typeof plugins == 'undefined' || plugins.length == 0) {
205
- return null;
206
- }
207
-
208
- plugins.forEach(function(p, x){
209
- // check semantic version
210
- console.log('FOREACH PLUGIN', p, x);
211
- // callbacks to new versions
212
-
213
- });
214
-
215
- return plugins;
216
- }
217
-
202
obj.getPluginConfig = function(configUrl) {
203
return new Promise(function(resolve, reject) {
204
var https = require('https');
public/styles/style.css
+8
-47
@@ -233,7 +233,7 @@ body {
233
}
234
235
/* #UserDummyMenuSpan, */
236
-#MainSubMenuSpan, #MeshSubMenuSpan, #UserSubMenuSpan, #ServerSubMenuSpan, #MainMenuSpan, #MainSubMenu, #MeshSubMenu, #UserSubMenu, #ServerSubMenu, #UserDummyMenu {
236
+#MainSubMenuSpan, #MeshSubMenuSpan, #UserSubMenuSpan, #ServerSubMenuSpan, #MainMenuSpan, #MainSubMenu, #MeshSubMenu, #UserSubMenu, #ServerSubMenu, #UserDummyMenu, #PluginSubMenu {
237
width: 100%;
238
height: 24px;
239
color: white;
@@ -244,6 +244,10 @@ body {
244
display: none;
245
}
246
247
+.menu_stack #PluginSubMenu {
248
+ display: none;
249
+}
250
+
251
#MainMenuSpan {
252
display: table;
253
}
@@ -2629,50 +2633,7 @@ a {
2633
margin: 50px auto;
2634
}
2635
2632
-.pluginOverlayBg {
2633
- width: 95%; /* Full width (cover the whole page) */
2634
- height: 95%; /* Full height (cover the whole page) */
2635
- margin: 10px;
2636
- background-color: rgba(0,0,0,0.8); /* Black background with opacity */
2637
- z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
2638
- position: absolute;
2639
- cursor: pointer; /* Add a pointer on hover */
2640
- filter:blur(4px);
2641
- -o-filter:blur(4px);
2642
- -ms-filter:blur(4px);
2643
- -moz-filter:blur(4px);
2644
- -webkit-filter:blur(4px);
2645
-}
2646
-
2647
-.pluginOverlay {
2648
- width: 95%; /* Full width (cover the whole page) */
2649
- height: 95%; /* Full height (cover the whole page) */
2650
- margin: 10px;
2651
- background-color: #FFFFFF; /* Black background with opacity */
2652
- z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
2653
- position: absolute;
2654
- cursor: pointer; /* Add a pointer on hover */
2655
-}
2656
-.pluginOverlayContent {
2657
- width: 100%; /* Full width (cover the whole page) */
2658
- height: 100%; /* Full height (cover the whole page) */
2659
- background-color: #FFFFFF; /* Black background with opacity */
2660
- z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
2661
- position: relative;
2662
-}
2663
-
2664
-.pluginTitleBar {
2665
- padding: 4px;
2666
- height: 25px;
2667
- border-bottom: double;
2668
- font-size: 20px;
2636
+.pluginContent {
2637
+ width: 100%;
2638
+ height: 100%;
2639
}
2670
-
2671
-.pluginCloseBtn {
2672
- border: none;
2673
- outline: none;
2674
- cursor: pointer;
2675
- float: right;
2676
- position: relative;
2677
- padding: 0;
2678
-}
\ No newline at end of file
views/default.handlebars
+76
-23
@@ -57,6 +57,9 @@
57
<div id="cxtermnorm" class="cmtext" onclick="cmtermaction(1,event)">Normal Connect</div>
58
<div id="cxtermps" class="cmtext" onclick="cmtermaction(2,event)">PowerShell Connect</div>
59
</div>
60
+ <div id="pluginTabContextMenu" class="contextMenu noselect" style="display:none;min-width:0px">
61
+ <div id="cxclose" class="cmtext" onclick="pluginTabClose(event)">Close Tab</div>
62
+ </div>
63
<!-- main page -->
64
<div id=container>
65
<div id="notifiyBox" class="notifiyBox" style="display:none"></div>
@@ -160,6 +163,11 @@
163
</tr>
164
</table>
165
</div>
166
+ <div id=PluginSubMenuSpan>
167
+ <table id=PluginSubMenu cellpadding=0 cellspacing=0 class=style1>
168
+ <tr><td onclick="goPlugin(-1)" onkeypress="if (event.key == 'Enter') goPlugin(-1)" class="topbar_td style3x">Home</td></tr>
169
+ </table>
170
+ </div>
171
<div id=UserDummyMenuSpan>
172
<table id=UserDummyMenu cellpadding=0 cellspacing=0 class=style1>
173
<tr><td class=style3 style=""> </td></tr>
@@ -2300,7 +2308,6 @@
2308
break;
2309
}
2310
case 'updatePluginList': {
2303
- // @Ylianst - Do we need a rights check here?
2311
installedPluginList = message.event.list;
2312
updatePluginList();
2313
break;
@@ -3519,6 +3526,12 @@
3526
contextmenudiv.style.left = event.pageX + 'px';
3527
contextmenudiv.style.top = event.pageY + 'px';
3528
contextmenudiv.style.display = 'block';
3529
+ } else if (elem && elem != null && elem.classList.contains('pluginTab')) {
3530
+ contextelement = elem;
3531
+ var contextmenudiv = document.getElementById('pluginTabContextMenu');
3532
+ contextmenudiv.style.left = event.pageX + 'px';
3533
+ contextmenudiv.style.top = event.pageY + 'px';
3534
+ contextmenudiv.style.display = 'block';
3535
} else {
3536
while (elem && elem != null && elem.id != 'devs') { elem = elem.parentElement; }
3537
if (!elem || elem == null) return true;
@@ -3590,10 +3603,21 @@
3603
connectTerminal(null, 1, { powershell: (action == 2) });
3604
}
3605
3606
+ function pluginTabClose() {
3607
+ var pluginTab = contextelement;
3608
+ var pname = pluginTab.getAttribute('x-data-plugin-sname');
3609
+ var pdiv = Q('plugin-'+pname);
3610
+ pdiv.parentNode.removeChild(pdiv);
3611
+ pluginTab.parentNode.removeChild(pluginTab);
3612
+ QV('p7', true);
3613
+ goPlugin(-1);
3614
+ }
3615
+
3616
function hideContextMenu() {
3617
QV('contextMenu', false);
3618
QV('meshContextMenu', false);
3619
QV('termShellContextMenu', false);
3620
+ QV('pluginTabContextMenu', false);
3621
contextelement = null;
3622
}
3623
@@ -9412,7 +9436,7 @@
9436
// Fetch the server timeline stats if needed
9437
if ((x == 40) && (serverTimelineStats == null)) { refreshServerTimelineStats(); }
9438
9415
- if (x == 7) refreshPluginLatest(); else noGoPlugin();
9439
+ if (x == 7) { refreshPluginLatest(); QV('PluginSubMenuSpan', true); goPlugin(-1); } else { noGoPlugin(); }
9440
9441
// Update the web page title
9442
if ((currentNode) && (x >= 10) && (x < 20)) {
@@ -9543,37 +9567,66 @@
9567
}
9568
9569
function goPlugin(pname, title) {
9546
- let xwin = `<div class="pluginTitleBar"><span>${title}</span><span class="pluginCloseBtn"><button onclick="return noGoPlugin(this);">X</button></span></div>`;
9570
+ let holder = Q('PluginSubMenu').querySelectorAll('tr')[0];
9571
+ let loadedPluginsTDs = holder.querySelectorAll('td');
9572
+ var found = false;
9573
+ loadedPluginsTDs.forEach((p) => {
9574
+ p.classList.remove('style3sel');
9575
+ p.classList.add('style3x');
9576
+ var tname = p.getAttribute('x-data-plugin-sname');
9577
+ if (tname != null) { Q('plugin-'+tname).style.display = 'none'; }
9578
+ if (tname == pname) {
9579
+ // show existing tab / content
9580
+ p.classList.remove('style3x');
9581
+ p.classList.add('style3sel');
9582
+ QS('p7').display = 'none';
9583
+ Q('plugin-'+tname).style.display = '';
9584
+ found = true;
9585
+ }
9586
+ });
9587
+ if (pname == -1) { // go gome
9588
+ QV('p7', true);
9589
+ let homeTab = loadedPluginsTDs[0];
9590
+ homeTab.classList.add('style3sel');
9591
+ homeTab.classList.remove('style3x');
9592
+ found = true;
9593
+ }
9594
+ if (found) return;
9595
+
9596
+ Q('PluginSubMenu').style.display = 'block';
9597
+ let sif = document.createElement('td');
9598
+ sif.setAttribute('x-data-plugin-sname', pname);
9599
+ sif.classList.add('topbar_td');
9600
+ sif.classList.add('style3sel');
9601
+ sif.classList.add('pluginTab');
9602
+ sif.setAttribute('onclick', 'goPlugin("' + pname + '", "' + title + '")');
9603
+ sif.setAttribute('onkeypress', 'if (event.key == "Enter") goPlugin("' + pname + '", "' + title + '")');
9604
+ sif.innerHTML = title;
9605
+ holder.append(sif);
9606
+
9607
let dif = document.createElement('div');
9548
- let cdif = document.createElement('div');
9549
- dif.classList.add('pluginOverlay');
9550
- dif.innerHTML = xwin;
9608
+ dif.setAttribute('id', 'plugin-'+pname);
9609
+ dif.classList.add('pluginContent');
9610
let pif = document.createElement('iframe');
9611
pif.src = '/pluginadmin.ashx?pin='+pname;
9612
pif.setAttribute('frameBorder', '0');
9613
pif.style.width = '100%';
9614
pif.style.height = '100%';
9615
pif.setAttribute('frameBorder', '0');
9557
- cdif.classList.add('pluginOverlayContent');
9558
- cdif.append(pif);
9559
- dif.append(cdif);
9560
- let x = Q('p7');
9561
- x.parentNode.insertBefore(dif, x.nextSibling);
9562
- Q('p7').classList.add('pluginOverlayBg');
9616
+ dif.append(pif);
9617
+ let x = Q('column_l_bottomgap');
9618
+ x.parentNode.insertBefore(dif, x.previousSibling);
9619
+ QS('p7').display = 'none';
9620
+
9621
}
9622
9623
function noGoPlugin(el) {
9566
- if (el == null) {
9567
- var boxes = document.querySelectorAll('.pluginOverlay');
9568
- for (const b in Object.values(boxes)) {
9569
- boxes[b].parentNode.removeChild(boxes[b]);
9570
- }
9571
- Q('p7').classList.remove('pluginOverlayBg');
9572
- return;
9573
- }
9574
- var box = document.querySelector('.pluginOverlay').closest(".pluginOverlay");
9575
- box.parentNode.removeChild(box);
9576
- Q('p7').classList.remove('pluginOverlayBg');
9624
+ QV('PluginSubMenuSpan', false);
9625
+ let loadedPluginsTDs = Q('PluginSubMenu').querySelectorAll('td');
9626
+ loadedPluginsTDs.forEach((p) => {
9627
+ var tname = p.getAttribute('x-data-plugin-sname');
9628
+ if (tname != null) Q('plugin-'+tname).style.display = 'none';
9629
+ });
9630
}
9631
9632
// Generic methods
webserver.js
+2
-2
@@ -3194,7 +3194,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
3194
if (domain == null) { res.sendStatus(404); return; }
3195
if ((!req.session) || (req.session == null) || (!req.session.userid)) { res.sendStatus(401); return; }
3196
var user = obj.users[req.session.userid];
3197
- if ((user == null) || ((user.siteadmin & 0xFFFFFFFF) == 0)) { res.sendStatus(401); return; }
3197
+ if (user == null) { res.sendStatus(401); return; }
3198
3199
parent.pluginHandler.handleAdminReq(req, res, user, obj);
3200
}
@@ -3204,7 +3204,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
3204
if (domain == null) { res.sendStatus(404); return; }
3205
if ((!req.session) || (req.session == null) || (!req.session.userid)) { res.sendStatus(401); return; }
3206
var user = obj.users[req.session.userid];
3207
- if ((user == null) || ((user.siteadmin & 0xFFFFFFFF) == 0)) { res.sendStatus(401); return; }
3207
+ if (user == null) { res.sendStatus(401); return; }
3208
3209
parent.pluginHandler.handleAdminPostReq(req, res, user, obj);
3210
}