more refactoring (sidebar, meshstats)

This commit is contained in:
Nils Schneider 2015-03-25 15:33:36 +01:00
parent 2c57cff27f
commit 0a90cdb76c
5 changed files with 83 additions and 62 deletions

View File

@ -14,7 +14,7 @@ define(["infobox/link", "infobox/node"], function (Link, Node) {
destroy()
el = document.createElement("div")
sidebar.insertBefore(el, sidebar.firstChild)
sidebar.container.insertBefore(el, sidebar.container.firstChild)
el.scrollIntoView(false)
el.classList.add("infobox")

View File

@ -1,4 +1,4 @@
require(["map", "infobox/main"], function (Map, Infobox) {
require(["map", "sidebar", "meshstats", "infobox/main"], function (Map, Sidebar, Meshstats, Infobox) {
main()
function main() {
@ -7,9 +7,9 @@ require(["map", "infobox/main"], function (Map, Infobox) {
var linkScale = chroma.scale(chroma.interpolate.bezier(['green', 'yellow', 'red'])).domain([1, 5])
var sidebar = mkSidebar(document.body)
var sidebar = new Sidebar(document.body)
var gotoAnything = new gotoBuilder(config)
var gotoAnything = new Router(config)
var infobox = new Infobox(config, sidebar, gotoAnything)
gotoAnything.addTarget(infobox)
@ -18,17 +18,19 @@ require(["map", "infobox/main"], function (Map, Infobox) {
document.body.insertBefore(map.div, document.body.firstChild)
gotoAnything.addTarget(map)
var meshstats = new Meshstats()
sidebar.add(meshstats)
var urls = [ config.dataPath + 'nodes.json',
config.dataPath + 'graph.json'
]
var p = Promise.all(urls.map(getJSON))
p.then(handle_data(config, linkScale, sidebar, infobox, map, gotoAnything))
p.then(handle_data(config, linkScale, sidebar, meshstats, infobox, map, gotoAnything))
})
}
function handle_data(config, linkScale, sidebar, infobox, map, gotoAnything) {
function handle_data(config, linkScale, sidebar, meshstats, infobox, map, gotoAnything) {
return function (data) {
var nodedict = data[0]
var nodes = Object.keys(nodedict.nodes).map(function (key) { return nodedict.nodes[key] })
@ -94,12 +96,12 @@ require(["map", "infobox/main"], function (Map, Infobox) {
d.target.node.neighbours.push({ node: d.source.node, link: d })
})
map.setData(linkScale, sidebar, now, newnodes, lostnodes, onlinenodes, links)
map.setData(linkScale, now, newnodes, lostnodes, onlinenodes, links)
meshstats.setData(nodes)
showMeshstats(sidebar, nodes)
mkNodesList(sidebar, config.showContact, "firstseen", gotoAnything.node, "Neue Knoten", newnodes)
mkNodesList(sidebar, config.showContact, "lastseen", gotoAnything.node, "Verschwundene Knoten", lostnodes)
mkLinkList(sidebar, linkScale, gotoAnything.link, links)
mkNodesList(sidebar.container, config.showContact, "firstseen", gotoAnything.node, "Neue Knoten", newnodes)
mkNodesList(sidebar.container, config.showContact, "lastseen", gotoAnything.node, "Verschwundene Knoten", lostnodes)
mkLinkList(sidebar.container, linkScale, gotoAnything.link, links)
var historyDict = { nodes: {}, links: {} }
@ -121,31 +123,6 @@ require(["map", "infobox/main"], function (Map, Infobox) {
}
}
function mkSidebar(el) {
var sidebar = document.createElement("div")
sidebar.classList.add("sidebar")
el.appendChild(sidebar)
var button = document.createElement("button")
sidebar.appendChild(button)
button.classList.add("sidebarhandle")
button.onclick = function () {
sidebar.classList.toggle("hidden")
}
var container = document.createElement("div")
container.classList.add("container")
sidebar.appendChild(container)
container.getWidth = function () {
var small = window.matchMedia("(max-width: 60em)");
return small.matches ? 0 : sidebar.offsetWidth
}
return container
}
function mkLinkList(el, linkScale, gotoProxy, links) {
if (links.length == 0)
return
@ -259,30 +236,6 @@ require(["map", "infobox/main"], function (Map, Infobox) {
el.appendChild(table)
}
function showMeshstats(el, nodes) {
var h2 = document.createElement("h2")
h2.textContent = "Übersicht"
el.appendChild(h2)
var p = document.createElement("p")
var totalNodes = sum(nodes.filter(online).map(one))
var totalClients = sum(nodes.filter(online).map( function (d) {
return d.statistics.clients
}))
var totalGateways = sum(nodes.filter(online).filter( function (d) {
return d.flags.gateway
}).map(one))
p.textContent = totalNodes + " Knoten (online), " +
totalClients + " Clients, " +
totalGateways + " Gateways"
p.appendChild(document.createElement("br"))
p.appendChild(document.createTextNode("Diese Daten sind " + moment.utc(nodes.timestamp).fromNow(true) + " alt."))
el.appendChild(p)
}
function pushHistory(d) {
var s = "#!"
@ -320,7 +273,7 @@ require(["map", "infobox/main"], function (Map, Infobox) {
}
}
function gotoBuilder(config, nodes) {
function Router(config, nodes) {
var targets = []
var self = this

View File

@ -76,7 +76,7 @@ define(function () {
var nodeDict = {}
var linkDict = {}
self.setData = function (linkScale, sidebar, now, newnodes, lostnodes, onlinenodes, links) {
self.setData = function (linkScale, now, newnodes, lostnodes, onlinenodes, links) {
nodeDict = {}
linkDict = {}

34
lib/meshstats.js Normal file
View File

@ -0,0 +1,34 @@
define(function () {
return function () {
var self = this
var p
self.setData = function (nodes) {
var totalNodes = sum(nodes.filter(online).map(one))
var totalClients = sum(nodes.filter(online).map( function (d) {
return d.statistics.clients
}))
var totalGateways = sum(nodes.filter(online).filter( function (d) {
return d.flags.gateway
}).map(one))
p.textContent = totalNodes + " Knoten (online), " +
totalClients + " Clients, " +
totalGateways + " Gateways"
p.appendChild(document.createElement("br"))
p.appendChild(document.createTextNode("Diese Daten sind " + moment.utc(nodes.timestamp).fromNow(true) + " alt."))
}
self.render = function (el) {
var h2 = document.createElement("h2")
h2.textContent = "Übersicht"
el.appendChild(h2)
p = document.createElement("p")
el.appendChild(p)
}
return self
}
})

34
lib/sidebar.js Normal file
View File

@ -0,0 +1,34 @@
define([], function () {
return function (el) {
var self = this
var sidebar = document.createElement("div")
sidebar.classList.add("sidebar")
el.appendChild(sidebar)
var button = document.createElement("button")
sidebar.appendChild(button)
button.classList.add("sidebarhandle")
button.onclick = function () {
sidebar.classList.toggle("hidden")
}
var container = document.createElement("div")
container.classList.add("container")
sidebar.appendChild(container)
self.getWidth = function () {
var small = window.matchMedia("(max-width: 60em)");
return small.matches ? 0 : sidebar.offsetWidth
}
self.add = function (d) {
d.render(container)
}
self.container = container
return self
}
})