149 lines
4.5 KiB
JavaScript
149 lines
4.5 KiB
JavaScript
/* exported guiMap */
|
|
/* global config,store,domlib,socket */
|
|
|
|
var guiMap = {};
|
|
|
|
(function(){
|
|
var view = guiMap;
|
|
var container, el;
|
|
|
|
var geoJsonLayer, 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;
|
|
}
|
|
var className = 'node';
|
|
var startdate = new Date();
|
|
startdate.setMinutes(startdate.getMinutes() - 1);
|
|
if(new Date(node.lastseen) < startdate) {
|
|
className += ' offline';
|
|
}
|
|
var wifi24='-',wifi5='-',ch24='-',ch5='-',tx24='-',tx5='-';
|
|
if(node.statistics && node.statistics.clients){
|
|
wifi24 = node.statistics.clients.wifi24;
|
|
|
|
if(wifi24 < config.map.icon.warn.wifi24 && wifi24 > 0){
|
|
className += ' client24';
|
|
} else if(wifi24 < config.map.icon.crit.wifi24 && wifi24 >= config.map.icon.warn.wifi24){
|
|
className += ' client24-warn';
|
|
} else if(wifi24 >= config.map.icon.crit.wifi24){
|
|
className += ' client24-crit';
|
|
}
|
|
|
|
wifi5 = node.statistics.clients.wifi5;
|
|
if(config.map.icon.warn.wifi5 < 20 && wifi5 > 0){
|
|
className += ' client5';
|
|
} else if(wifi5 < config.map.icon.crit.wifi5 && wifi5 >= config.map.icon.warn.wifi5){
|
|
className += ' client5-warn';
|
|
} else if(wifi5 >= config.map.icon.crit.wifi5){
|
|
className += ' client5-crit';
|
|
}
|
|
}
|
|
|
|
var nodemarker = L.marker([node.location.latitude, node.location.longitude], {
|
|
icon: L.divIcon({className: className}),
|
|
draggable: true
|
|
});
|
|
nodemarker.bindTooltip(node.hostname+' <div class=\'nodeicon-label\'>('+node.node_id+')'+
|
|
'<table>'+
|
|
'<tr><th></th><th>Cl</th><th>Ch</th><th>Tx</th></tr>'+
|
|
'<tr><td>2.4G</td><td>'+wifi24+'</td><td>'+ch24+'</td><td>'+tx24+'</td></tr>'+
|
|
'<tr><td>5G</td><td>'+wifi5+'</td><td>'+ch5+'</td><td>'+tx5+'</td></tr>'+
|
|
'</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,
|
|
'longitude': pos.lng
|
|
};
|
|
socket.sendnode(node);
|
|
});
|
|
nodeLayer.addLayer(nodemarker);
|
|
}
|
|
|
|
function update() {
|
|
geoJsonLayer.refresh();
|
|
nodeLayer.clearLayers();
|
|
|
|
var nodes = store.getNodes();
|
|
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) {
|
|
container = el;
|
|
};
|
|
|
|
view.render = function render(){
|
|
if (container === undefined){
|
|
return;
|
|
} else if (el !== undefined){
|
|
container.appendChild(el);
|
|
update();
|
|
return;
|
|
}
|
|
console.log("generate new view for map");
|
|
el = domlib.newAt(container,'div');
|
|
|
|
el.style.height = (window.innerHeight - 50 )+"px";
|
|
|
|
var map = L.map(el).setView(config.map.view.bound, config.map.view.zoom);
|
|
|
|
L.tileLayer(config.map.tileLayer, {
|
|
maxZoom: config.map.maxZoom,
|
|
}).addTo(map);
|
|
|
|
var layerControl = L.control.layers().addTo(map);
|
|
|
|
|
|
geoJsonLayer = L.geoJson.ajax(config.map.geojson.url, config.map.geojson);
|
|
|
|
nodeLayer = L.layerGroup();
|
|
clientLayer24 = new L.webGLHeatmap(config.map.heatmap.wifi24);
|
|
clientLayer5 = new L.webGLHeatmap(config.map.heatmap.wifi5);
|
|
layerControl.addOverlay(geoJsonLayer,'geojson');
|
|
layerControl.addOverlay(nodeLayer,'Nodes');
|
|
layerControl.addOverlay(clientLayer24,'Clients 2.4 Ghz');
|
|
layerControl.addOverlay(clientLayer5,'Clients 5 Ghz');
|
|
nodeLayer.addTo(map);
|
|
|
|
window.addEventListener("resize",function(){
|
|
el.style.height = (window.innerHeight - 50 )+"px";
|
|
map.invalidateSize();
|
|
});
|
|
|
|
update();
|
|
};
|
|
})();
|