third_party/ot-br-posix/repo/src/openwrt/view/admin_thread/thread_overview.htm

   1 <%+header%>
   2
   3 <h2><%:Thread Overview%></h2>
   4 <br />
   5
   6 <div class="cbi-section-node">
   7         <div class="table">
   8                 <!-- physical device -->
   9                 <div class="tr cbi-rowstyle-2">
  10                         <div class="td col-1 center middle">
  11                                 <span class="ifacebadge"><img src="<%=resource .. "/icons/wifi.png"%>" id="wpan0" /> <%:wpan0%></span>
  12                         </div>
  13                         <div class="td col-7 left middle">
  14                                 <big><strong><%:Generic MAC 802.15.4 Thread%></strong></big><br />
  15                         </div>
  16                         <div class="td middle cbi-section-actions">
  17                                 <div>
  18                                         <div></div>
  19                                         <form action="<%=url('admin/network/thread_scan')%>" method="post">
  20                                                 <input type="hidden" name="token" value="<%=token%>" />
  21                                                 <input type="submit" class="cbi-button cbi-button-action important" title="<%:Scan and join network%>" value="<%:Scan%>"/>
  22                                         </form>
  23                                         <form action="<%=url('admin/network/thread_create')%>" method="post">
  24                                                 <input type="hidden" name="token" value="<%=token%>" />
  25                                                 <input type="submit" class="cbi-button cbi-button-add" title="<%:Create new network%>" value="<%:Create%>"/>
  26                                         </form>
  27                                 </div>
  28                         </div>
  29                 </div>
  30                 <!-- /physical device -->
  31
  32                 <!-- network list -->
  33                 <div class="tr cbi-rowstyle-1">
  34                         <div class="td col-1 center middle">
  35                         </div>
  36                         <div class="td col-7 left middle" id="status">
  37                                 <em><%: Collecting data... %></em>
  38                         </div>
  39                         <div class="td middle cbi-section-actions">
  40                                 <div id="action">
  41                                 </div>
  42                         </div>
  43                 </div>
  44                 <!-- /network list -->
  45         </div>
  46 </div>
  47
  48 <br />
  49 <h2><%:Neighbors%></h2>
  50 <br />
  51
  52 <div class="table" id="neighbors">
  53         <div class="tr table-titles">
  54                 <div class="th col-2 center"><%:Signal%></div>
  55                 <div class="th col-1 center"><%:Role%></div>
  56                 <div class="th col-4 center"><%:RLOC16%></div>
  57                 <div class="th col-2 center"><%:Age%></div>
  58                 <div class="th col-2 center"><%:Avg RSSI%></div>
  59                 <div class="th col-2 center"><%:Last RSSI%></div>
  60         </div>
  61         <div class="tr placeholder">
  62                 <div class="td"><em><%:Collecting data...%></em></div>
  63         </div>
  64 </div>
  65
  66 <div class="table" id="parent" style="display:none;">
  67         <div class="tr table-titles">
  68                 <div class="th col-2 center"><%:Signal%></div>
  69                 <div class="th col-1 center"><%:Role%></div>
  70                 <div class="th col-4 center"><%:RLOC16%></div>
  71                 <div class="th col-2 center"><%:Age%></div>
  72                 <div class="th col-2 center"><%:LinkQualityIn%></div>
  73                 <div class="th col-2 center"><%:ExtAddress%></div>
  74         </div>
  75         <div class="tr placeholder">
  76                 <div class="td"><em><%:Collecting data...%></em></div>
  77         </div>
  78 </div>
  79 <%+footer%>
  80
  81 <script type="text/javascript" src="/luci-static/resources/handle_error.js"></script>
  82 <script type="text/javascript">//<![CDATA[
  83         handle_error(GetURLParameter('error'));
  84
  85         XHR.poll(2, '<%=url('admin/network/thread_state')%>', null,
  86                 function(x, st)
  87                 {
  88                         var sheet = document.getElementById('status');
  89                         var action = document.getElementById('action');
  90                         if (st && sheet && action)
  91                         {
  92                                         if(st.state != "disabled")
  93                                         {
  94                                                 sheet.innerHTML = String.format(
  95                                                         '<strong><%:Network Name: %></strong> %s<%: | %>' +
  96                                                         '<strong><%:State: %></strong>%s<br />' +
  97                                                         '<strong><%:PAN ID: %></strong>%s<%:   |   %>' +
  98                                                         '<strong><%:Channel: %></strong>%d<br />',
  99                                                                 st.networkname, st.state, st.panid, st.channel
 100                                                 );
 101                                                 action.innerHTML = String.format(
 102                                                         '<form class="inline" action="<%=url('admin/network/thread_stop')%>" method="post">' +
 103                                                                 '<input type="hidden" name="token" value="<%=token%>" />' +
 104                                                                 '<input type="submit" class="cbi-button cbi-button-neutral" title="<%:Disable this network%>" value="<%:Disable%>" />' +
 105                                                         '</form>' +
 106                                                         '<form class="inline" action="<%=url('admin/network/thread_setting')%>" method="post">' +
 107                                                                 '<input type="hidden" name="token" value="<%=token%>" />' +
 108                                                                 '<input type="submit" class="cbi-button cbi-button-action important" title="<%:Edit this network%>" value="<%:Edit%>"/>' +
 109                                                         '</form>' +
 110                                                         '<form class="inline" action="<%=url('admin/network/thread_view')%>" method="post">' +
 111                                                                 '<input type="hidden" name="token" value="<%=token%>" />' +
 112                                                                 '<input type="submit" class="cbi-button cbi-button-add" title="<%:View this network%>" value="<%:View%>"/>' +
 113                                                         '</form>'
 114                                                 );
 115                                         }
 116                                         else
 117                                         {
 118                                                 sheet.innerHTML = String.format(
 119                                                         '<strong><%:Not connect to any Thread network%></strong><br />' +
 120                                                         '<%: Please Join or Create a Thread network.%>'
 121                                                 );
 122                                         }
 123                         }
 124                 });
 125         function percent_thread_signal(info){
 126                 var linkquality = Number(info.LinkQualityIn);
 127
 128                 if (linkquality == 0)
 129                         return 0;
 130                 else if (linkquality == 1)
 131                         return 30;
 132                 else if(linkquality == 2)
 133                         return 60;
 134                 else
 135                         return 100;
 136         }
 137
 138         function guess_thread_signal(info) {
 139                 var icon;
 140                 var scale = percent_thread_signal(info);
 141
 142                 if (scale == 0)
 143                         icon = "<%=resource%>/icons/signal-0.png";
 144                 else if (scale == 30)
 145                         icon = "<%=resource%>/icons/signal-25-50.png";
 146                 else if (scale == 50)
 147                         icon = "<%=resource%>/icons/signal-50-75.png";
 148                 else
 149                         icon = "<%=resource%>/icons/signal-75-100.png";
 150
 151                 return icon;
 152         }
 153
 154         XHR.poll(2, '<%=url('admin/network/thread_neighbors')%>', null,
 155                 function(x, st)
 156                 {
 157                         if(st && st.state == 'child')
 158                         {
 159                                 var tb = document.getElementById('parent');
 160                                 document.getElementById('neighbors').style.display = "none";
 161                                 if (tb)
 162                                 {
 163                                         var rows = [];
 164                                         st.neighbor.forEach(function(bss) {
 165                                                 var icon = guess_thread_signal(bss);
 166                                                 var signal = percent_thread_signal(bss);
 167                                                 rows.push([
 168                                                         '<abbr title="LinkQualityIn: %s"><img src="%s" /><br /><small> %s%</small></abbr>'.format(bss.LinkQualityIn, icon, signal),
 169                                                         '<div class="col-1 center"> %s </div>'.format(bss.Role),
 170                                                         '<div class="col-4 center"> %s </div>'.format(bss.Rloc16),
 171                                                         '<div class="col-2 center"> %s </div>'.format(bss.Age),
 172                                                         '<div class="col-2 center"> %s </div>'.format(bss.LinkQualityIn),
 173                                                         '<div class="col-2 center"> %s </div>'.format(bss.ExtAddress),
 174                                                 ]);
 175                                         });
 176                                         cbi_update_table(tb, rows, '<center><em><%:No information available%></em></center>');
 177                                         tb.style.display = "table";
 178                                 }
 179                         }
 180                         else if(st)
 181                         {
 182                                 var tb = document.getElementById('neighbors');
 183                                 document.getElementById('parent').style.display = "none";
 184                                 if (tb)
 185                                 {
 186                                         var rows = [];
 187                                         st.neighbor.forEach(function(bss) {
 188                                                 var icon = guess_thread_signal(bss);
 189                                                 var signal = percent_thread_signal(bss);
 190                                                 rows.push([
 191                                                         '<abbr title="LinkQualityIn: %s"><img src="%s" /><br /><small> %s%</small></abbr>'.format(bss.LinkQualityIn, icon, signal),
 192                                                         '<div class="col-1 center"> %s </div>'.format(bss.Role),
 193                                                         '<div class="col-4 center"> %s </div>'.format(bss.Rloc16),
 194                                                         '<div class="col-2 center"> %s </div>'.format(bss.Age),
 195                                                         '<div class="col-2 center"> %s </div>'.format(bss.AvgRssi),
 196                                                         '<div class="col-2 center"> %s </div>'.format(bss.LastRssi),
 197                                                 ]);
 198                                         });
 199                                         cbi_update_table(tb, rows, '<center><em><%:No information available%></em></center>');
 200                                         tb.style.display = "table";
 201                                 }
 202                         }
 203                 });
 204 //]]></script>