added simple node status legend

This commit is contained in:
Florian Rittmeier 2015-08-27 01:31:19 +02:00 committed by Nils Schneider
parent 13c640beb8
commit 37c5dba449
4 changed files with 73 additions and 2 deletions

View file

@ -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)

41
lib/legend.js Normal file
View file

@ -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
}
})

27
scss/_legend.scss Normal file
View file

@ -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;
}

View file

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