treewide: always include cbi.js
[project/luci.git] / modules / luci-mod-admin-full / luasrc / view / admin_network / wifi_overview.htm
index 9c351d393358ea7529a0505e5815e5a5f28bfb3b..f3809ea9413e49d9269f4317e1c46ce2bbb7047b 100644 (file)
 
                        return name
 
-               -- madwifi
-               elseif name == "ath" or name == "wifi" then
-                       return translatef("Atheros 802.11%s Wireless Controller", bands)
-
                -- ralink
                elseif name == "ra" then
                        return translatef("RaLink 802.11%s Wireless Controller", bands)
 <%+header%>
 
 <% if not has_iwinfo then %>
-       <div class="errorbox">
-               <strong><%:Package libiwinfo required!%></strong><br />
-               <%_The <em>libiwinfo-lua</em> package is not installed. You must install this component for working wireless configuration!%>
+       <div class="alert-message warning">
+               <h4><%:Package libiwinfo required!%></h4>
+               <p><%_The <em>libiwinfo-lua</em> package is not installed. You must install this component for working wireless configuration!%></p>
        </div>
 <% end %>
 
-<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
 <script type="text/javascript">//<![CDATA[
        var wifidevs = <%=luci.http.write_json(netdevs)%>;
 
        var is_reconnecting = false;
 
-       function nowrap(s) {
-               return s.replace(/ /g, '&#160;');
-       }
-
-       function wifirate(bss, rx) {
-               var p = rx ? 'rx_' : 'tx_',
-                   s = '%.1f <%:Mbit/s%>, %d<%:MHz%>'
-                                       .format(bss[p+'rate'] / 1000, bss[p+'mhz']),
-                   ht = bss[p+'ht'], vht = bss[p+'vht'],
-                       mhz = bss[p+'mhz'], nss = bss[p+'nss'],
-                       mcs = bss[p+'mcs'], sgi = bss[p+'short_gi'];
-
-               if (ht || vht) {
-                       if (vht) s += ', VHT-MCS %d'.format(mcs);
-                       if (nss) s += ', VHT-NSS %d'.format(nss);
-                       if (ht)  s += ', MCS %s'.format(mcs);
-                       if (sgi) s += ', <%:Short GI%>';
-               }
-
-               return s;
-       }
-
        function wifi_shutdown(id, toggle) {
                var reconnect = (toggle.getAttribute('active') == 'false');
 
-               if (!reconnect && !confirm(String.format('<%:Really shut down network?\nYou might lose access to this device if you are connected via this interface.%>')))
+               if (!reconnect && !confirm(<%=luci.http.write_json(translate('Really shut down network? You might lose access to this device if you are connected via this interface'))%>))
                        return;
 
                is_reconnecting = true;
        }
 
        function wifi_delete(id) {
-               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.%>'))
+               if (!confirm(<%=luci.http.write_json(translate('Really delete this wireless network? The deletion cannot be undone! You might lose access to this device if you are connected via this network.'))%>))
                        return;
 
                (new XHR()).post('<%=url('admin/network/wireless_delete')%>/' + id, { token: '<%=token%>' },
                {
                        if (st)
                        {
-                               var assoctable = document.getElementById('iw-assoclist');
-                               if (assoctable)
-                                       while (assoctable.rows.length > 1)
-                                               assoctable.rows[1].parentNode.removeChild(assoctable.rows[1]);
-
-                               var devup = { };
                                var rowstyle = 1;
+                               var radiostate = { };
+
+                               st.forEach(function(s) {
+                                       var r = radiostate[wifidevs[s.id]] || (radiostate[wifidevs[s.id]] = {});
+
+                                       s.is_assoc = (s.bssid && s.bssid != '00:00:00:00:00:00' && s.channel && s.mode != 'Unknown' && !s.disabled);
+
+                                       r.up        = r.up        || s.is_assoc;
+                                       r.channel   = r.channel   || s.channel;
+                                       r.bitrate   = r.bitrate   || s.bitrate;
+                                       r.frequency = r.frequency || s.frequency;
+                               });
 
                                for( var i = 0; i < st.length; i++ )
                                {
                                        var iw = st[i];
-                                       var is_assoc = (iw.bssid && iw.bssid != '00:00:00:00:00:00' && iw.channel && iw.mode != 'Unknown' && !iw.disabled);
                                        var p = iw.quality;
-                                       var q = is_assoc ? p : -1;
+                                       var q = iw.is_assoc ? p : -1;
 
                                        var icon;
                                        if (q < 0)
                                        else
                                                icon = "<%=resource%>/icons/signal-75-100.png";
 
-                                       if (!devup[wifidevs[iw.id]])
-                                               devup[wifidevs[iw.id]] = is_assoc;
-
                                        var sig = document.getElementById(iw.id + '-iw-signal');
                                        if (sig)
                                                sig.innerHTML = String.format(
                                        {
                                                if (!iw.disabled)
                                                {
-                                                       toggle.className = 'cbi-button cbi-button-reset';
+                                                       toggle.className = 'cbi-button cbi-button-neutral';
                                                        toggle.value = '<%:Disable%>';
                                                        toggle.title = '<%:Shutdown this network%>';
                                                }
                                                else
                                                {
-                                                       toggle.className = 'cbi-button cbi-button-reload';
+                                                       toggle.className = 'cbi-button cbi-button-neutral';
                                                        toggle.value = '<%:Enable%>';
                                                        toggle.title = '<%:Activate this network%>';
                                                }
                                        var info = document.getElementById(iw.id + '-iw-status');
                                        if (info)
                                        {
-                                               if (is_assoc)
+                                               if (iw.is_assoc)
                                                        info.innerHTML = String.format(
                                                                '<strong><%:SSID%>:</strong> %h | ' +
                                                                '<strong><%:Mode%>:</strong> %s<br />' +
                                                                                : '<em><%:Wireless is disabled or not associated%></em>'
                                                        );
                                        }
-
-                                       var dev = document.getElementById(wifidevs[iw.id] + '-iw-devinfo');
-                                       if (dev)
-                                       {
-                                               if (is_assoc)
-                                                       dev.innerHTML = String.format(
-                                                               '<strong><%:Channel%>:</strong> %s (%s <%:GHz%>) | ' +
-                                                               '<strong><%:Bitrate%>:</strong> %s <%:Mbit/s%>',
-                                                                       iw.channel ? iw.channel : '?',
-                                                                       iw.frequency ? iw.frequency : '?',
-                                                                       iw.bitrate ? iw.bitrate : '?'
-                                                       );
-                                               else
-                                                       dev.innerHTML = '';
-                                       }
-
-                                       if (assoctable)
-                                       {
-                                               var assoclist = [ ];
-                                               for( var bssid in iw.assoclist )
-                                               {
-                                                       assoclist.push(iw.assoclist[bssid]);
-                                                       assoclist[assoclist.length-1].bssid = bssid;
-                                               }
-
-                                               assoclist.sort(function(a, b) { a.bssid < b.bssid });
-
-                                               for( var j = 0; j < assoclist.length; j++ )
-                                               {
-                                                       var tr = assoctable.insertRow(-1);
-                                                           tr.className = 'cbi-section-table-row cbi-rowstyle-' + rowstyle;
-
-                                                       var icon;
-                                                       var q = (-1 * (assoclist[j].noise - assoclist[j].signal)) / 5;
-                                                       if (q < 1)
-                                                               icon = "<%=resource%>/icons/signal-0.png";
-                                                       else if (q < 2)
-                                                               icon = "<%=resource%>/icons/signal-0-25.png";
-                                                       else if (q < 3)
-                                                               icon = "<%=resource%>/icons/signal-25-50.png";
-                                                       else if (q < 4)
-                                                               icon = "<%=resource%>/icons/signal-50-75.png";
-                                                       else
-                                                               icon = "<%=resource%>/icons/signal-75-100.png";
-
-                                                       tr.insertCell(-1).innerHTML = String.format(
-                                                               '<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span>',
-                                                               iw.device.name, iw.ifname
-                                                       );
-
-                                                       tr.insertCell(-1).innerHTML = nowrap(String.format('%h', iw.ssid ? iw.ssid : '?'));
-                                                       tr.insertCell(-1).innerHTML = assoclist[j].bssid;
-
-                                                       var host = hosts[assoclist[j].bssid];
-                                                       if (host)
-                                                               tr.insertCell(-1).innerHTML = String.format(
-                                                                       '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%s</div>',
-                                                                       ((host.name && (host.ipv4 || host.ipv6))
-                                                                               ? '%h (%s)'.format(host.name, host.ipv4 || host.ipv6)
-                                                                               : '%h'.format(host.name || host.ipv4 || host.ipv6)).nobr()
-                                                               );
-                                                       else
-                                                               tr.insertCell(-1).innerHTML = '?';
-
-                                                       tr.insertCell(-1).innerHTML = String.format(
-                                                               '<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span>',
-                                                               assoclist[j].signal, assoclist[j].noise, assoclist[j].signal - assoclist[j].noise,
-                                                               icon,
-                                                               assoclist[j].signal, assoclist[j].noise
-                                                       );
-
-                                                       tr.insertCell(-1).innerHTML = nowrap(wifirate(assoclist[j], true)) + '<br />' + nowrap(wifirate(assoclist[j], false));
-
-                                                       rowstyle = (rowstyle == 1) ? 2 : 1;
-                                               }
-                                       }
                                }
 
-                               if (assoctable && assoctable.rows.length == 1)
-                               {
-                                       var tr = assoctable.insertRow(-1);
-                                           tr.className = 'cbi-section-table-row';
-
-                                       var td = tr.insertCell(-1);
-                                           td.colSpan = 8;
-                                           td.innerHTML = '<br /><em><%:No information available%></em>';
-                               }
-
-                               for (var dev in devup)
+                               for (var dev in radiostate)
                                {
                                        var img = document.getElementById(dev + '-iw-upstate');
                                        if (img)
-                                               img.src = '<%=resource%>/icons/wifi_big' + (devup[dev] ? '' : '_disabled') + '.png';
+                                               img.src = '<%=resource%>/icons/wifi' + (radiostate[dev].up ? '' : '_disabled') + '.png';
+
+                                       var stat = document.getElementById(dev + '-iw-devinfo');
+                                       if (stat)
+                                               stat.innerHTML = String.format(
+                                                       '<strong><%:Channel%>:</strong> %s (%s <%:GHz%>) | ' +
+                                                       '<strong><%:Bitrate%>:</strong> %s <%:Mbit/s%>',
+                                                               radiostate[dev].channel ? radiostate[dev].channel : '?',
+                                                               radiostate[dev].frequency ? radiostate[dev].frequency : '?',
+                                                               radiostate[dev].bitrate ? radiostate[dev].bitrate : '?'
+                                               );
                                }
                        }
                }
 
 <h2 name="content"><%:Wireless Overview%></h2>
 
-<fieldset class="cbi-section" style="display:none">
+<div class="cbi-section" style="display:none">
        <legend><%:Reconnecting interface%></legend>
        <img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" />
        <span id="iw-rc-status"><%:Waiting for changes to be applied...%></span>
-</fieldset>
+</div>
 
-<div class="cbi-map">
+<div id="cbi-wireless-overview" class="cbi-map">
 
        <% for _, dev in ipairs(devices) do local nets = dev:get_wifinets() %>
        <!-- device <%=dev:name()%> -->
-       <fieldset class="cbi-section">
-               <table class="cbi-section-table" style="margin:10px; empty-cells:hide">
+       <div class="cbi-section-node">
+               <div class="table">
                        <!-- physical device -->
-                       <tr>
-                               <td style="width:34px"><img src="<%=resource%>/icons/wifi_big_disabled.png" style="float:left; margin-right:10px" id="<%=dev:name()%>-iw-upstate" /></td>
-                               <td colspan="2" style="text-align:left">
-                                       <big><strong><%=guess_wifi_hw(dev)%> (<%=dev:name()%>)</strong></big><br />
+                       <div class="tr">
+                               <div class="td col-2 center">
+                                       <span class="ifacebadge"><img src="<%=resource%>/icons/wifi_disabled.png" id="<%=dev:name()%>-iw-upstate" /> <%=dev:name()%></span>
+                               </div>
+                               <div class="td col-7 left">
+                                       <big><strong><%=guess_wifi_hw(dev)%></strong></big><br />
                                        <span id="<%=dev:name()%>-iw-devinfo"></span>
-                               </td>
-                               <td style="width:310px;text-align:right">
+                               </div>
+                               <div class="td cbi-section-actions">
                                        <form action="<%=url('admin/network/wireless_join')%>" method="post" class="inline">
                                                <input type="hidden" name="device" value="<%=dev:name()%>" />
                                                <input type="hidden" name="token" value="<%=token%>" />
-                                               <input type="submit" class="cbi-button cbi-button-find" style="width:100px" title="<%:Find and join network%>" value="<%:Scan%>" />
+                                               <input type="submit" class="cbi-button cbi-button-action" title="<%:Find and join network%>" value="<%:Scan%>" />
                                        </form>
                                        <form action="<%=url('admin/network/wireless_add')%>" method="post" class="inline">
                                                <input type="hidden" name="device" value="<%=dev:name()%>" />
                                                <input type="hidden" name="token" value="<%=token%>" />
-                                               <input type="submit" class="cbi-button cbi-button-add" style="width:100px" title="<%:Provide new network%>" value="<%:Add%>" />
+                                               <input type="submit" class="cbi-button cbi-button-add" title="<%:Provide new network%>" value="<%:Add%>" />
                                        </form>
-                               </td>
-                       </tr>
+                               </div>
+                       </div>
                        <!-- /physical device -->
 
                        <!-- network list -->
                        <% if #nets > 0 then %>
                                <% for i, net in ipairs(nets) do %>
-                               <tr class="cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>">
-                                       <td></td>
-                                       <td class="cbi-value-field" style="vertical-align:middle; padding:3px" id="<%=net:id()%>-iw-signal">
+                               <div class="tr cbi-rowstyle-<%=1 + ((i-1) % 2)%>">
+                                       <div class="td col-2 center" id="<%=net:id()%>-iw-signal">
                                                <span class="ifacebadge" title="<%:Not associated%>"><img src="<%=resource%>/icons/signal-none.png" /> 0%</span>
-                                       </td>
-                                       <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=net:id()%>-iw-status">
+                                       </div>
+                                       <div class="td col-7 left" id="<%=net:id()%>-iw-status">
                                                <em><%:Collecting data...%></em>
-                                       </td>
-                                       <td class="cbi-value-field" style="width:310px;text-align:right">
-                                               <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%>" />
-                                               <input type="button" class="cbi-button cbi-button-edit" style="width:100px" onclick="location.href='<%=net:adminlink()%>'" title="<%:Edit this network%>" value="<%:Edit%>" />
-                                               <input type="button" class="cbi-button cbi-button-remove" style="width:100px" onclick="wifi_delete('<%=net:id()%>')" title="<%:Delete this network%>" value="<%:Remove%>" />
-                                       </td>
-                               </tr>
+                                       </div>
+                                       <div class="td cbi-section-actions">
+                                               <input id="<%=net:id()%>-iw-toggle" type="button" class="cbi-button cbi-button-neutral" onclick="wifi_shutdown('<%=net:id()%>', this)" title="<%:Enable this network%>" value="<%:Enable%>" />
+                                               <input type="button" class="cbi-button cbi-button-action important" onclick="location.href='<%=net:adminlink()%>'" title="<%:Edit this network%>" value="<%:Edit%>" />
+                                               <input type="button" class="cbi-button cbi-button-negative" onclick="wifi_delete('<%=net:id()%>')" title="<%:Delete this network%>" value="<%:Remove%>" />
+                                       </div>
+                               </div>
                                <% end %>
                        <% else %>
-                               <tr class="cbi-section-table-row cbi-rowstyle-2">
-                                       <td></td>
-                                       <td colspan="3" class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px">
+                               <div class="tr cbi-rowstyle-2">
+                                       <div class="td left">
                                                <em><%:No network configured on this device%></em>
-                                       </td>
-                               </tr>
+                                       </div>
+                               </div>
                        <% end %>
                        <!-- /network list -->
-               </table>
-       </fieldset>
+               </div>
+       </div>
        <!-- /device <%=dev:name()%> -->
        <% end %>
 
 
        <h2><%:Associated Stations%></h2>
 
-       <fieldset class="cbi-section">
-               <table class="cbi-section-table valign-middle" style="margin:10px" id="iw-assoclist">
-                       <tr class="cbi-section-table-titles">
-                               <th class="cbi-section-table-cell"></th>
-                               <th class="cbi-section-table-cell"><%:SSID%></th>
-                               <th class="cbi-section-table-cell"><%:MAC-Address%></th>
-                               <th class="cbi-section-table-cell"><%:Host%></th>
-                               <th class="cbi-section-table-cell"><%:Signal%> / <%:Noise%></th>
-                               <th class="cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></th>
-                       </tr>
-                       <tr class="cbi-section-table-row cbi-rowstyle-2">
-                               <td class="cbi-value-field" colspan="6">
-                                       <em><%:Collecting data...%></em>
-                               </td>
-                       </tr>
-               </table>
-       </fieldset>
+       <%+admin_network/wifi_assoclist%>
 </div>
 
 <%+footer%>