diff options
Diffstat (limited to 'modules/luci-mod-admin-full/luasrc/view/admin_network')
7 files changed, 207 insertions, 196 deletions
diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/diagnostics.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/diagnostics.htm index f4adb26069..5607e59dfb 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/diagnostics.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/diagnostics.htm @@ -61,55 +61,54 @@ local route_host = luci.config.diag and luci.config.diag.route or "dev.openwrt.o <div class="cbi-map"> <h2 name="content"><%:Diagnostics%></h2> - <fieldset class="cbi-section"> + <div class="cbi-section"> <legend><%:Network Utilities%></legend> - <br /> - - <div style="width:30%; float:left"> - <input style="margin: 5px 0" type="text" value="<%=ping_host%>" name="ping" /><br /> - <% if has_ping6 then %> - <select name="ping_proto" style="width:auto"> - <option value="" selected="selected"><%:IPv4%></option> - <option value="6"><%:IPv6%></option> - </select> - <input type="button" value="<%:Ping%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.ping, this.form.ping_proto.selectedIndex)" /> - <% else %> - <input type="button" value="<%:Ping%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.ping)" /> - <% end %> + <div class="table"> + <div class="tr"> + <div class="td left"> + <input style="margin: 5px 0" type="text" value="<%=ping_host%>" name="ping" /><br /> + <% if has_ping6 then %> + <select name="ping_proto" style="width:auto"> + <option value="" selected="selected"><%:IPv4%></option> + <option value="6"><%:IPv6%></option> + </select> + <input type="button" value="<%:Ping%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.ping, this.form.ping_proto.selectedIndex)" /> + <% else %> + <input type="button" value="<%:Ping%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.ping)" /> + <% end %> + </div> + + <div class="td left"> + <input style="margin: 5px 0" type="text" value="<%=route_host%>" name="traceroute" /><br /> + <% if has_traceroute6 then %> + <select name="traceroute_proto" style="width:auto"> + <option value="" selected="selected"><%:IPv4%></option> + <option value="6"><%:IPv6%></option> + </select> + <input type="button" value="<%:Traceroute%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.traceroute, this.form.traceroute_proto.selectedIndex)" /> + <% else %> + <input type="button" value="<%:Traceroute%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.traceroute)" /> + <% end %> + <% if not has_traceroute6 then %> + <p> </p> + <p><%:Install iputils-traceroute6 for IPv6 traceroute%></p> + <% end %> + </div> + + <div class="td left"> + <input style="margin: 5px 0" type="text" value="<%=dns_host%>" name="nslookup" /><br /> + <input type="button" value="<%:Nslookup%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.nslookup)" /> + </div> + </div> </div> - - <div style="width:33%; float:left"> - <input style="margin: 5px 0" type="text" value="<%=route_host%>" name="traceroute" /><br /> - <% if has_traceroute6 then %> - <select name="traceroute_proto" style="width:auto"> - <option value="" selected="selected"><%:IPv4%></option> - <option value="6"><%:IPv6%></option> - </select> - <input type="button" value="<%:Traceroute%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.traceroute, this.form.traceroute_proto.selectedIndex)" /> - <% else %> - <input type="button" value="<%:Traceroute%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.traceroute)" /> - <% end %> - <% if not has_traceroute6 then %> - <p> </p> - <p><%:Install iputils-traceroute6 for IPv6 traceroute%></p> - <% end %> - </div> - - <div style="width:33%; float:left;"> - <input style="margin: 5px 0" type="text" value="<%=dns_host%>" name="nslookup" /><br /> - <input type="button" value="<%:Nslookup%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.nslookup)" /> - </div> - - <br style="clear:both" /><br /> - - </fieldset> + </div> </div> - <fieldset class="cbi-section" style="display:none"> - <legend id="diag-rc-legend"><%:Collecting data...%></legend> + <div class="cbi-section" style="display:none"> + <strong id="diag-rc-legend"></strong> <span id="diag-rc-output"></span> - </fieldset> + </div> </form> <%+footer%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview.htm index 420e5879fa..473e2275ce 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview.htm @@ -67,7 +67,7 @@ } function iface_delete(id) { - if (!confirm(<%=luci.http.write_json(translate('Really delete this interface? The deletion cannot be undone! You might lose access to this device if you are connected via this interface.'))%>)) + if (!confirm(<%=luci.http.write_json(translate('Really delete this interface? The deletion cannot be undone! You might lose access to this device if you are connected via this interface'))%>)) return; (new XHR()).post('<%=url('admin/network/iface_delete')%>/' + id, { token: '<%=token%>' }, @@ -141,8 +141,8 @@ } html += String.format( - '<strong><%:RX%></strong>: %.2mB (%d <%:Pkts.%>)<br />' + - '<strong><%:TX%></strong>: %.2mB (%d <%:Pkts.%>)<br />', + '<strong><%:RX%>:</strong> %.2mB (%d <%:Pkts.%>)<br />' + + '<strong><%:TX%>:</strong> %.2mB (%d <%:Pkts.%>)<br />', ifc.rx_bytes, ifc.rx_packets, ifc.tx_bytes, ifc.tx_packets ); @@ -209,46 +209,43 @@ </fieldset> <div class="cbi-map"> - <fieldset class="cbi-section"> + <div class="cbi-section"> <legend><%:Interface Overview%></legend> - <div class="table cbi-section-table" style="margin:10px; empty-cells:hide"> - <div class="tr cbi-section-table-titles"> - <div class="th"><%:Network%></div> - <div class="th left"><%:Status%></div> - <div class="th"><%:Actions%></div> - </div> - <% - for i, net in ipairs(netlist) do - local z = net[3] - local c = z and z:get_color() or "#EEEEEE" - local t = z and translate("Part of zone %q" % z:name()) or translate("No zone assigned") - %> - <div class="tr cbi-section-table-row cbi-rowstyle-<%=i % 2 + 1%>"> - <div class="td"> - <div class="ifacebox"> - <div class="ifacebox-head" style="background-color:<%=c%>" title="<%=pcdata(t)%>"> - <strong><%=net[1]:upper()%></strong> - </div> - <div class="ifacebox-body" id="<%=net[1]%>-ifc-devices"> - <img src="<%=resource%>/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br /> - <small>?</small> + <div class="cbi-section-node"> + <div class="table"> + <% + for i, net in ipairs(netlist) do + local z = net[3] + local c = z and z:get_color() or "#EEEEEE" + local t = z and translate("Part of zone %q" % z:name()) or translate("No zone assigned") + %> + <div class="tr cbi-rowstyle-<%=i % 2 + 1%>"> + <div class="td col-3 center middle"> + <div class="ifacebox"> + <div class="ifacebox-head" style="background-color:<%=c%>" title="<%=pcdata(t)%>"> + <strong><%=net[1]:upper()%></strong> + </div> + <div class="ifacebox-body" id="<%=net[1]%>-ifc-devices"> + <img src="<%=resource%>/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br /> + <small>?</small> + </div> </div> </div> + <div class="td col-5 left" id="<%=net[1]%>-ifc-description"> + <em><%:Collecting data...%></em> + </div> + <div class="td cbi-section-actions"> + <input type="button" class="cbi-button cbi-button-neutral" onclick="iface_shutdown('<%=net[1]%>', true)" title="<%:Reconnect this interface%>" value="<%:Connect%>" /> + <input type="button" class="cbi-button cbi-button-neutral" onclick="iface_shutdown('<%=net[1]%>', false)" title="<%:Shutdown this interface%>" value="<%:Stop%>" /> + <input type="button" class="cbi-button cbi-button-action important" onclick="location.href='<%=url("admin/network/network", net[1])%>'" title="<%:Edit this interface%>" value="<%:Edit%>" id="<%=net[1]%>-ifc-edit" /> + <input type="button" class="cbi-button cbi-button-negative" onclick="iface_delete('<%=net[1]%>')" value="<%:Delete%>" /> + </div> </div> - <div class="td left" id="<%=net[1]%>-ifc-description"> - <em><%:Collecting data...%></em> - </div> - <div class="td"> - <input type="button" class="cbi-button cbi-button-reload" style="width:100px" onclick="iface_shutdown('<%=net[1]%>', true)" title="<%:Reconnect this interface%>" value="<%:Connect%>" /> - <input type="button" class="cbi-button cbi-button-reset" style="width:100px" onclick="iface_shutdown('<%=net[1]%>', false)" title="<%:Shutdown this interface%>" value="<%:Stop%>" /> - <input type="button" class="cbi-button cbi-button-edit" style="width:100px" onclick="location.href='<%=url("admin/network/network", net[1])%>'" title="<%:Edit this interface%>" value="<%:Edit%>" id="<%=net[1]%>-ifc-edit" /> - <input type="button" class="cbi-button cbi-button-remove" style="width:100px" onclick="iface_delete('<%=net[1]%>')" value="<%:Delete%>" /> - </div> - </div> - <% end %> + <% end %> + </div> </div> <input type="button" class="cbi-button cbi-button-add" value="<%:Add new interface...%>" onclick="location.href='<%=url("admin/network/iface_add")%>'" /> - </fieldset> + </div> </div> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_status.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_status.htm index 58f5400da7..9c5173dae2 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_status.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_status.htm @@ -6,29 +6,18 @@ { if (ifc && (ifc = ifc[0])) { - var html = ''; + var s = document.getElementById('<%=self.option%>-ifc-status'), + img = s.querySelector('img'), + info = s.querySelector('span'), + html = '<strong><%:Device%>:</strong> %h<br />'.format(ifc.ifname); - var s = document.getElementById('<%=self.option%>-ifc-signal'); - if (s) - s.innerHTML = String.format( - '<img src="<%=resource%>/icons/%s%s.png" style="width:16px; height:16px" />' + - '<br /><small>%s</small>', - ifc.type, ifc.is_up ? '' : '_disabled', - ifc.name - ); - - var d = document.getElementById('<%=self.option%>-ifc-description'); - if (d && ifc.ifname) + if (ifc.ifname) { if (ifc.is_up) - { html += String.format('<strong><%:Uptime%>:</strong> %t<br />', ifc.uptime); - } if (ifc.macaddr) - { html += String.format('<strong><%:MAC-Address%>:</strong> %s<br />', ifc.macaddr); - } html += String.format( '<strong><%:RX%></strong>: %.2mB (%d <%:Pkts.%>)<br />' + @@ -38,50 +27,40 @@ ); if (ifc.ipaddrs && ifc.ipaddrs.length) - { for (var i = 0; i < ifc.ipaddrs.length; i++) html += String.format( '<strong><%:IPv4%>:</strong> %s<br />', ifc.ipaddrs[i] ); - } if (ifc.ip6addrs && ifc.ip6addrs.length) - { for (var i = 0; i < ifc.ip6addrs.length; i++) html += String.format( '<strong><%:IPv6%>:</strong> %s<br />', ifc.ip6addrs[i] ); - } - + if (ifc.ip6prefix) - { html += String.format('<strong><%:IPv6-PD%>:</strong> %s<br />', ifc.ip6prefix); - } - d.innerHTML = html; + info.innerHTML = html; } - else if (d) + else { - d.innerHTML = '<em><%:Interface not present or not connected yet.%></em>'; + info.innerHTML = '<em><%:Interface not present or not connected yet.%></em>'; } + + img.src = '<%=resource%>/icons/%s%s.png'.format(ifc.type, ifc.is_up ? '' : '_disabled'); } } ); //]]></script> -<div class="table"> - <div class="tr cbi-section-table"> - <div class="td"></div> - <div class="td cbi-value-field" style="min-width:16px; padding:3px; text-align:center" id="<%=self.option%>-ifc-signal"> - <img src="<%=resource%>/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br /> - <small>?</small> - </div> - <div class="td cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-ifc-description"> - <em><%:Collecting data...%></em> - </div> - </div> -</div> +<span class="ifacebadge large" id="<%=self.option%>-ifc-status"> + <img src="<%=resource%>/icons/ethernet_disabled.png" /> + <span> + <em><%:Collecting data...%></em> + </span> +</span> <%+cbi/valuefooter%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm index 9005279a4e..a1b2c8454d 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm @@ -34,7 +34,7 @@ else timestr = String.format('%t', st[0][i].expires); - tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [ + tb.appendChild(E('<div class="tr cbi-rowstyle-%d">'.format((i % 2) + 1), [ E('<div class="td">', st[0][i].hostname || '?'), E('<div class="td">', st[0][i].ipaddr), E('<div class="td">', st[0][i].macaddr), @@ -43,7 +43,7 @@ } if (tb.firstElementChild === tb.lastElementChild) - tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>')); + tb.appendChild(E('<div class="tr"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>')); } var tb6 = document.getElementById('lease6_status_table'); @@ -79,8 +79,8 @@ hint = host.name; } - tb6.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d" style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">'.format((i % 2) + 1), [ - E('<div class="td">', hint ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">%h (%h)</div>'.format(name || '?', hint) : (name || '?')), + tb6.appendChild(E('<div class="tr cbi-rowstyle-%d">'.format((i % 2) + 1), [ + E('<div class="td nowrap">', hint ? '%h (%h)'.format(name || '?', hint) : (name || '?')), E('<div class="td">', st[1][i].ip6addr), E('<div class="td">', st[1][i].duid), E('<div class="td">', timestr) @@ -88,7 +88,7 @@ } if (tb6.firstElementChild === tb6.lastElementChild) - tb6.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>')); + tb6.appendChild(E('<div class="tr"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>')); } } ); @@ -96,14 +96,14 @@ <fieldset class="cbi-section"> <legend><%:Active DHCP Leases%></legend> - <div class="table cbi-section-table" id="lease_status_table"> - <div class="tr cbi-section-table-titles"> - <div class="th cbi-section-table-cell"><%:Hostname%></div> - <div class="th cbi-section-table-cell"><%:IPv4-Address%></div> - <div class="th cbi-section-table-cell"><%:MAC-Address%></div> - <div class="th cbi-section-table-cell"><%:Leasetime remaining%></div> + <div class="table" id="lease_status_table"> + <div class="tr"> + <div class="th"><%:Hostname%></div> + <div class="th"><%:IPv4-Address%></div> + <div class="th"><%:MAC-Address%></div> + <div class="th"><%:Leasetime remaining%></div> </div> - <div class="tr cbi-section-table-row"> + <div class="tr"> <div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div> </div> </div> @@ -111,14 +111,14 @@ <fieldset class="cbi-section" style="display:none"> <legend><%:Active DHCPv6 Leases%></legend> - <div class="table cbi-section-table" id="lease6_status_table"> - <div class="tr cbi-section-table-titles"> - <div class="th cbi-section-table-cell"><%:Host%></div> - <div class="th cbi-section-table-cell"><%:IPv6-Address%></div> - <div class="th cbi-section-table-cell"><%:DUID%></div> - <div class="th cbi-section-table-cell"><%:Leasetime remaining%></div> + <div class="table" id="lease6_status_table"> + <div class="tr"> + <div class="th"><%:Host%></div> + <div class="th"><%:IPv6-Address%></div> + <div class="th"><%:DUID%></div> + <div class="th"><%:Leasetime remaining%></div> </div> - <div class="tr cbi-section-table-row"> + <div class="tr"> <div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div> </div> </div> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/switch_status.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/switch_status.htm index 96fbffdb02..d3d07bead9 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/switch_status.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/switch_status.htm @@ -1,21 +1,39 @@ <script type="text/javascript">//<![CDATA[ - var switches = [ '<%=table.concat(self.switches, "', '")%>' ]; + var switches = [ '<%=table.concat(self.switches, "', '")%>' ], + tables = document.querySelectorAll('.cbi-section-table'); + + function add_status_row(table) { + var first_row = table.querySelector('.cbi-section-table-row'); + if (first_row.classList.contains('port-status')) + return first_row; + + var status_row = first_row.parentNode.insertBefore( + E('div', { 'class': first_row.className }), first_row); + + first_row.querySelectorAll('.td').forEach(function(td) { + status_row.appendChild(td.cloneNode(false)); + status_row.lastElementChild.removeAttribute('data-title'); + }); + + status_row.firstElementChild.innerHTML = '<%:Port status:%>'; + status_row.classList.add('port-status') ; + + return status_row; + } + XHR.poll(5, '<%=url('admin/network/switch_status')%>/' + switches.join(','), null, function(x, st) { for (var i = 0; i < switches.length; i++) { var ports = st[switches[i]]; - var th0 = document.getElementById('portstatus-' + switches[i]); + var tr = add_status_row(tables[i]); - if (th0 && ports && ports.length) + if (tr && ports && ports.length) { - if (!th0.innerHTML) - th0.innerHTML = '<%:Port status:%>'; - for (var j = 0; j < ports.length; j++) { - var th = document.getElementById('portstatus-' + switches[i] + '-' + j); + var th = tr.childNodes[j+1]; if (!th) continue; diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm index e9cfb3e85b..9b93942c88 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm @@ -90,25 +90,43 @@ <h2 name="content"><%:Join Network: Wireless Scan%></h2> <div class="cbi-map"> - <fieldset class="cbi-section"> - <div class="table cbi-section-table" style="empty-cells:hide"> + <div class="cbi-section"> + <div class="table"> + <div class="tr table-titles"> + <div class="th col-1 center"><%:Signal%></div> + <div class="th col-5 left"><%:SSID%></div> + <div class="th col-2 center"><%:Channel%></div> + <div class="th col-2 left"><%:Mode%></div> + <div class="th col-3 left"><%:BSSID%></div> + <div class="th col-2 left"><%:Encryption%></div> + <div class="th cbi-section-actions"> </div> + </div> + <!-- scan list --> <% for i, net in ipairs(scanlist(3)) do net.encryption = net.encryption or { } %> - <div class="tr cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>"> - <div class="td cbi-value-field" style="width:16px; padding:3px"> + <div class="tr cbi-rowstyle-<%=1 + ((i-1) % 2)%>"> + <div class="td col-1 center"> <abbr title="<%:Signal%>: <%=net.signal%> <%:dB%> / <%:Quality%>: <%=net.quality%>/<%=net.quality_max%>"> <img src="<%=guess_wifi_signal(net)%>" /><br /> <small><%=percent_wifi_signal(net)%>%</small> </abbr> </div> - <div class="td cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px"> - <big><strong><%=net.ssid and utl.pcdata(net.ssid) or "<em>%s</em>" % translate("hidden")%></strong></big><br /> - <strong>Channel:</strong> <%=net.channel%> | - <strong>Mode:</strong> <%=net.mode%> | - <strong>BSSID:</strong> <%=net.bssid%> | - <strong>Encryption:</strong> <%=format_wifi_encryption(net.encryption)%> + <div class="td col-5 left" data-title="<%:SSID%>"> + <strong><%=net.ssid and utl.pcdata(net.ssid) or "<em>%s</em>" % translate("hidden")%></strong> + </div> + <div class="td col-2 center" data-title="<%:Channel%>"> + <%=net.channel%> + </div> + <div class="td col-2 left" data-title="<%:Mode%>"> + <%=net.mode%> + </div> + <div class="td col-3 left" data-title="<%:BSSID%>"> + <%=net.bssid%> + </div> + <div class="td col-2 left" data-title="<%:Encryption%>"> + <%=format_wifi_encryption(net.encryption)%> </div> - <div class="td cbi-value-field" style="width:40px"> + <div class="td cbi-section-actions"> <form action="<%=url('admin/network/wireless_join')%>" method="post"> <input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="device" value="<%=utl.pcdata(dev)%>" /> @@ -126,23 +144,23 @@ <input type="hidden" name="clbridge" value="<%=iw.type == "wl" and 1 or 0%>" /> - <input class="cbi-button cbi-button-apply" type="submit" value="<%:Join Network%>" /> + <input class="cbi-button cbi-button-action important" type="submit" value="<%:Join Network%>" /> </form> </div> </div> <% end %> <!-- /scan list --> </div> - </fieldset> + </div> </div> <div class="cbi-page-actions right"> <form class="inline" action="<%=url("admin/network/wireless")%>" method="get"> - <input class="cbi-button cbi-button-reset" type="submit" value="<%:Back to overview%>" /> + <input class="cbi-button cbi-button-neutral" type="submit" value="<%:Back to overview%>" /> </form> <form class="inline" action="<%=url('admin/network/wireless_join')%>" method="post"> <input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="device" value="<%=utl.pcdata(dev)%>" /> - <input class="cbi-button cbi-input-find" type="submit" value="<%:Repeat scan%>" /> + <input class="cbi-button cbi-button-action" type="submit" value="<%:Repeat scan%>" /> </form> </div> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm index ceb810018b..8cea5e7eaf 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm @@ -138,7 +138,7 @@ function wifi_shutdown(id, toggle) { var reconnect = (toggle.getAttribute('active') == 'false'); - 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.'))%>)) + 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; @@ -237,13 +237,13 @@ { 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%>'; } @@ -320,7 +320,7 @@ name = host ? (host.name || host.ipv4 || host.ipv6) : null, hint = (host && host.name && (host.ipv4 || host.ipv6)) ? (host.ipv4 || host.ipv6) : null; - assoctable.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(rowstyle), [ + assoctable.appendChild(E('<div class="tr cbi-rowstyle-%d">'.format(rowstyle), [ E('<div class="td"><span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span></div>' .format(iw.device.name, iw.ifname)), E('<div class="td" style="white-space:nowrap">%h</div>' @@ -350,7 +350,7 @@ { var img = document.getElementById(dev + '-iw-upstate'); if (img) - img.src = '<%=resource%>/icons/wifi_big' + (devup[dev] ? '' : '_disabled') + '.png'; + img.src = '<%=resource%>/icons/wifi' + (devup[dev] ? '' : '_disabled') + '.png'; } } } @@ -359,37 +359,37 @@ <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"> - <div class="table cbi-section-table" style="margin:10px; empty-cells:hide"> + <div class="cbi-section-node"> + <div class="table"> <!-- physical device --> <div class="tr"> - <div class="td"> - <img src="<%=resource%>/icons/wifi_big_disabled.png" id="<%=dev:name()%>-iw-upstate" /> + <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 left"> - <big><strong><%=guess_wifi_hw(dev)%> (<%=dev:name()%>)</strong></big><br /> + <div class="td col-7 left"> + <big><strong><%=guess_wifi_hw(dev)%></strong></big><br /> <span id="<%=dev:name()%>-iw-devinfo"></span> </div> - <div class="td right"> + <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> </div> </div> @@ -398,22 +398,22 @@ <!-- network list --> <% if #nets > 0 then %> <% for i, net in ipairs(nets) do %> - <div class="tr cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>"> - <div class="td" 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> </div> - <div class="td left" id="<%=net:id()%>-iw-status"> + <div class="td col-7 left" id="<%=net:id()%>-iw-status"> <em><%:Collecting data...%></em> </div> - <div class="td 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%>" /> + <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 %> - <div class="tr cbi-section-table-row cbi-rowstyle-2"> + <div class="tr cbi-rowstyle-2"> <div class="td left"> <em><%:No network configured on this device%></em> </div> @@ -421,30 +421,30 @@ <% end %> <!-- /network list --> </div> - </fieldset> + </div> <!-- /device <%=dev:name()%> --> <% end %> <h2><%:Associated Stations%></h2> - <fieldset class="cbi-section"> - <div class="table cbi-section-table valign-middle" style="margin:10px" id="iw-assoclist"> - <div class="tr cbi-section-table-titles"> - <div class="th cbi-section-table-cell"></div> - <div class="th cbi-section-table-cell"><%:SSID%></div> - <div class="th cbi-section-table-cell"><%:MAC-Address%></div> - <div class="th cbi-section-table-cell"><%:Host%></div> - <div class="th cbi-section-table-cell"><%:Signal%> / <%:Noise%></div> - <div class="th cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></div> + <div class="cbi-section-node"> + <div class="table" id="iw-assoclist"> + <div class="tr"> + <div class="th"><%:Interface%></div> + <div class="th"><%:SSID%></div> + <div class="th"><%:MAC-Address%></div> + <div class="th"><%:Host%></div> + <div class="th"><%:Signal%> / <%:Noise%></div> + <div class="th"><%:RX Rate%> / <%:TX Rate%></div> </div> - <div class="tr cbi-section-table-row cbi-rowstyle-2"> + <div class="tr cbi-rowstyle-2"> <div class="td"> <em><%:Collecting data...%></em> </div> </div> </div> - </fieldset> + </div> </div> <%+footer%> |