diff --git a/app.js b/app.js index 1782431..aebbce3 100644 --- a/app.js +++ b/app.js @@ -10,6 +10,7 @@ require.config({ "d3": "../bower_components/d3/d3.min", "numeral": "../bower_components/numeraljs/min/numeral.min", "numeral-intl": "../bower_components/numeraljs/min/languages.min", + "virtual-dom": "../bower_components/virtual-dom/dist/virtual-dom", "helper": "../helper" }, shim: { diff --git a/bower.json b/bower.json index c15b14a..595bc34 100644 --- a/bower.json +++ b/bower.json @@ -21,7 +21,8 @@ "r.js": "~2.1.16", "d3": "~3.5.5", "numeraljs": "~1.5.3", - "roboto-fontface": "~0.3.0" + "roboto-fontface": "~0.3.0", + "virtual-dom": "~2.0.1" }, "authors": [ "Nils Schneider " diff --git a/lib/meshstats.js b/lib/meshstats.js index 3f4b195..c378ffa 100644 --- a/lib/meshstats.js +++ b/lib/meshstats.js @@ -1,7 +1,7 @@ define(function () { return function () { var self = this - var p + var stats, timestamp self.setData = function (d) { var totalNodes = sum(d.nodes.all.filter(online).map(one)) @@ -12,12 +12,11 @@ define(function () { return d.flags.gateway }).map(one)) - p.textContent = totalNodes + " Knoten (online), " + - totalClients + " Clients, " + - totalGateways + " Gateways" + stats.textContent = totalNodes + " Knoten (online), " + + totalClients + " Clients, " + + totalGateways + " Gateways" - p.appendChild(document.createElement("br")) - p.appendChild(document.createTextNode("Diese Daten sind von " + d.timestamp.format("LLLL") + ".")) + timestamp.textContent = "Diese Daten sind von " + d.timestamp.format("LLLL") + "." } self.render = function (el) { @@ -25,8 +24,13 @@ define(function () { h2.textContent = "Übersicht" el.appendChild(h2) - p = document.createElement("p") + var p = document.createElement("p") el.appendChild(p) + stats = document.createTextNode("") + p.appendChild(stats) + p.appendChild(document.createElement("br")) + timestamp = document.createTextNode("") + p.appendChild(timestamp) } return self diff --git a/lib/simplenodelist.js b/lib/simplenodelist.js index ce9d307..972bc6c 100644 --- a/lib/simplenodelist.js +++ b/lib/simplenodelist.js @@ -1,7 +1,7 @@ -define(["moment"], function (moment) { +define(["moment", "virtual-dom"], function (moment, V) { return function(config, nodes, field, router, title) { var self = this - var el + var el, tbody self.render = function (d) { el = document.createElement("div") @@ -11,52 +11,54 @@ define(["moment"], function (moment) { self.setData = function (data) { var list = data.nodes[nodes] - if (list.length === 0) + if (list.length === 0) { + while (el.firstChild) + el.removeChild(el.firstChild) + + tbody = null + return + } - var h2 = document.createElement("h2") - h2.textContent = title - el.appendChild(h2) - var table = document.createElement("table") - el.appendChild(table) + if (!tbody) { + var h2 = document.createElement("h2") + h2.textContent = title + el.appendChild(h2) - var tbody = document.createElement("tbody") + var table = document.createElement("table") + el.appendChild(table) - list.forEach( function (d) { - var time = moment(d[field]).fromNow() + tbody = document.createElement("tbody") + tbody.last = V.h("tbody") + table.appendChild(tbody) + } - 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 = router.node(d) - td1.appendChild(a) + var items = list.map( function (d) { + var time = moment(d[field]).from(data.now) + var td1Content = [] - if (has_location(d)) { - var span = document.createElement("span") - span.classList.add("icon") - span.classList.add("ion-location") - td1.appendChild(span) - } + var aClass = ["hostname", d.flags.online ? "online" : "offline"] - if ("owner" in d.nodeinfo && config.showContact) { - var contact = d.nodeinfo.owner.contact - td1.appendChild(document.createTextNode(" – " + contact + "")) - } + td1Content.push(V.h("a", { className: aClass.join(" "), + onclick: router.node(d), + href: "#" + }, d.nodeinfo.hostname)) - var td2 = document.createElement("td") - td2.textContent = time + if (has_location(d)) + td1Content.push(V.h("span", {className: "icon ion-location"})) - row.appendChild(td1) - row.appendChild(td2) - tbody.appendChild(row) + if ("owner" in d.nodeinfo && config.showContact) + td1Content.push(" - " + d.nodeinfo.owner.contact) + + var td1 = V.h("td", td1Content) + var td2 = V.h("td", time) + + return V.h("tr", [td1, td2]) }) - table.appendChild(tbody) - el.appendChild(table) + var tbodyNew = V.h("tbody", items) + tbody = V.patch(tbody, V.diff(tbody.last, tbodyNew)) + tbody.last = tbodyNew } return self