123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275 |
- "use strict"
- define([ "lib/helper", "lib/gui/signalgraph", "lib/gui/signal"],
- function (Helper, SignalGraph, Signal) {
- var graphColors = ["#396AB1", "#DA7C30", "#3E9651", "#CC2529", "#535154", "#6B4C9A", "#922428", "#948B3D"]
- //graphColors = ["#7293CB", "#E1974C", "#84BA5B", "#D35E60", "#808585", "#9067A7", "#AB6857", "#CCC210"];
- var inactiveTime = 200
- function SignalEntry(graph, color, stream) {
- var signal = new Signal(color)
- var remove = graph.add(signal)
- var unsubscribe = stream.onValue(update)
- this.destroy = function () {
- unsubscribe()
- remove()
- }
- this.getSignal = function () {
- return signal
- }
- return this
- function update(d) {
- if ("wifi" in d)
- signal.set(d.wifi.inactive > inactiveTime ? null : d.wifi.signal)
- }
- }
- function TableEntry(parent, nodeInfo, color, stream, mgmtBus, signal) {
- var el = document.createElement("tr")
- parent.appendChild(el)
- var tdHostname = document.createElement("td")
- var tdTQ = document.createElement("td")
- var tdSignal = document.createElement("td")
- var tdDistance = document.createElement("td")
- var tdInactive = document.createElement("td")
- el.appendChild(tdHostname)
- el.appendChild(tdTQ)
- el.appendChild(tdSignal)
- el.appendChild(tdDistance)
- el.appendChild(tdInactive)
- var marker = document.createElement("span")
- marker.textContent = "⬤ "
- marker.style.color = color
- tdHostname.appendChild(marker)
- var hostname = document.createElement("span")
- tdHostname.appendChild(hostname)
- var infoSet = false
- var unsubscribe = stream.onValue(update)
- el.onmouseenter = function () {
- el.classList.add("highlight")
- signal.setHighlight(true)
- }
- el.onmouseleave = function () {
- el.classList.remove("highlight")
- signal.setHighlight(false)
- }
- el.destroy = function () {
- unsubscribe()
- parent.removeChild(el)
- }
- return el
- function update(d) {
- if ("wifi" in d) {
- var signal = d.wifi.signal
- var inactive = d.wifi.inactive
- el.classList.toggle("inactive", inactive > inactiveTime)
- tdSignal.textContent = signal
- tdInactive.textContent = Math.round(inactive / 1000) + " s"
- }
- if ("batadv" in d)
- tdTQ.textContent = Math.round(d.batadv.tq / 2.55) + " %"
- else
- tdTQ.textContent = "‒"
- if (infoSet)
- return
- if ("nodeInfo" in d) {
- infoSet = true
- var link = document.createElement("a")
- link.textContent = d.nodeInfo.hostname
- link.href = "#"
- link.nodeInfo = d.nodeInfo
- link.onclick = function () {
- mgmtBus.pushEvent("goto", this.nodeInfo)
- return false
- }
- while (hostname.firstChild)
- hostname.removeChild(hostname.firstChild)
- hostname.appendChild(link)
- try {
- var distance = Helper.haversine(nodeInfo.location.latitude, nodeInfo.location.longitude,
- d.nodeInfo.location.latitude, d.nodeInfo.location.longitude)
- tdDistance.textContent = Math.round(distance * 1000) + " m"
- } catch (e) {
- tdDistance.textContent = "‒"
- }
- } else
- hostname.textContent = d.id
- }
- }
- function Interface(parent, nodeInfo, iface, stream, mgmtBus) {
- var colors = graphColors.slice(0)
- var el = document.createElement("div")
- el.ifname = iface
- parent.appendChild(el)
- var h = document.createElement("h3")
- h.textContent = iface
- el.appendChild(h)
- var table = document.createElement("table")
- var tr = document.createElement("tr")
- table.appendChild(tr)
- table.classList.add("datatable")
- var th = document.createElement("th")
- th.textContent = "Knoten"
- tr.appendChild(th)
- th = document.createElement("th")
- th.textContent = "TQ"
- tr.appendChild(th)
- th = document.createElement("th")
- th.textContent = "dBm"
- tr.appendChild(th)
- th = document.createElement("th")
- th.textContent = "Entfernung"
- tr.appendChild(th)
- th = document.createElement("th")
- th.textContent = "Inaktiv"
- tr.appendChild(th)
- el.appendChild(table)
- var wrapper = document.createElement("div")
- wrapper.className = "signalgraph"
- el.appendChild(wrapper)
- var canvas = document.createElement("canvas")
- canvas.className = "signal-history"
- canvas.height = 200
- wrapper.appendChild(canvas)
- var graph = new SignalGraph(canvas, -100, 0, true)
- var stopStream = stream.skipDuplicates(sameKeys).onValue(update)
- var managedNeighbours = {}
- function update(d) {
- var notUpdated = new Set()
- var id
- for (id in managedNeighbours)
- notUpdated.add(id)
- for (id in d) {
- if (!(id in managedNeighbours)) {
- var neighbourStream = stream.map("." + id).filter( function (d) { return d !== undefined })
- var color = colors.shift()
- var signal = new SignalEntry(graph, color, neighbourStream)
- managedNeighbours[id] = { views: [ signal,
- new TableEntry(table, nodeInfo, color, neighbourStream, mgmtBus, signal.getSignal())
- ],
- color: color
- }
- }
- notUpdated.delete(id)
- }
- for (id in notUpdated) {
- managedNeighbours[id].views.forEach( function (d) { d.destroy() })
- colors.push(managedNeighbours[id].color)
- delete managedNeighbours[id]
- }
- }
- el.destroy = function () {
- stopStream()
- for (var id in managedNeighbours)
- managedNeighbours[id].views.forEach( function (d) { d.destroy() })
- el.removeChild(h)
- el.removeChild(wrapper)
- el.removeChild(table)
- }
- }
- function sameKeys(a, b) {
- a = Object.keys(a).sort()
- b = Object.keys(b).sort()
- return !(a < b || a > b)
- }
- return function (nodeInfo, stream, mgmtBus) {
- var stopStream, div
- function render(el) {
- div = document.createElement("div")
- el.appendChild(div)
- stopStream = stream.skipDuplicates(sameKeys).onValue(update)
- function update(d) {
- var have = {}
- var remove = []
- if (div.hasChildNodes()) {
- var children = div.childNodes
- for (var i = 0; i < children.length; i++) {
- var a = children[i]
- if (a.ifname in d)
- have[a.ifname] = true
- else {
- a.destroy()
- remove.push(a)
- }
- }
- }
- remove.forEach(function (d) { div.removeChild(d) })
- for (var k in d)
- if (!(k in have))
- new Interface(div, nodeInfo, k, stream.map("." + k), mgmtBus)
- }
- }
- function destroy() {
- stopStream()
- while (div.firstChild) {
- div.firstChild.destroy()
- div.removeChild(div.firstChild)
- }
- }
- return { title: document.createTextNode("Nachbarknoten")
- , render: render
- , destroy: destroy
- }
- }
- })
|