thooge
/
ffmap-backend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sidebar with nodecounts

alfred-data
Nils Schneider 2012-06-16 04:31:24 +02:00
parent 41410d53ab
commit b6ea47573f
5 changed files with 78 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/force-big.css
View File

@ -49,6 +49,6 @@
fill: #C83771;
}
#legend {
sidebar {
color: #ddd;
}

2
html/force-light.css
View File

@ -55,6 +55,6 @@
fill: #C83771;
}
#legend {
sidebar {
color: #777;
}

6
html/force.css
View File

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

29
html/force.js
View File

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

86
html/nodes.html
View File

@ -22,49 +22,51 @@
</ul>
</header>
<div id="chart">
<div id="legend">
<h2>Legende</h2>
<ul>
<li><svg width=30 height=20 class="node">
<ellipse cx=15 cy=10 ry=8 rx=8 />
</svg>
<label>Knoten</label>
</li>
<li><svg width=30 height=20 class="node">
<ellipse cx=15 cy=10 ry=8 rx=8 class="gateway"/>
</svg>
<label>Gateway</label>
</li>
<li><svg width=30 height=20 class="node">
<ellipse cx=15 cy=10 ry=4 rx=4 class="client"/>
</svg>
<label>Client</label>
</li>
<li><svg width=30 height=20 class="link">
<line x1="2" y1="10" x2="28" y2="10"/>
</svg>
<label>Link</label>
</li>
<sidebar>
<div id="legend">
<h2>Legende</h2>
<ul>
<li><svg width=30 height=20 class="node">
<ellipse cx=15 cy=10 ry=8 rx=8 />
</svg>
<label>Knoten</label>
</li>
<li><svg width=30 height=20 class="node">
<ellipse cx=15 cy=10 ry=8 rx=8 class="gateway"/>
</svg>
<label>Gateway</label>
</li>
<li><svg width=30 height=20 class="node">
<ellipse cx=15 cy=10 ry=4 rx=4 class="client"/>
</svg>
<label>Client</label>
</li>
<li><svg width=30 height=20 class="link">
<line x1="2" y1="10" x2="28" y2="10"/>
</svg>
<label>Link</label>
</li>
<li><svg width=30 height=20 class="link vpn">
<line x1="2" y1="10" x2="28" y2="10"/>
</svg>
<label>VPN-Link</label>
</li>
<li><svg width=30 height=20 class="node uplinks">
<g transform="translate(12,28)">
<line x1="2" y1="10" x2="28" y2="10" stroke="#000"/>
<path d="m -2.8850049,-13.182327 c 7.5369165,0.200772 12.1529864,-1.294922
12.3338513,-10.639456 l 2.2140476,1.018191 -3.3137621,-5.293097
-3.2945999,5.20893 2.4339957,-0.995747 c -0.4041883,5.76426
-1.1549641,10.561363 -10.3735326,10.701179 z"/>
<text text-anchor="middle" y=-17>ℕ</text>
</g>
</svg>
<label>Anzahl VPN-Links</label>
</li>
</ul>
</div>
<li><svg width=30 height=20 class="link vpn">
<line x1="2" y1="10" x2="28" y2="10"/>
</svg>
<label>VPN-Link</label>
</li>
<li><svg width=30 height=20 class="node uplinks">
<g transform="translate(12,28)">
<line x1="2" y1="10" x2="28" y2="10" stroke="#000"/>
<path d="m -2.8850049,-13.182327 c 7.5369165,0.200772 12.1529864,-1.294922
12.3338513,-10.639456 l 2.2140476,1.018191 -3.3137621,-5.293097
-3.2945999,5.20893 2.4339957,-0.995747 c -0.4041883,5.76426
-1.1549641,10.561363 -10.3735326,10.701179 z"/>
<text text-anchor="middle" y=-17>ℕ</text>
</g>
</svg>
<label>Anzahl VPN-Links</label>
</li>
</ul>
</div>
</sidebar>
</div>
<script src='force.js' type='text/javascript'></script>
</body>