<style>
-
div.hideme{
display: none;
}
-
div.info{
background: #FFF;
border: solid 0px;
- height: 90px;
+ height: 190px;
display: block;
overflow: auto;
}
-
div.inforow{
text-align:left;
display:inline-block;
float: left;
white-space:nowrap;
}
-
div.inforow.newline{
clear: both;
}
-
u {
text-decoration: underline;
- }
-
+ }
#extra-info ul { list-style: none outside none; margin-left: 0em; }
-
</style>
+
<div class="cbi-map">
<h2>Mesh nodes</h2>
Tip: click the <img src="<%=resource%>/bmx7/world.png" /> icon to see individual node information.
</center>
</div>
-<fieldset class="cbi-section">
+
+
+<div class="cbi-section">
<legend><%:Originators%></legend>
- <table class="cbi-section-table" id="descriptions_table">
- <tr class="cbi-section-table-titles">
- <th class="cbi-section-table-cell"></th>
- <th class="cbi-section-table-cell"><%:Name%></th>
- <th class="cbi-section-table-cell"><%:Short ID%></th>
- <th class="cbi-section-table-cell"><%:S/s/T/t%></th>
- <th class="cbi-section-table-cell"><%:Primary IPv6 address%></th>
- <th class="cbi-section-table-cell"><%:Via neighbour%></th>
- <th class="cbi-section-table-cell"><%:Metric%></th>
- <th class="cbi-section-table-cell"><%:Last desc.%></th>
- <th class="cbi-section-table-cell"><%:Last ref.%></th>
- <th class="cbi-section-table-cell"><%: %></th>
- </tr>
- <tr class="cbi-section-table-row">
- <td colspan="11"><br /><center><em><%:Collecting data...%></em></center></td>
- </tr>
- </table>
-</fieldset>
+ <div class="cbi-section-node">
+ <div class="table" id="nodes_div">
+ <div class="tr table-titles">
+ <div class="th"></div>
+ <div class="th"><%:Name%></div>
+ <div class="th"><%:Short ID%></div>
+ <div class="th"><%:S/s/T/t%></div>
+ <div class="th"><%:Primary IPv6%></div>
+ <div class="th"><%:Via Neighbour%></div>
+ <div class="th"><%:Metric%></div>
+ <div class="th"><%:Last Desc%></div>
+ <div class="th"><%:Last Ref%></div>
+ <div class="th"><%: %></div>
+ </div>
+ </div>
+ </div>
+</div>
</div>
<script type="text/javascript">//<![CDATA[
var displayExtraInfo = function ( id ) {
- console.log('aaa'+id)
document.getElementById('extra-info').innerHTML = document.getElementById(id).innerHTML;
}
-
- new TablePooler(5,"/cgi-bin/bmx7-info", {'$originators':''}, "descriptions_table", function(st){
+ new TablePooler(5,"/cgi-bin/bmx7-info", {'$originators':''}, "nodes_div", function(st){
var infoicon = "<%=resource%>/bmx7/world_small.png";
var originators = st.originators;
var res = Array();
-
originators.forEach(function(originator,i){
var name = originator.name;
var shortId = originator.shortId;
var metric = originator.metric;
var lastDesc = originator.lastDesc;
var lastRef = originator.lastRef;
-
+
var extrainfo = '<a onclick="displayExtraInfo(\'ip-' + i + '\')"><img src="' + infoicon + '" / ></a>';
var extrainfo_link = '<a onclick="displayExtraInfo(\'ip-' + i + '\')">' + '<img src="' + infoicon + '" />' + '</a>';
-
- extrainfo = '<div id="ip-'+ i +'" class="hideme">'
+ extrainfo = '<div id="ip-'+ i +'" class="hideme">'
+ "<div class='inforow'>"
+ "<h4><u>" + name + '</u></h4>\n'
- + 'Node ID: ' + nodeId + "</div>"
-
+ + 'Node ID: ' + shortId + "</div>"
+ "<div class='inforow'>"
+ "<h5>Primary IPv6 address</h5>\n"
+ primaryIp + "</div>\n"
-
+ "<div class='inforow'>"
+ "<h5>Support & Trust</h5>\n"
+ SsTt + "</div>\n"
-
+ "<div class='inforow'>"
+ "<h5>Node key</h5>\n"
+ nodeKey + "</div>\n"
-
+ "<div class='inforow newline'>"
+ "<h5>Via neighbour</h5>\n"
+ nbName + "</div>\n"
-
+ "<div class='inforow'>"
+ "<h5>Via device</h5>\n"
+ dev + "</div>\n"
-
+ "<div class='inforow'>"
- + "<h5>Via remote link-local IPv6 address</h5>\n"
+ + "<h5>Via link-local IPv6</h5>\n"
+ nbLocalIp + "</div>\n"
-
+ "<div class='inforow'>"
+ "<h5>Route metric</h5>\n"
+ metric + "</div>\n"
-
+ "<div class='inforow'>"
+ "<h5>Desc. size</h5>\n"
+ descSize + "</div>\n"
-
+ "\n</div>";
res.push([extrainfo_link, name, shortId, SsTt, primaryIp,
nbName, metric, lastDesc, lastRef, extrainfo]);
-
});
return res;
});
//]]></script>
<%+footer%>
-