Changed the place on map feature.

MeshCentral

@@ -0,0 +1 @@
+Subproject commit b6bfdbbc91375c12700a81048f29b6fc5dfd3e96

MeshCentralServer.njsproj

@@ -71,6 +71,42 @@
     <Content Include="public\images-isdu\info.gif" />
     <Content Include="public\images-isdu\warning.gif" />
     <Content Include="public\images-isdu\isdu.ico" />
+    <Content Include="public\styles\font-awesome\css\font-awesome.css" />
+    <Content Include="public\styles\font-awesome\css\font-awesome.min.css" />
+    <Content Include="public\styles\font-awesome\fonts\fontawesome-webfont.eot" />
+    <Content Include="public\styles\font-awesome\fonts\fontawesome-webfont.svg" />
+    <Content Include="public\styles\font-awesome\fonts\fontawesome-webfont.ttf" />
+    <Content Include="public\styles\font-awesome\fonts\fontawesome-webfont.woff" />
+    <Content Include="public\styles\font-awesome\fonts\fontawesome-webfont.woff2" />
+    <Content Include="public\styles\font-awesome\fonts\FontAwesome.otf" />
+    <Content Include="public\styles\font-awesome\less\animated.less" />
+    <Content Include="public\styles\font-awesome\less\bordered-pulled.less" />
+    <Content Include="public\styles\font-awesome\less\core.less" />
+    <Content Include="public\styles\font-awesome\less\fixed-width.less" />
+    <Content Include="public\styles\font-awesome\less\font-awesome.less" />
+    <Content Include="public\styles\font-awesome\less\icons.less" />
+    <Content Include="public\styles\font-awesome\less\larger.less" />
+    <Content Include="public\styles\font-awesome\less\list.less" />
+    <Content Include="public\styles\font-awesome\less\mixins.less" />
+    <Content Include="public\styles\font-awesome\less\path.less" />
+    <Content Include="public\styles\font-awesome\less\rotated-flipped.less" />
+    <Content Include="public\styles\font-awesome\less\screen-reader.less" />
+    <Content Include="public\styles\font-awesome\less\stacked.less" />
+    <Content Include="public\styles\font-awesome\less\variables.less" />
+    <Content Include="public\styles\font-awesome\scss\font-awesome.scss" />
+    <Content Include="public\styles\font-awesome\scss\_animated.scss" />
+    <Content Include="public\styles\font-awesome\scss\_bordered-pulled.scss" />
+    <Content Include="public\styles\font-awesome\scss\_core.scss" />
+    <Content Include="public\styles\font-awesome\scss\_fixed-width.scss" />
+    <Content Include="public\styles\font-awesome\scss\_icons.scss" />
+    <Content Include="public\styles\font-awesome\scss\_larger.scss" />
+    <Content Include="public\styles\font-awesome\scss\_list.scss" />
+    <Content Include="public\styles\font-awesome\scss\_mixins.scss" />
+    <Content Include="public\styles\font-awesome\scss\_path.scss" />
+    <Content Include="public\styles\font-awesome\scss\_rotated-flipped.scss" />
+    <Content Include="public\styles\font-awesome\scss\_screen-reader.scss" />
+    <Content Include="public\styles\font-awesome\scss\_stacked.scss" />
+    <Content Include="public\styles\font-awesome\scss\_variables.scss" />
     <Content Include="public\styles\style.css" />
     <Content Include="readme.txt" />
     <Content Include="views\default.handlebars" />
@@ -84,6 +120,11 @@
     <Folder Include="public\images-isdu" />
     <Folder Include="public\scripts\" />
     <Folder Include="public\styles\" />
+    <Folder Include="public\styles\font-awesome\" />
+    <Folder Include="public\styles\font-awesome\css\" />
+    <Folder Include="public\styles\font-awesome\fonts\" />
+    <Folder Include="public\styles\font-awesome\less\" />
+    <Folder Include="public\styles\font-awesome\scss\" />
     <Folder Include="typings\" />
     <Folder Include="typings\globals\" />
     <Folder Include="typings\globals\connect-redis\" />

public/styles/style.css

@@ -512,37 +512,4 @@ a {
 
 .notification:hover {
     background-color: #EFE8B6;
-}
-
-.map-PlaceDeviceMarker tr:nth-child(odd) {
-    background-color: #C9C9C9;
-}
-
-.map-PlaceDeviceMarker tr:nth-child(even) {
-    background-color: #D8D8D8;
-}
-
-.map-PlaceDeviceMarker tr:hover{
-    background-color: #A9A9A9;
-}
-
-.map-PlaceDeviceMarker td {
-    border-top: thin solid #808080; 
-    border-bottom: thin solid #808080;
-    color: #282828;
-}
-
-.map-PlaceDeviceMarker td:first-child {
-     border-left: thin solid #808080;
-}
-
-.map-PlaceDeviceMarker td:last-child {
-     border-right: thin solid #808080;
-}
-
-.flexboxdiv {
-    display: flex;
-    align-items: center;
-    display: -webkit-flex; 
-    -webkit-align-items: center;
 }

views/default.handlebars

@@ -9,7 +9,6 @@
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/ol.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/ol3-contextmenu.min.css" media="screen" rel="stylesheet" title="CSS" />
-    <link type="text/css" href="styles/font-awesome/css/font-awesome.css" media="screen" rel="stylesheet" title="CSS" />
     <script type="text/javascript" src="scripts/common-0.0.1.js"></script>
     <script type="text/javascript" src="scripts/meshcentral.js"></script>
     <script type="text/javascript" src="scripts/amt-0.2.0.js"></script>
@@ -586,8 +585,6 @@
         <div id="idx_dlgButtonBar" style="padding:10px;margin-bottom:4px">
             <input id="idx_dlgCancelButton" type="button" value="Cancel" style="float:right;width:80px;margin-left:5px" onclick="dialogclose(0)">
             <input id="idx_dlgOkButton" type="button" value="OK" style="float:right;width:80px" onclick="dialogclose(1)">
-            <input id="idx_dlgPlaceandSave" type="button" value="Place & Save" style="float:right;margin-left:5px;" onclick="dialogclose(2)" disabled="disabled">
-            <input id="idx_dlgPlaceButton" type="button" value="Place" style="float:right;width:50px" onclick="dialogclose(1)" disabled="disabled" />
             <div style="height:25px"><input id=idx_dlgDeleteButton type=button value=Delete style="width:80px;display:none" onclick="dialogclose(2)"></div>
         </div>
     </div>
@@ -1728,7 +1725,7 @@
           { text: 'Refresh', callback: function () { refreshMap(true, true); } },
           { text: 'Zoom to fit extent', callback: function () { zoomToFitExtent(); } },
           { text: 'Center map here', callback: function(obj) { xxmap.mapView.animate({ center: obj.coordinate } ); } },
-          { text: 'Place a node', callback: function (obj) { placeNode(obj.coordinate); } }
+          { text: 'Place node here', callback: function(obj) { placeNode(obj.coordinate); } }
         ];
 
         function stringToIntHash(str) {
@@ -2048,33 +2045,24 @@
         // Called When Place a node option is clicked from context menu
         function placeNode(coords) {
             if (xxdialogMode) return;
-            clearSelectedNode();
+            var x = '<div style=margin-bottom:6px><label for=selectnode-search>Search</label>&nbsp&nbsp<input type=text placeholder="Device name" id="selectnode-search" onchange=onPlaceNodeInputChange() onkeyup=onPlaceNodeInputChange() autocomplete=off style=width:120px></div><div id=placenode style="height:254px;overflow-y:auto;width:100%;margin:12px 1px 4px 1px;"><div id=noNodesMapPlace style=text-align:center;width:100%;display:none>No devices found.</div>';
-            var x = '<div style="margin-bottom: 6px"><label for="selectnode-search">Search</label>&nbsp&nbsp<input type="text" placeholder="Device Name" id="selectnode-search" onchange="onPNSearchInputChange()" onkeyup="onPNSearchInputChange()" autocomplete="off" style="width: 120px"></div>';
+            for (var i in nodes) {
-            x += '<div id="placenode" style="max-height:258px;overflow-y:auto;width:100%;margin: 12px 1px 4px 1px;">';
+                x += '<div class=noselect id=' + nodes[i]._id + '-rowid onclick=selectNodeToPlace(event,\''+ nodes[i]._id +'\') style=background-color:lightgray;margin-bottom:4px;border-radius:2px><input name=PlaceMapDeviceCheckbox id=' + nodes[i]._id + '-checkid type=checkbox style=width:16px;display:inline />';
-            var count = 0;
+                x += '<div class=j' + nodes[i].icon + ' style=width:16px;height:16px;margin-top:2px;margin-right:4px;display:inline-block></div><div style=width:16px;display:inline>' + nodes[i].name + '</div></div>';
-            var table = updatePlaceNodeTable('', false);
-            if (table != 0) { x += table; count = 1; x += '</div>'; } else { count = 0;}
-            if (count == 0) {
-                var noNodesFound = '';
-                if (!meshExists()) {
-                    noNodesFound = '<div class="flexboxdiv"><div style="margin-right:10px"><i class="fa fa-info-circle fa-3x" style="color:green" aria-hidden="true"></i></div><div style="max-width: 300px"> No nodes found. To create a mesh network and add devices, go to <a onclick="closePNDialog(2)" style="cursor:pointer">My Account</a> page.</div></div>';
-                } else {
-                    noNodesFound = '<div class="flexboxdiv"><div style="margin-right:10px"><i class="fa fa-info-circle fa-3x" style="color:green" aria-hidden="true"></i></div><div style="max-width: 300px"> No nodes found. To add devices, go to <a onclick="closePNDialog(1)" style="cursor:pointer">My Devices</a> page.</div></div>';
-                }
-                setDialogMode(2, "Select a Node to place marker", 1, null, noNodesFound, null);
-            } else {
-                setDialogMode(2, "Select a Node to place marker", 18, placeNodeEx, x, coords);
             }
+            setDialogMode(2, "Select a node to place", 3, placeNodeEx, x + '</div>', coords);
+            onPlaceNodeInputChange();
         }
 
-        function placeNodeEx(button, coords){
+        function placeNodeEx(button, coords) {
-            for (var i in xxmap.selectedNodes) {
+            var elements = document.getElementsByName("PlaceMapDeviceCheckbox");
-                var node = getNodeFromId(i);
+            for (var i in elements) {
-                if (node) {
+                if (elements[i].checked) {
-                    var feature = xxmap.markersSource.getFeatureById(i);
+                    var node = getNodeFromId(elements[i].id.substring(0, elements[i].id.length - 8));
-                    var v = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326');
+                    if (node) {
-                    var vx = [ v[1], v[0] ]; // Flip the coordinates around, lat/long
+                        var feature = xxmap.markersSource.getFeatureById(i);
-                    if (button == 2) {
+                        var v = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326');
+                        var vx = [ v[1], v[0] ]; // Flip the coordinates around, lat/long
                         if (feature) {
                             feature.getGeometry().setCoordinates(coords);
                             var activeInteraction = getActiveInteractions(feature);
@@ -2087,117 +2075,47 @@
                             meshserver.Send({ action: 'changedevice', nodeid: node._id, userloc: vx }); // This Node is not yet added to maps.
                         }
                     }
-                    else if (button == 1) {	//Dont send changes to server since its just 'place'
-                        if (feature) {
-                            feature.getGeometry().setCoordinates(coords);
-                            modifyMarkerloc(feature);
-                        } else {
-                            //if (map_parseNodeLoc(node.iploc) != null) {
-                            addFeature(node, v[0], v[1]);
-                            var newFeature = xxmap.markersSource.getFeatureById(node._id);
-                            modifyMarkerloc(newFeature);
-                            //}
-                        }
-                    }
                 }
             }
         }
 
-        // Close place node dialog
+        // Called when the user changes the search box
-        function closePNDialog(id){
+        function onPlaceNodeInputChange() {
-            dialogclose(1);
+            updatePlaceNodeTable(Q('selectnode-search').value.trim().toLowerCase());
-            switch (id) {
-                case 1:
-                    Q('viewselect').options.selectedIndex = 0;
-                    onDeviceViewChange();
-                    break;
-                case 2:
-                    go(2); //Go to My Accounts tab
-                    break;
-            }
         }
 
-        // On input search change in Place Node dialogue box
+        // Update the list of devices in the "place on map" table
-        function onPNSearchInputChange() {
+        function updatePlaceNodeTable(inputSearch) {
-            var inputSearchData = Q('selectnode-search').value;
+            var elements = document.getElementsByName("PlaceMapDeviceCheckbox"), count = 0;
-            QH('placenode', '');
-            updatePlaceNodeTable(inputSearchData.trim().toLowerCase(), true);
-        }
-
-        //Update the place Node Table
-        function updatePlaceNodeTable(inputSearch,searchFlag) {
-            var x = '<table class="map-PlaceDeviceMarker" style="width: 100%"><tbody>';
-            var count = 0;
             for (var i in nodes) {
-                if (nodes[i].mtype == 2) {
+                var visible = ((nodes[i].namel.indexOf(inputSearch) >= 0 || inputSearch == '') || (nodes[i].hostl != undefined && nodes[i].hostl.indexOf(inputSearch) >= 0));
-                    if ((nodes[i].name.toLowerCase().indexOf(inputSearch) >= 0 || inputSearch == '') || (nodes[i].hostl != undefined && nodes[i].hostl.toLowerCase().indexOf(inputSearch) >= 0)) {
+                if (visible) { count++; }
-                        count++;
+                QV(nodes[i]._id + '-rowid', visible);
-                        x+='<tr style="height:35px; text-align: center;cursor: pointer;" id="'+ nodes[i]._id +'-rowid" onclick=selectNodetoplace(\''+ nodes[i]._id +'\') onmouseover="changeRadioImg(\''+ nodes[i]._id +'!#!mouseover'+ '\')" onmouseout="changeRadioImg(\''+ nodes[i]._id +'!#!mouseout'+ '\')">';
+            }
-                        x+='<td style="width:55px"><i class="fa fa-square-o fa-lg" style="color:#003800" id="'+ nodes[i]._id +'-img' +'" style="border-color: #7CFC00;" aria-hidden="true"></i></td>';
+            QV('noNodesMapPlace', count == 0);
-                        x+='<td style="font-weight: bold; font-size: 11pt;">'+ nodes[i].name + '</td>';
+            /*
-                        x+='</tr>';
+            console.log(selected);
-                    }
+            for (var i in nodes) {
+                if ((nodes[i].name.toLowerCase().indexOf(inputSearch) >= 0 || inputSearch == '') || (nodes[i].hostl != undefined && nodes[i].hostl.toLowerCase().indexOf(inputSearch) >= 0)) {
+                    console.log(selected.indexOf(nodes[i]._id));
+                    x += '<div class=noselect id=' + nodes[i]._id + '-rowid onclick=selectNodeToPlace(event,\''+ nodes[i]._id +'\') style=background-color:lightgray;margin-bottom:4px;border-radius:2px><input name=PlaceMapDeviceCheckbox id=' + nodes[i]._id + '-checkid type=checkbox style=width:16px;display:inline ' + ((selected.indexOf(nodes[i]._id) >= 0)?'checked':'') + ' />';
+                    x += '<div class=j' + nodes[i].icon + ' style=width:16px;height:16px;margin-top:2px;margin-right:4px;display:inline-block></div><div style=width:16px;display:inline>' + nodes[i].name + '</div></div>';
                 }
             }
-            x+='</tbody></table>';
+            if (x == '') { x = '<div style=text-align:center;width:100%>No devices found.</div>'; }
-            if (searchFlag) { //Flag is true when user searches for a Device using placeNode search input.
+            QH('placenode', '');
-                if (count == 0) { //If No Device name is found that matches the search
+            */
-                    QH('placenode', '<div class="flexboxdiv"><div style="margin: 0px 10px 0px 4px"><i class="fa fa-exclamation-circle fa-2x" style="color:red" aria-hidden="true"></i></div><div style="max-width: 300px"><b>No Nodes found with this Search Criteria.</b></div></div>'); }
-                else {
-                    QH('placenode', x);}
-            }else {
-                if (count == 0) { return 0; }
-                else { return x; }
-            }
         }
 
-        //On click-change the checkbox class and save selected Device
+        // Called when a user clicks on a device to toggle selection for placement on map.
-        function selectNodetoplace(id){
+        function selectNodeToPlace(e, id) {
-            var imgeElement = Q(id + '-img');
+            // Toggle checkbox if needed
-            if (xxmap.selectedNodes[id]) { //If user clicks on already selected Device.
+            if (e.target.name != 'PlaceMapDeviceCheckbox') { var inputElement = Q(id + '-checkid'); inputElement.checked = !inputElement.checked; }
-                imgeElement.classList.remove('fa-check-square-o');
-                imgeElement.classList.add('fa-square');
-                delete xxmap.selectedNodes[id];
-                checkSelectedNodes();
-            } else {
-                imgeElement.classList.remove('fa-square');
-                imgeElement.classList.add('fa-check-square-o');
-                xxmap.selectedNodes[id] = { color: Q(id+'-rowid').style.backgroundColor};
-                QE('idx_dlgPlaceandSave', true);
-                QE('idx_dlgPlaceButton', true);
-            }
-        }
 
-        function checkSelectedNodes() {
+            // Check button state
-            var c = 0;
+            var elements = document.getElementsByName("PlaceMapDeviceCheckbox"), checkcount = 0;
-            for (var i in xxmap.selectedNodes) { if (xxmap.selectedNodes[i]) { c++; } }
+            for (var i in elements) { if (elements[i].checked) checkcount++; }
-            if (c == 0) { //If no nodes are checked then disable place and Save buttons
+            QE('idx_dlgOkButton', checkcount > 0);
-                QE('idx_dlgPlaceandSave', false);
-                QE('idx_dlgPlaceButton', false);
-            }
-        }
-
-        // Set selected node to null
-        function clearSelectedNode() {
-            xxmap.selectedNodes = {};
-            QE('idx_dlgPlaceandSave', false);
-            QE('idx_dlgPlaceButton', false);
-        }
-
-        // Change radio button on mouseover and out for 'select a node to place dialog'
-        function changeRadioImg(name) {
-            var index = name.indexOf("mouseout");
-            var element = name.split('!#!');
-            if (!xxmap.selectedNodes[element[0]]) {
-                var imgeElement= Q(element[0]+'-img');
-                if (index > -1) {
-                    imgeElement.classList.remove('fa-square');
-                    imgeElement.classList.add('fa-square-o');
-                } else {
-                    imgeElement.classList.remove('fa-square-o');
-                    imgeElement.classList.add('fa-square');
-                }
-            }
         }
 
         // Add option for available meshes in mesh Dropdown
@@ -4537,16 +4455,12 @@
             xxdialogFunc = f;
             xxdialogButtons = b;
             xxdialogTag = tag;
-            QE('idx_dlgPlaceandSave', false);
-            QE('idx_dlgPlaceButton', false);
             QE('idx_dlgOkButton', true);
             QV('idx_dlgOkButton', b & 1);
             QV('idx_dlgCancelButton', b & 2);
             QV('id_dialogclose', (b & 2) || (b & 8));
             QV('idx_dlgDeleteButton', b & 4);
             QV('idx_dlgButtonBar', b & 7);
-            QV('idx_dlgPlaceButton', (b & 18) && (b%2 == 0));
-            QV('idx_dlgPlaceandSave', (b & 18) && (b%2 == 0));
             if (y) QH('id_dialogtitle', y);
             for (var i = 1; i < 24; i++) { QV('dialog' + i, i == x); } // Edit this line when more dialogs are added
             QV('dialog', x);