diff options
Diffstat (limited to 'modules/luci-mod-admin-full/luasrc/view')
21 files changed, 991 insertions, 1394 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 2512a35b3c..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 @@ -33,7 +33,7 @@ <script type="text/javascript" src="<%=resource%>/cbi.js"></script> <script type="text/javascript">//<![CDATA[ function iface_shutdown(id, reconnect) { - if (!reconnect && !confirm(String.format('<%_Really shutdown interface "%s" ?\nYou might lose access to this device if you are connected via this interface.%>', id))) + if (!reconnect && !confirm(<%=luci.http.write_json(translate('Really shutdown interface "%s"? You might lose access to this device if you are connected via this interface.'))%>.format(id))) return; var d = document.getElementById(id + '-ifc-description'); @@ -67,7 +67,7 @@ } function iface_delete(id) { - if (!confirm('<%:Really delete this interface? The deletion cannot be undone!\nYou 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 ); @@ -164,7 +164,7 @@ ifc.ip6addrs[i] ); } - + if (ifc.ip6prefix) { html += String.format('<strong><%:IPv6-PD%>:</strong> %s<br />', ifc.ip6prefix); @@ -209,46 +209,43 @@ </fieldset> <div class="cbi-map"> - <fieldset class="cbi-section"> + <div class="cbi-section"> <legend><%:Interface Overview%></legend> - <table class="cbi-section-table" style="margin:10px; empty-cells:hide"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Network%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Status%></th> - <th class="cbi-section-table-cell"><%:Actions%></th> - </tr> - <% - 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") - %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=i % 2 + 1%>"> - <td class="cbi-value-field" style="padding:3px"> - <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> - </td> - <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=net[1]%>-ifc-description"> - <em><%:Collecting data...%></em> - </td> - <td style="width:420px"> - <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%>" /> - </td> - </tr> - <% end %> - </table> + <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> + <% 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 b15dd13f39..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> -<table> - <tr class="cbi-section-table"> - <td></td> - <td class="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> - </td> - <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-ifc-description"> - <em><%:Collecting data...%></em> - </td> - </tr> -</table> +<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 28a37dcd98..8fbbdc9477 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 @@ -1,29 +1,13 @@ <script type="text/javascript">//<![CDATA[ - function duid2mac(duid) { - // DUID-LLT / Ethernet - if (duid.length === 28 && duid.substr(0, 8) === '00010001') - return duid.substr(16).replace(/(..)(?=..)/g, '$1:').toUpperCase(); - - // DUID-LL / Ethernet - if (duid.length === 20 && duid.substr(0, 8) === '00030001') - return duid.substr(8).replace(/(..)(?=..)/g, '$1:').toUpperCase(); - - return null; - } - - var hosts = <%=luci.http.write_json(luci.sys.net.host_hints())%>; - XHR.poll(5, '<%=url('admin/network/dhcplease_status')%>', null, function(x, st) { var tb = document.getElementById('lease_status_table'); if (st && st[0] && tb) { - /* clear all rows */ - while( tb.rows.length > 1 ) - tb.deleteRow(1); + var rows = []; - for( var i = 0; i < st[0].length; i++ ) + for (var i = 0; i < st[0].length; i++) { var timestr; @@ -34,24 +18,15 @@ else timestr = String.format('%t', st[0][i].expires); - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - tr.insertCell(-1).innerHTML = st[0][i].hostname ? st[0][i].hostname : '?'; - tr.insertCell(-1).innerHTML = st[0][i].ipaddr; - tr.insertCell(-1).innerHTML = st[0][i].macaddr; - tr.insertCell(-1).innerHTML = timestr; + rows.push([ + st[0][i].hostname || '?', + st[0][i].ipaddr, + st[0][i].macaddr, + timestr + ]); } - if( tb.rows.length == 1 ) - { - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 4; - td.innerHTML = '<em><br /><%:There are no active leases.%></em>'; - } + cbi_update_table(tb, rows, '<em><%:There are no active leases.%></em>'); } var tb6 = document.getElementById('lease6_status_table'); @@ -59,11 +34,9 @@ { tb6.parentNode.style.display = 'block'; - /* clear all rows */ - while( tb6.rows.length > 1 ) - tb6.deleteRow(1); + var rows = []; - for( var i = 0; i < st[1].length; i++ ) + for (var i = 0; i < st[1].length; i++) { var timestr; @@ -74,66 +47,49 @@ else timestr = String.format('%t', st[1][i].expires); - var tr = tb6.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - var host = hosts[duid2mac(st[1][i].duid)]; - if (!st[1][i].hostname) - tr.insertCell(-1).innerHTML = - (host && (host.name || host.ipv4 || host.ipv6)) - ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">? (%h)</div>'.format(host.name || host.ipv4 || host.ipv6) - : '?'; - else - tr.insertCell(-1).innerHTML = - (host && host.name && st[1][i].hostname != host.name) - ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">%h (%h)</div>'.format(st[1][i].hostname, host.name) - : st[1][i].hostname; + var name = st[1][i].hostname, + hint = st[1][i].host_hint; - tr.insertCell(-1).innerHTML = st[1][i].ip6addr; - tr.insertCell(-1).innerHTML = st[1][i].duid; - tr.insertCell(-1).innerHTML = timestr; + rows.push([ + hint ? '%h (%h)'.format(name || '?', hint) : (name || '?'), + st[1][i].ip6addr, + st[1][i].duid, + timestr + ]); } - if( tb6.rows.length == 1 ) - { - var tr = tb6.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 4; - td.innerHTML = '<em><br /><%:There are no active leases.%></em>'; - } + cbi_update_table(tb6, rows, '<em><%:There are no active leases.%></em>'); } } ); //]]></script> -<fieldset class="cbi-section"> - <legend><%:Active DHCP Leases%></legend> - <table class="cbi-section-table" id="lease_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Hostname%></th> - <th class="cbi-section-table-cell"><%:IPv4-Address%></th> - <th class="cbi-section-table-cell"><%:MAC-Address%></th> - <th class="cbi-section-table-cell"><%:Leasetime remaining%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="4"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> -</fieldset> - -<fieldset class="cbi-section" style="display:none"> - <legend><%:Active DHCPv6 Leases%></legend> - <table class="cbi-section-table" id="lease6_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Host%></th> - <th class="cbi-section-table-cell"><%:IPv6-Address%></th> - <th class="cbi-section-table-cell"><%:DUID%></th> - <th class="cbi-section-table-cell"><%:Leasetime remaining%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="4"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> -</fieldset> +<div class="cbi-section"> + <h3><%:Active DHCP Leases%></h3> + <div class="table" id="lease_status_table"> + <div class="tr table-titles"> + <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 placeholder"> + <div class="td"><em><%:Collecting data...%></em></div> + </div> + </div> +</div> + +<div class="cbi-section" style="display:none"> + <h3><%:Active DHCPv6 Leases%></h3> + <div class="table" id="lease6_status_table"> + <div class="tr table-titles"> + <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 placeholder"> + <div class="td"><em><%:Collecting data...%></em></div> + </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..68f0bbc9d4 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.querySelector('[data-name="%d"]'.format(j)); if (!th) continue; diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_assoclist.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_assoclist.htm new file mode 100644 index 0000000000..b6f84c0607 --- /dev/null +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_assoclist.htm @@ -0,0 +1,82 @@ +<script type="text/javascript">//<![CDATA[ + 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; + } + + XHR.poll(5, '<%=url('admin/network/wireless_assoclist')%>', null, + function(x, st) + { + var tb = document.getElementById('wifi_assoclist_table'); + if (st && tb) + { + var rows = []; + + st.forEach(function(bss) { + var icon; + var q = (-1 * (bss.noise - bss.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"; + + rows.push([ + '<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> <a href="%s">%h</a><small> (%h)</small></span>'.format( + bss.radio, + bss.link, + bss.name, + bss.ifname), + bss.bssid, + bss.host_hint ? '%h (%h)'.format(bss.host_name || '?', bss.host_hint) : (bss.host_name || '?'), + '<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span>'.format( + bss.signal, + bss.noise, + bss.signal - bss.noise, + icon, + bss.signal, + bss.noise), + E('span', {}, [ + E('span', wifirate(bss, true)), + E('br'), + E('span', wifirate(bss, false)) + ]) + ]); + }); + + cbi_update_table(tb, rows, '<em><%:No information available%></em>'); + } + } + ); +//]]></script> + +<div class="table" id="wifi_assoclist_table"> + <div class="tr table-titles"> + <div class="th nowrap"><%:Network%></div> + <div class="th hide-xs"><%:MAC-Address%></div> + <div class="th nowrap"><%:Host%></div> + <div class="th nowrap"><%:Signal%> / <%:Noise%></div> + <div class="th nowrap"><%:RX Rate%> / <%:TX Rate%></div> + </div> + <div class="tr placeholder"> + <div class="td"><em><%:Collecting data...%></em></div> + </div> +</div> 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 3533c6fa4d..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"> - <table class="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 { } %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>"> - <td class="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> - </td> - <td class="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)%> - </td> - <td class="cbi-value-field" style="width:40px"> + </div> + <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-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> - </td> - </tr> + </div> + </div> <% end %> <!-- /scan list --> - </table> - </fieldset> + </div> + </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 4465095ff2..b9602785f4 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 @@ -101,9 +101,9 @@ <%+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 %> @@ -113,32 +113,10 @@ var is_reconnecting = false; - function nowrap(s) { - return s.replace(/ /g, ' '); - } - - 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; @@ -176,7 +154,7 @@ } 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%>' }, @@ -193,20 +171,25 @@ { 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) @@ -222,9 +205,6 @@ 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( @@ -237,13 +217,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%>'; } @@ -254,7 +234,7 @@ 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 />' + @@ -274,99 +254,23 @@ : '<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 : '?' + ); } } } @@ -375,92 +279,76 @@ <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%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm index 04687f38e7..85468252e9 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm @@ -62,17 +62,17 @@ ); //]]></script> -<table> - <tr class="cbi-section-table"> - <td></td> - <td class="cbi-value-field" style="width:16px; padding:3px" id="<%=self.option%>-iw-signal"> +<div class="table"> + <div class="tr cbi-section-table"> + <div class="td"></div> + <div class="td cbi-value-field" style="width:16px; padding:3px" id="<%=self.option%>-iw-signal"> <img src="<%=resource%>/icons/signal-none.png" title="<%:Not associated%>" /><br /> <small>0%</small> - </td> - <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-iw-description"> + </div> + <div class="td cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-iw-description"> <em><%:Collecting data...%></em> - </td> - </tr> -</table> + </div> + </div> +</div> <%+cbi/valuefooter%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm index 33bbee7843..b7594bfd45 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm @@ -202,18 +202,13 @@ data_rx_peak = Math.max(data_rx_peak, data_rx[i]); data_tx_peak = Math.max(data_tx_peak, data_tx[i]); - if (i > 0) - { - data_rx_avg = (data_rx_avg + data_rx[i]) / 2; - data_tx_avg = (data_tx_avg + data_tx[i]) / 2; - } - else - { - data_rx_avg = data_rx[i]; - data_tx_avg = data_tx[i]; - } + data_rx_avg += data_rx[i]; + data_tx_avg += data_tx[i]; } + data_rx_avg = (data_rx_avg / Math.max(data_rx.length, 1)); + data_tx_avg = (data_tx_avg / Math.max(data_tx.length, 1)); + /* remember current timestamp, calculate horizontal scale */ data_stamp = data[data.length-1][TIME]; data_scale = height / (data_max * 1.1); @@ -258,6 +253,8 @@ label_tx_peak.innerHTML = bandwidth_label(data_tx_peak, true); } ); + + XHR.run(); } }, 1000 ); @@ -275,27 +272,27 @@ <div style="text-align:right"><small id="scale">-</small></div> <br /> -<table style="width:100%; table-layout:fixed" cellspacing="5"> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Inbound:%></strong></td> - <td id="rx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> +<div class="table" style="width:100%; table-layout:fixed" cellspacing="5"> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Inbound:%></strong></div> + <div class="td" id="rx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="rx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="rx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="rx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Outbound:%></strong></td> - <td id="tx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="rx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Outbound:%></strong></div> + <div class="td" id="tx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="tx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="tx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="tx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> - </tr> -</table> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="tx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div> + </div> +</div> <%+footer%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm index b7ebc41451..ae8a6bb7ce 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm @@ -139,8 +139,8 @@ { var conn = json.connections; - while (conn_table.rows.length > 1) - conn_table.rows[0].parentNode.deleteRow(-1); + while (conn_table.firstElementChild !== conn_table.lastElementChild) + conn_table.removeChild(conn_table.lastElementChild); var lookup_queue = [ ]; @@ -153,13 +153,10 @@ { var c = conn[i]; - if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1') - || (c.src == '::1' && c.dst == '::1')) + if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1') || + (c.src == '::1' && c.dst == '::1')) continue; - var tr = conn_table.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + (1 + (i % 2)); - if (!dns_cache[c.src]) lookup_queue.push(c.src); @@ -169,14 +166,13 @@ var src = dns_cache[c.src] || (c.layer3 == 'ipv6' ? '[' + c.src + ']' : c.src); var dst = dns_cache[c.dst] || (c.layer3 == 'ipv6' ? '[' + c.dst + ']' : c.dst); - tr.insertCell(-1).innerHTML = c.layer3.toUpperCase(); - tr.insertCell(-1).innerHTML = c.layer4.toUpperCase(); - tr.insertCell(-1).innerHTML = String.format('%s:%d', src, c.sport); - tr.insertCell(-1).innerHTML = String.format('%s:%d', dst, c.dport); - - var traf = tr.insertCell(-1); - traf.style.whiteSpace = 'nowrap'; - traf.innerHTML = String.format('%1024.2mB (%d <%:Pkts.%>)', c.bytes, c.packets); + conn_table.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(1 + (i % 2)), [ + E('<div class="td">', c.layer3.toUpperCase()), + E('<div class="td">', c.layer4.toUpperCase()), + E('<div class="td">', [ src, ':', c.sport ]), + E('<div class="td">', [ dst, ':', c.dport ]), + E('<div class="td" style="white-space:nowrap">', '%1024.2mB (%d <%:Pkts.%>)'.format(c.bytes, c.packets)), + ])); } if (lookup_queue.length > 0) @@ -308,6 +304,8 @@ label_otr_peak.innerHTML = Math.floor(data_otr_peak); } ); + + XHR.run(); } }, 1000 ); @@ -324,52 +322,52 @@ <div style="text-align:right"><small id="scale">-</small></div> <br /> - <table style="width:100%; table-layout:fixed" cellspacing="5"> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:UDP:%></strong></td> - <td id="lb_udp_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_udp_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_udp_peak">0</td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:TCP:%></strong></td> - <td id="lb_tcp_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_tcp_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_tcp_peak">0</td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Other:%></strong></td> - <td id="lb_otr_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_otr_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_otr_peak">0</td> - </tr> - </table> + <div class="table" style="width:100%; table-layout:fixed" cellspacing="5"> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:UDP:%></strong></div> + <div class="td" id="lb_udp_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_udp_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_udp_peak">0</div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:TCP:%></strong></div> + <div class="td" id="lb_tcp_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_tcp_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_tcp_peak">0</div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Other:%></strong></div> + <div class="td" id="lb_otr_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_otr_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_otr_peak">0</div> + </div> + </div> <br /> <div class="cbi-section-node"> - <table class="cbi-section-table" id="connections"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Network%></th> - <th class="cbi-section-table-cell"><%:Protocol%></th> - <th class="cbi-section-table-cell"><%:Source%></th> - <th class="cbi-section-table-cell"><%:Destination%></th> - <th class="cbi-section-table-cell"><%:Transfer%></th> - </tr> - - <tr><td colspan="5"><em><%:Collecting data...%></em></td></tr> - </table> + <div class="table cbi-section-table" id="connections"> + <div class="tr cbi-section-table-titles"> + <div class="th cbi-section-table-cell"><%:Network%></div> + <div class="th cbi-section-table-cell"><%:Protocol%></div> + <div class="th cbi-section-table-cell"><%:Source%></div> + <div class="th cbi-section-table-cell"><%:Destination%></div> + <div class="th cbi-section-table-cell"><%:Transfer%></div> + </div> + + <div class="tr"><div class="td" colspan="5"><em><%:Collecting data...%></em></div></div> + </div> </div> </fieldset> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm index 5e6e494ad6..9aee30b5f9 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm @@ -6,6 +6,7 @@ <% local fs = require "nixio.fs" + local ipc = require "luci.ip" local util = require "luci.util" local stat = require "luci.tools.status" local ver = require "luci.version" @@ -52,12 +53,12 @@ swap = swapinfo, connmax = conn_max, conncount = conn_count, - leases = stat.dhcp_leases(), - leases6 = stat.dhcp6_leases(), wifinets = stat.wifi_networks() } if wan then + local dev = wan:get_interface() + local link = dev and ipc.link(dev:name()) rv.wan = { ipaddr = wan:ipaddr(), gwaddr = wan:gwaddr(), @@ -66,12 +67,19 @@ expires = wan:expires(), uptime = wan:uptime(), proto = wan:proto(), + i18n = wan:get_i18n(), ifname = wan:ifname(), - link = wan:adminlink() + link = wan:adminlink(), + mac = dev and dev:mac(), + type = dev and dev:type(), + name = dev and dev:get_i18n(), + ether = link and link.type == 1 } end if wan6 then + local dev = wan6:get_interface() + local link = dev and ipc.link(dev:name()) rv.wan6 = { ip6addr = wan6:ip6addr(), gw6addr = wan6:gw6addr(), @@ -79,8 +87,13 @@ ip6prefix = wan6:ip6prefix(), uptime = wan6:uptime(), proto = wan6:proto(), + i18n = wan6:get_i18n(), ifname = wan6:ifname(), - link = wan6:adminlink() + link = wan6:adminlink(), + mac = dev and dev:mac(), + type = dev and dev:type(), + name = dev and dev:get_i18n(), + ether = link and link.type == 1 } end @@ -96,11 +109,6 @@ luci.http.write_json(rv) return - elseif luci.http.formvalue("hosts") == "1" then - luci.http.prepare_content("application/json") - luci.http.write_json(luci.sys.net.host_hints()) - - return end -%> @@ -115,7 +123,7 @@ var pc = Math.floor((100 / mn) * vn); return String.format( - '<div style="width:200px; position:relative; border:1px solid #999999">' + + '<div style="width:100%%; max-width:200px; position:relative; border:1px solid #999999">' + '<div style="background-color:#CCCCCC; width:%d%%; height:15px">' + '<div style="position:absolute; left:0; top:0; text-align:center; width:100%%; color:#000000">' + '<small>%s / %s (%d%%)</small>' + @@ -125,172 +133,92 @@ ); } - 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%>'; - } + function labelList(items, offset) { + var rv = [ ]; - return s; - } + for (var i = offset || 0; i < items.length; i += 2) { + var label = items[i], + value = items[i+1]; + + if (value === undefined || value === null) + continue; - function duid2mac(duid) { - // DUID-LLT / Ethernet - if (duid.length === 28 && duid.substr(0, 8) === '00010001') - return duid.substr(16).replace(/(..)(?=..)/g, '$1:').toUpperCase(); + if (label) + rv.push(E('strong', [label, ': '])); - // DUID-LL / Ethernet - if (duid.length === 20 && duid.substr(0, 8) === '00030001') - return duid.substr(8).replace(/(..)(?=..)/g, '$1:').toUpperCase(); + rv.push(value, E('br')); + } - return null; + return rv; } - var npoll = 1; - var hosts = <%=luci.http.write_json(luci.sys.net.host_hints())%>; + function renderBox(title, active, childs) { + childs = childs || []; + childs.unshift(E('span', labelList(arguments, 3))); - function updateHosts() { - XHR.get('<%=REQUEST_URI%>', { hosts: 1 }, function(x, data) { - hosts = data; - }); + return E('div', { class: 'ifacebox' }, [ + E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') }, + E('strong', title)), + E('div', { class: 'ifacebox-body left' }, childs) + ]); + } + + function renderBadge(icon, title) { + return E('span', { class: 'ifacebadge' }, [ + E('img', { src: icon, title: title || '' }), + E('span', labelList(arguments, 2)) + ]); } XHR.poll(5, '<%=REQUEST_URI%>', { status: 1 }, function(x, info) { - if (!(npoll++ % 5)) - updateHosts(); - - var si = document.getElementById('wan4_i'); - var ss = document.getElementById('wan4_s'); - var ifc = info.wan; - - if (ifc && ifc.ifname && ifc.proto != 'none') - { - var s = String.format( - '<strong><%:Type%>: </strong>%s<br />' + - '<strong><%:Address%>: </strong>%s<br />' + - '<strong><%:Netmask%>: </strong>%s<br />' + - '<strong><%:Gateway%>: </strong>%s<br />', - ifc.proto, - (ifc.ipaddr) ? ifc.ipaddr : '0.0.0.0', - (ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255', - (ifc.gwaddr) ? ifc.gwaddr : '0.0.0.0' - ); - - for (var i = 0; i < ifc.dns.length; i++) - { - s += String.format( - '<strong><%:DNS%> %d: </strong>%s<br />', - i + 1, ifc.dns[i] - ); - } - - if (ifc.expires > -1) - { - s += String.format( - '<strong><%:Expires%>: </strong>%t<br />', - ifc.expires - ); - } - - if (ifc.uptime > 0) - { - s += String.format( - '<strong><%:Connected%>: </strong>%t<br />', - ifc.uptime - ); - } - - ss.innerHTML = String.format('<small>%s</small>', s); - si.innerHTML = String.format( - '<img src="<%=resource%>/icons/ethernet.png" />' + - '<br /><small><a href="%s">%s</a></small>', - ifc.link, ifc.ifname - ); - } - else - { - si.innerHTML = '<img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small>'; - ss.innerHTML = '<em><%:Not connected%></em>'; - } + var us = document.getElementById('upstream_status_table'); + + while (us.lastElementChild) + us.removeChild(us.lastElementChild); + + var ifc = info.wan || {}; + + us.appendChild(renderBox( + '<%:IPv4 Upstream%>', + (ifc.ifname && ifc.proto != 'none'), + [ E('div', {}, renderBadge( + '<%=resource%>/icons/%s.png'.format((ifc && ifc.type) ? ifc.type : 'ethernet_disabled'), null, + '<%:Device%>', ifc ? (ifc.name || ifc.ifname || '-') : '-', + '<%:MAC-Address%>', (ifc && ifc.ether) ? ifc.mac : null)) ], + '<%:Protocol%>', ifc.i18n || E('em', '<%:Not connected%>'), + '<%:Address%>', (ifc.ipaddr) ? ifc.ipaddr : '0.0.0.0', + '<%:Netmask%>', (ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255', + '<%:Gateway%>', (ifc.gwaddr) ? ifc.gwaddr : '0.0.0.0', + '<%:DNS%> 1', (ifc.dns) ? ifc.dns[0] : null, + '<%:DNS%> 2', (ifc.dns) ? ifc.dns[1] : null, + '<%:DNS%> 3', (ifc.dns) ? ifc.dns[2] : null, + '<%:DNS%> 4', (ifc.dns) ? ifc.dns[3] : null, + '<%:DNS%> 5', (ifc.dns) ? ifc.dns[4] : null, + '<%:Expires%>', (ifc.expires > -1) ? '%t'.format(ifc.expires) : null, + '<%:Connected%>', (ifc.uptime > 0) ? '%t'.format(ifc.uptime) : null)); <% if has_ipv6 then %> - var si6 = document.getElementById('wan6_i'); - var ss6 = document.getElementById('wan6_s'); - var ifc6 = info.wan6; - - if (ifc6 && ifc6.ifname && ifc6.proto != 'none') - { - var s = String.format( - '<strong><%:Type%>: </strong>%s%s<br />', - ifc6.proto, (ifc6.ip6prefix) ? '-pd' : '' - ); - - if (!ifc6.ip6prefix) - { - s += String.format( - '<strong><%:Address%>: </strong>%s<br />', - (ifc6.ip6addr) ? ifc6.ip6addr : '::' - ); - } - else - { - s += String.format( - '<strong><%:Prefix Delegated%>: </strong>%s<br />', - ifc6.ip6prefix - ); - if (ifc6.ip6addr) - { - s += String.format( - '<strong><%:Address%>: </strong>%s<br />', - ifc6.ip6addr - ); - } - } - - s += String.format( - '<strong><%:Gateway%>: </strong>%s<br />', - (ifc6.gw6addr) ? ifc6.gw6addr : '::' - ); - - for (var i = 0; i < ifc6.dns.length; i++) - { - s += String.format( - '<strong><%:DNS%> %d: </strong>%s<br />', - i + 1, ifc6.dns[i] - ); - } - - if (ifc6.uptime > 0) - { - s += String.format( - '<strong><%:Connected%>: </strong>%t<br />', - ifc6.uptime - ); - } - - ss6.innerHTML = String.format('<small>%s</small>', s); - si6.innerHTML = String.format( - '<img src="<%=resource%>/icons/ethernet.png" />' + - '<br /><small><a href="%s">%s</a></small>', - ifc6.link, ifc6.ifname - ); - } - else - { - si6.innerHTML = '<img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small>'; - ss6.innerHTML = '<em><%:Not connected%></em>'; - } + var ifc6 = info.wan6 || {}; + + us.appendChild(renderBox( + '<%:IPv6 Upstream%>', + (ifc6.ifname && ifc6.proto != 'none'), + [ E('div', {}, renderBadge( + '<%=resource%>/icons/%s.png'.format(ifc6.type || 'ethernet_disabled'), null, + '<%:Device%>', ifc6 ? (ifc6.name || ifc6.ifname || '-') : '-', + '<%:MAC-Address%>', (ifc6 && ifc6.ether) ? ifc6.mac : null)) ], + '<%:Protocol%>', ifc6.i18n ? (ifc6.i18n + (ifc6.proto === 'dhcp' && ifc6.ip6prefix ? '-PD' : '')) : E('em', '<%:Not connected%>'), + '<%:Prefix Delegated%>', ifc6.ip6prefix, + '<%:Address%>', (ifc6.ip6prefix) ? (ifc6.ip6addr || null) : (ifc6.ipaddr || '::'), + '<%:Gateway%>', (ifc6.gw6addr) ? ifc6.gw6addr : '::', + '<%:DNS%> 1', (ifc6.dns) ? ifc6.dns[0] : null, + '<%:DNS%> 2', (ifc6.dns) ? ifc6.dns[1] : null, + '<%:DNS%> 3', (ifc6.dns) ? ifc6.dns[2] : null, + '<%:DNS%> 4', (ifc6.dns) ? ifc6.dns[3] : null, + '<%:DNS%> 5', (ifc6.dns) ? ifc6.dns[4] : null, + '<%:Connected%>', (ifc6.uptime > 0) ? '%t'.format(ifc6.uptime) : null)); <% end %> <% if has_dsl then %> @@ -353,122 +281,18 @@ ); <% end %> - <% if has_dhcp then %> - var ls = document.getElementById('lease_status_table'); - if (ls) - { - /* clear all rows */ - while( ls.rows.length > 1 ) - ls.rows[0].parentNode.deleteRow(1); - - for( var i = 0; i < info.leases.length; i++ ) - { - var timestr; - - if (info.leases[i].expires === false) - timestr = '<em><%:unlimited%></em>'; - else if (info.leases[i].expires <= 0) - timestr = '<em><%:expired%></em>'; - else - timestr = String.format('%t', info.leases[i].expires); - - var tr = ls.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - tr.insertCell(-1).innerHTML = info.leases[i].hostname ? info.leases[i].hostname : '?'; - tr.insertCell(-1).innerHTML = info.leases[i].ipaddr; - tr.insertCell(-1).innerHTML = info.leases[i].macaddr; - tr.insertCell(-1).innerHTML = timestr; - } - - if( ls.rows.length == 1 ) - { - var tr = ls.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 4; - td.innerHTML = '<em><br /><%:There are no active leases.%></em>'; - } - } - - var ls6 = document.getElementById('lease6_status_table'); - if (ls6 && info.leases6) - { - ls6.parentNode.style.display = 'block'; - - /* clear all rows */ - while( ls6.rows.length > 1 ) - ls6.rows[0].parentNode.deleteRow(1); - - for( var i = 0; i < info.leases6.length; i++ ) - { - var timestr; - - if (info.leases6[i].expires === false) - timestr = '<em><%:unlimited%></em>'; - else if (info.leases6[i].expires <= 0) - timestr = '<em><%:expired%></em>'; - else - timestr = String.format('%t', info.leases6[i].expires); - - var tr = ls6.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - var host = hosts[duid2mac(info.leases6[i].duid)]; - if (!info.leases6[i].hostname) - tr.insertCell(-1).innerHTML = - (host && (host.name || host.ipv4 || host.ipv6)) - ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">? (%h)</div>'.format(host.name || host.ipv4 || host.ipv6) - : '?'; - else - tr.insertCell(-1).innerHTML = - (host && host.name && info.leases6[i].hostname != host.name) - ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">%h (%h)</div>'.format(info.leases6[i].hostname, host.name) - : info.leases6[i].hostname; - - tr.insertCell(-1).innerHTML = info.leases6[i].ip6addr; - tr.insertCell(-1).innerHTML = info.leases6[i].duid; - tr.insertCell(-1).innerHTML = timestr; - } - - if( ls6.rows.length == 1 ) - { - var tr = ls6.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 4; - td.innerHTML = '<em><br /><%:There are no active leases.%></em>'; - } - } - <% end %> - <% if has_wifi then %> - var assoclist = [ ]; - var ws = document.getElementById('wifi_status_table'); if (ws) { - var wsbody = ws.rows[0].parentNode; - while (ws.rows.length > 0) - wsbody.deleteRow(0); + while (ws.lastElementChild) + ws.removeChild(ws.lastElementChild); for (var didx = 0; didx < info.wifinets.length; didx++) { var dev = info.wifinets[didx]; - - var tr = wsbody.insertRow(-1); - var td; - - td = tr.insertCell(-1); - td.width = "33%"; - td.innerHTML = dev.name; - td.style.verticalAlign = "top"; - - td = tr.insertCell(-1); - - var s = ''; + var net0 = (dev.networks && dev.networks[0]) ? dev.networks[0] : {}; + var vifs = []; for (var nidx = 0; nidx < dev.networks.length; nidx++) { @@ -489,135 +313,27 @@ else icon = "<%=resource%>/icons/signal-75-100.png"; - s += String.format( - '<table><tr><td style="text-align:center; width:32px; padding:3px">' + - '<img src="%s" title="<%:Signal%>: %d dBm / <%:Noise%>: %d dBm" />' + - '<br /><small>%d%%</small>' + - '</td><td style="text-align:left; padding:3px"><small>' + - '<strong><%:SSID%>:</strong> <a href="%s">%h</a><br />' + - '<strong><%:Mode%>:</strong> %s<br />' + - '<strong><%:Channel%>:</strong> %d (%.3f <%:GHz%>)<br />' + - '<strong><%:Bitrate%>:</strong> %s <%:Mbit/s%><br />', - icon, net.signal, net.noise, - net.quality, - net.link, net.ssid || '?', - net.mode, - net.channel, net.frequency, - net.bitrate || '?' - ); - - if (is_assoc) - { - s += String.format( - '<strong><%:BSSID%>:</strong> %s<br />' + - '<strong><%:Encryption%>:</strong> %s', - net.bssid || '?', - net.encryption - ); - } - else - { - s += '<em><%:Wireless is disabled or not associated%></em>'; - } - - s += '</small></td></tr></table>'; - - for (var bssid in net.assoclist) - { - var bss = net.assoclist[bssid]; - - bss.bssid = bssid; - bss.link = net.link; - bss.name = net.name; - bss.ifname = net.ifname; - bss.radio = dev.name; - - assoclist.push(bss); - } + vifs.push(renderBadge( + icon, + '<%:Signal%>: %d dBm / <%:Quality%>: %d%%'.format(net.signal, net.quality), + '<%:SSID%>', E('a', { href: net.link }, [ net.ssid || '?' ]), + '<%:Mode%>', net.mode, + '<%:BSSID%>', is_assoc ? (net.bssid || '-') : null, + '<%:Encryption%>', is_assoc ? net.encryption : null, + '<%:Associations%>', is_assoc ? (net.num_assoc || '-') : null, + null, is_assoc ? null : E('em', '<%:Wireless is disabled or not associated%>'))); } - if (!s) - s = '<em><%:No information available%></em>'; - - td.innerHTML = s; - } - } - - var ac = document.getElementById('wifi_assoc_table'); - if (ac) - { - /* clear all rows */ - while( ac.rows.length > 1 ) - ac.rows[0].parentNode.deleteRow(1); - - assoclist.sort(function(a, b) { - return (a.name == b.name) - ? (a.bssid < b.bssid) - : (a.name > b.name ) - ; - }); - - for( var i = 0; i < assoclist.length; i++ ) - { - var tr = ac.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + (1 + (i % 2)); - - var icon; - var q = (-1 * (assoclist[i].noise - assoclist[i].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>', - assoclist[i].radio, assoclist[i].ifname - ); - - tr.insertCell(-1).innerHTML = String.format( - '<a href="%s">%s</a>', - assoclist[i].link, - '%h'.format(assoclist[i].name).nobr() - ); - - tr.insertCell(-1).innerHTML = assoclist[i].bssid; - - var host = hosts[assoclist[i].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[i].signal, assoclist[i].noise, assoclist[i].signal - assoclist[i].noise, - icon, - assoclist[i].signal, assoclist[i].noise - ); - - tr.insertCell(-1).innerHTML = wifirate(assoclist[i], true).nobr() + '<br />' + wifirate(assoclist[i], false).nobr(); + ws.appendChild(renderBox( + dev.device, dev.up || net0.up, + [ E('div', vifs) ], + '<%:Type%>', dev.name.replace(/^Generic | Wireless Controller .+$/g, ''), + '<%:Channel%>', net0.channel ? '%d (%.3f <%:GHz%>)'.format(net0.channel, net0.frequency) : '-', + '<%:Bitrate%>', net0.bitrate ? '%d <%:Mbit/s%>'.format(net0.bitrate) : '-')); } - if (ac.rows.length == 1) - { - var tr = ac.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 7; - td.innerHTML = '<br /><em><%:No information available%></em>'; - } + if (!ws.lastElementChild) + ws.appendChild(E('<em><%:No information available%></em>')); } <% end %> @@ -676,140 +392,97 @@ <h2 name="content"><%:Status%></h2> -<fieldset class="cbi-section"> - <legend><%:System%></legend> +<div class="cbi-section"> + <h3><%:System%></h3> - <table width="100%" cellspacing="10"> - <tr><td width="33%"><%:Hostname%></td><td><%=luci.sys.hostname() or "?"%></td></tr> - <tr><td width="33%"><%:Model%></td><td><%=pcdata(boardinfo.model or boardinfo.system or "?")%></td></tr> - <tr><td width="33%"><%:Firmware Version%></td><td> + <div class="table" width="100%"> + <div class="tr"><div class="td left" width="33%"><%:Hostname%></div><div class="td left"><%=luci.sys.hostname() or "?"%></div></div> + <div class="tr"><div class="td left" width="33%"><%:Model%></div><div class="td left"><%=pcdata(boardinfo.model or "?")%></div></div> + <div class="tr"><div class="td left" width="33%"><%:Architecture%></div><div class="td left"><%=pcdata(boardinfo.system or "?")%></div></div> + <div class="tr"><div class="td left" width="33%"><%:Firmware Version%></div><div class="td left"> <%=pcdata(ver.distname)%> <%=pcdata(ver.distversion)%> / <%=pcdata(ver.luciname)%> (<%=pcdata(ver.luciversion)%>) - </td></tr> - <tr><td width="33%"><%:Kernel Version%></td><td><%=unameinfo.release or "?"%></td></tr> - <tr><td width="33%"><%:Local Time%></td><td id="localtime">-</td></tr> - <tr><td width="33%"><%:Uptime%></td><td id="uptime">-</td></tr> - <tr><td width="33%"><%:Load Average%></td><td id="loadavg">-</td></tr> - </table> -</fieldset> - -<fieldset class="cbi-section"> - <legend><%:Memory%></legend> - - <table width="100%" cellspacing="10"> - <tr><td width="33%"><%:Total Available%></td><td id="memtotal">-</td></tr> - <tr><td width="33%"><%:Free%></td><td id="memfree">-</td></tr> - <tr><td width="33%"><%:Buffered%></td><td id="membuff">-</td></tr> - </table> -</fieldset> + </div></div> + <div class="tr"><div class="td left" width="33%"><%:Kernel Version%></div><div class="td left"><%=unameinfo.release or "?"%></div></div> + <div class="tr"><div class="td left" width="33%"><%:Local Time%></div><div class="td left" id="localtime">-</div></div> + <div class="tr"><div class="td left" width="33%"><%:Uptime%></div><div class="td left" id="uptime">-</div></div> + <div class="tr"><div class="td left" width="33%"><%:Load Average%></div><div class="td left" id="loadavg">-</div></div> + </div> +</div> + +<div class="cbi-section"> + <h3><%:Memory%></h3> + + <div class="table" width="100%"> + <div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="memtotal">-</div></div> + <div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="memfree">-</div></div> + <div class="tr"><div class="td left" width="33%"><%:Buffered%></div><div class="td left" id="membuff">-</div></div> + </div> +</div> <% if swapinfo.total > 0 then %> -<fieldset class="cbi-section"> - <legend><%:Swap%></legend> - - <table width="100%" cellspacing="10"> - <tr><td width="33%"><%:Total Available%></td><td id="swaptotal">-</td></tr> - <tr><td width="33%"><%:Free%></td><td id="swapfree">-</td></tr> - </table> -</fieldset> +<div class="cbi-section"> + <h3><%:Swap%></h3> + + <div class="table" width="100%"> + <div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="swaptotal">-</div></div> + <div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="swapfree">-</div></div> + </div> +</div> <% end %> -<fieldset class="cbi-section"> - <legend><%:Network%></legend> - - <table width="100%" cellspacing="10"> - <tr><td width="33%" style="vertical-align:top"><%:IPv4 WAN Status%></td><td> - <table><tr> - <td id="wan4_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td> - <td id="wan4_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td> - </tr></table> - </td></tr> - <% if has_ipv6 then %> - <tr><td width="33%" style="vertical-align:top"><%:IPv6 WAN Status%></td><td> - <table><tr> - <td id="wan6_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td> - <td id="wan6_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td> - </tr></table> - </td></tr> - <% end %> - <tr><td width="33%"><%:Active Connections%></td><td id="conns">-</td></tr> - </table> -</fieldset> - -<% if has_dhcp then %> -<fieldset class="cbi-section"> - <legend><%:DHCP Leases%></legend> - - <table class="cbi-section-table" id="lease_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Hostname%></th> - <th class="cbi-section-table-cell"><%:IPv4-Address%></th> - <th class="cbi-section-table-cell"><%:MAC-Address%></th> - <th class="cbi-section-table-cell"><%:Leasetime remaining%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="4"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> -</fieldset> - -<fieldset class="cbi-section" style="display:none"> - <legend><%:DHCPv6 Leases%></legend> - - <table class="cbi-section-table" id="lease6_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Host%></th> - <th class="cbi-section-table-cell"><%:IPv6-Address%></th> - <th class="cbi-section-table-cell"><%:DUID%></th> - <th class="cbi-section-table-cell"><%:Leasetime remaining%></th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="4"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> -</fieldset> -<% end %> +<div class="cbi-section"> + <h3><%:Network%></h3> + + <div id="upstream_status_table" class="network-status-table"> + <em><%:Collecting data...%></em> + </div> + + <div class="table" width="100%"> + <div class="tr"><div class="td left" width="33%"><%:Active Connections%></div><div class="td left" id="conns">-</div></div> + </div> +</div> + +<% + if has_dhcp then + include("admin_network/lease_status") + end +%> <% if has_dsl then %> -<fieldset class="cbi-section"> - <legend><%:DSL%></legend> - <table width="100%" cellspacing="10"> - <tr><td width="33%" style="vertical-align:top"><%:DSL Status%></td><td> - <table><tr> - <td id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td> - <td id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td> - </tr></table> - </td></tr> - </table> -</fieldset> +<div class="cbi-section"> + <h3><%:DSL%></h3> + + <div class="table" width="100%"> + <div class="tr"> + <div class="td left" width="33%" style="vertical-align:top"><%:DSL Status%></div> + <div class="td"> + <div class="table"> + <div class="tr"> + <div class="td" id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></div> + <div class="td left" id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div> + </div> + </div> + </div> + </div> + </div> +</div> <% end %> <% if has_wifi then %> -<fieldset class="cbi-section"> - <legend><%:Wireless%></legend> - - <table id="wifi_status_table" width="100%" cellspacing="10"> - <tr><td><em><%:Collecting data...%></em></td></tr> - </table> -</fieldset> - -<fieldset class="cbi-section"> - <legend><%:Associated Stations%></legend> - - <table class="cbi-section-table valign-middle" id="wifi_assoc_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"> </th> - <th class="cbi-section-table-cell"><%:Network%></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"> - <td colspan="6"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> -</fieldset> +<div class="cbi-section"> + <h3><%:Wireless%></h3> + + <div id="wifi_status_table" class="network-status-table"> + <em><%:Collecting data...%></em> + </div> +</div> + +<div class="cbi-section"> + <h3><%:Associated Stations%></h3> + + <%+admin_network/wifi_assoclist%> +</div> <% end %> <%- diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm index 3f4b83b80b..5d544ca60b 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm @@ -62,6 +62,7 @@ <%+header%> +<script type="text/javascript" src="<%=resource%>/cbi.js"></script> <style type="text/css"> span:target { color: blue; @@ -70,7 +71,6 @@ </style> <h2 name="content"><%:Firewall Status%></h2> -<br /> <% if has_ip6tables then %> <ul class="cbi-tabmenu"> @@ -88,69 +88,69 @@ <input type="submit" class="cbi-button" name="restart" value="<%:Restart Firewall%>" /> </form> - <fieldset class="cbi-section"> + <div class="cbi-section"> <% for _, tbl in ipairs(tables) do chaincnt = 0 %> <h3><%:Table%>: <%=tbl%></h3> - <table class="cbi-section-table" style="font-size:90%"> - <% for _, chain in ipairs(ipt:chains(tbl)) do - rowcnt = 0 - chaincnt = chaincnt + 1 - chaininfo = ipt:chain(tbl, chain) - %> - <tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> - <th class="cbi-section-table-cell" style="text-align:left" colspan="11"> - <br /><span id="rule_<%=tbl:lower()%>_<%=chain%>"> - <%:Chain%> <em><%=chain%></em> - (<%- if chaininfo.policy then -%> - <%:Policy%>: <em><%=chaininfo.policy%></em>, <%:Packets%>: <%=chaininfo.packets%>, <%:Traffic%>: <%=wba.byte_format(chaininfo.bytes)-%> - <%- else -%> - <%:References%>: <%=chaininfo.references-%> - <%- end -%>)</span> - </th> - </tr> - <tr class="cbi-section-table-descr"> - <th class="cbi-section-table-cell"><%:Pkts.%></th> - <th class="cbi-section-table-cell"><%:Traffic%></th> - <th class="cbi-section-table-cell"><%:Target%></th> - <th class="cbi-section-table-cell"><%:Prot.%></th> - <th class="cbi-section-table-cell"><%:In%></th> - <th class="cbi-section-table-cell"><%:Out%></th> - <th class="cbi-section-table-cell"><%:Source%></th> - <th class="cbi-section-table-cell"><%:Destination%></th> - <th class="cbi-section-table-cell" style="width:30%"><%:Options%></th> - </tr> - - <% for _, rule in ipairs(ipt:find({table=tbl, chain=chain})) do %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>"> - <td><%=rule.packets%></td> - <td style="white-space: nowrap"><%=wba.byte_format(rule.bytes)%></td> - <td><%=rule.target and link_target(tbl, rule.target) or "-"%></td> - <td><%=rule.protocol%></td> - <td><%=link_iface(rule.inputif)%></td> - <td><%=link_iface(rule.outputif)%></td> - <td><%=rule.source%></td> - <td><%=rule.destination%></td> - <td style="width:30%"><small><%=#rule.options > 0 and luci.util.pcdata(table.concat(rule.options, " ")) or "-"%></small></td> - </tr> - <% end %> - - <% if rowcnt == 1 then %> - <tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> - <td colspan="9"><em><%:No rules in this chain%></em></td> - </tr> - <% end %> - <% end %> - - <% if chaincnt == 0 then %> - <tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> - <td colspan="9"><em><%:No chains in this table%></em></td> - </tr> - <% end %> - </table> + + <% for _, chain in ipairs(ipt:chains(tbl)) do + rowcnt = 0 + chaincnt = chaincnt + 1 + chaininfo = ipt:chain(tbl, chain) + %> + <h4 id="rule_<%=tbl:lower()%>_<%=chain%>"> + <%:Chain%> <em><%=chain%></em> + (<%- if chaininfo.policy then -%> + <%:Policy%>: <em><%=chaininfo.policy%></em>, <%:Packets%>: <%=chaininfo.packets%>, <%:Traffic%>: <%=wba.byte_format(chaininfo.bytes)-%> + <%- else -%> + <%:References%>: <%=chaininfo.references-%> + <%- end -%>) + </h4> + + <div class="cbi-section-node"> + <div class="table" style="font-size:90%"> + <div class="tr table-titles cbi-rowstyle-<%=rowstyle()%>"> + <div class="th hide-xs"><%:Pkts.%></div> + <div class="th nowrap"><%:Traffic%></div> + <div class="th col-5"><%:Target%></div> + <div class="th"><%:Prot.%></div> + <div class="th"><%:In%></div> + <div class="th"><%:Out%></div> + <div class="th"><%:Source%></div> + <div class="th"><%:Destination%></div> + <div class="th col-9 hide-xs"><%:Options%></div> + </div> + + <% for _, rule in ipairs(ipt:find({table=tbl, chain=chain})) do %> + <div class="tr cbi-rowstyle-<%=rowstyle()%>"> + <div class="td"><%=rule.packets%></div> + <div class="td nowrap"><%=wba.byte_format(rule.bytes)%></div> + <div class="td col-5"><%=rule.target and link_target(tbl, rule.target) or "-"%></div> + <div class="td"><%=rule.protocol%></div> + <div class="td"><%=link_iface(rule.inputif)%></div> + <div class="td"><%=link_iface(rule.outputif)%></div> + <div class="td"><%=rule.source%></div> + <div class="td"><%=rule.destination%></div> + <div class="td col-9 hide-xs"><%=#rule.options > 0 and luci.util.pcdata(table.concat(rule.options, " ")) or "-"%></div> + </div> + <% end %> + + <% if rowcnt == 1 then %> + <div class="tr cbi-rowstyle-<%=rowstyle()%>"> + <div class="td" colspan="9"><em><%:No rules in this chain%></em></div> + </div> + <% end %> + </div> + </div> + <% end %> + + <% if chaincnt == 0 then %> + <em><%:No chains in this table%></em> + <% end %> + <br /><br /> <% end %> - </fieldset> + </div> </div> <%+footer%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm index 97a2f5ed59..dc7d927de8 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm @@ -237,6 +237,8 @@ label_15_peak.innerHTML = (data_15_peak / 100).toFixed(2); } ); + + XHR.run(); } }, 1000 ); @@ -248,37 +250,37 @@ <div style="text-align:right"><small id="scale">-</small></div> <br /> -<table style="width:100%; table-layout:fixed" cellspacing="5"> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff0000; white-space:nowrap"><%:1 Minute Load:%></strong></td> - <td id="lb_load01_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_load01_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_load01_peak">0</td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff6600; white-space:nowrap"><%:5 Minute Load:%></strong></td> - <td id="lb_load05_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_load05_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_load05_peak">0</td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ffaa00; white-space:nowrap"><%:15 Minute Load:%></strong></td> - <td id="lb_load15_cur">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="lb_load15_avg">0</td> - - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="lb_load15_peak">0</td> - </tr> -</table> +<div class="table" style="width:100%; table-layout:fixed" cellspacing="5"> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff0000; white-space:nowrap"><%:1 Minute Load:%></strong></div> + <div class="td" id="lb_load01_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_load01_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_load01_peak">0</div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff6600; white-space:nowrap"><%:5 Minute Load:%></strong></div> + <div class="td" id="lb_load05_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_load05_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_load05_peak">0</div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ffaa00; white-space:nowrap"><%:15 Minute Load:%></strong></div> + <div class="td" id="lb_load15_cur">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="lb_load15_avg">0</div> + + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="lb_load15_peak">0</div> + </div> +</div> <%+footer%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm index f474c71568..9ed37939fe 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm @@ -32,130 +32,125 @@ <%+header%> +<script type="text/javascript" src="<%=resource%>/cbi.js"></script> + <div class="cbi-map" id="cbi-network"> <h2 name="content"><%:Routes%></h2> <div class="cbi-map-descr"><%:The following rules are currently active on this system.%></div> - <fieldset class="cbi-section"> + <div class="cbi-section"> <legend>ARP</legend> <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address%></th> - <th class="cbi-section-table-cell"><%_<abbr title="Media Access Control">MAC</abbr>-Address%></th> - <th class="cbi-section-table-cell"><%:Interface%></th> - </tr> + <div class="table"> + <div class="tr table-titles"> + <div class="th"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address%></div> + <div class="th"><%_<abbr title="Media Access Control">MAC</abbr>-Address%></div> + <div class="th"><%:Interface%></div> + </div> <% for _, v in ipairs(ip.neighbors({ family = 4 })) do if v.mac then %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> - <td class="cbi-value-field"><%=v.dest%></td> - <td class="cbi-value-field"><%=v.mac%></td> - <td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td> - </tr> + <div class="tr cbi-rowstyle-<%=(style and 1 or 2)%>"> + <div class="td"><%=v.dest%></div> + <div class="td"><%=v.mac%></div> + <div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div> + </div> <% style = not style end end %> - </table> + </div> </div> - </fieldset> - <br /> + </div> - <fieldset class="cbi-section"> + <div class="cbi-section"> <legend><%_Active <abbr title="Internet Protocol Version 4">IPv4</abbr>-Routes%></legend> - <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Network%></th> - <th class="cbi-section-table-cell"><%:Target%></th> - <th class="cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Gateway%></th> - <th class="cbi-section-table-cell"><%:Metric%></th> - <th class="cbi-section-table-cell"><%:Table%></th> - </tr> + <div class="table"> + <div class="tr table-titles"> + <div class="th"><%:Network%></div> + <div class="th"><%:Target%></div> + <div class="th"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Gateway%></div> + <div class="th"><%:Metric%></div> + <div class="th"><%:Table%></div> + </div> <% for _, v in ipairs(ip.routes({ family = 4, type = 1 })) do %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> - <td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or v.dev%></td> - <td class="cbi-value-field"><%=v.dest%></td> - <td class="cbi-value-field"><%=v.gw%></td> - <td class="cbi-value-field"><%=v.metric or 0%></td> - <td class="cbi-value-field"><%=rtn[v.table] or v.table%></td> - </tr> + <div class="tr cbi-rowstyle-<%=(style and 1 or 2)%>"> + <div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or v.dev%></div> + <div class="td"><%=v.dest%></div> + <div class="td"><%=v.gw or "-"%></div> + <div class="td"><%=v.metric or 0%></div> + <div class="td"><%=rtn[v.table] or v.table%></div> + </div> <% style = not style end %> - </table> + </div> </div> - </fieldset> - <br /> + </div> <% if nixio.fs.access("/proc/net/ipv6_route") then style = true %> - <fieldset class="cbi-section"> + <div class="cbi-section"> <legend><%_Active <abbr title="Internet Protocol Version 6">IPv6</abbr>-Routes%></legend> - <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:Network%></th> - <th class="cbi-section-table-cell"><%:Target%></th> - <th class="cbi-section-table-cell"><%:Source%></th> - <th class="cbi-section-table-cell"><%:Metric%></th> - <th class="cbi-section-table-cell"><%:Table%></th> - </tr> + <div class="table"> + <div class="tr table-titles"> + <div class="th"><%:Network%></div> + <div class="th"><%:Target%></div> + <div class="th"><%:Source%></div> + <div class="th"><%:Metric%></div> + <div class="th"><%:Table%></div> + </div> <% for _, v in ipairs(ip.routes({ family = 6, type = 1 })) do if v.dest and not v.dest:is6linklocal() then %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> - <td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td> - <td class="cbi-value-field"><%=v.dest%></td> - <td class="cbi-value-field"><%=v.from%></td> - <td class="cbi-value-field"><%=v.metric or 0%></td> - <td class="cbi-value-field"><%=rtn[v.table] or v.table%></td> - </tr> + <div class="tr cbi-rowstyle-<%=(style and 1 or 2)%>"> + <div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div> + <div class="td"><%=v.dest%></div> + <div class="td"><%=v.from%></div> + <div class="td"><%=v.metric or 0%></div> + <div class="td"><%=rtn[v.table] or v.table%></div> + </div> <% style = not style end end %> - </table> + </div> </div> - </fieldset> - <br /> + </div> - <fieldset class="cbi-section"> + <div class="cbi-section"> <legend><%:IPv6 Neighbours%></legend> - <div class="cbi-section-node"> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:IPv6-Address%></th> - <th class="cbi-section-table-cell"><%:MAC-Address%></th> - <th class="cbi-section-table-cell"><%:Interface%></th> - </tr> + <div class="table"> + <div class="tr table-titles"> + <div class="th"><%:IPv6-Address%></div> + <div class="th"><%:MAC-Address%></div> + <div class="th"><%:Interface%></div> + </div> <% for _, v in ipairs(ip.neighbors({ family = 6 })) do if v.dest and not v.dest:is6linklocal() and v.mac then %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> - <td class="cbi-value-field"><%=v.dest%></td> - <td class="cbi-value-field"><%=v.mac%></td> - <td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td> - </tr> + <div class="tr cbi-rowstyle-<%=(style and 1 or 2)%>"> + <div class="td"><%=v.dest%></div> + <div class="td"><%=v.mac%></div> + <div class="td"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div> + </div> <% style = not style end end %> - </table> + </div> </div> - </fieldset> - <br /> + </div> <% end %> </div> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm index aa658ff0cb..1806f4a6c8 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm @@ -276,7 +276,7 @@ function wireless_label(dbm, noise) { if (noise) - return String.format("%d <%:dBm%> (SNR %d <%:dBm%>)", noise_floor + dbm - 255, dbm - noise); + return String.format("%d <%:dBm%> (SNR %d <%:dB%>)", noise_floor + dbm - 255, dbm - noise); else return String.format("%d <%:dBm%>", noise_floor + dbm - 255); } @@ -308,6 +308,8 @@ label_rate_peak.innerHTML = rate_label(data_rate_peak); } ); + + XHR.run(); } }, 1000 ); @@ -325,28 +327,28 @@ <div style="text-align:right"><small id="scale">-</small></div> <br /> -<table style="width:100%; table-layout:fixed" cellspacing="5"> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Signal:%></strong></td> - <td id="rssi_bw_cur">0 <%:dBm%></td> +<div class="table" style="width:100%; table-layout:fixed" cellspacing="5"> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Signal:%></strong></div> + <div class="td" id="rssi_bw_cur">0 <%:dBm%></div> - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="rssi_bw_avg">0 <%:dBm%></td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="rssi_bw_avg">0 <%:dBm%></div> - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="rssi_bw_peak">0 <%:dBm%></td> - </tr> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Noise:%></strong></td> - <td id="noise_bw_cur">0 <%:dBm%></td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="rssi_bw_peak">0 <%:dBm%></div> + </div> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Noise:%></strong></div> + <div class="td" id="noise_bw_cur">0 <%:dBm%></div> - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="noise_bw_avg">0 <%:dBm%></td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="noise_bw_avg">0 <%:dBm%></div> - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="noise_bw_peak">0 <%:dBm%></td> - </tr> -</table> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="noise_bw_peak">0 <%:dBm%></div> + </div> +</div> <br /> @@ -354,17 +356,17 @@ <div style="text-align:right"><small id="scale2">-</small></div> <br /> -<table style="width:100%; table-layout:fixed" cellspacing="5"> - <tr> - <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Phy Rate:%></strong></td> - <td id="rate_bw_cur">0 MBit/s</td> +<div class="table" style="width:100%; table-layout:fixed" cellspacing="5"> + <div class="tr"> + <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Phy Rate:%></strong></div> + <div class="td" id="rate_bw_cur">0 MBit/s</div> - <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> - <td id="rate_bw_avg">0 MBit/s</td> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div> + <div class="td" id="rate_bw_avg">0 MBit/s</div> - <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> - <td id="rate_bw_peak">0 MBit/s</td> - </tr> -</table> + <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div> + <div class="td" id="rate_bw_peak">0 MBit/s</div> + </div> +</div> <%+footer%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_system/flashops.htm b/modules/luci-mod-admin-full/luasrc/view/admin_system/flashops.htm index b32ef78263..9eec012547 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_system/flashops.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_system/flashops.htm @@ -13,84 +13,78 @@ <li class="cbi-tab-disabled"><a href="<%=REQUEST_URI%>/backupfiles"><%:Configuration%></a></li> </ul> -<fieldset class="cbi-section"> - - <fieldset class="cbi-section"> - <legend><%:Backup / Restore%></legend> - <div class="cbi-section-descr"><%:Click "Generate archive" to download a tar archive of the current configuration files. To reset the firmware to its initial state, click "Perform reset" (only possible with squashfs images).%></div> - <div class="cbi-section-node"> - <form class="inline" method="post" action="<%=url('admin/system/flashops/backup')%>"> - <input type="hidden" name="token" value="<%=token%>" /> - <div class="cbi-value<% if not reset_avail then %> cbi-value-last<% end %>"> - <label class="cbi-value-title" for="image"><%:Download backup%>:</label> - <div class="cbi-value-field"> - <input class="cbi-button cbi-button-apply" type="submit" name="backup" value="<%:Generate archive%>" /> - </div> - </div> - </form> - <% if reset_avail then %> - <form class="inline" method="post" action="<%=url('admin/system/flashops/reset')%>"> - <input type="hidden" name="token" value="<%=token%>" /> - <div class="cbi-value cbi-value-last"> - <label class="cbi-value-title"><%:Reset to defaults%>:</label> - <div class="cbi-value-field"> - <input onclick="return confirm('<%:Really reset all changes?%>')" class="cbi-button cbi-button-reset" type="submit" name="reset" value="<%:Perform reset%>" /> - </div> - </div> - </form> - <% end %> - </div> - <br /> - <div class="cbi-section-descr"><%:To restore configuration files, you can upload a previously generated backup archive here.%></div> - <div class="cbi-section-node"> - <form class="inline" method="post" action="<%=url('admin/system/flashops/restore')%>" enctype="multipart/form-data"> - <div class="cbi-value cbi-value-last"> - <label class="cbi-value-title" for="archive"><%:Restore backup%>:</label> - <div class="cbi-value-field"> - <input type="hidden" name="token" value="<%=token%>" /> - <input type="file" name="archive" id="archive" /> - <input type="submit" class="cbi-button cbi-input-apply" name="restore" value="<%:Upload archive...%>" /> - </div> +<div class="cbi-section"> + <legend><%:Backup / Restore%></legend> + <div class="cbi-section-descr"><%:Click "Generate archive" to download a tar archive of the current configuration files. To reset the firmware to its initial state, click "Perform reset" (only possible with squashfs images).%></div> + <div class="cbi-section-node"> + <form class="inline" method="post" action="<%=url('admin/system/flashops/backup')%>"> + <input type="hidden" name="token" value="<%=token%>" /> + <div class="cbi-value<% if not reset_avail then %> cbi-value-last<% end %>"> + <label class="cbi-value-title" for="image"><%:Download backup%>:</label> + <div class="cbi-value-field"> + <input class="cbi-button cbi-button-action important" type="submit" name="backup" value="<%:Generate archive%>" /> </div> - </form> - </div> + </div> + </form> <% if reset_avail then %> - <div class="alert-message warning"><%:Custom files (certificates, scripts) may remain on the system. To prevent this, perform a factory-reset first.%></div> + <form class="inline" method="post" action="<%=url('admin/system/flashops/reset')%>"> + <input type="hidden" name="token" value="<%=token%>" /> + <div class="cbi-value cbi-value-last"> + <label class="cbi-value-title"><%:Reset to defaults%>:</label> + <div class="cbi-value-field"> + <input onclick="return confirm('<%:Really reset all changes?%>')" class="cbi-button cbi-button-reset" type="submit" name="reset" value="<%:Perform reset%>" /> + </div> + </div> + </form> <% end %> - </fieldset> - + </div> <br /> + <div class="cbi-section-descr"><%:To restore configuration files, you can upload a previously generated backup archive here.%></div> + <div class="cbi-section-node"> + <form class="inline" method="post" action="<%=url('admin/system/flashops/restore')%>" enctype="multipart/form-data"> + <div class="cbi-value cbi-value-last"> + <label class="cbi-value-title" for="archive"><%:Restore backup%>:</label> + <div class="cbi-value-field"> + <input type="hidden" name="token" value="<%=token%>" /> + <input type="file" name="archive" id="archive" /> + <input type="submit" class="cbi-button cbi-button-action important" name="restore" value="<%:Upload archive...%>" /> + </div> + </div> + </form> + </div> + <% if reset_avail then %> + <div class="alert-message warning"><%:Custom files (certificates, scripts) may remain on the system. To prevent this, perform a factory-reset first.%></div> + <% end %> +</div> - <fieldset class="cbi-section"> - <legend><%:Flash new firmware image%></legend> - <% if upgrade_avail then %> - <form method="post" action="<%=url('admin/system/flashops/sysupgrade')%>" enctype="multipart/form-data"> - <input type="hidden" name="token" value="<%=token%>" /> - <div class="cbi-section-descr"><%:Upload a sysupgrade-compatible image here to replace the running firmware. Check "Keep settings" to retain the current configuration (requires a compatible firmware image).%></div> - <div class="cbi-section-node"> - <div class="cbi-value"> - <label class="cbi-value-title" for="keep"><%:Keep settings%>:</label> - <div class="cbi-value-field"> - <input type="checkbox" name="keep" id="keep" checked="checked" /> - </div> +<div class="cbi-section"> + <legend><%:Flash new firmware image%></legend> + <% if upgrade_avail then %> + <form method="post" action="<%=url('admin/system/flashops/sysupgrade')%>" enctype="multipart/form-data"> + <input type="hidden" name="token" value="<%=token%>" /> + <div class="cbi-section-descr"><%:Upload a sysupgrade-compatible image here to replace the running firmware. Check "Keep settings" to retain the current configuration (requires a compatible firmware image).%></div> + <div class="cbi-section-node"> + <div class="cbi-value"> + <label class="cbi-value-title" for="keep"><%:Keep settings%>:</label> + <div class="cbi-value-field"> + <input type="checkbox" name="keep" id="keep" checked="checked" /> </div> - <div class="cbi-value cbi-value-last<% if image_invalid then %> cbi-value-error<% end %>"> - <label class="cbi-value-title" for="image"><%:Image%>:</label> - <div class="cbi-value-field"> - <input type="file" name="image" id="image" /> - <input type="submit" class="cbi-button cbi-input-apply" value="<%:Flash image...%>" /> - </div> + </div> + <div class="cbi-value cbi-value-last<% if image_invalid then %> cbi-value-error<% end %>"> + <label class="cbi-value-title" for="image"><%:Image%>:</label> + <div class="cbi-value-field"> + <input type="file" name="image" id="image" /> + <input type="submit" class="cbi-button cbi-button-action important" value="<%:Flash image...%>" /> </div> </div> - <% if image_invalid then %> - <div class="cbi-section-error"><%:The uploaded image file does not contain a supported format. Make sure that you choose the generic image format for your platform. %></div> - <% end %> - </form> - <% else %> - <div class="cbi-section-descr"><%:Sorry, there is no sysupgrade support present; a new firmware image must be flashed manually. Please refer to the wiki for device specific install instructions.%></div> - <% end %> - </fieldset> - -</fieldset> + </div> + <% if image_invalid then %> + <div class="cbi-section-error"><%:The uploaded image file does not contain a supported format. Make sure that you choose the generic image format for your platform. %></div> + <% end %> + </form> + <% else %> + <div class="cbi-section-descr"><%:Sorry, there is no sysupgrade support present; a new firmware image must be flashed manually. Please refer to the wiki for device specific install instructions.%></div> + <% end %> +</div> <%+footer%> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_system/packages.htm b/modules/luci-mod-admin-full/luasrc/view/admin_system/packages.htm index 88e0fffd9c..ef13a91672 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_system/packages.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_system/packages.htm @@ -44,6 +44,8 @@ end <%+header%> +<script type="text/javascript" src="<%=resource%>/cbi.js"></script> + <h2 name="content"><%:Software%></h2> <div class="cbi-map"> @@ -57,8 +59,8 @@ end <input type="hidden" name="exec" value="1" /> <input type="hidden" name="token" value="<%=token%>" /> - <fieldset class="cbi-section"> - <fieldset class="cbi-section-node"> + <div class="cbi-section"> + <div class="cbi-section-node"> <% if (install and next(install)) or (remove and next(remove)) or update or upgrade then %> <div class="cbi-value"> <% if #stdout > 0 then %><pre><%=pcdata(stdout)%></pre><% end %> @@ -91,18 +93,18 @@ end <div style="background-color:#F08080; border-right:1px solid #000000; height:100%; width:<%=used_perc%>%"> </div> </div> </div> - </fieldset> + </div> <br /> - <fieldset class="cbi-section-node"> + <div class="cbi-section-node"> <input type="hidden" name="display" value="<%=pcdata(display)%>" /> <div class="cbi-value"> <label class="cbi-value-title"><%:Download and install package%>:</label> <div class="cbi-value-field"> <input type="text" name="url" size="30" value="" /> - <input class="cbi-button cbi-input-save" type="submit" name="go" value="<%:OK%>" /> + <input class="cbi-button cbi-button-save" type="submit" name="go" value="<%:OK%>" /> </div> </div> @@ -110,11 +112,11 @@ end <label class="cbi-value-title"><%:Filter%>:</label> <div class="cbi-value-field"> <input type="text" name="query" size="20" value="<%=pcdata(query)%>" /> - <input type="submit" class="cbi-button cbi-input-find" name="search" value="<%:Find package%>" /> + <input type="submit" class="cbi-button cbi-button-action" name="search" value="<%:Find package%>" /> </div> </div> - </fieldset> - </fieldset> + </div> + </div> </form> @@ -122,90 +124,90 @@ end <ul class="cbi-tabmenu"> - <li class="cbi-tab<% if display ~= "installed" then %>-disabled<% end %>"><a href="?display=installed&query=<%=pcdata(query)%>"><%:Installed packages%><% if query then %> (<%=pcdata(query)%>)<% end %></a></li> <li class="cbi-tab<% if display ~= "available" then %>-disabled<% end %>"><a href="?display=available&query=<%=pcdata(query)%>"><%:Available packages%><% if query then %> (<%=pcdata(query)%>)<% end %></a></li> + <li class="cbi-tab<% if display ~= "installed" then %>-disabled<% end %>"><a href="?display=installed&query=<%=pcdata(query)%>"><%:Installed packages%><% if query then %> (<%=pcdata(query)%>)<% end %></a></li> </ul> <% if display ~= "available" then %> - <fieldset class="cbi-section"> - <table class="cbi-section-table" style="width:100%"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell" style="text-align:left"> </th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Package name%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Version%></th> - </tr> - <% local empty = true; luci.model.ipkg.list_installed(querypat, function(n, v, s, d) empty = false; filter[n] = true %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>"> - <td style="text-align:left; width:10%"> - <form method="post" class="inline" action="<%=REQUEST_URI%>"> - <input type="hidden" name="exec" value="1" /> - <input type="hidden" name="token" value="<%=token%>" /> - <input type="hidden" name="remove" value="<%=pcdata(n)%>" /> - <a onclick="window.confirm('<%:Remove%> "<%=luci.util.pcdata(n)%>" ?') && this.parentNode.submit(); return false" href="#"><%:Remove%></a> - </form> - </td> - <td style="text-align:left"><%=luci.util.pcdata(n)%></td> - <td style="text-align:left"><%=luci.util.pcdata(v)%></td> - </tr> - <% end) %> - <% if empty then %> - <tr class="cbi-section-table-row"> - <td style="text-align:left"> </td> - <td style="text-align:left"><em><%:none%></em></td> - <td style="text-align:left"><em><%:none%></em></td> - </tr> - <% end %> - </table> - </fieldset> + <div class="cbi-section"> + <div class="cbi-section-node"> + <div class="table"> + <div class="tr cbi-section-table-titles"> + <div class="th left"><%:Package name%></div> + <div class="th left"><%:Version%></div> + <div class="th cbi-section-actions"> </div> + </div> + <% local empty = true; luci.model.ipkg.list_installed(querypat, function(n, v, s, d) empty = false; filter[n] = true %> + <div class="tr cbi-rowstyle-<%=rowstyle()%>"> + <div class="td left"><%=luci.util.pcdata(n)%></div> + <div class="td left"><%=luci.util.pcdata(v)%></div> + <div class="td cbi-section-actions"> + <form method="post" class="inline" action="<%=REQUEST_URI%>"> + <input type="hidden" name="exec" value="1" /> + <input type="hidden" name="token" value="<%=token%>" /> + <input type="hidden" name="remove" value="<%=pcdata(n)%>" /> + <input class="cbi-button cbi-button-remove" type="submit" onclick="window.confirm('<%:Remove%> "<%=luci.util.pcdata(n)%>" ?') && this.parentNode.submit(); return false" value="<%:Remove%>" /> + </form> + </div> + </div> + <% end) %> + <% if empty then %> + <div class="tr cbi-section-table-row"> + <div class="td left"> </div> + <div class="td left"><em><%:none%></em></div> + <div class="td left"><em><%:none%></em></div> + </div> + <% end %> + </div> + </div> + </div> <% else %> - <fieldset class="cbi-section"> + <div class="cbi-section"> <% if not querypat then %> - <ul class="cbi-tabmenu"> + <ul class="cbi-tabmenu" style="flex-wrap:wrap"> <% local i; for i = 65, 90 do %> <li class="cbi-tab<% if letter ~= i then %>-disabled<% end %>"><a href="?display=available&letter=<%=string.char(i)%>"><%=string.char(i)%></a></li> <% end %> <li class="cbi-tab<% if letter ~= 35 then %>-disabled<% end %>"><a href="?display=available&letter=%23">#</a></li> </ul> - <div class="cbi-section-node"> <% end %> - <table class="cbi-section-table" style="width:100%"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell" style="text-align:left"> </th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Package name%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Version%></th> - <th class="cbi-section-table-cell" style="text-align:right"><%:Size (.ipk)%></th> - <th class="cbi-section-table-cell" style="text-align:left"><%:Description%></th> - </tr> - <% local empty = true; opkg_list(querypat or letterpat, function(n, v, s, d) if filter[n] then return end; empty = false %> - <tr class="cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>"> - <td style="text-align:left; width:10%"> - <form method="post" class="inline" action="<%=REQUEST_URI%>"> - <input type="hidden" name="exec" value="1" /> - <input type="hidden" name="token" value="<%=token%>" /> - <input type="hidden" name="install" value="<%=pcdata(n)%>" /> - <a onclick="window.confirm('<%:Install%> "<%=luci.util.pcdata(n)%>" ?') && this.parentNode.submit(); return false" href="#"><%:Install%></a> - </form> - </td> - <td style="text-align:left"><%=luci.util.pcdata(n)%></td> - <td style="text-align:left"><%=luci.util.pcdata(v)%></td> - <td style="text-align:right"><%=luci.util.pcdata(s)%></td> - <td style="text-align:left"><%=luci.util.pcdata(d)%></td> - </tr> - <% end) %> - <% if empty then %> - <tr class="cbi-section-table-row"> - <td style="text-align:left"> </td> - <td style="text-align:left"><em><%:none%></em></td> - <td style="text-align:left"><em><%:none%></em></td> - <td style="text-align:right"><em><%:none%></em></td> - <td style="text-align:left"><em><%:none%></em></td> - </tr> - <% end %> - </table> - <% if not querypat then %> + <div class="cbi-section-node cbi-section-node-tabbed"> + <div class="table"> + <div class="tr cbi-section-table-titles"> + <div class="th col-2 left"><%:Package name%></div> + <div class="th col-2 left"><%:Version%></div> + <div class="th col-1 center"><%:Size (.ipk)%></div> + <div class="th col-10 left"><%:Description%></div> + <div class="th cbi-section-actions"> </div> + </div> + <% local empty = true; opkg_list(querypat or letterpat, function(n, v, s, d) if filter[n] then return end; empty = false %> + <div class="tr cbi-rowstyle-<%=rowstyle()%>"> + <div class="td col-2 left"><%=luci.util.pcdata(n)%></div> + <div class="td col-2 left"><%=luci.util.pcdata(v)%></div> + <div class="td col-1 center"><%=luci.util.pcdata(s)%></div> + <div class="td col-10 left"><%=luci.util.pcdata(d)%></div> + <div class="td cbi-section-actions"> + <form method="post" class="inline" action="<%=REQUEST_URI%>"> + <input type="hidden" name="exec" value="1" /> + <input type="hidden" name="token" value="<%=token%>" /> + <input type="hidden" name="install" value="<%=pcdata(n)%>" /> + <input class="cbi-button cbi-button-apply" type="submit" onclick="window.confirm('<%:Install%> "<%=luci.util.pcdata(n)%>" ?') && this.parentNode.submit(); return false" value="<%:Install%>" /> + </form> + </div> + </div> + <% end) %> + <% if empty then %> + <div class="tr"> + <div class="td left"> </div> + <div class="td left"><em><%:none%></em></div> + <div class="td left"><em><%:none%></em></div> + <div class="td right"><em><%:none%></em></div> + <div class="td left"><em><%:none%></em></div> + </div> + <% end %> + </div> </div> - <% end %> - </fieldset> + </div> <% end %> </div> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_system/reboot.htm b/modules/luci-mod-admin-full/luasrc/view/admin_system/reboot.htm index c9551804d2..6ec2b310d2 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_system/reboot.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_system/reboot.htm @@ -7,7 +7,6 @@ <%+header%> <h2 name="content"><%:Reboot%></h2> -<br /> <p><%:Reboots the operating system of your device%></p> @@ -49,7 +48,7 @@ } //]]></script> -<input class="cbi-button cbi-button-apply" type="button" value="<%:Perform reboot%>" onclick="reboot(this)" /> +<input class="cbi-button cbi-button-action important" type="button" value="<%:Perform reboot%>" onclick="reboot(this)" /> <p class="alert-message" style="display:none"> <img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_uci/changelog.htm b/modules/luci-mod-admin-full/luasrc/view/admin_uci/changelog.htm index 4ed4f0a10f..e05ccdece3 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_uci/changelog.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_uci/changelog.htm @@ -4,7 +4,7 @@ -%> <% export("uci_changelog", function(changes) -%> -<fieldset class="cbi-section"> +<div class="cbi-section"> <strong><%:Legend:%></strong> <div class="uci-change-legend"> <div class="uci-change-legend-label"><ins> </ins> <%:Section added%></div> @@ -32,9 +32,11 @@ ret[#ret+1] = "<br />%s.%s.%s+=<strong>%s</strong>" %{ r, s, o, util.pcdata(v[i]) } end - else + elseif v ~= "" then ret[#ret+1] = "<br />%s.%s.%s=<strong>%s</strong>" %{ r, s, o, util.pcdata(v) } + else + ret[#ret+1] = "<br /><del>%s.%s.<strong>%s</strong></del>" %{ r, s, o } end end end @@ -57,7 +59,7 @@ ret[#ret+1] = "%s.%s.%s+=<strong>%s</strong><br />" %{ r, s, o, util.pcdata(v[i]) } end - + else ret[#ret+1] = "%s.%s.%s=<strong>%s</strong><br />" %{ r, s, o, util.pcdata(v) } @@ -75,5 +77,5 @@ write(table.concat(ret)) %></div> -</fieldset> +</div> <%- end) %> diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_uci/changes.htm b/modules/luci-mod-admin-full/luasrc/view/admin_uci/changes.htm index 9e9ce2be2a..6282244757 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_uci/changes.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_uci/changes.htm @@ -27,21 +27,17 @@ <div class="cbi-page-actions"> <% if redir_url then %> - <div style="float:left"> - <form class="inline" method="get" action="<%=luci.util.pcdata(redir_url)%>"> - <input class="cbi-button cbi-button-link" style="float:left; margin:0" type="submit" value="<%:Back%>" /> - </form> - </div> + <form method="get" action="<%=luci.util.pcdata(redir_url)%>"> + <input class="cbi-button cbi-button-link" type="submit" value="<%:Back%>" /> + </form> <% end %> - <div style="text-align:right"> - <input class="cbi-button cbi-button-save" type="button" id="apply_button" value="<%:Save & Apply%>" onclick="uci_apply(true); this.blur()" /> - <form class="inline" method="post" action="<%=controller%>/admin/uci/revert"> - <input type="hidden" name="token" value="<%=token%>" /> - <input type="hidden" name="redir" value="<%=pcdata(luci.http.formvalue("redir"))%>" /> - <input class="cbi-button cbi-button-reset" type="submit" value="<%:Revert%>" /> - </form> - </div> + <input class="cbi-button cbi-button-save" type="button" id="apply_button" value="<%:Save & Apply%>" onclick="uci_apply(true); this.blur()" /> + <form method="post" action="<%=url("admin/uci/revert")%>"> + <input type="hidden" name="token" value="<%=token%>" /> + <input type="hidden" name="redir" value="<%=pcdata(luci.http.formvalue("redir"))%>" /> + <input class="cbi-button cbi-button-reset" type="submit" value="<%:Revert%>" /> + </form> </div> <%+footer%> |