more refactoring (sidebar, meshstats)

lib/infobox/main.js

@@ -14,7 +14,7 @@ define(["infobox/link", "infobox/node"], function (Link, Node) {
       destroy()
 
       el = document.createElement("div")
-      sidebar.insertBefore(el, sidebar.firstChild)
+      sidebar.container.insertBefore(el, sidebar.container.firstChild)
 
       el.scrollIntoView(false)
       el.classList.add("infobox")

lib/main.js

@@ -1,4 +1,4 @@
-require(["map", "infobox/main"], function (Map, Infobox) {
+require(["map", "sidebar", "meshstats", "infobox/main"], function (Map, Sidebar, Meshstats, Infobox) {
   main()
 
   function main() {
@@ -7,9 +7,9 @@ require(["map", "infobox/main"], function (Map, Infobox) {
 
       var linkScale = chroma.scale(chroma.interpolate.bezier(['green', 'yellow', 'red'])).domain([1, 5])
 
-      var sidebar = mkSidebar(document.body)
+      var sidebar = new Sidebar(document.body)
 
-      var gotoAnything = new gotoBuilder(config)
+      var gotoAnything = new Router(config)
 
       var infobox = new Infobox(config, sidebar, gotoAnything)
       gotoAnything.addTarget(infobox)
@@ -18,17 +18,19 @@ require(["map", "infobox/main"], function (Map, Infobox) {
       document.body.insertBefore(map.div, document.body.firstChild)
       gotoAnything.addTarget(map)
 
+      var meshstats = new Meshstats()
+      sidebar.add(meshstats)
 
       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))
+      p.then(handle_data(config, linkScale, sidebar, meshstats, infobox, map, gotoAnything))
     })
   }
 
-  function handle_data(config, linkScale, sidebar, infobox, map, gotoAnything) {
+  function handle_data(config, linkScale, sidebar, meshstats, infobox, map, gotoAnything) {
     return function (data) {
       var nodedict = data[0]
       var nodes = Object.keys(nodedict.nodes).map(function (key) { return nodedict.nodes[key] })
@@ -94,12 +96,12 @@ require(["map", "infobox/main"], function (Map, Infobox) {
         d.target.node.neighbours.push({ node: d.source.node, link: d })
       })
 
-      map.setData(linkScale, sidebar, now, newnodes, lostnodes, onlinenodes, links)
+      map.setData(linkScale, now, newnodes, lostnodes, onlinenodes, links)
+      meshstats.setData(nodes)
 
-      showMeshstats(sidebar, nodes)
+      mkNodesList(sidebar.container, config.showContact, "firstseen", gotoAnything.node, "Neue Knoten", newnodes)
-      mkNodesList(sidebar, config.showContact, "firstseen", gotoAnything.node, "Neue Knoten", newnodes)
+      mkNodesList(sidebar.container, config.showContact, "lastseen", gotoAnything.node, "Verschwundene Knoten", lostnodes)
-      mkNodesList(sidebar, config.showContact, "lastseen", gotoAnything.node, "Verschwundene Knoten", lostnodes)
+      mkLinkList(sidebar.container, linkScale, gotoAnything.link, links)
-      mkLinkList(sidebar, linkScale, gotoAnything.link, links)
 
       var historyDict = { nodes: {}, links: {} }
 
@@ -121,31 +123,6 @@ require(["map", "infobox/main"], function (Map, Infobox) {
     }
   }
 
-  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
@@ -259,30 +236,6 @@ require(["map", "infobox/main"], function (Map, Infobox) {
     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 pushHistory(d) {
     var s = "#!"
 
@@ -320,7 +273,7 @@ require(["map", "infobox/main"], function (Map, Infobox) {
     }
   }
 
-  function gotoBuilder(config, nodes) {
+  function Router(config, nodes) {
     var targets = []
     var self = this
 

lib/map.js

@@ -76,7 +76,7 @@ define(function () {
     var nodeDict = {}
     var linkDict = {}
 
-    self.setData = function (linkScale, sidebar, now, newnodes, lostnodes, onlinenodes, links) {
+    self.setData = function (linkScale, now, newnodes, lostnodes, onlinenodes, links) {
       nodeDict = {}
       linkDict = {}
 

lib/meshstats.js

@@ -0,0 +1,34 @@
+define(function () {
+  return function () {
+    var self = this
+    var p
+
+    self.setData = function (nodes) {
+      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."))
+    }
+
+    self.render = function (el) {
+      var h2 = document.createElement("h2")
+      h2.textContent = "Übersicht"
+      el.appendChild(h2)
+
+      p = document.createElement("p")
+      el.appendChild(p)
+    }
+
+    return self
+  }
+})

lib/sidebar.js

@@ -0,0 +1,34 @@
+define([], function () {
+  return function (el) {
+    var self = this
+
+    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)
+
+    self.getWidth = function () {
+      var small = window.matchMedia("(max-width: 60em)");
+      return small.matches ? 0 : sidebar.offsetWidth
+    }
+
+    self.add = function (d) {
+      d.render(container)
+    }
+
+    self.container = container
+
+    return self
+  }
+})