diff --git a/lib/gui.js b/lib/gui.js index 33a89c7..f92110e 100644 --- a/lib/gui.js +++ b/lib/gui.js @@ -1,21 +1,60 @@ define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats", "linklist", "nodelist", "simplenodelist", "infobox/main", - "proportions" ], + "proportions", "forcegraph" ], function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, - Nodelist, SimpleNodelist, Infobox, Proportions) { + Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph) { return function (config, router) { var self = this var dataTargets = [] + var latestData + var content var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5]) var sidebar = new Sidebar(document.body) + + function removeContent() { + if (!content) + return + + router.removeTarget(content) + content.destroy() + document.body.removeChild(content.div) + content = null + } + + function addContent(K) { + removeContent() + + content = new K(linkScale, sidebar, router) + document.body.insertBefore(content.div, document.body.firstChild) + + if (latestData) + content.setData(latestData) + + dataTargets.push(content) + router.addTarget(content) + router.reload() + } + + var buttonToggle = document.createElement("button") + buttonToggle.classList.add("contenttoggle") + buttonToggle.classList.add("next-graph") + buttonToggle.onclick = function () { + if (content.constructor === Map) { + buttonToggle.classList.remove("next-graph") + buttonToggle.classList.add("next-map") + addContent(ForceGraph) + } else { + buttonToggle.classList.remove("next-map") + buttonToggle.classList.add("next-graph") + addContent(Map) + } + } + document.body.appendChild(buttonToggle) + 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") @@ -23,7 +62,6 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, var linklist = new Linklist(linkScale, router) var statistics = new Proportions() - dataTargets.push(map) dataTargets.push(meshstats) dataTargets.push(newnodeslist) dataTargets.push(lostnodeslist) @@ -42,9 +80,12 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, tabs.add("Statistiken", statistics) router.addTarget(infobox) - router.addTarget(map) + + addContent(Map) self.setData = function (data) { + latestData = data + dataTargets.forEach(function (d) { d.setData(data) }) diff --git a/lib/map.js b/lib/map.js index b389a79..52433f3 100644 --- a/lib/map.js +++ b/lib/map.js @@ -65,8 +65,6 @@ define(["leaflet", "moment", "leaflet.label"], function (L, moment) { var map = L.map(el, options) - L.control.zoom({ position: "topright" }).addTo(map) - L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", { subdomains: "1234", type: "osm", diff --git a/scss/main.scss b/scss/main.scss index 63da784..5b70e29 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -9,6 +9,20 @@ $minscreenwidth: 60em; paint-order: stroke; } +.contenttoggle { + position: absolute; + top: 0.7em; + right: 0.7em; +} + +.contenttoggle.next-graph:after { + content: '\f341'; +} + +.contenttoggle.next-map:after { + content: '\f203'; +} + .tabs { list-style: none; display: flex;