diff --git a/index.html b/index.html
index 49d0aa8..0a89a63 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,36 @@
paint-order: stroke;
}
+ .tabs {
+ list-style: none;
+ display: flex;
+ }
+
+ .tabs li {
+ flex: 1;
+ text-align: center;
+ padding: 0.5em;
+ cursor: pointer;
+ }
+
+ .tabs li:hover {
+ background: rgba(0, 0, 0, 0.03);
+ color: #dc0067;
+ }
+
+ .tabs .visible {
+ font-weight: bold;
+ border-bottom: 2pt solid black;
+ }
+
+ .tab {
+ display: none;
+ }
+
+ .tab.visible {
+ display: block;
+ }
+
body {
margin: 0;
padding: 0;
diff --git a/lib/container.js b/lib/container.js
new file mode 100644
index 0000000..aa993f3
--- /dev/null
+++ b/lib/container.js
@@ -0,0 +1,17 @@
+define([], function () {
+ return function () {
+ var self = this
+
+ var container = document.createElement("div")
+
+ self.add = function (d) {
+ d.render(container)
+ }
+
+ self.render = function (el) {
+ el.appendChild(container)
+ }
+
+ return self
+ }
+})
diff --git a/lib/main.js b/lib/main.js
index 666feb8..74dd30b 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -1,5 +1,5 @@
-require(["router", "map", "sidebar", "meshstats", "linklist", "simplenodelist", "infobox/main"],
-function (Router, Map, Sidebar, Meshstats, Linklist, SimpleNodelist, Infobox) {
+require(["router", "map", "sidebar", "tabs", "container", "meshstats", "linklist", "simplenodelist", "infobox/main"],
+function (Router, Map, Sidebar, Tabs, Container, Meshstats, Linklist, SimpleNodelist, Infobox) {
getJSON("config.json").then(main)
function main(config) {
@@ -13,6 +13,8 @@ function (Router, Map, Sidebar, Meshstats, Linklist, SimpleNodelist, Infobox) {
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 newlost = new Container()
map = new Map(linkScale, sidebar, router)
document.body.insertBefore(map.div, document.body.firstChild)
@@ -23,9 +25,11 @@ function (Router, Map, Sidebar, Meshstats, Linklist, SimpleNodelist, Infobox) {
linklist = new Linklist(linkScale, router)
sidebar.add(meshstats)
- sidebar.add(newnodeslist)
- sidebar.add(lostnodeslist)
- sidebar.add(linklist)
+ sidebar.add(tabs)
+ newlost.add(newnodeslist)
+ newlost.add(lostnodeslist)
+ tabs.add("Neu & Verschwunden", newlost)
+ tabs.add("Verbindungen", linklist)
router.addTarget(infobox)
router.addTarget(map)
diff --git a/lib/tabs.js b/lib/tabs.js
new file mode 100644
index 0000000..a4d500c
--- /dev/null
+++ b/lib/tabs.js
@@ -0,0 +1,58 @@
+define([], function () {
+ return function () {
+ var self = this
+
+ var tabs = document.createElement("ul")
+ tabs.classList.add("tabs")
+
+ var container = document.createElement("div")
+
+ function switchTab(ev) {
+ for (var i = 0; i < tabs.children.length; i++) {
+ var el = tabs.children[i]
+ el.classList.remove("visible")
+ el.tab.classList.remove("visible")
+ }
+
+ this.classList.add("visible")
+ this.tab.classList.add("visible")
+
+ return false
+ }
+
+ self.add = function (title, d) {
+ var tab = document.createElement("div")
+ tab.classList.add("tab")
+ container.appendChild(tab)
+
+ var li = document.createElement("li")
+ li.textContent = title
+ li.onclick = switchTab
+ tab.li = li
+ li.tab = tab
+ tabs.appendChild(li)
+
+ var anyVisible = false
+
+ for (var i = 0; i < tabs.children.length; i++)
+ if (tabs.children[i].classList.contains("visible")) {
+ anyVisible = true
+ break
+ }
+
+ if (!anyVisible) {
+ tab.classList.add("visible")
+ li.classList.add("visible")
+ }
+
+ d.render(tab)
+ }
+
+ self.render = function (el) {
+ el.appendChild(tabs)
+ el.appendChild(container)
+ }
+
+ return self
+ }
+})