move GUI to its own module
This commit is contained in:
parent
61a58f11bc
commit
eded0eb19c
51
lib/gui.js
Normal file
51
lib/gui.js
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
|
||||||
|
"linklist", "nodelist", "simplenodelist", "infobox/main" ],
|
||||||
|
function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
|
||||||
|
Nodelist, SimpleNodelist, Infobox) {
|
||||||
|
return function (config, router) {
|
||||||
|
var self = this
|
||||||
|
var dataTargets = []
|
||||||
|
|
||||||
|
var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5])
|
||||||
|
var sidebar = new Sidebar(document.body)
|
||||||
|
var infobox = new Infobox(config, sidebar, router)
|
||||||
|
var tabs = new Tabs()
|
||||||
|
var overview = new Container()
|
||||||
|
|
||||||
|
var map = new Map(linkScale, sidebar, router)
|
||||||
|
document.body.insertBefore(map.div, document.body.firstChild)
|
||||||
|
|
||||||
|
var meshstats = new Meshstats()
|
||||||
|
var newnodeslist = new SimpleNodelist(config, "new", "firstseen", router, "Neue Knoten")
|
||||||
|
var lostnodeslist = new SimpleNodelist(config, "lost", "lastseen", router, "Verschwundene Knoten")
|
||||||
|
var nodelist = new Nodelist(router)
|
||||||
|
var linklist = new Linklist(linkScale, router)
|
||||||
|
|
||||||
|
dataTargets.push(map)
|
||||||
|
dataTargets.push(meshstats)
|
||||||
|
dataTargets.push(newnodeslist)
|
||||||
|
dataTargets.push(lostnodeslist)
|
||||||
|
dataTargets.push(nodelist)
|
||||||
|
dataTargets.push(linklist)
|
||||||
|
|
||||||
|
overview.add(meshstats)
|
||||||
|
overview.add(newnodeslist)
|
||||||
|
overview.add(lostnodeslist)
|
||||||
|
|
||||||
|
sidebar.add(tabs)
|
||||||
|
tabs.add("Übersicht", overview)
|
||||||
|
tabs.add("Alle Knoten", nodelist)
|
||||||
|
tabs.add("Verbindungen", linklist)
|
||||||
|
|
||||||
|
router.addTarget(infobox)
|
||||||
|
router.addTarget(map)
|
||||||
|
|
||||||
|
self.setData = function (data) {
|
||||||
|
dataTargets.forEach(function (d) {
|
||||||
|
d.setData(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return self
|
||||||
|
}
|
||||||
|
})
|
56
lib/main.js
56
lib/main.js
|
@ -1,47 +1,6 @@
|
||||||
define(["config", "moment", "chroma-js", "router", "map", "sidebar", "tabs", "container", "meshstats", "linklist", "nodelist", "simplenodelist", "infobox/main", "leaflet"],
|
define(["config", "moment", "router", "leaflet", "gui"],
|
||||||
function (config, moment, chroma, Router, Map, Sidebar, Tabs, Container, Meshstats, Linklist, Nodelist, SimpleNodelist, Infobox, L) {
|
function (config, moment, Router, L, GUI) {
|
||||||
return function () {
|
return function () {
|
||||||
var dataTargets = []
|
|
||||||
var router
|
|
||||||
|
|
||||||
function createGUI() {
|
|
||||||
moment.locale("de")
|
|
||||||
|
|
||||||
var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5])
|
|
||||||
var sidebar = new Sidebar(document.body)
|
|
||||||
var infobox = new Infobox(config, sidebar, router)
|
|
||||||
var tabs = new Tabs()
|
|
||||||
var overview = new Container()
|
|
||||||
|
|
||||||
var map = new Map(linkScale, sidebar, router)
|
|
||||||
document.body.insertBefore(map.div, document.body.firstChild)
|
|
||||||
|
|
||||||
var meshstats = new Meshstats()
|
|
||||||
var newnodeslist = new SimpleNodelist(config, "new", "firstseen", router, "Neue Knoten")
|
|
||||||
var lostnodeslist = new SimpleNodelist(config, "lost", "lastseen", router, "Verschwundene Knoten")
|
|
||||||
var nodelist = new Nodelist(router)
|
|
||||||
var linklist = new Linklist(linkScale, router)
|
|
||||||
|
|
||||||
dataTargets.push(map)
|
|
||||||
dataTargets.push(meshstats)
|
|
||||||
dataTargets.push(newnodeslist)
|
|
||||||
dataTargets.push(lostnodeslist)
|
|
||||||
dataTargets.push(nodelist)
|
|
||||||
dataTargets.push(linklist)
|
|
||||||
|
|
||||||
overview.add(meshstats)
|
|
||||||
overview.add(newnodeslist)
|
|
||||||
overview.add(lostnodeslist)
|
|
||||||
|
|
||||||
sidebar.add(tabs)
|
|
||||||
tabs.add("Übersicht", overview)
|
|
||||||
tabs.add("Alle Knoten", nodelist)
|
|
||||||
tabs.add("Verbindungen", linklist)
|
|
||||||
|
|
||||||
router.addTarget(infobox)
|
|
||||||
router.addTarget(map)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleData(data) {
|
function handleData(data) {
|
||||||
var nodes = Object.keys(data[0].nodes).map(function (key) { return data[0].nodes[key] })
|
var nodes = Object.keys(data[0].nodes).map(function (key) { return data[0].nodes[key] })
|
||||||
|
|
||||||
|
@ -115,8 +74,8 @@ function (config, moment, chroma, Router, Map, Sidebar, Tabs, Container, Meshsta
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
router = new Router()
|
moment.locale("de")
|
||||||
dataTargets.push(router)
|
var router = new Router()
|
||||||
|
|
||||||
var urls = [ config.dataPath + "nodes.json",
|
var urls = [ config.dataPath + "nodes.json",
|
||||||
config.dataPath + "graph.json"
|
config.dataPath + "graph.json"
|
||||||
|
@ -125,10 +84,9 @@ function (config, moment, chroma, Router, Map, Sidebar, Tabs, Container, Meshsta
|
||||||
Promise.all(urls.map(getJSON))
|
Promise.all(urls.map(getJSON))
|
||||||
.then(handleData)
|
.then(handleData)
|
||||||
.then(function (d) {
|
.then(function (d) {
|
||||||
createGUI()
|
var gui = new GUI(config, router)
|
||||||
dataTargets.forEach(function (t) {
|
gui.setData(d)
|
||||||
t.setData(d)
|
router.setData(d)
|
||||||
})
|
|
||||||
router.start()
|
router.start()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue