luci-app-bmx7: refactory, multiple fixes and add topology graph
[feed/routing.git] / luci-app-bmx7 / files / usr / lib / lua / luci / view / bmx7 / nodes_j.htm
index 347af421818fa0d513e67a88166d9da5d4994392..a631c93e89732966aa71518141d0f04f562801c5 100644 (file)
 
 
 <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%>
-