/* exported guiMap */ /* global config,store,domlib,socket */ const guiMap = {}; (function init () { 'use strict'; const view = guiMap, WINDOW_HEIGHT_MENU = 50; let container = null, el = null, geoJsonLayer = null, nodeLayer = null, clientLayer24 = null, clientLayer5 = null; // , draggingNodeID=null; function addNode (node) { /* eslint-disable-line https://github.com/Leaflet/Leaflet/issues/4484 if(node.node_id === draggingNodeID){ return } */ if (!node.location || !node.location.latitude || !node.location.longitude) { return; } let className = 'node', wifi24 = '-', wifi5 = '-'; const startdate = new Date(), ch24 = node.wireless.channel24 || '-', ch5 = node.wireless.channel5 || '-', tx24 = node.wireless.txpower24 || '-', tx5 = node.wireless.txpower5 || '-'; startdate.setMinutes(startdate.getMinutes() - config.node.offline); if (new Date(node.lastseen) < startdate) { className += ' offline'; } if (node.statistics && node.statistics.clients) { // eslint-disable-next-line prefer-destructuring 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'; } // eslint-disable-next-line prefer-destructuring wifi5 = node.statistics.clients.wifi5; if (wifi5 < config.map.icon.warn.wifi5 && 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'; } } // eslint-disable-next-line one-var const nodemarker = L.marker([node.location.latitude, node.location.longitude], { 'draggable': true, 'icon': L.divIcon({'className': className}) }); nodemarker.bindTooltip(`${node.hostname}
(${node.node_id})` + '' + '' + `` + `` + '
ClChTx
2.4G${wifi24}${ch24}${tx24}
5G${wifi5}${ch5}${tx5}
' + '
' ); /* Nodemarker.on('dragstart',function(){ draggingNodeID = node.node_id; }) */ nodemarker.on('dragend', () => { // DraggingNodeID = undefined; const pos = nodemarker.getLatLng(); node.location = { 'latitude': pos.lat, 'longitude': pos.lng }; socket.sendnode(node); }); nodeLayer.addLayer(nodemarker); } function update () { geoJsonLayer.refresh(); nodeLayer.clearLayers(); const nodes = store.getNodes(); for (let i = 0; i < nodes.length; i += 1) { addNode(nodes[i]); } clientLayer24.setData(nodes.map((node) => { if (!node.location || !node.location.latitude || !node.location.longitude) { return null; } return [node.location.latitude, node.location.longitude, node.statistics.clients.wifi24 || 0]; })); clientLayer5.setData(nodes.map((node) => { if (!node.location || !node.location.latitude || !node.location.longitude) { return null; } return [node.location.latitude, node.location.longitude, node.statistics.clients.wifi5 || 0]; })); } view.bind = function bind (bindEl) { container = bindEl; }; view.render = function render () { if (!container) { return; } else if (el) { container.appendChild(el); update(); return; } console.log('generate new view for map'); el = domlib.newAt(container, 'div'); el.style.height = `${window.innerHeight - WINDOW_HEIGHT_MENU}px`; const map = L.map(el).setView(config.map.view.bound, config.map.view.zoom), layerControl = L.control.layers().addTo(map); L.tileLayer(config.map.tileLayer, { 'maxZoom': config.map.maxZoom }).addTo(map); geoJsonLayer = L.geoJson.ajax(config.map.geojson.url, config.map.geojson); nodeLayer = L.layerGroup(); /* eslint-disable new-cap */ clientLayer24 = new L.webGLHeatmap(config.map.heatmap.wifi24); clientLayer5 = new L.webGLHeatmap(config.map.heatmap.wifi5); /* eslint-enable new-cap */ 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', () => { el.style.height = `${window.innerHeight - WINDOW_HEIGHT_MENU}px`; map.invalidateSize(); }); update(); }; })();