137 lines
4.4 KiB
JavaScript
137 lines
4.4 KiB
JavaScript
define(['leaflet','leaflet.label','controller/sidebar'],function(leaflet,leaflet_label,Sidebar){
|
|
var data,currentNode
|
|
return function(el,config){
|
|
var mapEl = document.createElement("div")
|
|
mapEl.classList.add("map")
|
|
|
|
var sideBarEl = document.createElement("div")
|
|
var bar = Sidebar(sideBarEl,config)
|
|
|
|
var map = leaflet.map(mapEl,{zoomControl:false}).setView([51.505, -0.09], 13)
|
|
var layergeojson,layernodes
|
|
|
|
|
|
|
|
leaflet.tileLayer(
|
|
config.map.tiles.url,
|
|
config.map.tiles.option).addTo(map)
|
|
map.setView(config.map.view,config.map.zoom)
|
|
|
|
var geoJsonOption = {
|
|
pointToLayer: function (feature, latlng){
|
|
feature.properties.radius = 10
|
|
return leaflet.circleMarker(latlng, feature.properties)
|
|
},
|
|
onEachFeature: function(feature, layer) {
|
|
if(feature.properties.name.length >0)
|
|
layer.bindLabel(feature.properties.name)
|
|
},
|
|
style: function(feature){
|
|
if(feature.geometry.type === "LineString" || feature.geometry.type === "Polygon")
|
|
return {color: feature.properties.stroke,
|
|
opacity:feature.properties["stroke-opacity"],
|
|
fillColor: feature.properties.fill,
|
|
fillOpacity:feature.properties["fill-opacity"],
|
|
stroke: true,
|
|
weight: feature.properties["stroke-width"],
|
|
lineCap: "round",
|
|
lineJoin: "round"}
|
|
return {
|
|
color: feature.properties["marker-color"],
|
|
fillColor: feature.properties["marker-color"],
|
|
fillOpacity: 0.2,
|
|
weight: 2,
|
|
stroke: true
|
|
}
|
|
}
|
|
}
|
|
|
|
nodeIcon = leaflet.divIcon({className: 'nodeicon'})
|
|
|
|
|
|
render = function(){
|
|
console.log("render")
|
|
if(layernodes)
|
|
layernodes.clearLayers()
|
|
if(layergeojson)
|
|
layergeojson.clearLayers()
|
|
if(data.geojson !== undefined){
|
|
layergeojson = leaflet.geoJson(data.geojson,geoJsonOption).addTo(map)
|
|
map._onResize()
|
|
}
|
|
|
|
var nodes = Object.keys(data.nodes).filter(function(key){
|
|
return data.nodes[key].nodeinfo !== undefined && data.nodes[key].nodeinfo.location !== undefined
|
|
}).map(function(key){
|
|
node = data.nodes[key]
|
|
var m = leaflet.marker([node.nodeinfo.location.latitude,node.nodeinfo.location.longitude],{
|
|
draggable: true,
|
|
icon: nodeIcon
|
|
})
|
|
|
|
var className = 'nodeicon'
|
|
if(node.flags !== undefined && !node.flags.online)
|
|
className += ' offline'
|
|
var wifi24="-",wifi5="-",ch24="-",ch5="-",tx24="-",tx5="-"
|
|
if(node.statistics !== undefined && node.statistics.clients !== undefined){
|
|
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'
|
|
}
|
|
if(node.nodeinfo.wireless !== undefined){
|
|
ch24 = (node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-'
|
|
ch5 = (node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'
|
|
tx24 = (node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-'
|
|
tx5 = (node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-'
|
|
}
|
|
m.bindLabel(node.nodeinfo.hostname+" <div class=\"nodeicon-label\">("+key+")"+
|
|
"<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>"
|
|
)
|
|
if(currentNode && currentNode == key){
|
|
className += ' select'
|
|
map.setView(m.getLatLng(),config.map.zoom)
|
|
bar.setSelected(key)
|
|
}
|
|
m.setIcon(leaflet.divIcon({className: className}))
|
|
m.on("click", function(){
|
|
window.location.href = "#map/"+key
|
|
currentNode = key
|
|
render()
|
|
})
|
|
return m
|
|
})
|
|
layernodes = leaflet.featureGroup(nodes).addTo(map)
|
|
}
|
|
|
|
return {
|
|
storageNotify: function(d){
|
|
data = d
|
|
bar.storageNotify(d)
|
|
render()
|
|
},
|
|
controller: function(){
|
|
currentNode = arguments[0]
|
|
el.innerHTML = ""
|
|
el.appendChild(sideBarEl)
|
|
el.appendChild(mapEl)
|
|
}
|
|
}
|
|
}
|
|
})
|