refactor linklist to its own module

lib/linklist.js

@@ -0,0 +1,75 @@
+define(function () {
+  return function(linkScale, gotoAnything) {
+    var self = this
+    var el
+
+    self.render = function (d)  {
+      el = document.createElement("div")
+      d.appendChild(el)
+    }
+
+    self.setData = function (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 = gotoAnything.link(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)
+    }
+  }
+})

lib/main.js

@@ -1,4 +1,5 @@
-require(["map", "sidebar", "meshstats", "infobox/main"], function (Map, Sidebar, Meshstats, Infobox) {
+require(["map", "sidebar", "meshstats", "linklist", "infobox/main"],
+function (Map, Sidebar, Meshstats, Linklist, Infobox) {
   main()
 
   function main() {
@@ -21,16 +22,19 @@ require(["map", "sidebar", "meshstats", "infobox/main"], function (Map, Sidebar,
       var meshstats = new Meshstats()
       sidebar.add(meshstats)
 
+      var linklist = new Linklist(linkScale, gotoAnything)
+      sidebar.add(linklist)
+
       var urls = [ config.dataPath + 'nodes.json',
                    config.dataPath + 'graph.json'
                  ]
 
       var p = Promise.all(urls.map(getJSON))
-      p.then(handle_data(config, linkScale, sidebar, meshstats, infobox, map, gotoAnything))
+      p.then(handle_data(config, linkScale, sidebar, meshstats, linklist, infobox, map, gotoAnything))
     })
   }
 
-  function handle_data(config, linkScale, sidebar, meshstats, infobox, map, gotoAnything) {
+  function handle_data(config, linkScale, sidebar, meshstats, linklist, infobox, map, gotoAnything) {
     return function (data) {
       var nodedict = data[0]
       var nodes = Object.keys(nodedict.nodes).map(function (key) { return nodedict.nodes[key] })
@@ -98,10 +102,10 @@ require(["map", "sidebar", "meshstats", "infobox/main"], function (Map, Sidebar,
 
       map.setData(linkScale, now, newnodes, lostnodes, onlinenodes, links)
       meshstats.setData(nodes)
+      linklist.setData(links)
 
       mkNodesList(sidebar.container, config.showContact, "firstseen", gotoAnything.node, "Neue Knoten", newnodes)
       mkNodesList(sidebar.container, config.showContact, "lastseen", gotoAnything.node, "Verschwundene Knoten", lostnodes)
-      mkLinkList(sidebar.container, linkScale, gotoAnything.link, links)
 
       var historyDict = { nodes: {}, links: {} }
 
@@ -123,70 +127,6 @@ require(["map", "sidebar", "meshstats", "infobox/main"], function (Map, Sidebar,
     }
   }
 
-  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