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