summaryrefslogtreecommitdiffhomepage
path: root/modules/luci-mod-admin-full/luasrc/view
diff options
context:
space:
mode:
Diffstat (limited to 'modules/luci-mod-admin-full/luasrc/view')
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_network/diagnostics.htm85
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview.htm79
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_network/iface_status.htm55
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm142
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_network/switch_status.htm32
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_assoclist.htm82
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm58
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm248
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm18
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm53
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm114
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm707
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_status/iptables.htm118
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm66
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_status/routes.htm137
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm60
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_system/flashops.htm136
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_system/packages.htm160
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_system/reboot.htm3
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_uci/changelog.htm10
-rw-r--r--modules/luci-mod-admin-full/luasrc/view/admin_uci/changes.htm22
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>&#160;</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>&#160;</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>&#160;(%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">&#160;</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, '&#160;');
- }
-
- function wifirate(bss, rx) {
- var p = rx ? 'rx_' : 'tx_',
- s = '%.1f <%:Mbit/s%>, %d<%:MHz%>'
- .format(bss[p+'rate'] / 1000, bss[p+'mhz']),
- ht = bss[p+'ht'], vht = bss[p+'vht'],
- mhz = bss[p+'mhz'], nss = bss[p+'nss'],
- mcs = bss[p+'mcs'], sgi = bss[p+'short_gi'];
-
- if (ht || vht) {
- if (vht) s += ', VHT-MCS %d'.format(mcs);
- if (nss) s += ', VHT-NSS %d'.format(nss);
- if (ht) s += ', MCS %s'.format(mcs);
- if (sgi) s += ', <%:Short GI%>';
- }
-
- return s;
- }
-
function wifi_shutdown(id, toggle) {
var reconnect = (toggle.getAttribute('active') == 'false');
- if (!reconnect && !confirm(String.format('<%:Really shut down network?\nYou might lose access to this device if you are connected via this interface.%>')))
+ if (!reconnect && !confirm(<%=luci.http.write_json(translate('Really shut down network? You might lose access to this device if you are connected via this interface'))%>))
return;
is_reconnecting = true;
@@ -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">&#160;</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%>%">&#160;</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&amp;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&amp;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&amp;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">&#160;</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%> &quot;<%=luci.util.pcdata(n)%>&quot; ?') &#38;&#38; 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">&#160;</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">&#160;</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%> &quot;<%=luci.util.pcdata(n)%>&quot; ?') &#38;&#38; 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">&#160;</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&amp;letter=<%=string.char(i)%>"><%=string.char(i)%></a></li>
<% end %>
<li class="cbi-tab<% if letter ~= 35 then %>-disabled<% end %>"><a href="?display=available&amp;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">&#160;</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%> &quot;<%=luci.util.pcdata(n)%>&quot; ?') &#38;&#38; 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">&#160;</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">&#160;</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%> &quot;<%=luci.util.pcdata(n)%>&quot; ?') &#38;&#38; this.parentNode.submit(); return false" value="<%:Install%>" />
+ </form>
+ </div>
+ </div>
+ <% end) %>
+ <% if empty then %>
+ <div class="tr">
+ <div class="td left">&#160;</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>&#160;</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%>