diff --git a/lib/linklist.js b/lib/linklist.js index a23100e..15024dc 100644 --- a/lib/linklist.js +++ b/lib/linklist.js @@ -1,7 +1,8 @@ -define(["tablesort", "tablesort.numeric"], function (Tablesort) { +define(["tablesort", "virtual-dom", "tablesort.numeric"], + function (Tablesort, V) { return function(linkScale, router) { var self = this - var el + var el, tbody, sort self.render = function (d) { el = document.createElement("div") @@ -12,64 +13,60 @@ define(["tablesort", "tablesort.numeric"], function (Tablesort) { if (data.graph.links.length === 0) return - var h2 = document.createElement("h2") - h2.textContent = "Verbindungen" - el.appendChild(h2) + if (!tbody) { + var h2 = document.createElement("h2") + h2.textContent = "Verbindungen" + 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" - tr.appendChild(th1) + var thead = document.createElement("thead") - var th2 = document.createElement("th") - th2.textContent = "TQ" - tr.appendChild(th2) + var tr = document.createElement("tr") + var th1 = document.createElement("th") + th1.textContent = "Knoten" + tr.appendChild(th1) - var th3 = document.createElement("th") - th3.textContent = "Entfernung" - th3.classList.add("sort-default") - tr.appendChild(th3) + var th2 = document.createElement("th") + th2.textContent = "TQ" + tr.appendChild(th2) - thead.appendChild(tr) + var th3 = document.createElement("th") + th3.textContent = "Entfernung" + th3.classList.add("sort-default") + 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.graph.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 = router.link(d) - td1.appendChild(a) - row.appendChild(td1) + sort = new Tablesort(table) + } + + var items = data.graph.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) - td1.appendChild(document.createTextNode(" (VPN)")) + td1Content.push(" (VPN)") - var td2 = document.createElement("td") - td2.textContent = showTq(d) - td2.style.color = linkScale(d.tq) - row.appendChild(td2) + var td1 = V.h("td", td1Content) + var td2 = V.h("td", {style: {color: linkScale(d.tq)}}, showTq(d)) + var td3 = V.h("td", {attributes: { + "data-sort": d.distance !== undefined ? -d.distance : 1 + }}, showDistance(d)) - 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) + 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() } } })