diff --git a/lib/nodelist.js b/lib/nodelist.js index dabd48c..7d28905 100644 --- a/lib/nodelist.js +++ b/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 - el.setAttribute("data-sort", uptime !== undefined ? -uptime : 0) + return {v: s, sort: uptime !== undefined ? -uptime : 0} } var self = this - var el + var el, tbody, sort self.render = function (d) { el = document.createElement("div") @@ -31,69 +31,66 @@ define(["tablesort", "tablesort.numeric"], function (Tablesort) { if (data.nodes.all.length === 0) return - var h2 = document.createElement("h2") - h2.textContent = "Alle Knoten" - el.appendChild(h2) + if (!tbody) { + var h2 = document.createElement("h2") + h2.textContent = "Alle Knoten" + el.appendChild(h2) - var table = document.createElement("table") - var thead = document.createElement("thead") + var table = document.createElement("table") + el.appendChild(table) - var tr = document.createElement("tr") - var th1 = document.createElement("th") - th1.textContent = "Knoten" - th1.classList.add("sort-default") - tr.appendChild(th1) + var thead = document.createElement("thead") - var th2 = document.createElement("th") - th2.textContent = "Uptime" - tr.appendChild(th2) + var tr = document.createElement("tr") + var th1 = document.createElement("th") + th1.textContent = "Knoten" + th1.classList.add("sort-default") + tr.appendChild(th1) - var th3 = document.createElement("th") - th3.textContent = "Clients" - tr.appendChild(th3) + var th2 = document.createElement("th") + th2.textContent = "Uptime" + tr.appendChild(th2) - thead.appendChild(tr) + var th3 = document.createElement("th") + th3.textContent = "Clients" + tr.appendChild(th3) - table.appendChild(thead) + thead.appendChild(tr) + table.appendChild(thead) - var tbody = document.createElement("tbody") + tbody = document.createElement("tbody") + tbody.last = V.h("tbody") + table.appendChild(tbody) - data.nodes.all.forEach( function (d) { - var row = document.createElement("tr") + sort = new Tablesort(table) + } - 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 items = data.nodes.all.map( function (d) { + var td1Content = [] + var aClass = ["hostname", d.flags.online ? "online" : "offline"] - var td2 = document.createElement("td") - showUptime(td2, data.now, d) - row.appendChild(td2) + td1Content.push(V.h("a", { className: aClass.join(" "), + onclick: router.node(d), + href: "#" + }, d.nodeinfo.hostname)) - var td3 = document.createElement("td") - td3.textContent = "clients" in d.statistics ? d.statistics.clients : "" - row.appendChild(td3) + if (has_location(d)) + td1Content.push(V.h("span", {className: "icon ion-location"})) - tbody.appendChild(row) + 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]) }) - table.appendChild(tbody) - - new Tablesort(table) - - el.appendChild(table) + var tbodyNew = V.h("tbody", items) + tbody = V.patch(tbody, V.diff(tbody.last, tbodyNew)) + tbody.last = tbodyNew + sort.refresh() } } })