nodelist/linklist: sortable tables

lib/linklist.js

@@ -1,73 +1,56 @@
-define(["virtual-dom"],
-  function (V) {
-  return function(linkScale, router) {
-    var self = this
-    var el, tbody
+define(["sorttable", "virtual-dom"], function (SortTable, V) {
+  function linkName(d) {
+    return d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname
+  }
 
-    self.render = function (d)  {
-      el = document.createElement("div")
-      d.appendChild(el)
+  var headings = [{ name: "Knoten",
+                    sort: function (a, b) {
+                      return linkName(a).localeCompare(linkName(b))
+                    },
+                    reverse: false
+                  },
+                  { name: "TQ",
+                    sort: function (a, b) { return a.tq - b.tq},
+                    reverse: true
+                  },
+                  { name: "Entfernung",
+                    sort: function (a, b) {
+                      return (a.distance === undefined ? -1 : a.distance) -
+                             (b.distance === undefined ? -1 : b.distance)
+                    },
+                    reverse: true
+                  }]
+
+  return function(linkScale, router) {
+    var table = new SortTable(headings, 2, renderRow)
+
+    function renderRow(d) {
+      var td1Content = [V.h("a", {href: "#", onclick: router.link(d)}, linkName(d))]
+
+      if (d.vpn)
+        td1Content.push(" (VPN)")
+
+      var td1 = V.h("td", td1Content)
+      var td2 = V.h("td", {style: {color: linkScale(d.tq).hex()}}, showTq(d))
+      var td3 = V.h("td", showDistance(d))
+
+      return V.h("tr", [td1, td2, td3])
     }
 
-    self.setData = function (data) {
-      if (data.graph.links.length === 0)
-        return
+    this.render = function (d)  {
+      var el = document.createElement("div")
+      el.last = V.h("div")
+      d.appendChild(el)
 
-      if (!tbody) {
-        var h2 = document.createElement("h2")
-        h2.textContent = "Verbindungen"
-        el.appendChild(h2)
+      var h2 = document.createElement("h2")
+      h2.textContent = "Verbindungen"
+      el.appendChild(h2)
 
-        var table = document.createElement("table")
-        el.appendChild(table)
+      el.appendChild(table.el)
+    }
 
-        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"
-        tr.appendChild(th3)
-
-        thead.appendChild(tr)
-        table.appendChild(thead)
-
-        tbody = document.createElement("tbody")
-        tbody.last = V.h("tbody")
-        table.appendChild(tbody)
-      }
-
-      var links = data.graph.links.slice(0).sort( function (a, b) {
-        a = a.distance === undefined ? -1 : a.distance
-        b = b.distance === undefined ? -1 : b.distance
-
-        return b - a
-      })
-
-      var items = links.map( function (d) {
-        var name = d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname
-        var td1Content = [V.h("a", {href: "#", onclick: router.link(d)}, name)]
-
-        if (d.vpn)
-          td1Content.push(" (VPN)")
-
-        var td1 = V.h("td", td1Content)
-        var td2 = V.h("td", {style: {color: linkScale(d.tq).hex()}}, showTq(d))
-        var td3 = V.h("td", showDistance(d))
-
-        return V.h("tr", [td1, td2, td3])
-      })
-
-      var tbodyNew = V.h("tbody", items)
-      tbody = V.patch(tbody, V.diff(tbody.last, tbodyNew))
-      tbody.last = tbodyNew
+    this.setData = function (d) {
+      table.setData(d.graph.links)
     }
   }
 })