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; fill: #C83771;
} }
#legend { sidebar {
color: #ddd; color: #ddd;
} }

2
html/force-light.css
View File

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

6
html/force.css
View File

@ -131,16 +131,16 @@
text-shadow: none; text-shadow: none;
} }
#legend { sidebar {
position: absolute; position: absolute;
top: 1em; top: 1em;
right: 1.5em; right: 1.5em;
z-index: 0; z-index: 0;
font-size: 9pt;
} }
#legend ul { #legend ul {
list-style: none; list-style: none;
font-size: 9pt;
} }
#legend li { #legend li {
@ -153,7 +153,7 @@
vertical-align: center; vertical-align: center;
} }
#legend h2 { sidebar h2 {
margin-top: 0; margin-top: 0;
font-size: 9pt; font-size: 9pt;
} }

29
html/force.js
View File

@ -90,6 +90,20 @@ btns.append("button")
.text("VPN") .text("VPN")
.on("click", update_graph) .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") //cp.append("input")
// .on("keyup", function(){show_node(this.value)}) // .on("keyup", function(){show_node(this.value)})
// .on("change", 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())) 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() update()
}) })
} }

86
html/nodes.html
View File

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