make nodelist.setData idempotent

lib/nodelist.js

@@ -1,6 +1,7 @@
-define(["tablesort", "tablesort.numeric"], function (Tablesort) {
+define(["tablesort", "virtual-dom", "tablesort.numeric"],
+  function (Tablesort, V) {
   return function(router) {
-    function showUptime(el, now, d) {
+    function showUptime(now, d) {
       var uptime
       if (d.flags.online && "uptime" in d.statistics)
         uptime = Math.round(d.statistics.uptime / 3600)
@@ -15,12 +16,11 @@ define(["tablesort", "tablesort.numeric"], function (Tablesort) {
         else
           s = uptime + "h"
 
-      el.textContent = s
+      return {v: s, sort: uptime !== undefined ? -uptime : 0}
-      el.setAttribute("data-sort", uptime !== undefined ? -uptime : 0)
     }
 
     var self = this
-    var el
+    var el, tbody, sort
 
     self.render = function (d) {
       el = document.createElement("div")
@@ -31,11 +31,14 @@ define(["tablesort", "tablesort.numeric"], function (Tablesort) {
       if (data.nodes.all.length === 0)
         return
 
+      if (!tbody) {
         var h2 = document.createElement("h2")
         h2.textContent = "Alle Knoten"
         el.appendChild(h2)
 
         var table = document.createElement("table")
+        el.appendChild(table)
+
         var thead = document.createElement("thead")
 
         var tr = document.createElement("tr")
@@ -53,47 +56,41 @@ define(["tablesort", "tablesort.numeric"], function (Tablesort) {
         tr.appendChild(th3)
 
         thead.appendChild(tr)
-
         table.appendChild(thead)
 
-      var tbody = document.createElement("tbody")
+        tbody = document.createElement("tbody")
-
+        tbody.last = V.h("tbody")
-      data.nodes.all.forEach( function (d) {
-        var row = document.createElement("tr")
-
-        var td1 = document.createElement("td")
-        var a = document.createElement("a")
-        a.textContent = d.nodeinfo.hostname
-        a.href = "#"
-        a.onclick = router.node(d)
-        a.classList.add("hostname")
-        a.classList.add(d.flags.online ? "online" : "offline")
-        td1.appendChild(a)
-        row.appendChild(td1)
-
-        if (has_location(d)) {
-          var span = document.createElement("span")
-          span.classList.add("icon")
-          span.classList.add("ion-location")
-          td1.appendChild(span)
-        }
-
-        var td2 = document.createElement("td")
-        showUptime(td2, data.now, d)
-        row.appendChild(td2)
-
-        var td3 = document.createElement("td")
-        td3.textContent = "clients" in d.statistics ? d.statistics.clients : ""
-        row.appendChild(td3)
-
-        tbody.appendChild(row)
-      })
-
         table.appendChild(tbody)
 
-      new Tablesort(table)
+        sort = new Tablesort(table)
+      }
 
-      el.appendChild(table)
+
+      var items = data.nodes.all.map( function (d) {
+        var td1Content = []
+        var aClass = ["hostname", d.flags.online ? "online" : "offline"]
+
+        td1Content.push(V.h("a", { className: aClass.join(" "),
+                                   onclick: router.node(d),
+                                   href: "#"
+                                 }, d.nodeinfo.hostname))
+
+        if (has_location(d))
+          td1Content.push(V.h("span", {className: "icon ion-location"}))
+
+        var uptime = showUptime(data.now, d)
+
+        var td1 = V.h("td", td1Content)
+        var td2 = V.h("td", {attributes: { "data-sort": uptime.sort }}, uptime.v)
+        var td3 = V.h("td", "clients" in d.statistics ? d.statistics.clients : "")
+
+        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
+      sort.refresh()
    }
   }
 })