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

This commit is contained in:
Ryan Blenis 2019-11-07 22:48:14 -05:00
parent f90fe05fe0
commit 0cb0f0adf3
4 changed files with 86 additions and 88 deletions

View File

@ -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');

View File

@ -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 {
width: 95%; /* Full width (cover the whole page) */
height: 95%; /* Full height (cover the whole page) */
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);
.pluginContent {
width: 100%;
height: 100%;
}
.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;
}

View File

@ -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.classList.add('pluginOverlay');
dif.innerHTML = xwin;
dif.setAttribute('id', 'plugin-'+pname);
dif.classList.add('pluginContent');
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');
cdif.append(pif);
dif.append(cdif);
let x = Q('p7');
x.parentNode.insertBefore(dif, x.nextSibling);
Q('p7').classList.add('pluginOverlayBg');
dif.append(pif);
let x = Q('column_l_bottomgap');
x.parentNode.insertBefore(dif, x.previousSibling);
QS('p7').display = 'none';
}
function noGoPlugin(el) {
if (el == null) {
var boxes = document.querySelectorAll('.pluginOverlay');
for (const b in Object.values(boxes)) {
boxes[b].parentNode.removeChild(boxes[b]);
}
Q('p7').classList.remove('pluginOverlayBg');
return;
}
var box = document.querySelector('.pluginOverlay').closest(".pluginOverlay");
box.parentNode.removeChild(box);
Q('p7').classList.remove('pluginOverlayBg');
QV('PluginSubMenuSpan', false);
let loadedPluginsTDs = Q('PluginSubMenu').querySelectorAll('td');
loadedPluginsTDs.forEach((p) => {
var tname = p.getAttribute('x-data-plugin-sname');
if (tname != null) Q('plugin-'+tname).style.display = 'none';
});
}
// Generic methods

View File

@ -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);
}