implemented legend for node colors

lib/gui.js

@@ -1,9 +1,9 @@
 define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
          "linklist", "nodelist", "simplenodelist", "infobox/main",
-         "proportions", "forcegraph", "title", "about" ],
+         "proportions", "forcegraph", "title", "about", "legend" ],
 function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
           Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
-          Title, About) {
+          Title, About, Legend) {
   return function (config, router) {
     var self = this
     var dataTargets = []
@@ -70,6 +70,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     var tabs = new Tabs()
     var overview = new Container()
     var meshstats = new Meshstats()
+    var legend = new Legend()
     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)
@@ -85,6 +86,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     dataTargets.push(statistics)
 
     overview.add(meshstats)
+    overview.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")
+      var textNew = document.createTextNode(" Neuer Knoten.")
+      var symbolNew = document.createElement("span")
+      symbolNew.setAttribute("class", "symbol")
+      spanNew.appendChild(symbolNew)
+      spanNew.appendChild(textNew)
+      spanNew.setAttribute("class", "legend-new")
+      p.appendChild(spanNew)
+
+      var spanOnline = document.createElement("span")
+      var textOnline = document.createTextNode(" Knoten ist online.")
+      var symbolOnline = document.createElement("span")
+      symbolOnline.setAttribute("class", "symbol")
+      spanOnline.appendChild(symbolOnline)
+      spanOnline.appendChild(textOnline)
+      spanOnline.setAttribute("class", "legend-online")
+      p.appendChild(spanOnline)
+
+      var spanOffline = document.createElement("span")
+      var textOffline = document.createTextNode(" Knoten ist offline.")
+      var symbolOffline = document.createElement("span")
+      symbolOffline.setAttribute("class", "symbol")
+      spanOffline.appendChild(symbolOffline)
+      spanOffline.appendChild(textOffline)
+      spanOffline.setAttribute("class", "legend-offline")
+      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

@@ -11,6 +11,7 @@ $buttondistance: 12pt;
 @import '_sidebar';
 @import '_map';
 @import '_forcegraph';
+@import '_legend';
 
 .contenttoggle {
   z-index: 100;