[TASK] add position editing of node

ssh/manager.go

@@ -45,7 +45,7 @@ func (m *Manager) ConnectTo(addr net.TCPAddr) *ssh.Client {
 	m.clientsMUX.Lock()
 	defer m.clientsMUX.Unlock()
 	if t, ok := m.clientsBlacklist[addr.IP.String()]; ok {
-		if time.Now().Add(-time.Hour * 24).After(t) {
+		if time.Now().Add(-time.Hour * 24).Before(t) {
 			return nil
 		} else {
 			delete(m.clientsBlacklist, addr.IP.String())

webroot/css/main.css

@@ -18,6 +18,12 @@ body {
 .status.offline {
   background: #dc0067;
 }
+span.online {
+  color: #009ee0;
+}
+span.offline {
+  color: #dc0067;
+}
 h1 {
   border-bottom: 4px solid #dc0067;
 }

webroot/css/map.css

@@ -6,7 +6,7 @@
   border-radius: 10px;
 }
 .leaflet-container .node.offline {
-  background-color rgba(255,0,0,0.5)
+  background-color: rgba(255,0,0,0.5);
 }
 .leaflet-container .node.client24 {
   border-left: 3px solid green;

webroot/index.html

@@ -10,6 +10,8 @@
     <script src="/js/moment.js"></script>
     <script src="/js/navigo.js"></script>
     <script src="/js/leaflet.js"></script>
+    <script src="/js/webgl-heatmap.js"></script>
+    <script src="/js/leaflet-webgl-heatmap.min.js"></script>
     <script src="/js/config.js"></script>
     <script src="/js/domlib.js"></script>
     <script src="/js/store.js"></script>

webroot/js/config.js

@@ -5,9 +5,16 @@ var config = {
 				view: {bound: [53.07093,  8.79464], zoom: 17},
 				maxZoom: 20,
 				tileLayer: '//tiles.bremen.freifunk.net/{z}/{x}/{y}.png',
-				heatMax: {
+				/* heatmap settings
-					wifi24: 15,
+         size: in meters (default: 30km)
-					wifi5: 50
+				 opacity: in percent/100 (default: 1)
+				 gradientTexture: url-to-texture-image (default: false)
+				 alphaRange: change transparency in heatmap (default: 1)
+				 autoresize: resize heatmap when map size changes (default: false)
+				 */
+				heatmap: {
+					wifi24: {size: 230, opacity: 0.5, alphaRange: 1},
+					wifi5: {size: 230, opacity: 0.5, alphaRange: 1}
 				},
 				icon:{
 					warn:{wifi24:20,wifi5:20},

webroot/js/gui.js

@@ -43,7 +43,7 @@ var router = new Navigo(null, true, '#');
     '/n/:nodeID': {
       as: 'node',
       uses: function (params) {
-        guiNode.current_node_id = params['nodeID'].toLowerCase();
+        guiNode.setNodeID(params['nodeID'].toLowerCase());
         setView(guiNode);
       }
     },
@@ -68,5 +68,5 @@ var router = new Navigo(null, true, '#');
     timeout = setTimeout(reset, 100);
   }
 
-  gui.render();
+  window.onload = gui.render;
 })();

webroot/js/gui_map.js

@@ -4,9 +4,15 @@ var guiMap = {};
   var view = guiMap;
   var container, el;
 
-  var nodeLayer;
+  var nodeLayer, clientLayer24, clientLayer5;//, draggingNodeID;
 
   function addNode (node){
+    /*
+    https://github.com/Leaflet/Leaflet/issues/4484
+    if(node.node_id === draggingNodeID){
+      return
+    }
+    */
     if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
       return;
     }
@@ -50,8 +56,13 @@ var guiMap = {};
       '</table>'+
     '</div>'
     );
-
+    /*
+    nodemarker.on('dragstart',function(){
+      draggingNodeID = node.node_id;
+    })
+    */
     nodemarker.on('dragend',function(){
+      // draggingNodeID = undefined;
       var pos = nodemarker.getLatLng();
       node.location = {
         'latitude': pos.lat,
@@ -69,6 +80,21 @@ var guiMap = {};
     for(var i=0; i<nodes.length; i++){
       addNode(nodes[i]);
     }
+
+    var clientData24 = nodes.map(function(node){
+      if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
+        return;
+      }
+      return [node.location.latitude,node.location.longitude,node.statistics.clients.wifi24 * 2 || 0];
+    })
+    clientLayer24.setData(clientData24);
+    var clientData5 = nodes.map(function(node){
+      if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
+        return;
+      }
+      return [node.location.latitude,node.location.longitude,node.statistics.clients.wifi5 || 0];
+    })
+    clientLayer5.setData(clientData5);
   }
 
   view.bind = function(el) {
@@ -97,8 +123,11 @@ var guiMap = {};
     layerControl = L.control.layers().addTo(map);
 
     nodeLayer = L.layerGroup();
-
+    clientLayer24 = new L.webGLHeatmap({size: 230, opacity: 0.5, alphaRange: 1});
+    clientLayer5 = new L.webGLHeatmap({size: 230, opacity: 0.5, alphaRange: 2});
     layerControl.addOverlay(nodeLayer,'Nodes');
+    layerControl.addOverlay(clientLayer24,'Clients 2.4 Ghz');
+    layerControl.addOverlay(clientLayer5,'Clients 5 Ghz');
     nodeLayer.addTo(map);
 
     window.addEventListener("resize",function(){

webroot/js/gui_node.js

@@ -1,19 +1,55 @@
-var guiNode = {current_node_id:"-"};
+var guiNode = {};
 
 (function(){
   var view = guiNode;
   var container, el;
 
-  var titleName,titleID;
+  var titleName,titleID,ago;
+  var marker,map;
+  var btnGPS, editLocationGPS, storePosition;
+  var current_node_id, editing = false;
+
+  function updatePosition(lat, lng){
+    if(!lat || !lng) {
+      lat = storePosition.latitude || false;
+      lng = storePosition.longitude || false;
+      if(!lat || !lng)
+        return;
+    }
+    var node = store.getNode(current_node_id);
+    node.location = {latitude:lat,longitude:lng};
+    socket.sendnode(node);
+  }
 
   function update(){
-    titleID.innerHTML = view.current_node_id;
+    titleID.innerHTML = current_node_id;
-    var node = store.getNode(view.current_node_id);
+    var node = store.getNode(current_node_id);
     if(node === undefined){
-      console.log("node not found: "+view.current_node_id);
+      console.log("node not found: "+current_node_id);
+      return;
+    }
+    var startdate = new Date();
+    startdate.setMinutes(startdate.getMinutes() - 1);
+    if(new Date(node.lastseen) < startdate){
+      ago.classList.add('offline')
+      ago.classList.remove('online');
+    }else{
+      ago.classList.remove('offline')
+      ago.classList.add('online');
+    }
+    ago.innerHTML = moment(node.lastseen).fromNow() + ' ('+node.lastseen+')';
+    if(editLocationGPS || editing || node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
       return;
     }
     titleName.innerHTML = node.hostname;
+    var latlng = [node.location.latitude,node.location.longitude];
+    map.setView(latlng);
+    marker.setLatLng(latlng);
+    marker.setOpacity(1);
+  }
+
+  view.setNodeID = function (nodeID){
+    current_node_id = nodeID;
   }
 
   view.bind = function(el) {
@@ -35,6 +71,68 @@ var guiNode = {current_node_id:"-"};
     title.appendChild(document.createTextNode("  -  "))
     titleID = domlib.newAt(title,'i');
 
+    var lastseen = domlib.newAt(el,'p');
+    domlib.newAt(lastseen,'span').innerHTML = "Lastseen: ";
+    ago = domlib.newAt(lastseen,'span');
+
+    var mapEl = domlib.newAt(el,'div');
+    mapEl.style.height = '500px';
+    map = L.map(mapEl).setView(config.map.view.bound, config.map.view.zoom);
+
+    L.tileLayer(config.map.tileLayer, {
+        maxZoom: config.map.maxZoom,
+      }).addTo(map);
+
+    marker = L.marker(config.map.view.bound,{draggable:true,opacity:0.5}).addTo(map);
+    marker.on('dragstart', function(e){
+      editing = true;
+    });
+    marker.on('dragend', function(e){
+      editing = false;
+      var pos = marker.getLatLng();
+      updatePosition(pos.lat,pos.lng);
+    });
+
+
+    btnGPS = domlib.newAt(el,'span');
+    btnGPS.classList.add('btn');
+    btnGPS.innerHTML = "Start follow position";
+    btnGPS.addEventListener('click',function(){
+      if(editLocationGPS){
+        if(btnGPS.innerHTML == "Stop following")
+          updatePosition();
+        btnGPS.innerHTML = "Start follow position";
+        navigator.geolocation.clearWatch(editLocationGPS);
+        editLocationGPS = false;
+        return;
+      }
+      btnGPS.innerHTML = 'Following position';
+      if (!!navigator.geolocation)
+        editLocationGPS = navigator.geolocation.watchPosition(
+          function geo_success(position) {
+              btnGPS.innerHTML = "Stop following";
+              storePosition = position.coords;
+              var latlng = [position.coords.latitude, position.coords.longitude];
+              marker.setLatLng(latlng);
+              map.setView(latlng);
+          },
+          function geo_error(error) {
+            switch (error.code) {
+              case error.TIMEOUT:
+                notify.send("error","Find Location timeout");
+                break;
+            };
+          },
+          {
+            enableHighAccuracy: true,
+            maximumAge: 30000,
+            timeout: 27000
+          });
+      else
+        notify.send("error","Browser did not support Location")
+    });
+
+
     update();
   }
 })()

webroot/js/leaflet-webgl-heatmap.min.js

@@ -0,0 +1,6 @@
+/*
+ * MIT Copyright 2016 Ursudio <info@ursudio.com>
+ * http://www.ursudio.com/
+ * Please attribute Ursudio in any production associated with this JavaScript plugin.
+ */
+L.WebGLHeatMap=L.Renderer.extend({version:"0.2.2",options:{size:3e4,units:"m",opacity:1,gradientTexture:!1,alphaRange:1,padding:0},_initContainer:function(){var t=this._container=L.DomUtil.create("canvas","leaflet-zoom-animated"),i=this.options;t.id="webgl-leaflet-"+L.Util.stamp(this),t.style.opacity=i.opacity,t.style.position="absolute";try{this.gl=window.createWebGLHeatmap({canvas:t,gradientTexture:i.gradientTexture,alphaRange:[0,i.alphaRange]})}catch(t){console.error(t),this.gl={clear:function(){},update:function(){},multiply:function(){},addPoint:function(){},display:function(){},adjustSize:function(){}}}this._container=t},onAdd:function(){this.size=this.options.size,L.Renderer.prototype.onAdd.call(this),this.resize()},getEvents:function(){var t=L.Renderer.prototype.getEvents.call(this);return L.Util.extend(t,{resize:this.resize,move:L.Util.throttle(this._update,49,this)}),t},resize:function(){var t=this._container,i=this._map.getSize();t.width=i.x,t.height=i.y,this.gl.adjustSize(),this.draw()},reposition:function(){var t=this._map._getMapPanePos().multiplyBy(-1);L.DomUtil.setPosition(this._container,t)},_update:function(){L.Renderer.prototype._update.call(this),this.draw()},draw:function(){var t=this._map,i=this.gl,e=this.data,a=e.length,n=Math.floor,s=this["_scale"+this.options.units].bind(this),o=this._multiply;if(t){if(i.clear(),this.reposition(),a){for(var r=0;r<a;r++){var l=e[r],h=L.latLng(l),u=t.latLngToContainerPoint(h);i.addPoint(n(u.x),n(u.y),s(h),l[2])}i.update(),o&&(i.multiply(o),i.update())}i.display()}},_scalem:function(t){var i=this._map,e=this.size/40075017*360/Math.cos(Math.PI/180*t.lat),a=new L.LatLng(t.lat,t.lng-e),n=i.latLngToLayerPoint(t),s=i.latLngToLayerPoint(a);return Math.max(Math.round(n.x-s.x),1)},_scalepx:function(){return this.size},data:[],addDataPoint:function(t,i,e){this.data.push([t,i,e/100])},setData:function(t){this.data=t,this._multiply=null,this.draw()},clear:function(){this.setData([])},multiply:function(t){this._multiply=t,this.draw()}}),L.webGLHeatmap=function(t){return new L.WebGLHeatMap(t)};