Changed the place on map feature.
Ylian Saint-Hilaire committed
Sep 29, 2017 at 17:55 UTC
8138e82c58020b0d4c296575feaf88d2aadf1e4d
4 files changed
+87
-164
MeshCentral
new
+1
@@ -0,0 +1 @@
1
+Subproject commit b6bfdbbc91375c12700a81048f29b6fc5dfd3e96
MeshCentralServer.njsproj
+41
@@ -71,6 +71,42 @@
71
<Content Include="public\images-isdu\info.gif" />
72
<Content Include="public\images-isdu\warning.gif" />
73
<Content Include="public\images-isdu\isdu.ico" />
74
+ <Content Include="public\styles\font-awesome\css\font-awesome.css" />
75
+ <Content Include="public\styles\font-awesome\css\font-awesome.min.css" />
76
+ <Content Include="public\styles\font-awesome\fonts\fontawesome-webfont.eot" />
77
+ <Content Include="public\styles\font-awesome\fonts\fontawesome-webfont.svg" />
78
+ <Content Include="public\styles\font-awesome\fonts\fontawesome-webfont.ttf" />
79
+ <Content Include="public\styles\font-awesome\fonts\fontawesome-webfont.woff" />
80
+ <Content Include="public\styles\font-awesome\fonts\fontawesome-webfont.woff2" />
81
+ <Content Include="public\styles\font-awesome\fonts\FontAwesome.otf" />
82
+ <Content Include="public\styles\font-awesome\less\animated.less" />
83
+ <Content Include="public\styles\font-awesome\less\bordered-pulled.less" />
84
+ <Content Include="public\styles\font-awesome\less\core.less" />
85
+ <Content Include="public\styles\font-awesome\less\fixed-width.less" />
86
+ <Content Include="public\styles\font-awesome\less\font-awesome.less" />
87
+ <Content Include="public\styles\font-awesome\less\icons.less" />
88
+ <Content Include="public\styles\font-awesome\less\larger.less" />
89
+ <Content Include="public\styles\font-awesome\less\list.less" />
90
+ <Content Include="public\styles\font-awesome\less\mixins.less" />
91
+ <Content Include="public\styles\font-awesome\less\path.less" />
92
+ <Content Include="public\styles\font-awesome\less\rotated-flipped.less" />
93
+ <Content Include="public\styles\font-awesome\less\screen-reader.less" />
94
+ <Content Include="public\styles\font-awesome\less\stacked.less" />
95
+ <Content Include="public\styles\font-awesome\less\variables.less" />
96
+ <Content Include="public\styles\font-awesome\scss\font-awesome.scss" />
97
+ <Content Include="public\styles\font-awesome\scss\_animated.scss" />
98
+ <Content Include="public\styles\font-awesome\scss\_bordered-pulled.scss" />
99
+ <Content Include="public\styles\font-awesome\scss\_core.scss" />
100
+ <Content Include="public\styles\font-awesome\scss\_fixed-width.scss" />
101
+ <Content Include="public\styles\font-awesome\scss\_icons.scss" />
102
+ <Content Include="public\styles\font-awesome\scss\_larger.scss" />
103
+ <Content Include="public\styles\font-awesome\scss\_list.scss" />
104
+ <Content Include="public\styles\font-awesome\scss\_mixins.scss" />
105
+ <Content Include="public\styles\font-awesome\scss\_path.scss" />
106
+ <Content Include="public\styles\font-awesome\scss\_rotated-flipped.scss" />
107
+ <Content Include="public\styles\font-awesome\scss\_screen-reader.scss" />
108
+ <Content Include="public\styles\font-awesome\scss\_stacked.scss" />
109
+ <Content Include="public\styles\font-awesome\scss\_variables.scss" />
110
<Content Include="public\styles\style.css" />
111
<Content Include="readme.txt" />
112
<Content Include="views\default.handlebars" />
@@ -84,6 +120,11 @@
120
<Folder Include="public\images-isdu" />
121
<Folder Include="public\scripts\" />
122
<Folder Include="public\styles\" />
123
+ <Folder Include="public\styles\font-awesome\" />
124
+ <Folder Include="public\styles\font-awesome\css\" />
125
+ <Folder Include="public\styles\font-awesome\fonts\" />
126
+ <Folder Include="public\styles\font-awesome\less\" />
127
+ <Folder Include="public\styles\font-awesome\scss\" />
128
<Folder Include="typings\" />
129
<Folder Include="typings\globals\" />
130
<Folder Include="typings\globals\connect-redis\" />
public/styles/style.css
-33
@@ -512,37 +512,4 @@ a {
512
513
.notification:hover {
514
background-color: #EFE8B6;
515
-}
516
-
517
-.map-PlaceDeviceMarker tr:nth-child(odd) {
518
- background-color: #C9C9C9;
519
-}
520
-
521
-.map-PlaceDeviceMarker tr:nth-child(even) {
522
- background-color: #D8D8D8;
523
-}
524
-
525
-.map-PlaceDeviceMarker tr:hover{
526
- background-color: #A9A9A9;
527
-}
528
-
529
-.map-PlaceDeviceMarker td {
530
- border-top: thin solid #808080;
531
- border-bottom: thin solid #808080;
532
- color: #282828;
533
-}
534
-
535
-.map-PlaceDeviceMarker td:first-child {
536
- border-left: thin solid #808080;
537
-}
538
-
539
-.map-PlaceDeviceMarker td:last-child {
540
- border-right: thin solid #808080;
541
-}
542
-
543
-.flexboxdiv {
544
- display: flex;
545
- align-items: center;
546
- display: -webkit-flex;
547
- -webkit-align-items: center;
515
}
\ No newline at end of file
views/default.handlebars
+45
-131
@@ -9,7 +9,6 @@
9
<link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
10
<link type="text/css" href="styles/ol.css" media="screen" rel="stylesheet" title="CSS" />
11
<link type="text/css" href="styles/ol3-contextmenu.min.css" media="screen" rel="stylesheet" title="CSS" />
12
- <link type="text/css" href="styles/font-awesome/css/font-awesome.css" media="screen" rel="stylesheet" title="CSS" />
12
<script type="text/javascript" src="scripts/common-0.0.1.js"></script>
13
<script type="text/javascript" src="scripts/meshcentral.js"></script>
14
<script type="text/javascript" src="scripts/amt-0.2.0.js"></script>
@@ -586,8 +585,6 @@
585
<div id="idx_dlgButtonBar" style="padding:10px;margin-bottom:4px">
586
<input id="idx_dlgCancelButton" type="button" value="Cancel" style="float:right;width:80px;margin-left:5px" onclick="dialogclose(0)">
587
<input id="idx_dlgOkButton" type="button" value="OK" style="float:right;width:80px" onclick="dialogclose(1)">
589
- <input id="idx_dlgPlaceandSave" type="button" value="Place & Save" style="float:right;margin-left:5px;" onclick="dialogclose(2)" disabled="disabled">
590
- <input id="idx_dlgPlaceButton" type="button" value="Place" style="float:right;width:50px" onclick="dialogclose(1)" disabled="disabled" />
588
<div style="height:25px"><input id=idx_dlgDeleteButton type=button value=Delete style="width:80px;display:none" onclick="dialogclose(2)"></div>
589
</div>
590
</div>
@@ -1728,7 +1725,7 @@
1725
{ text: 'Refresh', callback: function () { refreshMap(true, true); } },
1726
{ text: 'Zoom to fit extent', callback: function () { zoomToFitExtent(); } },
1727
{ text: 'Center map here', callback: function(obj) { xxmap.mapView.animate({ center: obj.coordinate } ); } },
1731
- { text: 'Place a node', callback: function (obj) { placeNode(obj.coordinate); } }
1728
+ { text: 'Place node here', callback: function(obj) { placeNode(obj.coordinate); } }
1729
];
1730
1731
function stringToIntHash(str) {
@@ -2048,33 +2045,24 @@
2045
// Called When Place a node option is clicked from context menu
2046
function placeNode(coords) {
2047
if (xxdialogMode) return;
2051
- clearSelectedNode();
2052
- var x = '<div style="margin-bottom: 6px"><label for="selectnode-search">Search</label>  <input type="text" placeholder="Device Name" id="selectnode-search" onchange="onPNSearchInputChange()" onkeyup="onPNSearchInputChange()" autocomplete="off" style="width: 120px"></div>';
2053
- x += '<div id="placenode" style="max-height:258px;overflow-y:auto;width:100%;margin: 12px 1px 4px 1px;">';
2054
- var count = 0;
2055
- var table = updatePlaceNodeTable('', false);
2056
- if (table != 0) { x += table; count = 1; x += '</div>'; } else { count = 0;}
2057
- if (count == 0) {
2058
- var noNodesFound = '';
2059
- if (!meshExists()) {
2060
- 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>';
2061
- } else {
2062
- 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>';
2063
- }
2064
- setDialogMode(2, "Select a Node to place marker", 1, null, noNodesFound, null);
2065
- } else {
2066
- setDialogMode(2, "Select a Node to place marker", 18, placeNodeEx, x, coords);
2048
+ var x = '<div style=margin-bottom:6px><label for=selectnode-search>Search</label>  <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>';
2049
+ for (var i in nodes) {
2050
+ 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 />';
2051
+ 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>';
2052
}
2053
+ setDialogMode(2, "Select a node to place", 3, placeNodeEx, x + '</div>', coords);
2054
+ onPlaceNodeInputChange();
2055
}
2056
2070
- function placeNodeEx(button, coords){
2071
- for (var i in xxmap.selectedNodes) {
2072
- var node = getNodeFromId(i);
2073
- if (node) {
2074
- var feature = xxmap.markersSource.getFeatureById(i);
2075
- var v = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326');
2076
- var vx = [ v[1], v[0] ]; // Flip the coordinates around, lat/long
2077
- if (button == 2) {
2057
+ function placeNodeEx(button, coords) {
2058
+ var elements = document.getElementsByName("PlaceMapDeviceCheckbox");
2059
+ for (var i in elements) {
2060
+ if (elements[i].checked) {
2061
+ var node = getNodeFromId(elements[i].id.substring(0, elements[i].id.length - 8));
2062
+ if (node) {
2063
+ var feature = xxmap.markersSource.getFeatureById(i);
2064
+ var v = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326');
2065
+ var vx = [ v[1], v[0] ]; // Flip the coordinates around, lat/long
2066
if (feature) {
2067
feature.getGeometry().setCoordinates(coords);
2068
var activeInteraction = getActiveInteractions(feature);
@@ -2087,117 +2075,47 @@
2075
meshserver.Send({ action: 'changedevice', nodeid: node._id, userloc: vx }); // This Node is not yet added to maps.
2076
}
2077
}
2090
- else if (button == 1) { //Dont send changes to server since its just 'place'
2091
- if (feature) {
2092
- feature.getGeometry().setCoordinates(coords);
2093
- modifyMarkerloc(feature);
2094
- } else {
2095
- //if (map_parseNodeLoc(node.iploc) != null) {
2096
- addFeature(node, v[0], v[1]);
2097
- var newFeature = xxmap.markersSource.getFeatureById(node._id);
2098
- modifyMarkerloc(newFeature);
2099
- //}
2100
- }
2101
- }
2078
}
2079
}
2080
}
2081
2106
- // Close place node dialog
2107
- function closePNDialog(id){
2108
- dialogclose(1);
2109
- switch (id) {
2110
- case 1:
2111
- Q('viewselect').options.selectedIndex = 0;
2112
- onDeviceViewChange();
2113
- break;
2114
- case 2:
2115
- go(2); //Go to My Accounts tab
2116
- break;
2117
- }
2118
- }
2119
-
2120
- // On input search change in Place Node dialogue box
2121
- function onPNSearchInputChange() {
2122
- var inputSearchData = Q('selectnode-search').value;
2123
- QH('placenode', '');
2124
- updatePlaceNodeTable(inputSearchData.trim().toLowerCase(), true);
2082
+ // Called when the user changes the search box
2083
+ function onPlaceNodeInputChange() {
2084
+ updatePlaceNodeTable(Q('selectnode-search').value.trim().toLowerCase());
2085
}
2086
2127
- //Update the place Node Table
2128
- function updatePlaceNodeTable(inputSearch,searchFlag) {
2129
- var x = '<table class="map-PlaceDeviceMarker" style="width: 100%"><tbody>';
2130
- var count = 0;
2087
+ // Update the list of devices in the "place on map" table
2088
+ function updatePlaceNodeTable(inputSearch) {
2089
+ var elements = document.getElementsByName("PlaceMapDeviceCheckbox"), count = 0;
2090
for (var i in nodes) {
2132
- if (nodes[i].mtype == 2) {
2133
- if ((nodes[i].name.toLowerCase().indexOf(inputSearch) >= 0 || inputSearch == '') || (nodes[i].hostl != undefined && nodes[i].hostl.toLowerCase().indexOf(inputSearch) >= 0)) {
2134
- count++;
2135
- 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'+ '\')">';
2136
- 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>';
2137
- x+='<td style="font-weight: bold; font-size: 11pt;">'+ nodes[i].name + '</td>';
2138
- x+='</tr>';
2139
- }
2140
- }
2141
- }
2142
- x+='</tbody></table>';
2143
- if (searchFlag) { //Flag is true when user searches for a Device using placeNode search input.
2144
- if (count == 0) { //If No Device name is found that matches the search
2145
- 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>'); }
2146
- else {
2147
- QH('placenode', x);}
2148
- }else {
2149
- if (count == 0) { return 0; }
2150
- else { return x; }
2151
- }
2152
- }
2153
-
2154
- //On click-change the checkbox class and save selected Device
2155
- function selectNodetoplace(id){
2156
- var imgeElement = Q(id + '-img');
2157
- if (xxmap.selectedNodes[id]) { //If user clicks on already selected Device.
2158
- imgeElement.classList.remove('fa-check-square-o');
2159
- imgeElement.classList.add('fa-square');
2160
- delete xxmap.selectedNodes[id];
2161
- checkSelectedNodes();
2162
- } else {
2163
- imgeElement.classList.remove('fa-square');
2164
- imgeElement.classList.add('fa-check-square-o');
2165
- xxmap.selectedNodes[id] = { color: Q(id+'-rowid').style.backgroundColor};
2166
- QE('idx_dlgPlaceandSave', true);
2167
- QE('idx_dlgPlaceButton', true);
2091
+ var visible = ((nodes[i].namel.indexOf(inputSearch) >= 0 || inputSearch == '') || (nodes[i].hostl != undefined && nodes[i].hostl.indexOf(inputSearch) >= 0));
2092
+ if (visible) { count++; }
2093
+ QV(nodes[i]._id + '-rowid', visible);
2094
}
2169
- }
2170
-
2171
- function checkSelectedNodes() {
2172
- var c = 0;
2173
- for (var i in xxmap.selectedNodes) { if (xxmap.selectedNodes[i]) { c++; } }
2174
- if (c == 0) { //If no nodes are checked then disable place and Save buttons
2175
- QE('idx_dlgPlaceandSave', false);
2176
- QE('idx_dlgPlaceButton', false);
2095
+ QV('noNodesMapPlace', count == 0);
2096
+ /*
2097
+ console.log(selected);
2098
+ for (var i in nodes) {
2099
+ if ((nodes[i].name.toLowerCase().indexOf(inputSearch) >= 0 || inputSearch == '') || (nodes[i].hostl != undefined && nodes[i].hostl.toLowerCase().indexOf(inputSearch) >= 0)) {
2100
+ console.log(selected.indexOf(nodes[i]._id));
2101
+ 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':'') + ' />';
2102
+ 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>';
2103
+ }
2104
}
2105
+ if (x == '') { x = '<div style=text-align:center;width:100%>No devices found.</div>'; }
2106
+ QH('placenode', '');
2107
+ */
2108
}
2109
2180
- // Set selected node to null
2181
- function clearSelectedNode() {
2182
- xxmap.selectedNodes = {};
2183
- QE('idx_dlgPlaceandSave', false);
2184
- QE('idx_dlgPlaceButton', false);
2185
- }
2110
+ // Called when a user clicks on a device to toggle selection for placement on map.
2111
+ function selectNodeToPlace(e, id) {
2112
+ // Toggle checkbox if needed
2113
+ if (e.target.name != 'PlaceMapDeviceCheckbox') { var inputElement = Q(id + '-checkid'); inputElement.checked = !inputElement.checked; }
2114
2187
- // Change radio button on mouseover and out for 'select a node to place dialog'
2188
- function changeRadioImg(name) {
2189
- var index = name.indexOf("mouseout");
2190
- var element = name.split('!#!');
2191
- if (!xxmap.selectedNodes[element[0]]) {
2192
- var imgeElement= Q(element[0]+'-img');
2193
- if (index > -1) {
2194
- imgeElement.classList.remove('fa-square');
2195
- imgeElement.classList.add('fa-square-o');
2196
- } else {
2197
- imgeElement.classList.remove('fa-square-o');
2198
- imgeElement.classList.add('fa-square');
2199
- }
2200
- }
2115
+ // Check button state
2116
+ var elements = document.getElementsByName("PlaceMapDeviceCheckbox"), checkcount = 0;
2117
+ for (var i in elements) { if (elements[i].checked) checkcount++; }
2118
+ QE('idx_dlgOkButton', checkcount > 0);
2119
}
2120
2121
// Add option for available meshes in mesh Dropdown
@@ -4537,16 +4455,12 @@
4455
xxdialogFunc = f;
4456
xxdialogButtons = b;
4457
xxdialogTag = tag;
4540
- QE('idx_dlgPlaceandSave', false);
4541
- QE('idx_dlgPlaceButton', false);
4458
QE('idx_dlgOkButton', true);
4459
QV('idx_dlgOkButton', b & 1);
4460
QV('idx_dlgCancelButton', b & 2);
4461
QV('id_dialogclose', (b & 2) || (b & 8));
4462
QV('idx_dlgDeleteButton', b & 4);
4463
QV('idx_dlgButtonBar', b & 7);
4548
- QV('idx_dlgPlaceButton', (b & 18) && (b%2 == 0));
4549
- QV('idx_dlgPlaceandSave', (b & 18) && (b%2 == 0));
4464
if (y) QH('id_dialogtitle', y);
4465
for (var i = 1; i < 24; i++) { QV('dialog' + i, i == x); } // Edit this line when more dialogs are added
4466
QV('dialog', x);