nodelist/linklist: sortable tables

This commit is contained in:
Nils Schneider 2015-04-07 17:41:17 +02:00
parent aae9d4253e
commit 88bc4aafc5
4 changed files with 174 additions and 146 deletions

View file

@ -1,59 +1,31 @@
define(["virtual-dom"], define(["sorttable", "virtual-dom"], function (SortTable, V) {
function (V) { function linkName(d) {
return d.source.node.nodeinfo.hostname + " " + d.target.node.nodeinfo.hostname
}
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) { return function(linkScale, router) {
var self = this var table = new SortTable(headings, 2, renderRow)
var el, tbody
self.render = function (d) { function renderRow(d) {
el = document.createElement("div") var td1Content = [V.h("a", {href: "#", onclick: router.link(d)}, linkName(d))]
d.appendChild(el)
}
self.setData = function (data) {
if (data.graph.links.length === 0)
return
if (!tbody) {
var h2 = document.createElement("h2")
h2.textContent = "Verbindungen"
el.appendChild(h2)
var table = document.createElement("table")
el.appendChild(table)
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) if (d.vpn)
td1Content.push(" (VPN)") td1Content.push(" (VPN)")
@ -63,11 +35,22 @@ define(["virtual-dom"],
var td3 = V.h("td", showDistance(d)) var td3 = V.h("td", showDistance(d))
return V.h("tr", [td1, td2, td3]) return V.h("tr", [td1, td2, td3])
}) }
var tbodyNew = V.h("tbody", items) this.render = function (d) {
tbody = V.patch(tbody, V.diff(tbody.last, tbodyNew)) var el = document.createElement("div")
tbody.last = tbodyNew el.last = V.h("div")
d.appendChild(el)
var h2 = document.createElement("h2")
h2.textContent = "Verbindungen"
el.appendChild(h2)
el.appendChild(table.el)
}
this.setData = function (d) {
table.setData(d.graph.links)
} }
} }
}) })

View file

@ -1,13 +1,12 @@
define(["virtual-dom"], define(["sorttable", "virtual-dom", "numeral"], function (SortTable, V, numeral) {
function (V) { function getUptime(now, d) {
return function(router) {
function showUptime(now, d) {
var uptime
if (d.flags.online && "uptime" in d.statistics) if (d.flags.online && "uptime" in d.statistics)
uptime = Math.round(d.statistics.uptime / 3600) return Math.round(d.statistics.uptime / 3600)
else if (!d.flags.online && "lastseen" in d) else if (!d.flags.online && "lastseen" in d)
uptime = Math.round(-(now - d.lastseen) / 3600000) return Math.round(-(now - d.lastseen) / 3600000)
}
function showUptime(uptime) {
var s = "" var s = ""
if (uptime !== undefined) if (uptime !== undefined)
@ -16,57 +15,29 @@ define(["virtual-dom"],
else else
s = uptime + "h" s = uptime + "h"
return {v: s, sort: uptime !== undefined ? -uptime : 0} return s
} }
var self = this var headings = [{ name: "Knoten",
var el, tbody sort: function (a, b) {
self.render = function (d) {
el = document.createElement("div")
d.appendChild(el)
}
self.setData = function (data) {
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")
var th1 = document.createElement("th")
th1.textContent = "Knoten"
tr.appendChild(th1)
var th2 = document.createElement("th")
th2.textContent = "Uptime"
tr.appendChild(th2)
var th3 = document.createElement("th")
th3.textContent = "Clients"
tr.appendChild(th3)
thead.appendChild(tr)
table.appendChild(thead)
tbody = document.createElement("tbody")
tbody.last = V.h("tbody")
table.appendChild(tbody)
}
var nodes = data.nodes.all.slice(0).sort( function (a, b) {
return a.nodeinfo.hostname.localeCompare(b.nodeinfo.hostname) return a.nodeinfo.hostname.localeCompare(b.nodeinfo.hostname)
}) },
reverse: false
},
{ name: "Uptime",
sort: function (a, b) { return a.uptime - b.uptime},
reverse: true
},
{ name: "Clients",
sort: function (a, b) {
return ("clients" in a.statistics ? a.statistics.clients : -1) -
("clients" in b.statistics ? b.statistics.clients : -1)
},
reverse: true
}]
var items = nodes.map( function (d) { return function(router) {
function renderRow(d) {
var td1Content = [] var td1Content = []
var aClass = ["hostname", d.flags.online ? "online" : "offline"] var aClass = ["hostname", d.flags.online ? "online" : "offline"]
@ -78,18 +49,34 @@ define(["virtual-dom"],
if (has_location(d)) if (has_location(d))
td1Content.push(V.h("span", {className: "icon ion-location"})) td1Content.push(V.h("span", {className: "icon ion-location"}))
var uptime = showUptime(data.now, d)
var td1 = V.h("td", td1Content) var td1 = V.h("td", td1Content)
var td2 = V.h("td", uptime.v) var td2 = V.h("td", showUptime(d.uptime))
var td3 = V.h("td", "clients" in d.statistics ? d.statistics.clients : "") var td3 = V.h("td", numeral("clients" in d.statistics ? d.statistics.clients : "").format("0,0"))
return V.h("tr", [td1, td2, td3]) return V.h("tr", [td1, td2, td3])
}
var table = new SortTable(headings, 0, renderRow)
this.render = function (d) {
var el = document.createElement("div")
d.appendChild(el)
var h2 = document.createElement("h2")
h2.textContent = "Alle Knoten"
el.appendChild(h2)
el.appendChild(table.el)
}
this.setData = function (d) {
var data = d.nodes.all.map(function (e) {
var n = Object.create(e)
n.uptime = getUptime(d.now, e)
return n
}) })
var tbodyNew = V.h("tbody", items) table.setData(data)
tbody = V.patch(tbody, V.diff(tbody.last, tbodyNew))
tbody.last = tbodyNew
} }
} }
}) })

57
lib/sorttable.js Normal file
View file

@ -0,0 +1,57 @@
define(["virtual-dom"], function (V) {
return function(headings, sortIndex, renderRow) {
var data
var sortReverse = false
var el = document.createElement("table")
var elLast = V.h("table")
function sortTable(i) {
sortReverse = i === sortIndex ? !sortReverse : false
sortIndex = i
updateView()
}
function sortTableHandler(i) {
return function () { sortTable(i) }
}
function updateView() {
var children = []
if (data.length !== 0) {
var th = headings.map(function (d, i) {
var properties = { onclick: sortTableHandler(i),
className: "sort-header"
}
if (sortIndex === i)
properties.className += sortReverse ? " sort-up" : " sort-down"
return V.h("th", properties, d.name)
})
var links = data.slice(0).sort(headings[sortIndex].sort)
if (headings[sortIndex].reverse ? !sortReverse : sortReverse)
links = links.reverse()
children.push(V.h("thead", V.h("tr", th)))
children.push(V.h("tbody", links.map(renderRow)))
}
var elNew = V.h("table", children)
el = V.patch(el, V.diff(elLast, elNew))
elLast = elNew
}
this.setData = function (d) {
data = d
updateView()
}
this.el = el
return this
}
})

View file

@ -19,7 +19,8 @@ module.exports = function (grunt) {
"strict": [2, "never"], "strict": [2, "never"],
"no-multi-spaces": 0, "no-multi-spaces": 0,
"no-new": 0, "no-new": 0,
"no-shadow": 0 "no-shadow": 0,
"no-use-before-define": [1, "nofunc"]
} }
}, },
sources: { sources: {