Improved webapp group collapsing feature.

Ylian Saint-Hilaire committed Dec 24, 2019 at 11:49 UTC 5dda176e075b8a35572162550da29f9843d925bc
2 files changed +28 -10
package.json
+1 -1
@@ -1,6 +1,6 @@
1 {
2 "name": "meshcentral",
3 - "version": "0.4.6-n",
3 + "version": "0.4.6-o",
4 "keywords": [
5 "Remote Management",
6 "Intel AMT",
views/default.handlebars
+27 -9
@@ -1119,6 +1119,8 @@
1119 if (pluginHandlerBuilder != null) { pluginHandler = new pluginHandlerBuilder(); }
1120 var installedPluginList = null;
1121 var goBackStack = [];
1122 + var CollapsedGroups = {};
1123 + try { CollapsedGroups = JSON.parse(getstore('_collapse', '{}')); } catch(ex) {}
1124
1125 // Console Message Display Timers
1126 var p11DeskConsoleMsgTimer = null;
@@ -2785,7 +2787,7 @@
2787 if (sort == 0) {
2788 // Mesh header
2789 if (node.meshid != current) {
2788 - if ((view == 1) && (current != null)) { r += '</div>'; } // Close collapse div
2790 + if (((view == 1) || (view == 3)) && (current != null)) { r += '</div>'; } // Close collapse div
2791 deviceHeaderSet();
2792 var extra = '';
2793 if (view == 2) { r += '<tr><td colspan=5>'; }
@@ -2795,27 +2797,36 @@
2797 r += '<div class=DevSt style=width:100%;padding-top:4px><span style=float:right>';
2798 r += '<span id=DevxHeader' + deviceHeaderId + ' class=devHeaderx></span>' + extra;
2799 r += '</span>';
2798 - var collapsed = CollapsedGroups[node.meshid];
2799 - 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
2800 + if ((view == 1) || (view == 3)) {
2801 + var collapsed = CollapsedGroups[node.meshid];
2802 + 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
2803 + }
2804 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>';
2805 if (view == 2) { r += '</div>'; }
2806 current = node.meshid;
2807 displayedMeshes[current] = 1;
2808 c = 0;
2805 - if (view == 1) { r += '<div id=DevxCol' + deviceHeaderId + ((collapsed === true)?' style=display:none':'') + '>'; } // Open collapse div
2809 + if ((view == 1) || (view == 3)) { r += '<div id=DevxCol' + deviceHeaderId + ((collapsed === true)?' style=display:none':'') + '>'; } // Open collapse div
2810 }
2811 } else if (sort == 1) {
2812 // Power header
2813 var pwr = node.pwr?node.pwr:0;
2814 if (pwr !== current) {
2815 + if (((view == 1) || (view == 3)) && (current != null)) { r += '</div>'; } // Close collapse div
2816 deviceHeaderSet();
2817 if ((view == 1) && (current !== null)) { if (c == 2) { r += '<td><div style=width:301px></div></td>'; } if (r != '') { r += '</tr></table>'; } }
2818
2819 if (view == 2) { r += '<tr><td>'; }
2815 - 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>';
2820 + r += '<div class=DevSt style=width:100%;padding-top:4px><span id=DevxHeader' + deviceHeaderId + ' class=devHeaderx style=float:right></span>';
2821 + if ((view == 1) || (view == 3)) {
2822 + var collapsed = CollapsedGroups['pwr:' + pwr];
2823 + 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
2824 + }
2825 + r += '<span>' + PowerStateStr2(node.pwr) + '</span></div>';
2826
2827 current = pwr;
2828 c = 0;
2829 + if ((view == 1) || (view == 3)) { r += '<div id=DevxCol' + deviceHeaderId + ((collapsed === true)?' style=display:none':'') + '>'; } // Open collapse div
2830 }
2831 } else if (sort == 2) {
2832 // Device header
@@ -2865,7 +2876,7 @@
2876 }
2877 }
2878
2868 - // If we are displaying devices by group, put the device in the right group.
2879 + // If we are displaying devices by tags, put the device in the right tag group.
2880 if ((sort == 3) && (r != '')) {
2881 if (node.tags) {
2882 for (var j in node.tags) {
@@ -2889,7 +2900,7 @@
2900
2901 // If displaying devices by groups, sort the group names and display the devices.
2902 if (sort == 3) {
2892 - var groupNames = [];
2903 + var groupNames = [], tagDeviceHeaderId = 0;
2904 for (var i in groups) { groupNames.push(i); }
2905 groupNames.sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); });
2906 for (var j in groupNames) {
@@ -2897,7 +2908,14 @@
2908 if (view == 2) {
2909 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];
2910 } else {
2900 - 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];
2911 + r += '<div class=DevSt style=width:100%;padding-top:4px><span class=devHeaderx style=float:right>' + groupCount[i] + ' node' + ((groupCount[i] > 1) ? 's' : '') + '</span>';
2912 + var collapsed = CollapsedGroups['tag:' + i];
2913 + 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
2914 + r += '<span>' + i + '</span></div>';
2915 + r += '<div id=DevxCol' + tagDeviceHeaderId + ((collapsed === true)?' style=display:none':'') + '>'; // Open collapse div
2916 + r += groups[i];
2917 + r += '</div>';
2918 + tagDeviceHeaderId++;
2919 }
2920 }
2921 }
@@ -3055,12 +3073,12 @@
3073 oldviewmode = view;
3074 }
3075
3058 - var CollapsedGroups = {};
3076 function toggleCollapseGroup(id, id2) {
3077 var x = (QS('DevxCol' + id)['display'] == 'none');
3078 if (x) { delete CollapsedGroups[id2]; } else { CollapsedGroups[id2] = true; }
3079 Q('DevxColImg' + id).src = x?'images/c2.png':'images/c1.png';
3080 QV('DevxCol' + id, x);
3081 + putstore('_collapse', JSON.stringify(CollapsedGroups));
3082 }
3083
3084 function toggleKvmDevice(node) {