Improved webapp group collapsing feature.

This commit is contained in:
Ylian Saint-Hilaire 2019-12-24 11:49:36 -08:00
parent 4dee9ea640
commit ca39635bcd
2 changed files with 28 additions and 10 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "meshcentral", "name": "meshcentral",
"version": "0.4.6-n", "version": "0.4.6-o",
"keywords": [ "keywords": [
"Remote Management", "Remote Management",
"Intel AMT", "Intel AMT",

View File

@ -1119,6 +1119,8 @@
if (pluginHandlerBuilder != null) { pluginHandler = new pluginHandlerBuilder(); } if (pluginHandlerBuilder != null) { pluginHandler = new pluginHandlerBuilder(); }
var installedPluginList = null; var installedPluginList = null;
var goBackStack = []; var goBackStack = [];
var CollapsedGroups = {};
try { CollapsedGroups = JSON.parse(getstore('_collapse', '{}')); } catch(ex) {}
// Console Message Display Timers // Console Message Display Timers
var p11DeskConsoleMsgTimer = null; var p11DeskConsoleMsgTimer = null;
@ -2785,7 +2787,7 @@
if (sort == 0) { if (sort == 0) {
// Mesh header // Mesh header
if (node.meshid != current) { if (node.meshid != current) {
if ((view == 1) && (current != null)) { r += '</div>'; } // Close collapse div if (((view == 1) || (view == 3)) && (current != null)) { r += '</div>'; } // Close collapse div
deviceHeaderSet(); deviceHeaderSet();
var extra = ''; var extra = '';
if (view == 2) { r += '<tr><td colspan=5>'; } if (view == 2) { r += '<tr><td colspan=5>'; }
@ -2795,27 +2797,36 @@
r += '<div class=DevSt style=width:100%;padding-top:4px><span style=float:right>'; r += '<div class=DevSt style=width:100%;padding-top:4px><span style=float:right>';
r += '<span id=DevxHeader' + deviceHeaderId + ' class=devHeaderx></span>' + extra; r += '<span id=DevxHeader' + deviceHeaderId + ' class=devHeaderx></span>' + extra;
r += '</span>'; r += '</span>';
var collapsed = CollapsedGroups[node.meshid]; if ((view == 1) || (view == 3)) {
r += '<img id=\"DevxColImg' + deviceHeaderId + '\" src=images/c' + ((collapsed === true)?'1':'2') + '.png height=8 width=8 style=margin-left:2px;margin-right:2px;cursor:pointer onclick=toggleCollapseGroup(\"' + deviceHeaderId + '\",\"' + node.meshid + '\")></img>'; // Collapse action var collapsed = CollapsedGroups[node.meshid];
r += '<img id=\"DevxColImg' + deviceHeaderId + '\" src=images/c' + ((collapsed === true)?'1':'2') + '.png height=8 width=8 style=margin-left:2px;margin-right:2px;cursor:pointer onclick=toggleCollapseGroup(\"' + deviceHeaderId + '\",\"' + node.meshid + '\")></img>'; // Collapse action
}
r += '<span id=MxMESH tabindex=0 style=cursor:pointer onclick=gotoMesh("' + node.meshid + '") onkeypress="if (event.key==\'Enter\') gotoMesh(\'' + node.meshid + '\')">' + EscapeHtml(meshes[node.meshid].name) + '</span>' + getMeshActions(mesh2, meshrights) + '</div>'; r += '<span id=MxMESH tabindex=0 style=cursor:pointer onclick=gotoMesh("' + node.meshid + '") onkeypress="if (event.key==\'Enter\') gotoMesh(\'' + node.meshid + '\')">' + EscapeHtml(meshes[node.meshid].name) + '</span>' + getMeshActions(mesh2, meshrights) + '</div>';
if (view == 2) { r += '</div>'; } if (view == 2) { r += '</div>'; }
current = node.meshid; current = node.meshid;
displayedMeshes[current] = 1; displayedMeshes[current] = 1;
c = 0; c = 0;
if (view == 1) { r += '<div id=DevxCol' + deviceHeaderId + ((collapsed === true)?' style=display:none':'') + '>'; } // Open collapse div if ((view == 1) || (view == 3)) { r += '<div id=DevxCol' + deviceHeaderId + ((collapsed === true)?' style=display:none':'') + '>'; } // Open collapse div
} }
} else if (sort == 1) { } else if (sort == 1) {
// Power header // Power header
var pwr = node.pwr?node.pwr:0; var pwr = node.pwr?node.pwr:0;
if (pwr !== current) { if (pwr !== current) {
if (((view == 1) || (view == 3)) && (current != null)) { r += '</div>'; } // Close collapse div
deviceHeaderSet(); deviceHeaderSet();
if ((view == 1) && (current !== null)) { if (c == 2) { r += '<td><div style=width:301px></div></td>'; } if (r != '') { r += '</tr></table>'; } } if ((view == 1) && (current !== null)) { if (c == 2) { r += '<td><div style=width:301px></div></td>'; } if (r != '') { r += '</tr></table>'; } }
if (view == 2) { r += '<tr><td>'; } if (view == 2) { r += '<tr><td>'; }
r += '<div class=DevSt style=width:100%;padding-top:4px><span id=DevxHeader' + deviceHeaderId + ' class=devHeaderx style=float:right></span><span>' + PowerStateStr2(node.pwr) + '</span></div>'; r += '<div class=DevSt style=width:100%;padding-top:4px><span id=DevxHeader' + deviceHeaderId + ' class=devHeaderx style=float:right></span>';
if ((view == 1) || (view == 3)) {
var collapsed = CollapsedGroups['pwr:' + pwr];
r += '<img id=\"DevxColImg' + deviceHeaderId + '\" src=images/c' + ((collapsed === true)?'1':'2') + '.png height=8 width=8 style=margin-left:2px;margin-right:2px;cursor:pointer onclick=toggleCollapseGroup(\"' + deviceHeaderId + '\",\"pwr:' + pwr + '\")></img>'; // Collapse action
}
r += '<span>' + PowerStateStr2(node.pwr) + '</span></div>';
current = pwr; current = pwr;
c = 0; c = 0;
if ((view == 1) || (view == 3)) { r += '<div id=DevxCol' + deviceHeaderId + ((collapsed === true)?' style=display:none':'') + '>'; } // Open collapse div
} }
} else if (sort == 2) { } else if (sort == 2) {
// Device header // Device header
@ -2865,7 +2876,7 @@
} }
} }
// If we are displaying devices by group, put the device in the right group. // If we are displaying devices by tags, put the device in the right tag group.
if ((sort == 3) && (r != '')) { if ((sort == 3) && (r != '')) {
if (node.tags) { if (node.tags) {
for (var j in node.tags) { for (var j in node.tags) {
@ -2889,7 +2900,7 @@
// If displaying devices by groups, sort the group names and display the devices. // If displaying devices by groups, sort the group names and display the devices.
if (sort == 3) { if (sort == 3) {
var groupNames = []; var groupNames = [], tagDeviceHeaderId = 0;
for (var i in groups) { groupNames.push(i); } for (var i in groups) { groupNames.push(i); }
groupNames.sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); }); groupNames.sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); });
for (var j in groupNames) { for (var j in groupNames) {
@ -2897,7 +2908,14 @@
if (view == 2) { if (view == 2) {
r += '<tr><td colspan=4><div class=DevSt style=width:100%;padding-top:4px><span class=devHeaderx style=float:right>' + groupCount[i] + ' node' + ((groupCount[i] > 1) ? 's' : '') + '</span><span>' + i + '</span></div>' + groups[i]; r += '<tr><td colspan=4><div class=DevSt style=width:100%;padding-top:4px><span class=devHeaderx style=float:right>' + groupCount[i] + ' node' + ((groupCount[i] > 1) ? 's' : '') + '</span><span>' + i + '</span></div>' + groups[i];
} else { } else {
r += '<div class=DevSt style=width:100%;padding-top:4px><span class=devHeaderx style=float:right>' + groupCount[i] + ' node' + ((groupCount[i] > 1) ? 's' : '') + '</span><span>' + i + '</span></div>' + groups[i]; r += '<div class=DevSt style=width:100%;padding-top:4px><span class=devHeaderx style=float:right>' + groupCount[i] + ' node' + ((groupCount[i] > 1) ? 's' : '') + '</span>';
var collapsed = CollapsedGroups['tag:' + i];
r += '<img id=\"DevxColImg' + tagDeviceHeaderId + '\" src=images/c' + ((collapsed === true)?'1':'2') + '.png height=8 width=8 style=margin-left:2px;margin-right:2px;cursor:pointer onclick=toggleCollapseGroup(\"' + tagDeviceHeaderId + '\",\"tag:' + i + '\")></img>'; // Collapse action
r += '<span>' + i + '</span></div>';
r += '<div id=DevxCol' + tagDeviceHeaderId + ((collapsed === true)?' style=display:none':'') + '>'; // Open collapse div
r += groups[i];
r += '</div>';
tagDeviceHeaderId++;
} }
} }
} }
@ -3055,12 +3073,12 @@
oldviewmode = view; oldviewmode = view;
} }
var CollapsedGroups = {};
function toggleCollapseGroup(id, id2) { function toggleCollapseGroup(id, id2) {
var x = (QS('DevxCol' + id)['display'] == 'none'); var x = (QS('DevxCol' + id)['display'] == 'none');
if (x) { delete CollapsedGroups[id2]; } else { CollapsedGroups[id2] = true; } if (x) { delete CollapsedGroups[id2]; } else { CollapsedGroups[id2] = true; }
Q('DevxColImg' + id).src = x?'images/c2.png':'images/c1.png'; Q('DevxColImg' + id).src = x?'images/c2.png':'images/c1.png';
QV('DevxCol' + id, x); QV('DevxCol' + id, x);
putstore('_collapse', JSON.stringify(CollapsedGroups));
} }
function toggleKvmDevice(node) { function toggleKvmDevice(node) {