From b6ea47573f61128d8f3bb364970002760453ba57 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Sat, 16 Jun 2012 04:31:24 +0200 Subject: [PATCH] sidebar with nodecounts --- html/force-big.css | 2 +- html/force-light.css | 2 +- html/force.css | 6 ++-- html/force.js | 29 +++++++++++++++ html/nodes.html | 86 ++++++++++++++++++++++---------------------- 5 files changed, 78 insertions(+), 47 deletions(-) diff --git a/html/force-big.css b/html/force-big.css index fd70a67..c4ea7f0 100644 --- a/html/force-big.css +++ b/html/force-big.css @@ -49,6 +49,6 @@ fill: #C83771; } -#legend { +sidebar { color: #ddd; } diff --git a/html/force-light.css b/html/force-light.css index 282abf5..7c8735e 100644 --- a/html/force-light.css +++ b/html/force-light.css @@ -55,6 +55,6 @@ fill: #C83771; } -#legend { +sidebar { color: #777; } diff --git a/html/force.css b/html/force.css index ed4fd7d..6c99999 100644 --- a/html/force.css +++ b/html/force.css @@ -131,16 +131,16 @@ text-shadow: none; } -#legend { +sidebar { position: absolute; top: 1em; right: 1.5em; z-index: 0; + font-size: 9pt; } #legend ul { list-style: none; - font-size: 9pt; } #legend li { @@ -153,7 +153,7 @@ vertical-align: center; } -#legend h2 { +sidebar h2 { margin-top: 0; font-size: 9pt; } diff --git a/html/force.js b/html/force.js index d36a2c4..4a993ab 100644 --- a/html/force.js +++ b/html/force.js @@ -90,6 +90,20 @@ btns.append("button") .text("VPN") .on("click", update_graph) +var meshinfo = d3.select("sidebar") + .insert("div", ":first-child") + +meshinfo.append("h2").text("Mesh") + +meshinfo.append("p") + .attr("id", "nodecount") + +meshinfo.append("p") + .attr("id", "clientcount") + +meshinfo.append("p") + .attr("id", "gatewaycount") + //cp.append("input") // .on("keyup", function(){show_node(this.value)}) // .on("change", function(){show_node(this.value)}) @@ -310,6 +324,21 @@ function reload() { updated_at.text(d3.time.format("%X")(new Date())) + d3.select("#nodecount") + .text((data.nodes.filter(function(d) { + return !d.flags.client + }).length) + " Knoten") + + d3.select("#gatewaycount") + .text((data.nodes.filter(function(d) { + return d.flags.gateway + }).length) + " Gateways") + + d3.select("#clientcount") + .text((data.nodes.filter(function(d) { + return d.flags.client + }).length) + " Clients") + update() }) } diff --git a/html/nodes.html b/html/nodes.html index 076a6b5..728f6f8 100644 --- a/html/nodes.html +++ b/html/nodes.html @@ -22,49 +22,51 @@
-
-

Legende

-
    -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • + +
    +

    Legende

    +
      +
    • + + + +
      • +
    • + + + +
      • +
    • + + + +
      • +
    • + + + +
      • -
    • - - - -
      • -
    • - - - - ℕ - - - -
      • -
    -
    +
  • + + + +
    • +
  • + + + + ℕ + + + +
    • +
+
+