luci-mod-admin-full: align assoclist in wifi overview with status index page
[project/luci.git] / modules / luci-mod-admin-full / luasrc / view / admin_network / wifi_overview.htm
1 <%#
2  Copyright 2008-2009 Steven Barth <steven@midlink.org>
3  Copyright 2008-2015 Jo-Philipp Wich <jow@openwrt.org>
4  Licensed to the public under the Apache License 2.0.
5 -%>
6
7 <%-
8
9         local ip = require "luci.ip"
10         local fs = require "nixio.fs"
11         local utl = require "luci.util"
12         local uci = require "luci.model.uci".cursor()
13         local ntm = require "luci.model.network"
14
15         local has_iwinfo = pcall(require, "iwinfo")
16
17         ntm.init(uci)
18
19         function guess_wifi_hw(dev)
20                 local bands = ""
21                 local ifname = dev:name()
22                 local name, idx = ifname:match("^([a-z]+)(%d+)")
23                 idx = tonumber(idx)
24
25                 if has_iwinfo then
26                         local bl = dev.iwinfo.hwmodelist
27                         if bl and next(bl) then
28                                 if bl.a then bands = bands .. "a" end
29                                 if bl.b then bands = bands .. "b" end
30                                 if bl.g then bands = bands .. "g" end
31                                 if bl.n then bands = bands .. "n" end
32                                 if bl.ac then bands = bands .. "ac" end
33                         end
34
35                         local hw = dev.iwinfo.hardware_name
36                         if hw then
37                                 return "%s 802.11%s" %{ hw, bands }
38                         end
39                 end
40
41                 -- wl.o
42                 if name == "wl" then
43                         local name = translatef("Broadcom 802.11%s Wireless Controller", bands)
44                         local nm   = 0
45
46                         local fd = nixio.open("/proc/bus/pci/devices", "r")
47                         if fd then
48                                 local ln
49                                 for ln in fd:linesource() do
50                                         if ln:match("wl$") then
51                                                 if nm == idx then
52                                                         local version = ln:match("^%S+%s+%S%S%S%S([0-9a-f]+)")
53                                                         name = translatef(
54                                                                 "Broadcom BCM%04x 802.11 Wireless Controller",
55                                                                 tonumber(version, 16)
56                                                         )
57
58                                                         break
59                                                 else
60                                                         nm = nm + 1
61                                                 end
62                                         end
63                                 end
64                                 fd:close()
65                         end
66
67                         return name
68
69                 -- madwifi
70                 elseif name == "ath" or name == "wifi" then
71                         return translatef("Atheros 802.11%s Wireless Controller", bands)
72
73                 -- ralink
74                 elseif name == "ra" then
75                         return translatef("RaLink 802.11%s Wireless Controller", bands)
76
77                 -- hermes
78                 elseif name == "eth" then
79                         return translate("Hermes 802.11b Wireless Controller")
80
81                 -- hostap
82                 elseif name == "wlan" and fs.stat("/proc/net/hostap/" .. ifname, "type") == "dir" then
83                         return translate("Prism2/2.5/3 802.11b Wireless Controller")
84
85                 -- dunno yet
86                 else
87                         return translatef("Generic 802.11%s Wireless Controller", bands)
88                 end
89         end
90
91         local devices = ntm:get_wifidevs()
92         local netlist = { }
93         local netdevs = { }
94
95         local dev
96         for _, dev in ipairs(devices) do
97                 local net
98                 for _, net in ipairs(dev:get_wifinets()) do
99                         netlist[#netlist+1] = net:id()
100                         netdevs[net:id()] = dev:name()
101                 end
102         end
103 -%>
104
105 <%+header%>
106
107 <% if not has_iwinfo then %>
108         <div class="errorbox">
109                 <strong><%:Package libiwinfo required!%></strong><br />
110                 <%_The <em>libiwinfo-lua</em> package is not installed. You must install this component for working wireless configuration!%>
111         </div>
112 <% end %>
113
114 <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
115 <script type="text/javascript">//<![CDATA[
116         var wifidevs = <%=luci.http.write_json(netdevs)%>;
117
118         var is_reconnecting = false;
119
120         function nowrap(s) {
121                 return s.replace(/ /g, '&#160;');
122         }
123
124         function wifi_shutdown(id, toggle) {
125                 var reconnect = (toggle.getAttribute('active') == 'false');
126
127                 if (!reconnect && !confirm(String.format('<%:Really shut down network?\nYou might lose access to this device if you are connected via this interface.%>')))
128                         return;
129
130                 is_reconnecting = true;
131
132                 var s = document.getElementById('iw-rc-status');
133                 if (s)
134                 {
135                         s.parentNode.style.display = 'block';
136                         s.innerHTML = '<%:Waiting for changes to be applied...%>';
137                 }
138
139                 for (var net in wifidevs)
140                 {
141                         var st = document.getElementById(net + '-iw-status');
142                         if (st)
143                                 st.innerHTML = '<em><%:Wireless is restarting...%></em>';
144                 }
145
146                 (new XHR()).post('<%=url('admin/network')%>/wireless_' + (reconnect ? 'reconnect' : 'shutdown') + '/' + id, { token: '<%=token%>' },
147                         function(x)
148                         {
149                                 if (s)
150                                 {
151                                         s.innerHTML = reconnect
152                                                 ? '<%:Wireless restarted%>'
153                                                 : '<%:Wireless shut down%>';
154
155                                         window.setTimeout(function() {
156                                                 s.parentNode.style.display = 'none';
157                                                 is_reconnecting = false;
158                                         }, 1000);
159                                 }
160                         }
161                 );
162         }
163
164         function wifi_delete(id) {
165                 if (!confirm('<%:Really delete this wireless network? The deletion cannot be undone!\nYou might lose access to this device if you are connected via this network.%>'))
166                         return;
167
168                 (new XHR()).post('<%=url('admin/network/wireless_delete')%>/' + id, { token: '<%=token%>' },
169                         function(x) {
170                                 location.href = '<%=url('admin/network/wireless')%>';
171                         }
172                 );
173         }
174
175         var hosts = <%=luci.http.write_json(luci.sys.net.host_hints())%>;
176
177         XHR.poll(5, '<%=url('admin/network/wireless_status', table.concat(netlist, ","))%>', null,
178                 function(x, st)
179                 {
180                         if (st)
181                         {
182                                 var assoctable = document.getElementById('iw-assoclist');
183                                 if (assoctable)
184                                         while (assoctable.rows.length > 1)
185                                                 assoctable.rows[1].parentNode.removeChild(assoctable.rows[1]);
186
187                                 var devup = { };
188                                 var rowstyle = 1;
189
190                                 for( var i = 0; i < st.length; i++ )
191                                 {
192                                         var iw = st[i];
193                                         var is_assoc = (iw.bssid && iw.bssid != '00:00:00:00:00:00' && iw.channel && iw.mode != 'Unknown' && !iw.disabled);
194                                         var p = iw.quality;
195                                         var q = is_assoc ? p : -1;
196
197                                         var icon;
198                                         if (q < 0)
199                                                 icon = "<%=resource%>/icons/signal-none.png";
200                                         else if (q == 0)
201                                                 icon = "<%=resource%>/icons/signal-0.png";
202                                         else if (q < 25)
203                                                 icon = "<%=resource%>/icons/signal-0-25.png";
204                                         else if (q < 50)
205                                                 icon = "<%=resource%>/icons/signal-25-50.png";
206                                         else if (q < 75)
207                                                 icon = "<%=resource%>/icons/signal-50-75.png";
208                                         else
209                                                 icon = "<%=resource%>/icons/signal-75-100.png";
210
211                                         if (!devup[wifidevs[iw.id]])
212                                                 devup[wifidevs[iw.id]] = is_assoc;
213
214                                         var sig = document.getElementById(iw.id + '-iw-signal');
215                                         if (sig)
216                                                 sig.innerHTML = String.format(
217                                                         '<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%>"><img src="%s" /> %d%%</span>',
218                                                         iw.signal, iw.noise, icon, p
219                                                 );
220
221                                         var toggle = document.getElementById(iw.id + '-iw-toggle');
222                                         if (toggle)
223                                         {
224                                                 if (!iw.disabled)
225                                                 {
226                                                         toggle.className = 'cbi-button cbi-button-reset';
227                                                         toggle.value = '<%:Disable%>';
228                                                         toggle.title = '<%:Shutdown this network%>';
229                                                 }
230                                                 else
231                                                 {
232                                                         toggle.className = 'cbi-button cbi-button-reload';
233                                                         toggle.value = '<%:Enable%>';
234                                                         toggle.title = '<%:Activate this network%>';
235                                                 }
236
237                                                 toggle.setAttribute('active', !iw.disabled);
238                                         }
239
240                                         var info = document.getElementById(iw.id + '-iw-status');
241                                         if (info)
242                                         {
243                                                 if (is_assoc)
244                                                         info.innerHTML = String.format(
245                                                                 '<strong><%:SSID%>:</strong> %h | ' +
246                                                                 '<strong><%:Mode%>:</strong> %s<br />' +
247                                                                 '<strong><%:BSSID%>:</strong> %s | ' +
248                                                                 '<strong><%:Encryption%>:</strong> %s',
249                                                                         iw.ssid, iw.mode, iw.bssid,
250                                                                         iw.encryption ? iw.encryption : '<%:None%>'
251                                                         );
252                                                 else
253                                                         info.innerHTML = String.format(
254                                                                 '<strong><%:SSID%>:</strong> %h | ' +
255                                                                 '<strong><%:Mode%>:</strong> %s<br />' +
256                                                                 '<em>%s</em>',
257                                                                         iw.ssid || '?', iw.mode,
258                                                                         is_reconnecting
259                                                                                 ? '<em><%:Wireless is restarting...%></em>'
260                                                                                 : '<em><%:Wireless is disabled or not associated%></em>'
261                                                         );
262                                         }
263
264                                         var dev = document.getElementById(wifidevs[iw.id] + '-iw-devinfo');
265                                         if (dev)
266                                         {
267                                                 if (is_assoc)
268                                                         dev.innerHTML = String.format(
269                                                                 '<strong><%:Channel%>:</strong> %s (%s <%:GHz%>) | ' +
270                                                                 '<strong><%:Bitrate%>:</strong> %s <%:Mbit/s%>',
271                                                                         iw.channel ? iw.channel : '?',
272                                                                         iw.frequency ? iw.frequency : '?',
273                                                                         iw.bitrate ? iw.bitrate : '?'
274                                                         );
275                                                 else
276                                                         dev.innerHTML = '';
277                                         }
278
279                                         if (assoctable)
280                                         {
281                                                 var assoclist = [ ];
282                                                 for( var bssid in iw.assoclist )
283                                                 {
284                                                         assoclist.push(iw.assoclist[bssid]);
285                                                         assoclist[assoclist.length-1].bssid = bssid;
286                                                 }
287
288                                                 assoclist.sort(function(a, b) { a.bssid < b.bssid });
289
290                                                 for( var j = 0; j < assoclist.length; j++ )
291                                                 {
292                                                         var tr = assoctable.insertRow(-1);
293                                                             tr.className = 'cbi-section-table-row cbi-rowstyle-' + rowstyle;
294
295                                                         var icon;
296                                                         var q = (-1 * (assoclist[j].noise - assoclist[j].signal)) / 5;
297                                                         if (q < 1)
298                                                                 icon = "<%=resource%>/icons/signal-0.png";
299                                                         else if (q < 2)
300                                                                 icon = "<%=resource%>/icons/signal-0-25.png";
301                                                         else if (q < 3)
302                                                                 icon = "<%=resource%>/icons/signal-25-50.png";
303                                                         else if (q < 4)
304                                                                 icon = "<%=resource%>/icons/signal-50-75.png";
305                                                         else
306                                                                 icon = "<%=resource%>/icons/signal-75-100.png";
307
308                                                         tr.insertCell(-1).innerHTML = String.format(
309                                                                 '<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span>',
310                                                                 iw.device.name, iw.ifname
311                                                         );
312
313                                                         tr.insertCell(-1).innerHTML = nowrap(String.format('%h', iw.ssid ? iw.ssid : '?'));
314                                                         tr.insertCell(-1).innerHTML = assoclist[j].bssid;
315
316                                                         var host = hosts[assoclist[j].bssid];
317                                                         if (host)
318                                                                 tr.insertCell(-1).innerHTML = String.format(
319                                                                         '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%s</div>',
320                                                                         ((host.name && (host.ipv4 || host.ipv6))
321                                                                                 ? '%h (%s)'.format(host.name, host.ipv4 || host.ipv6)
322                                                                                 : '%h'.format(host.name || host.ipv4 || host.ipv6)).nobr()
323                                                                 );
324                                                         else
325                                                                 tr.insertCell(-1).innerHTML = '?';
326
327                                                         tr.insertCell(-1).innerHTML = String.format(
328                                                                 '<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span>',
329                                                                 assoclist[j].signal, assoclist[j].noise, assoclist[j].signal - assoclist[j].noise,
330                                                                 icon,
331                                                                 assoclist[j].signal, assoclist[j].noise
332                                                         );
333
334                                                         tr.insertCell(-1).innerHTML = nowrap((assoclist[j].rx_mcs > -1)
335                                                                 ? String.format('%.1f <%:Mbit/s%>, MCS %d, %d<%:MHz%>', assoclist[j].rx_rate / 1000, assoclist[j].rx_mcs, assoclist[j].rx_40mhz ? 40 : 20)
336                                                                 : String.format('%.1f <%:Mbit/s%>', assoclist[j].rx_rate / 1000)
337                                                         ) + '<br />' + nowrap((assoclist[j].tx_mcs > -1)
338                                                                 ? String.format('%.1f <%:Mbit/s%>, MCS %d, %d<%:MHz%>', assoclist[j].tx_rate / 1000, assoclist[j].tx_mcs, assoclist[j].tx_40mhz ? 40 : 20)
339                                                                 : String.format('%.1f <%:Mbit/s%>', assoclist[j].tx_rate / 1000)
340                                                         );
341
342                                                         rowstyle = (rowstyle == 1) ? 2 : 1;
343                                                 }
344                                         }
345                                 }
346
347                                 if (assoctable && assoctable.rows.length == 1)
348                                 {
349                                         var tr = assoctable.insertRow(-1);
350                                             tr.className = 'cbi-section-table-row';
351
352                                         var td = tr.insertCell(-1);
353                                             td.colSpan = 8;
354                                             td.innerHTML = '<br /><em><%:No information available%></em>';
355                                 }
356
357                                 for (var dev in devup)
358                                 {
359                                         var img = document.getElementById(dev + '-iw-upstate');
360                                         if (img)
361                                                 img.src = '<%=resource%>/icons/wifi_big' + (devup[dev] ? '' : '_disabled') + '.png';
362                                 }
363                         }
364                 }
365         );
366 //]]></script>
367
368 <h2 name="content"><%:Wireless Overview%></h2>
369
370 <fieldset class="cbi-section" style="display:none">
371         <legend><%:Reconnecting interface%></legend>
372         <img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" />
373         <span id="iw-rc-status"><%:Waiting for changes to be applied...%></span>
374 </fieldset>
375
376 <div class="cbi-map">
377
378         <% for _, dev in ipairs(devices) do local nets = dev:get_wifinets() %>
379         <!-- device <%=dev:name()%> -->
380         <fieldset class="cbi-section">
381                 <table class="cbi-section-table" style="margin:10px; empty-cells:hide">
382                         <!-- physical device -->
383                         <tr>
384                                 <td style="width:34px"><img src="<%=resource%>/icons/wifi_big_disabled.png" style="float:left; margin-right:10px" id="<%=dev:name()%>-iw-upstate" /></td>
385                                 <td colspan="2" style="text-align:left">
386                                         <big><strong><%=guess_wifi_hw(dev)%> (<%=dev:name()%>)</strong></big><br />
387                                         <span id="<%=dev:name()%>-iw-devinfo"></span>
388                                 </td>
389                                 <td style="width:310px;text-align:right">
390                                         <form action="<%=url('admin/network/wireless_join')%>" method="post" class="inline">
391                                                 <input type="hidden" name="device" value="<%=dev:name()%>" />
392                                                 <input type="hidden" name="token" value="<%=token%>" />
393                                                 <input type="submit" class="cbi-button cbi-button-find" style="width:100px" title="<%:Find and join network%>" value="<%:Scan%>" />
394                                         </form>
395                                         <form action="<%=url('admin/network/wireless_add')%>" method="post" class="inline">
396                                                 <input type="hidden" name="device" value="<%=dev:name()%>" />
397                                                 <input type="hidden" name="token" value="<%=token%>" />
398                                                 <input type="submit" class="cbi-button cbi-button-add" style="width:100px" title="<%:Provide new network%>" value="<%:Add%>" />
399                                         </form>
400                                 </td>
401                         </tr>
402                         <!-- /physical device -->
403
404                         <!-- network list -->
405                         <% if #nets > 0 then %>
406                                 <% for i, net in ipairs(nets) do %>
407                                 <tr class="cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>">
408                                         <td></td>
409                                         <td class="cbi-value-field" style="vertical-align:middle; padding:3px" id="<%=net:id()%>-iw-signal">
410                                                 <span class="ifacebadge" title="<%:Not associated%>"><img src="<%=resource%>/icons/signal-none.png" /> 0%</span>
411                                         </td>
412                                         <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=net:id()%>-iw-status">
413                                                 <em><%:Collecting data...%></em>
414                                         </td>
415                                         <td class="cbi-value-field" style="width:310px;text-align:right">
416                                                 <input id="<%=net:id()%>-iw-toggle" type="button" class="cbi-button cbi-button-reload" style="width:100px" onclick="wifi_shutdown('<%=net:id()%>', this)" title="<%:Delete this network%>" value="<%:Enable%>" />
417                                                 <input type="button" class="cbi-button cbi-button-edit" style="width:100px" onclick="location.href='<%=net:adminlink()%>'" title="<%:Edit this network%>" value="<%:Edit%>" />
418                                                 <input type="button" class="cbi-button cbi-button-remove" style="width:100px" onclick="wifi_delete('<%=net:ifname()%>')" title="<%:Delete this network%>" value="<%:Remove%>" />
419                                         </td>
420                                 </tr>
421                                 <% end %>
422                         <% else %>
423                                 <tr class="cbi-section-table-row cbi-rowstyle-2">
424                                         <td></td>
425                                         <td colspan="3" class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px">
426                                                 <em><%:No network configured on this device%></em>
427                                         </td>
428                                 </tr>
429                         <% end %>
430                         <!-- /network list -->
431                 </table>
432         </fieldset>
433         <!-- /device <%=dev:name()%> -->
434         <% end %>
435
436
437         <h2><%:Associated Stations%></h2>
438
439         <fieldset class="cbi-section">
440                 <table class="cbi-section-table valign-middle" style="margin:10px" id="iw-assoclist">
441                         <tr class="cbi-section-table-titles">
442                                 <th class="cbi-section-table-cell"></th>
443                                 <th class="cbi-section-table-cell"><%:SSID%></th>
444                                 <th class="cbi-section-table-cell"><%:MAC-Address%></th>
445                                 <th class="cbi-section-table-cell"><%:Host%></th>
446                                 <th class="cbi-section-table-cell"><%:Signal%> / <%:Noise%></th>
447                                 <th class="cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></th>
448                         </tr>
449                         <tr class="cbi-section-table-row cbi-rowstyle-2">
450                                 <td class="cbi-value-field" colspan="6">
451                                         <em><%:Collecting data...%></em>
452                                 </td>
453                         </tr>
454                 </table>
455         </fieldset>
456 </div>
457
458 <%+footer%>