From 0a90cdb76cc92df4ae46ecf3ea93db82dbc95b09 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Wed, 25 Mar 2015 15:33:36 +0100 Subject: [PATCH] more refactoring (sidebar, meshstats) --- lib/infobox/main.js | 2 +- lib/main.js | 73 ++++++++------------------------------------- lib/map.js | 2 +- lib/meshstats.js | 34 +++++++++++++++++++++ lib/sidebar.js | 34 +++++++++++++++++++++ 5 files changed, 83 insertions(+), 62 deletions(-) create mode 100644 lib/meshstats.js create mode 100644 lib/sidebar.js diff --git a/lib/infobox/main.js b/lib/infobox/main.js index 68245ac..f5e875b 100644 --- a/lib/infobox/main.js +++ b/lib/infobox/main.js @@ -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") diff --git a/lib/main.js b/lib/main.js index 9171cae..a05ee9b 100644 --- a/lib/main.js +++ b/lib/main.js @@ -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 diff --git a/lib/map.js b/lib/map.js index 91407cf..f8d431c 100644 --- a/lib/map.js +++ b/lib/map.js @@ -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 = {} diff --git a/lib/meshstats.js b/lib/meshstats.js new file mode 100644 index 0000000..9fb0f62 --- /dev/null +++ b/lib/meshstats.js @@ -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 + } +}) diff --git a/lib/sidebar.js b/lib/sidebar.js new file mode 100644 index 0000000..e356584 --- /dev/null +++ b/lib/sidebar.js @@ -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 + } +})