added simple node status legend

lib/gui.js

@@ -1,7 +1,7 @@
 define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
-         "linklist", "nodelist", "simplenodelist", "infobox/main",
+         "legend", "linklist", "nodelist", "simplenodelist", "infobox/main",
          "proportions", "forcegraph", "title", "about" ],
-function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
+function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
           Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
           Title, About) {
   return function (config, router) {
@@ -77,6 +77,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     var tabs = new Tabs()
     var overview = new Container()
     var meshstats = new Meshstats(config)
+    var legend = new Legend()
     var newnodeslist = new SimpleNodelist("new", "firstseen", router, "Neue Knoten")
     var lostnodeslist = new SimpleNodelist("lost", "lastseen", router, "Verschwundene Knoten")
     var nodelist = new Nodelist(router)
@@ -93,6 +94,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
 
     sidebar.add(header)
     header.add(meshstats)
+    header.add(legend)
 
     overview.add(newnodeslist)
     overview.add(lostnodeslist)

lib/legend.js

@@ -0,0 +1,41 @@
+define(function () {
+  return function () {
+    var self = this
+
+    self.render = function (el) {
+      var p = document.createElement("p")
+      p.setAttribute("class", "legend")
+      el.appendChild(p)
+
+      var spanNew = document.createElement("span")
+      spanNew.setAttribute("class", "legend-new")
+      var symbolNew = document.createElement("span")
+      symbolNew.setAttribute("class", "symbol")
+      var textNew = document.createTextNode(" Neuer Knoten.")
+      spanNew.appendChild(symbolNew)
+      spanNew.appendChild(textNew)
+      p.appendChild(spanNew)
+
+      var spanOnline = document.createElement("span")
+      spanOnline.setAttribute("class", "legend-online")
+      var symbolOnline = document.createElement("span")
+      symbolOnline.setAttribute("class", "symbol")
+      var textOnline = document.createTextNode(" Knoten ist online.")
+      spanOnline.appendChild(symbolOnline)
+      spanOnline.appendChild(textOnline)
+      p.appendChild(spanOnline)
+
+      var spanOffline = document.createElement("span")
+      spanOffline.setAttribute("class", "legend-offline")
+      var symbolOffline = document.createElement("span")
+      symbolOffline.setAttribute("class", "symbol")
+      var textOffline = document.createTextNode(" Knoten ist offline.")
+      spanOffline.appendChild(symbolOffline)
+      spanOffline.appendChild(textOffline)
+      p.appendChild(spanOffline)
+    }
+
+    return self
+  }
+})
+

scss/_legend.scss

@@ -0,0 +1,27 @@
+.legend .symbol
+{
+	width: 1em;
+	height: 1em;
+	border-radius: 50%;
+	display: inline-block;
+}
+
+.legend-new .symbol
+{
+	background-color: #93E929;
+}
+
+.legend-online .symbol
+{
+	background-color: #1566A9;
+}
+
+.legend-offline .symbol
+{
+	background-color: #D43E2A;
+}
+
+.legend-online, .legend-offline
+{
+	margin-left: 1em;
+}

scss/main.scss

@@ -12,6 +12,7 @@ $buttondistance: 12pt;
 @import '_sidebar';
 @import '_map';
 @import '_forcegraph';
+@import '_legend';
 
 .content {
   position: fixed;