From 95f88d112578098937e9bf81f07c2ce1a5f4dcd5 Mon Sep 17 00:00:00 2001
From: Ylian Saint-Hilaire <ylian.saint-hilaire@hotmail.com>
Date: Mon, 28 Aug 2017 15:57:25 -0700
Subject: [PATCH] Started work on global map

---
 package.json             |   2 +-
 views/default.handlebars | 247 +++++++++++++++++++++------------------
 2 files changed, 135 insertions(+), 114 deletions(-)

diff --git a/package.json b/package.json
index b3f11c70..85cc0f0e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "meshcentral",
-  "version": "0.0.6-p",
+  "version": "0.0.6-q",
   "keywords": [
     "Remote Management",
     "Intel AMT",
diff --git a/views/default.handlebars b/views/default.handlebars
index 7c27705d..02e0d83e 100644
--- a/views/default.handlebars
+++ b/views/default.handlebars
@@ -102,29 +102,32 @@
                 <div id=p1 style=display:none>
                     <h1>My Devices</h1>
                     <div style=width:100%;height:24px;background-color:#d3d9d6>
-                        <div class=style7 style=width:84px;height:100%;float:left>&nbsp;</div>
                         <div class=h1 style=height:100%;float:left>&nbsp;</div>
-                        <div class=style14 style=height:100%;float:left>
+                        <div id=devListToolbar class=style14 style=height:100%;float:left>
                             &nbsp;&nbsp;<input type="button" id="SelectAllButton" onclick="selectallButtonFunction();" value="Select All" />&nbsp;
                             <input type="button" id="GroupActionButton" disabled="disabled" value="Group Action" onclick="groupActionFunction();" />&nbsp;
                             <input id="SearchInput" type="text" style=width:120px placeholder=Search onchange="onSearchInputChanged()" onkeyup="onSearchInputChanged()" autocomplete=off onfocus="onSearchFocus(1)" onblur="onSearchFocus(0)" />&nbsp;
                             <input type="checkbox" id="HostnameCheckBox" onclick="onHostnameCheckBox()" /><span title="Show device hostnames">Hostname</span>
                         </div>
                         <div class="auto-style1" style="height: 100%; float: right">
-                            <div style="height: 100%; width: 4px; float: right; background-color: #ffffff"></div>
-                            <div class="h2" style="height: 100%; float: right;">&nbsp;</div>
-                            <div style="float: right">
+                            <div style="height:100%;width:4px;float:right;background-color:#ffffff"></div>
+                            <div class=h2 style="height:100%;float:right">&nbsp;</div>
+                            <div style=float:right>
+                                View
+                                <select id=viewselect onchange=onDeviceViewChange()>
+                                    <option value=1>3 wide</option>
+                                    <option value=2>List</option>
+                                    <option value=3>Map</option>
+                                </select>
+                            </div>
+                            <div style=float:right id=devListToolbarSort>
                                 Sort
                                 <select id=sortselect onchange=onSortSelectChange()>
                                     <option>Mesh</option>
                                     <option>Power</option>
                                     <option>Device</option>
                                 </select>
-                                &nbsp;View
-                                <select id=viewselect onchange=onDeviceViewChange()>
-                                    <option value=1>3 wide</option>
-                                    <option value=2>List</option>
-                                </select>
+                                &nbsp;
                             </div>
                         </div>
                     </div>
@@ -142,6 +145,7 @@
                         <p></p>
                     </div>
                     <div id="xdevices" style="max-height:calc(100vh - 228px);overflow-y:auto;-webkit-overflow-scrolling:touch"></div>
+                    <div id="xdevicesmap" style="height:500px;width:100%;overflow:hidden"></div>
                 </div>
                 <div id=p2 style=display:none>
                     <h1>My Account</h1>
@@ -596,6 +600,7 @@
         var features = {{{features}}};
         var serverPublicNamePort = "{{{serverDnsName}}}:{{{serverPublicPort}}}";
         var amtScanResults = null;
+        var xxmap = null;
 
         function startup() {
             // Guard against other site's top frames (web bugs).
@@ -657,6 +662,13 @@
             var x = '';
             for (var c = 1; c < 27; c++) x += "<option value='" + c + "'>Ctrl-" + String.fromCharCode(64 + c) + " (" + c + ")</option>";
             QH('specialkeylist', x);
+
+            // Setup the map
+            xxmap = new ol.Map({
+                target: 'xdevicesmap',
+                layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ],
+                view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 1.8, minZoom: 1.8 })
+            });
         }
 
         function getNodeFromId(id) {
@@ -1134,119 +1146,128 @@
         var deviceHeaderId = 0;
         var deviceHeaderCount;
         var deviceHeaders = {};
-
         function updateDevices() {
             var r = "", c = 0, current = null, count = 0, displayedMeshes = {}, view = Q('viewselect').value;
-            deviceHeaderId = 0;
-            deviceHeaderCount = {};
-            deviceHeaderTotal = 0;
-            deviceHeaders = {};
-            deviceHeadersTitles = {};
+            QV('xdevices', view < 3);
+            QV('xdevicesmap', view == 3);
+            QV('devListToolbar', view < 3);
+            QV('devListToolbarSort', view < 3);
+            if (view == 3) {
+                setTimeout( function() { xxmap.updateSize();}, 200);
+                // TODO
+            } else {
+                // 3 wide or list view
+                deviceHeaderId = 0;
+                deviceHeaderCount = {};
+                deviceHeaderTotal = 0;
+                deviceHeaders = {};
+                deviceHeadersTitles = {};
 
-            // Save the list of currently checked nodeid's
-            var checkedNodeids = [], elements = document.getElementsByClassName("DeviceCheckbox"), checkcount = 0;
-            for (var i in elements) { if (elements[i].checked) { checkedNodeids.push(elements[i].value); } }
+                // Save the list of currently checked nodeid's
+                var checkedNodeids = [], elements = document.getElementsByClassName("DeviceCheckbox"), checkcount = 0;
+                for (var i in elements) { if (elements[i].checked) { checkedNodeids.push(elements[i].value); } }
 
-            // Go thru the list of nodes and display them
-            for (var i in nodes) {
-                if (nodes[i].v == false) continue;
-                var mesh2 = meshes[nodes[i].meshid], meshlinks = mesh2.links['user/{{{domain}}}/' + userinfo.name.toLowerCase()];
-                if (meshlinks == undefined) continue;
-                if (sort == 0) {
-                    // Mesh header
-                    if (nodes[i].meshid != current) {
-                        deviceHeaderSet();
-                        var extra = '';
-                        if (meshes[nodes[i].meshid].mtype == 1) { extra = '<span class=devHeaderx>, Intel&reg; AMT only</span>'; }
-                        var meshrights = meshlinks.rights;
-                        if ((view == 1) && (current != null)) { if (c == 2) { r += '<td><div style=width:301px></div></td>'; } r += '</tr></table>'; }
-                        r += '<table style=width:100%;padding-top:4px cellpadding=0 cellspacing=0><tr><td colspan=3 class=DevSt><span style=float:right>';
-                        r += getMeshActions(mesh2, meshrights);
-                        r += '</span><span id=MxMESH style=cursor:pointer onclick=gotoMesh("' + nodes[i].meshid + '")>' + EscapeHtml(meshes[nodes[i].meshid].name) + '</span>' + extra + '<span id=DevxHeader' + deviceHeaderId + ' class=devHeaderx></span></td></tr><tr>';
-                        current = nodes[i].meshid;
-                        displayedMeshes[current] = 1;
-                        c = 0;
-                    }
-                } else if (sort == 1) {
-                    // Power header
-                    if (nodes[i].pwr !== current) {
-                        deviceHeaderSet();
-                        if ((view == 1) && (current !== null)) { if (c == 2) { r += '<td><div style=width:301px></div></td>'; } r += '</tr></table>'; }
-                        r += '<table style=width:100%;padding-top:4px cellpadding=0 cellspacing=0><tr><td colspan=3 class=DevSt><span>' + PowerStateStr2(nodes[i].pwr) + '</span><span id=DevxHeader' + deviceHeaderId + ' class="devHeaderx"></span></td></tr><tr>';
-                        current = nodes[i].pwr;
-                        c = 0;
-                    }
-                } else if (sort == 2) {
-                    // Device header
-                    if (current == null) { r += '<table style=width:100%;padding-top:4px cellpadding=0 cellspacing=0><tr>'; current = '1'; }
-                }
-
-                // Node positioning
-                if ((view == 1) && (c > 2)) { r += '</tr><tr>'; c = 0; }
-                c++;
-                count++;
-
-                var title = EscapeHtml(nodes[i].name);
-                if (title.length == 0) { title = '<i>None</i>'; }
-                if ((nodes[i].host != undefined) && (nodes[i].host.length > 0)) { title += " / " + EscapeHtml(nodes[i].host); }
-                var name = EscapeHtml(nodes[i].name);
-                if (showHostnames == true && nodes[i].host != undefined) name = EscapeHtml(nodes[i].host);
-                if (name.length == 0) { name = '<i>None</i>'; }
-
-                // Node
-                var icon = nodes[i].icon;
-                var nodestate = NodeStateStr(nodes[i]);
-                if ((!nodes[i].conn) || (nodes[i].conn == 0)) { icon += ' gray'; }
-                if (view == 1) {
-                    r += '<td><div id=devs style=width:301px;height:50px;padding-top:1px;padding-bottom:1px><div style=width:22px;height:50%;float:left;padding-top:12px><input class="' + nodes[i].meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + nodes[i]._id + ' type=checkbox></div><div style=height:100%;cursor:pointer onclick=gotoDevice(\'' + nodes[i]._id + '\')><div class="i' + icon + '" style=width:50px;float:left></div><div style=height:100%><div class=g1></div><div class=e2><div class=e1 title="' + title + '">' + name + '</div><div>' + nodestate + '</div></div><div class=g2></div></div></div></div></td>';
-                } else {
-                    r += '<td><div id=devs style=width:924px;height:20px;padding-top:1px;padding-bottom:1px><div style=width:22px;height:50%;float:left;padding-top:2px><input class="' + nodes[i].meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + nodes[i]._id + ' type=checkbox></div><div style=height:100%;cursor:pointer onclick=gotoDevice(\'' + nodes[i]._id + '\')><div class="j' + icon + '" style=width:16px;float:left;margin-top:3px></div><div style=height:100%><div class=g1></div><div class=e2 style=width:858px><div style=float:right;margin-top:1px>' + nodestate + '</div><div style=margin-top:1px title="' + title + '">' + name + '</div></div><div class=g2></div></div></div></div></td></tr><tr>';
-                }
-                deviceHeaderTotal++;
-                if (typeof deviceHeaderCount[nodes[i].state] == 'undefined') { deviceHeaderCount[nodes[i].state] = 1; } else { deviceHeaderCount[nodes[i].state]++; }
-            }
-
-            if ((view == 1) && (c == 2)) r += '<td><div style=width:301px></div></td>'; // Adds device padding
-
-            // Display all empty meshes, we need to do this because users can add devices to these at any time.
-            if (sort == 0 && Q('SearchInput').value == '') {
-                for (var i in meshes) {
-                    var mesh = meshes[i], meshlink = mesh.links['user/{{{domain}}}/' + userinfo.name.toLowerCase()];
-                    if (meshlink != undefined) {
-                        var meshrights = meshlink.rights;
-                        if (displayedMeshes[mesh._id] == undefined) {
-                            if (current != '') { r += '</tr></table>'; }
+                // Go thru the list of nodes and display them
+                for (var i in nodes) {
+                    if (nodes[i].v == false) continue;
+                    var mesh2 = meshes[nodes[i].meshid], meshlinks = mesh2.links['user/{{{domain}}}/' + userinfo.name.toLowerCase()];
+                    if (meshlinks == undefined) continue;
+                    if (sort == 0) {
+                        // Mesh header
+                        if (nodes[i].meshid != current) {
+                            deviceHeaderSet();
+                            var extra = '';
+                            if (meshes[nodes[i].meshid].mtype == 1) { extra = '<span class=devHeaderx>, Intel&reg; AMT only</span>'; }
+                            var meshrights = meshlinks.rights;
+                            if ((view == 1) && (current != null)) { if (c == 2) { r += '<td><div style=width:301px></div></td>'; } r += '</tr></table>'; }
                             r += '<table style=width:100%;padding-top:4px cellpadding=0 cellspacing=0><tr><td colspan=3 class=DevSt><span style=float:right>';
-                            r += getMeshActions(mesh, meshrights);
-                            r += '</span><span id=MxMESH style=cursor:pointer onclick=gotoMesh("' + mesh._id + '")>' + EscapeHtml(mesh.name) + '</span></td></tr><tr>';
-                            if (mesh.mtype == 1) {
-                                r += '<td><div style=padding:10px><i>No Intel&reg; AMT devices in this mesh';
-                                if ((meshrights & 4) != 0) { r += ', <a style=cursor:pointer onclick=addDeviceToMesh(\"' + mesh._id + '\")>add one</a>'; }
+                            r += getMeshActions(mesh2, meshrights);
+                            r += '</span><span id=MxMESH style=cursor:pointer onclick=gotoMesh("' + nodes[i].meshid + '")>' + EscapeHtml(meshes[nodes[i].meshid].name) + '</span>' + extra + '<span id=DevxHeader' + deviceHeaderId + ' class=devHeaderx></span></td></tr><tr>';
+                            current = nodes[i].meshid;
+                            displayedMeshes[current] = 1;
+                            c = 0;
+                        }
+                    } else if (sort == 1) {
+                        // Power header
+                        if (nodes[i].pwr !== current) {
+                            deviceHeaderSet();
+                            if ((view == 1) && (current !== null)) { if (c == 2) { r += '<td><div style=width:301px></div></td>'; } r += '</tr></table>'; }
+                            r += '<table style=width:100%;padding-top:4px cellpadding=0 cellspacing=0><tr><td colspan=3 class=DevSt><span>' + PowerStateStr2(nodes[i].pwr) + '</span><span id=DevxHeader' + deviceHeaderId + ' class="devHeaderx"></span></td></tr><tr>';
+                            current = nodes[i].pwr;
+                            c = 0;
+                        }
+                    } else if (sort == 2) {
+                        // Device header
+                        if (current == null) { r += '<table style=width:100%;padding-top:4px cellpadding=0 cellspacing=0><tr>'; current = '1'; }
+                    }
+
+                    // Node positioning
+                    if ((view == 1) && (c > 2)) { r += '</tr><tr>'; c = 0; }
+                    c++;
+                    count++;
+
+                    var title = EscapeHtml(nodes[i].name);
+                    if (title.length == 0) { title = '<i>None</i>'; }
+                    if ((nodes[i].host != undefined) && (nodes[i].host.length > 0)) { title += " / " + EscapeHtml(nodes[i].host); }
+                    var name = EscapeHtml(nodes[i].name);
+                    if (showHostnames == true && nodes[i].host != undefined) name = EscapeHtml(nodes[i].host);
+                    if (name.length == 0) { name = '<i>None</i>'; }
+
+                    // Node
+                    var icon = nodes[i].icon;
+                    var nodestate = NodeStateStr(nodes[i]);
+                    if ((!nodes[i].conn) || (nodes[i].conn == 0)) { icon += ' gray'; }
+                    if (view == 1) {
+                        r += '<td><div id=devs style=width:301px;height:50px;padding-top:1px;padding-bottom:1px><div style=width:22px;height:50%;float:left;padding-top:12px><input class="' + nodes[i].meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + nodes[i]._id + ' type=checkbox></div><div style=height:100%;cursor:pointer onclick=gotoDevice(\'' + nodes[i]._id + '\')><div class="i' + icon + '" style=width:50px;float:left></div><div style=height:100%><div class=g1></div><div class=e2><div class=e1 title="' + title + '">' + name + '</div><div>' + nodestate + '</div></div><div class=g2></div></div></div></div></td>';
+                    } else {
+                        r += '<td><div id=devs style=width:924px;height:20px;padding-top:1px;padding-bottom:1px><div style=width:22px;height:50%;float:left;padding-top:2px><input class="' + nodes[i].meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + nodes[i]._id + ' type=checkbox></div><div style=height:100%;cursor:pointer onclick=gotoDevice(\'' + nodes[i]._id + '\')><div class="j' + icon + '" style=width:16px;float:left;margin-top:3px></div><div style=height:100%><div class=g1></div><div class=e2 style=width:858px><div style=float:right;margin-top:1px>' + nodestate + '</div><div style=margin-top:1px title="' + title + '">' + name + '</div></div><div class=g2></div></div></div></div></td></tr><tr>';
+                    }
+                    deviceHeaderTotal++;
+                    if (typeof deviceHeaderCount[nodes[i].state] == 'undefined') { deviceHeaderCount[nodes[i].state] = 1; } else { deviceHeaderCount[nodes[i].state]++; }
+                }
+
+                if ((view == 1) && (c == 2)) r += '<td><div style=width:301px></div></td>'; // Adds device padding
+
+                // Display all empty meshes, we need to do this because users can add devices to these at any time.
+                if (sort == 0 && Q('SearchInput').value == '') {
+                    for (var i in meshes) {
+                        var mesh = meshes[i], meshlink = mesh.links['user/{{{domain}}}/' + userinfo.name.toLowerCase()];
+                        if (meshlink != undefined) {
+                            var meshrights = meshlink.rights;
+                            if (displayedMeshes[mesh._id] == undefined) {
+                                if (current != '') { r += '</tr></table>'; }
+                                r += '<table style=width:100%;padding-top:4px cellpadding=0 cellspacing=0><tr><td colspan=3 class=DevSt><span style=float:right>';
+                                r += getMeshActions(mesh, meshrights);
+                                r += '</span><span id=MxMESH style=cursor:pointer onclick=gotoMesh("' + mesh._id + '")>' + EscapeHtml(mesh.name) + '</span></td></tr><tr>';
+                                if (mesh.mtype == 1) {
+                                    r += '<td><div style=padding:10px><i>No Intel&reg; AMT devices in this mesh';
+                                    if ((meshrights & 4) != 0) { r += ', <a style=cursor:pointer onclick=addDeviceToMesh(\"' + mesh._id + '\")>add one</a>'; }
+                                }
+                                if (mesh.mtype == 2) {
+                                    r += '<td><div style=padding:10px><i>No devices in this mesh';
+                                    if ((meshrights & 4) != 0) { r += ', <a style=cursor:pointer onclick=addAgentToMesh(\"' + mesh._id + '\")>add one</a>'; }
+                                }
+                                r += '.</i></div></td>';
+                                current = mesh._id;
+                                count++;
                             }
-                            if (mesh.mtype == 2) {
-                                r += '<td><div style=padding:10px><i>No devices in this mesh';
-                                if ((meshrights & 4) != 0) { r += ', <a style=cursor:pointer onclick=addAgentToMesh(\"' + mesh._id + '\")>add one</a>'; }
-                            }
-                            r += '.</i></div></td>';
-                            current = mesh._id;
-                            count++;
                         }
                     }
                 }
+                r += '</tr></table><div style=height:1px></div>'; // This height of 1 div fixes a problem in Linux firefox browsers
+
+                QH('xdevices', r);
+                deviceHeaderSet();
+                QV('NoNodesPanel', count == 0);
+
+                // Re-check nodeid's
+                var elements = document.getElementsByClassName("DeviceCheckbox"), checkcount = 0;
+                for (var i in elements) { elements[i].checked = (checkedNodeids.indexOf(elements[i].value) >= 0); }
+
+                for (var i in deviceHeaders) { QH(i, deviceHeaders[i]); }
+                for (var i in deviceHeadersTitles) { Q(i).title = deviceHeadersTitles[i]; }
+                p1updateInfo();
             }
-            r += '</tr></table><div style=height:1px></div>'; // This height of 1 div fixes a problem in Linux firefox browsers
-
-            QH('xdevices', r);
-            deviceHeaderSet();
-            QV('NoNodesPanel', count == 0);
-
-            // Re-check nodeid's
-            var elements = document.getElementsByClassName("DeviceCheckbox"), checkcount = 0;
-            for (var i in elements) { elements[i].checked = (checkedNodeids.indexOf(elements[i].value) >= 0); }
-
-            for (var i in deviceHeaders) { QH(i, deviceHeaders[i]); }
-            for (var i in deviceHeadersTitles) { Q(i).title = deviceHeadersTitles[i]; }
-            p1updateInfo();
         }
 
         function getMeshActions(mesh, meshrights) {