hopglass/lib/history.js

require(["map"], function (Map) {
  main()

  function main() {
    getJSON("config.json").then( function (config) {
      moment.locale("de")

      var linkScale = chroma.scale(chroma.interpolate.bezier(['green', 'yellow', 'red'])).domain([1, 5])

      var sidebar = mkSidebar(document.body)

      var map = new Map(sidebar)
      document.body.insertBefore(map.div, document.body.firstChild)

      var infobox = new Infobox(sidebar)
      var gotoAnything = new gotoBuilder(config, infobox, showNodeinfo, showLinkinfo)

      var urls = [ config.dataPath + 'nodes.json',
                   config.dataPath + 'graph.json'
                 ]

      var p = Promise.all(urls.map(getJSON))
      p.then(handle_data(config, linkScale, sidebar, infobox, map, gotoAnything))
    })
  }

  function handle_data(config, linkScale, sidebar, infobox, map, gotoAnything) {
    return function (data) {
      var nodedict = data[0]
      var nodes = Object.keys(nodedict.nodes).map(function (key) { return nodedict.nodes[key] })

      nodes = nodes.filter( function (d) {
        return "firstseen" in d && "lastseen" in d
      })

      nodes.forEach( function(node) {
        node.firstseen = moment.utc(node.firstseen)
        node.lastseen = moment.utc(node.lastseen)
      })

      var now = moment()
      var age = moment(now).subtract(14, 'days')

      var newnodes = limit("firstseen", age, sortByKey("firstseen", nodes).filter(online))
      var lostnodes = limit("lastseen", age, sortByKey("lastseen", nodes).filter(offline))

      var onlinenodes = nodes.filter(online)

      var graph = data[1].batadv
      var graphnodes = data[0].nodes

      graph.nodes.forEach( function (d) {
        if (d.node_id in graphnodes)
          d.node = graphnodes[d.node_id]
      })

      graph.links.forEach( function (d) {
        if (graph.nodes[d.source].node)
          d.source = graph.nodes[d.source]
        else
          d.source = undefined

        if (graph.nodes[d.target].node)
          d.target = graph.nodes[d.target]
        else
          d.target = undefined
      })

      var links = graph.links.filter( function (d) {
        return d.source !== undefined && d.target !== undefined
      })

      links.forEach( function (d) {
        if (!("location" in d.source.node.nodeinfo && "location" in d.target.node.nodeinfo))
          return

        d.latlngs = []
        d.latlngs.push(L.latLng(d.source.node.nodeinfo.location.latitude, d.source.node.nodeinfo.location.longitude))
        d.latlngs.push(L.latLng(d.target.node.nodeinfo.location.latitude, d.target.node.nodeinfo.location.longitude))

        d.distance = d.latlngs[0].distanceTo(d.latlngs[1])
      })

      nodes.forEach( function (d) {
        d.neighbours = []
      })

      links.forEach( function (d) {
        d.source.node.neighbours.push({ node: d.target.node, link: d })
        d.target.node.neighbours.push({ node: d.source.node, link: d })
      })

      map.setData(linkScale, sidebar, now, newnodes, lostnodes, onlinenodes, links, gotoAnything)

      gotoAnything.addTarget(map)

      showMeshstats(sidebar, nodes)
      mkNodesList(sidebar, config.showContact, "firstseen", gotoAnything.node, "Neue Knoten", newnodes)
      mkNodesList(sidebar, config.showContact, "lastseen", gotoAnything.node, "Verschwundene Knoten", lostnodes)
      mkLinkList(sidebar, linkScale, gotoAnything.link, links)

      var historyDict = { nodes: {}, links: {} }

      nodes.forEach( function (d) {
        historyDict.nodes[d.nodeinfo.node_id] = d
      })

      links.forEach( function (d) {
        historyDict.links[linkId(d)] = d
      })

      gotoAnything.reset()

      gotoHistory(gotoAnything, historyDict, window.location.hash)

      window.onpopstate = function (d) {
        gotoHistory(gotoAnything, historyDict, d.state)
      }
    }
  }

  function mkSidebar(el) {
    var sidebar = document.createElement("div")
    sidebar.classList.add("sidebar")
    el.appendChild(sidebar)

    var button = document.createElement("button")
    sidebar.appendChild(button)

    button.classList.add("sidebarhandle")
    button.onclick = function () {
      sidebar.classList.toggle("hidden")
    }

    var container = document.createElement("div")
    container.classList.add("container")
    sidebar.appendChild(container)

    container.getWidth = function () {
      var small = window.matchMedia("(max-width: 60em)");
      return small.matches ? 0 : sidebar.offsetWidth
    }

    return container
  }

  function mkLinkList(el, linkScale, gotoProxy, links) {
    if (links.length == 0)
      return

    var h2 = document.createElement("h2")
    h2.textContent = "Verbindungen"
    el.appendChild(h2)

    var table = document.createElement("table")
    var thead = document.createElement("thead")

    var tr = document.createElement("tr")
    var th1 = document.createElement("th")
    th1.textContent = "Knoten"
    tr.appendChild(th1)

    var th2 = document.createElement("th")
    th2.textContent = "TQ"
    tr.appendChild(th2)

    var th3 = document.createElement("th")
    th3.textContent = "Entfernung"
    th3.classList.add("sort-default")
    tr.appendChild(th3)

    thead.appendChild(tr)

    table.appendChild(thead)

    var tbody = document.createElement("tbody")

    links.forEach( function (d) {
      var row = document.createElement("tr")
      var td1 = document.createElement("td")
      var a = document.createElement("a")
      a.textContent = d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname
      a.href = "#"
      a.onclick = gotoProxy(d)
      td1.appendChild(a)
      row.appendChild(td1)

      if (d.vpn)
        td1.appendChild(document.createTextNode(" (VPN)"))

      var td2 = document.createElement("td")
      td2.textContent = showTq(d)
      td2.style.color = linkScale(d.tq)
      row.appendChild(td2)

      var td3 = document.createElement("td")
      td3.textContent = showDistance(d)
      td3.setAttribute("data-sort", d.distance !== undefined ? -d.distance : 1)
      row.appendChild(td3)

      tbody.appendChild(row)
    })

    table.appendChild(tbody)

    new Tablesort(table)

    el.appendChild(table)
  }

  function mkNodesList(el, showContact, tf, gotoProxy, title, list) {
    if (list.length == 0)
      return

    var h2 = document.createElement("h2")
    h2.textContent = title
    el.appendChild(h2)
    var table = document.createElement("table")
    el.appendChild(table)

    var tbody = document.createElement("tbody")

    list.forEach( function (d) {
      var time = moment(d[tf]).fromNow()

      var row = document.createElement("tr")
      var td1 = document.createElement("td")
      var a = document.createElement("a")
      a.classList.add("hostname")
      a.classList.add(d.flags.online ? "online" : "offline")
      a.textContent = d.nodeinfo.hostname
      a.href = "#"
      a.onclick = gotoProxy(d)
      td1.appendChild(a)

      if (has_location(d)) {
        var span = document.createElement("span")
        span.classList.add("icon")
        span.classList.add("ion-location")
        td1.appendChild(span)
      }

      if ("owner" in d.nodeinfo && showContact) {
        var contact = d.nodeinfo.owner.contact
        td1.appendChild(document.createTextNode(" – " + contact + ""))
      }

      var td2 = document.createElement("td")
      td2.textContent = time

      row.appendChild(td1)
      row.appendChild(td2)
      tbody.appendChild(row)
    })

    table.appendChild(tbody)
    el.appendChild(table)
  }

  function showMeshstats(el, nodes) {
    var h2 = document.createElement("h2")
    h2.textContent = "Übersicht"
    el.appendChild(h2)

    var p = document.createElement("p")

    var totalNodes = sum(nodes.filter(online).map(one))
    var totalClients = sum(nodes.filter(online).map( function (d) {
      return d.statistics.clients
    }))
    var totalGateways = sum(nodes.filter(online).filter( function (d) {
      return d.flags.gateway
    }).map(one))

    p.textContent = totalNodes + " Knoten (online), " +
                    totalClients + " Clients, " +
                    totalGateways + " Gateways"

    p.appendChild(document.createElement("br"))
    p.appendChild(document.createTextNode("Diese Daten sind " + moment.utc(nodes.timestamp).fromNow(true) + " alt."))
    el.appendChild(p)
  }

  function Infobox(sidebar) {
    var gotoAnything
    var self = this
    el = undefined

    function close() {
      gotoAnything.reset()
      destroy()
      pushHistory()
    }

    function destroy() {
      if (el && el.parentNode) {
        el.parentNode.removeChild(el)
        el = undefined
      }
    }

    self.create = function () {
      destroy()

      el = document.createElement("div")
      sidebar.insertBefore(el, sidebar.firstChild)

      el.scrollIntoView(false)
      el.classList.add("infobox")
      el.close = close
      el.destroy = destroy

      var closeButton = document.createElement("button")
      closeButton.classList.add("close")
      closeButton.onclick = close
      el.appendChild(closeButton)

      return el
    }

    self.setGoto = function (d) {
      gotoAnything = d
    }

    return self
  }

  function showNodeinfo(config, infobox, gotoAnything, d) {
    var el = infobox.create()

    var h2 = document.createElement("h2")
    h2.textContent = d.nodeinfo.hostname
    var span = document.createElement("span")
    span.classList.add(d.flags.online ? "online" : "offline")
    span.textContent = " (" + (d.flags.online ? "online" : "offline, " + d.lastseen.fromNow(true)) + ")"
    h2.appendChild(span)
    el.appendChild(h2)

    var attributes = document.createElement("table")
    attributes.classList.add("attributes")

    attributeEntry(attributes, "Gateway", d.flags.gateway ? "ja" : null)
    attributeEntry(attributes, "In der Karte", has_location(d) ? "ja" : "nein")

    if (config.showContact)
      attributeEntry(attributes, "Kontakt", dictGet(d.nodeinfo, ["owner", "contact"]))

    attributeEntry(attributes, "Hardware",  dictGet(d.nodeinfo, ["hardware", "model"]))
    attributeEntry(attributes, "Primäre MAC", dictGet(d.nodeinfo, ["network", "mac"]))
    attributeEntry(attributes, "Firmware", showFirmware(d))
    attributeEntry(attributes, "Uptime", showUptime(d))
    attributeEntry(attributes, "Teil des Netzes", showFirstseen(d))
    attributeEntry(attributes, "Arbeitsspeicher", showRAM(d))
    attributeEntry(attributes, "IP Adressen", showIPs(d))
    attributeEntry(attributes, "Clients", showClients(d))
    el.appendChild(attributes)

    if (d.neighbours.length > 0) {
      var h3 = document.createElement("h3")
      h3.textContent = "Nachbarknoten (" + d.neighbours.length + ")"
      el.appendChild(h3)

      var table = document.createElement("table")
      var thead = document.createElement("thead")

      var tr = document.createElement("tr")
      var th1 = document.createElement("th")
      th1.textContent = "Knoten"
      th1.classList.add("sort-default")
      tr.appendChild(th1)

      var th2 = document.createElement("th")
      th2.textContent = "TQ"
      tr.appendChild(th2)

      var th3 = document.createElement("th")
      th3.textContent = "Entfernung"
      tr.appendChild(th3)

      thead.appendChild(tr)
      table.appendChild(thead)

      var tbody = document.createElement("tbody")

      d.neighbours.forEach( function (d) {
        var tr = document.createElement("tr")

        var td1 = document.createElement("td")
        var a1 = document.createElement("a")
        a1.classList.add("hostname")
        a1.textContent = d.node.nodeinfo.hostname
        a1.href = "#"
        a1.onclick = gotoAnything.node(d.node)
        td1.appendChild(a1)

        if (d.link.vpn)
          td1.appendChild(document.createTextNode(" (VPN)"))

        if (has_location(d.node)) {
          var span = document.createElement("span")
          span.classList.add("icon")
          span.classList.add("ion-location")
          td1.appendChild(span)
        }

        tr.appendChild(td1)

        var td2 = document.createElement("td")
        var a2 = document.createElement("a")
        a2.href = "#"
        a2.textContent = showTq(d.link)
        a2.onclick = gotoAnything.link(d.link)
        td2.appendChild(a2)
        tr.appendChild(td2)

        var td3 = document.createElement("td")
        var a3 = document.createElement("a")
        a3.href = "#"
        a3.textContent = showDistance(d.link)
        a3.onclick = gotoAnything.link(d.link)
        td3.appendChild(a3)
        td3.setAttribute("data-sort", d.link.distance !== undefined ? -d.link.distance : 1)
        tr.appendChild(td3)

        tbody.appendChild(tr)
      })

      table.appendChild(tbody)

      new Tablesort(table)

      el.appendChild(table)
    }

    function showFirmware(d) {
      var release = dictGet(d.nodeinfo, ["software", "firmware", "release"])
      var base = dictGet(d.nodeinfo, ["software", "firmware", "base"])

      if (release === null || base === null)
        return

      return release + " / " + base
    }

    function showUptime(d) {
      if (!("uptime" in d.statistics))
        return

      return moment.duration(d.statistics.uptime, "seconds").humanize()
    }

    function showFirstseen(d) {
      if (!("firstseen" in d))
        return

      return d.firstseen.fromNow(true)
    }

    function showClients(d) {
      if (!d.flags.online)
        return

      return function (el) {
        el.appendChild(document.createTextNode(d.statistics.clients > 0 ? d.statistics.clients : "keine"))
        el.appendChild(document.createElement("br"))

        var span = document.createElement("span")
        span.classList.add("clients")
        span.textContent = " ".repeat(d.statistics.clients)
        el.appendChild(span)
      }
    }

    function showIPs(d) {
      var ips = dictGet(d.nodeinfo, ["network", "addresses"])
      if (ips === null)
        return

      ips.sort()

      return function (el) {
        ips.forEach( function (ip, i) {
          var link = !ip.startsWith("fe80:")

          if (i > 0)
            el.appendChild(document.createElement("br"))

          if (link) {
            var a = document.createElement("a")
            a.href = "http://[" + ip + "]/"
            a.textContent = ip
            el.appendChild(a)
          } else
            el.appendChild(document.createTextNode(ip))
        })
      }
    }

    function showRAM(d) {
      if (!("memory_usage" in d.statistics))
        return

      return function (el) {
        el.appendChild(showBar("memory-usage", d.statistics.memory_usage))
      }
    }
  }

  function attributeEntry(el, label, value) {
    if (value === null || value == undefined)
      return

    var tr = document.createElement("tr")
    var th = document.createElement("th")
    th.textContent = label
    tr.appendChild(th)

    var td = document.createElement("td")

    if (typeof value == "function")
      value(td)
    else
      td.appendChild(document.createTextNode(value))

    tr.appendChild(td)

    el.appendChild(tr)

    return td
  }

  function showBar(className, v) {
    var span = document.createElement("span")
    span.classList.add("bar")
    span.classList.add(className)

    var bar = document.createElement("span")
    bar.style.width = (v * 100) + "%"
    span.appendChild(bar)

    var label = document.createElement("label")
    label.textContent = (Math.round(v * 100)) + " %"
    span.appendChild(label)

    return span
  }

  function showLinkinfo(config, infobox, gotoAnything, d) {
    var el = infobox.create()

    var h2 = document.createElement("h2")
    a1 = document.createElement("a")
    a1.href = "#"
    a1.onclick = gotoAnything.node(d.source.node)
    a1.textContent = d.source.node.nodeinfo.hostname
    h2.appendChild(a1)
    h2.appendChild(document.createTextNode(" – "))
    a2 = document.createElement("a")
    a2.href = "#"
    a2.onclick = gotoAnything.node(d.target.node)
    a2.textContent = d.target.node.nodeinfo.hostname
    h2.appendChild(a2)
    el.appendChild(h2)

    var attributes = document.createElement("table")
    attributes.classList.add("attributes")

    attributeEntry(attributes, "TQ", showTq(d))
    attributeEntry(attributes, "Entfernung", showDistance(d))
    attributeEntry(attributes, "VPN", d.vpn ? "ja" : "nein")

    el.appendChild(attributes)
  }

  function pushHistory(d) {
    var s = "#!"

    if (d) {
      if ("node" in d)
        s += "n:" + d.node.nodeinfo.node_id

      if ("link" in d)
        s += "l:" + linkId(d.link)
    }

    window.history.pushState(s, undefined, s)
  }

  function gotoHistory(gotoAnything, dict, s) {
    if (!s.startsWith("#!"))
      return

    s = s.slice(2)

    var args = s.split(":")

    if (args[0] === "n") {
      var id = args[1]

      if (id in dict.nodes)
        gotoAnything.node(dict.nodes[id], true, false)()
    }

    if (args[0] === "l") {
      var id = args[1]

      if (id in dict.links)
        gotoAnything.link(dict.links[id], true, false)()
    }
  }

  function gotoBuilder(config, infobox, nodes, links) {
    var targets = []
    var self = this

    infobox.setGoto(self)

    function resetView() {
      targets.forEach( function (t) {
        t.resetView()
      })
    }

    function gotoNode(d, showMap, push) {
      showMap = trueDefault(showMap)
      push = trueDefault(push)

      targets.forEach( function (t) {
        t.gotoNode(d)
      })

      nodes(config, infobox, self, d)

      if (push)
        pushHistory( { node: d })

      return false
    }

    function gotoLink(d, showMap, push) {
      showMap = trueDefault(showMap)
      push = trueDefault(push)

      targets.forEach( function (t) {
        t.gotoLink(d)
      })

      links(config, infobox, self, d)

      if (push)
        pushHistory( { link: d })

      return false
    }

    this.node = function (d, m, p) { return function () { return gotoNode(d, m, p) }}
    this.link = function (d, m, p) { return function () { return gotoLink(d, m, p) }}
    this.reset = resetView
    this.addMarkers = function (d) {
                        markers = d
                      }
    this.addTarget = function (d) { targets.push(d) }

    return this
  }
})