1
0
Fork 0
mirror of https://github.com/Ysurac/openmptcprouter-feeds.git synced 2025-03-09 15:40:03 +00:00

Update theme

This commit is contained in:
Ycarus 2018-05-31 15:44:12 +02:00
parent 33bfcb84f9
commit 61d58cab65
18 changed files with 973 additions and 1207 deletions

View file

@ -1,8 +1,8 @@
<div class="cbi-section-create cbi-tblsection-create"> <div class="cbi-section-create cbi-tblsection-create">
<br /> <br />
<table class="cbi-section-table"> <div class="table cbi-section-table">
<tr class="cbi-section-table-row"> <div class="tr cbi-section-table-row">
<td class="cbi-section-table-cell" style="width:140px"> <div class="td cbi-section-table-cell" style="width:140px">
<select class="cbi-input-select" id="_newinst.type" name="_newinst.type"> <select class="cbi-input-select" id="_newinst.type" name="_newinst.type">
<option value="_dummy">-- instance type --</option> <option value="_dummy">-- instance type --</option>
<option value="ss_local">ss-local</option> <option value="ss_local">ss-local</option>
@ -10,15 +10,15 @@
<option value="ss_redir">ss-redir</option> <option value="ss_redir">ss-redir</option>
<option value="ss_server">ss-server</option> <option value="ss_server">ss-server</option>
</select> </select>
</td> </div>
<td class="cbi-section-table-cell" style="width:110px"> <div class="td cbi-section-table-cell" style="width:110px">
<input type="text" class="cbi-input-text" id="_newinst.name" name="_newinst.name" placeholder="<%:Name%>"/> <input type="text" class="cbi-input-text" id="_newinst.name" name="_newinst.name" placeholder="<%:Name%>"/>
</td> </div>
<td class="cbi-section-table-cell left"> <div class="td cbi-section-table-cell left">
<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>" value="<%:Add%>" /> <input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>" value="<%:Add%>" />
</td> </div>
</tr> </div>
</table> </div>
</div> </div>
<script type="text/javascript">//<![CDATA[ <script type="text/javascript">//<![CDATA[
XHR.poll(5, '<%=url('admin/services/shadowsocks-libev/status')%>', null, XHR.poll(5, '<%=url('admin/services/shadowsocks-libev/status')%>', null,

View file

@ -212,20 +212,20 @@
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend><%:Interface Overview%></legend> <legend><%:Interface Overview%></legend>
<table class="cbi-section-table" style="margin:10px; empty-cells:hide"> <div class="table cbi-section-table" style="margin:10px; empty-cells:hide">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"><%:Network%></th> <div class="th"><%:Network%></div>
<th class="cbi-section-table-cell" style="text-align:left"><%:Status%></th> <div class="th left"><%:Status%></div>
<th class="cbi-section-table-cell"><%:Actions%></th> <div class="th"><%:Actions%></div>
</tr> </div>
<% <%
for i, net in ipairs(netlist) do for i, net in ipairs(netlist) do
local z = net[3] local z = net[3]
local c = z and z:get_color() or "#EEEEEE" 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") 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%>"> <div class="tr cbi-section-table-row cbi-rowstyle-<%=i % 2 + 1%>">
<td class="cbi-value-field" style="padding:3px"> <div class="td">
<div class="ifacebox"> <div class="ifacebox">
<div class="ifacebox-head" style="background-color:<%=c%>" title="<%=pcdata(t)%>"> <div class="ifacebox-head" style="background-color:<%=c%>" title="<%=pcdata(t)%>">
<strong><%=net[1]:upper()%></strong> <strong><%=net[1]:upper()%></strong>
@ -235,19 +235,19 @@
<small>?</small> <small>?</small>
</div> </div>
</div> </div>
</td> </div>
<td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=net[1]%>-ifc-description"> <div class="td left" id="<%=net[1]%>-ifc-description">
<em><%:Collecting data...%></em> <em><%:Collecting data...%></em>
</td> </div>
<td style="width:420px"> <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-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-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-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%>" /> <input type="button" class="cbi-button cbi-button-remove" style="width:100px" onclick="iface_delete('<%=net[1]%>')" value="<%:Delete%>" />
</td> </div>
</tr> </div>
<% end %> <% end %>
</table> </div>
<input type="button" class="cbi-button cbi-button-add" value="<%:Add new interface...%>" onclick="location.href='<%=url("admin/network/iface_add")%>'" /> <input type="button" class="cbi-button cbi-button-add" value="<%:Add new interface...%>" onclick="location.href='<%=url("admin/network/iface_add")%>'" />
</fieldset> </fieldset>

View file

@ -71,17 +71,17 @@
); );
//]]></script> //]]></script>
<table> <div class="table">
<tr class="cbi-section-table"> <div class="tr cbi-section-table">
<td></td> <div class="td"></div>
<td class="cbi-value-field" style="min-width:16px; padding:3px; text-align:center" id="<%=self.option%>-ifc-signal"> <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 /> <img src="<%=resource%>/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br />
<small>?</small> <small>?</small>
</td> </div>
<td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-ifc-description"> <div class="td cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-ifc-description">
<em><%:Collecting data...%></em> <em><%:Collecting data...%></em>
</td> </div>
</tr> </div>
</table> </div>
<%+cbi/valuefooter%> <%+cbi/valuefooter%>

View file

@ -20,10 +20,10 @@
if (st && st[0] && tb) if (st && st[0] && tb)
{ {
/* clear all rows */ /* clear all rows */
while( tb.rows.length > 1 ) while (tb.firstElementChild !== tb.lastElementChild)
tb.deleteRow(1); tb.removeChild(tb.lastElementChild);
for( var i = 0; i < st[0].length; i++ ) for (var i = 0; i < st[0].length; i++)
{ {
var timestr; var timestr;
@ -34,24 +34,16 @@
else else
timestr = String.format('%t', st[0][i].expires); timestr = String.format('%t', st[0][i].expires);
var tr = tb.insertRow(-1); tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); E('<div class="td">', st[0][i].hostname || '?'),
E('<div class="td">', st[0][i].ipaddr),
tr.insertCell(-1).innerHTML = st[0][i].hostname ? st[0][i].hostname : '?'; E('<div class="td">', st[0][i].macaddr),
tr.insertCell(-1).innerHTML = st[0][i].ipaddr; E('<div class="td">', timestr)
tr.insertCell(-1).innerHTML = st[0][i].macaddr; ]));
tr.insertCell(-1).innerHTML = timestr;
} }
if( tb.rows.length == 1 ) 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>'));
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>';
}
} }
var tb6 = document.getElementById('lease6_status_table'); var tb6 = document.getElementById('lease6_status_table');
@ -60,10 +52,10 @@
tb6.parentNode.style.display = 'block'; tb6.parentNode.style.display = 'block';
/* clear all rows */ /* clear all rows */
while( tb6.rows.length > 1 ) while (tb6.firstElementChild !== tb6.lastElementChild)
tb6.deleteRow(1); tb6.removeChild(tb6.lastElementChild);
for( var i = 0; i < st[1].length; i++ ) for (var i = 0; i < st[1].length; i++)
{ {
var timestr; var timestr;
@ -74,35 +66,29 @@
else else
timestr = String.format('%t', st[1][i].expires); timestr = String.format('%t', st[1][i].expires);
var tr = tb6.insertRow(-1); var host = hosts[duid2mac(st[1][i].duid)],
tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); name = st[1][i].hostname,
hint = null;
var host = hosts[duid2mac(st[1][i].duid)]; if (!name) {
if (!st[1][i].hostname) if (host)
tr.insertCell(-1).innerHTML = hint = host.name || host.ipv4 || host.ipv6;
(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 {
: '?'; if (host && host.name && st[1][i].hostname != host.name)
else hint = host.name;
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;
tr.insertCell(-1).innerHTML = st[1][i].ip6addr;
tr.insertCell(-1).innerHTML = st[1][i].duid;
tr.insertCell(-1).innerHTML = timestr;
} }
if( tb6.rows.length == 1 ) 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 || '?')),
var tr = tb6.insertRow(-1); E('<div class="td">', st[1][i].ip6addr),
tr.className = 'cbi-section-table-row'; E('<div class="td">', st[1][i].duid),
E('<div class="td">', timestr)
var td = tr.insertCell(-1); ]));
td.colSpan = 4;
td.innerHTML = '<em><br /><%:There are no active leases.%></em>';
} }
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>'));
} }
} }
); );
@ -110,30 +96,30 @@
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend><%:Active DHCP Leases%></legend> <legend><%:Active DHCP Leases%></legend>
<table class="cbi-section-table" id="lease_status_table"> <div class="table cbi-section-table" id="lease_status_table">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"><%:Hostname%></th> <div class="th cbi-section-table-cell"><%:Hostname%></div>
<th class="cbi-section-table-cell"><%:IPv4-Address%></th> <div class="th cbi-section-table-cell"><%:IPv4-Address%></div>
<th class="cbi-section-table-cell"><%:MAC-Address%></th> <div class="th cbi-section-table-cell"><%:MAC-Address%></div>
<th class="cbi-section-table-cell"><%:Leasetime remaining%></th> <div class="th cbi-section-table-cell"><%:Leasetime remaining%></div>
</tr> </div>
<tr class="cbi-section-table-row"> <div class="tr cbi-section-table-row">
<td colspan="4"><em><br /><%:Collecting data...%></em></td> <div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
</tr> </div>
</table> </div>
</fieldset> </fieldset>
<fieldset class="cbi-section" style="display:none"> <fieldset class="cbi-section" style="display:none">
<legend><%:Active DHCPv6 Leases%></legend> <legend><%:Active DHCPv6 Leases%></legend>
<table class="cbi-section-table" id="lease6_status_table"> <div class="table cbi-section-table" id="lease6_status_table">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"><%:Host%></th> <div class="th cbi-section-table-cell"><%:Host%></div>
<th class="cbi-section-table-cell"><%:IPv6-Address%></th> <div class="th cbi-section-table-cell"><%:IPv6-Address%></div>
<th class="cbi-section-table-cell"><%:DUID%></th> <div class="th cbi-section-table-cell"><%:DUID%></div>
<th class="cbi-section-table-cell"><%:Leasetime remaining%></th> <div class="th cbi-section-table-cell"><%:Leasetime remaining%></div>
</tr> </div>
<tr class="cbi-section-table-row"> <div class="tr cbi-section-table-row">
<td colspan="4"><em><br /><%:Collecting data...%></em></td> <div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
</tr> </div>
</table> </div>
</fieldset> </fieldset>

View file

@ -91,24 +91,24 @@
<div class="cbi-map"> <div class="cbi-map">
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<table class="cbi-section-table" style="empty-cells:hide"> <div class="table cbi-section-table" style="empty-cells:hide">
<!-- scan list --> <!-- scan list -->
<% for i, net in ipairs(scanlist(3)) do net.encryption = net.encryption or { } %> <% 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)%>"> <div class="tr cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>">
<td class="cbi-value-field" style="width:16px; padding:3px"> <div class="td cbi-value-field" style="width:16px; padding:3px">
<abbr title="<%:Signal%>: <%=net.signal%> <%:dB%> / <%:Quality%>: <%=net.quality%>/<%=net.quality_max%>"> <abbr title="<%:Signal%>: <%=net.signal%> <%:dB%> / <%:Quality%>: <%=net.quality%>/<%=net.quality_max%>">
<img src="<%=guess_wifi_signal(net)%>" /><br /> <img src="<%=guess_wifi_signal(net)%>" /><br />
<small><%=percent_wifi_signal(net)%>%</small> <small><%=percent_wifi_signal(net)%>%</small>
</abbr> </abbr>
</td> </div>
<td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px"> <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 /> <big><strong><%=net.ssid and utl.pcdata(net.ssid) or "<em>%s</em>" % translate("hidden")%></strong></big><br />
<strong>Channel:</strong> <%=net.channel%> | <strong>Channel:</strong> <%=net.channel%> |
<strong>Mode:</strong> <%=net.mode%> | <strong>Mode:</strong> <%=net.mode%> |
<strong>BSSID:</strong> <%=net.bssid%> | <strong>BSSID:</strong> <%=net.bssid%> |
<strong>Encryption:</strong> <%=format_wifi_encryption(net.encryption)%> <strong>Encryption:</strong> <%=format_wifi_encryption(net.encryption)%>
</td> </div>
<td class="cbi-value-field" style="width:40px"> <div class="td cbi-value-field" style="width:40px">
<form action="<%=url('admin/network/wireless_join')%>" method="post"> <form action="<%=url('admin/network/wireless_join')%>" method="post">
<input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="token" value="<%=token%>" />
<input type="hidden" name="device" value="<%=utl.pcdata(dev)%>" /> <input type="hidden" name="device" value="<%=utl.pcdata(dev)%>" />
@ -128,11 +128,11 @@
<input class="cbi-button cbi-button-apply" type="submit" value="<%:Join Network%>" /> <input class="cbi-button cbi-button-apply" type="submit" value="<%:Join Network%>" />
</form> </form>
</td> </div>
</tr> </div>
<% end %> <% end %>
<!-- /scan list --> <!-- /scan list -->
</table> </div>
</fieldset> </fieldset>
</div> </div>
<div class="cbi-page-actions right"> <div class="cbi-page-actions right">

View file

@ -195,8 +195,8 @@
{ {
var assoctable = document.getElementById('iw-assoclist'); var assoctable = document.getElementById('iw-assoclist');
if (assoctable) if (assoctable)
while (assoctable.rows.length > 1) while (assoctable.firstElementChild !== assoctable.lastElementChild)
assoctable.rows[1].parentNode.removeChild(assoctable.rows[1]); assoctable.removeChild(assoctable.lastElementChild);
var devup = { }; var devup = { };
var rowstyle = 1; var rowstyle = 1;
@ -293,7 +293,7 @@
if (assoctable) if (assoctable)
{ {
var assoclist = [ ]; var assoclist = [ ];
for( var bssid in iw.assoclist ) for (var bssid in iw.assoclist)
{ {
assoclist.push(iw.assoclist[bssid]); assoclist.push(iw.assoclist[bssid]);
assoclist[assoclist.length-1].bssid = bssid; assoclist[assoclist.length-1].bssid = bssid;
@ -301,11 +301,8 @@
assoclist.sort(function(a, b) { a.bssid < b.bssid }); assoclist.sort(function(a, b) { a.bssid < b.bssid });
for( var j = 0; j < assoclist.length; j++ ) 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 icon;
var q = (-1 * (assoclist[j].noise - assoclist[j].signal)) / 5; var q = (-1 * (assoclist[j].noise - assoclist[j].signal)) / 5;
if (q < 1) if (q < 1)
@ -319,48 +316,35 @@
else else
icon = "<%=resource%>/icons/signal-75-100.png"; icon = "<%=resource%>/icons/signal-75-100.png";
tr.insertCell(-1).innerHTML = String.format( var host = hosts[assoclist[j].bssid],
'<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span>', name = host ? (host.name || host.ipv4 || host.ipv6) : null,
iw.device.name, iw.ifname hint = (host && host.name && (host.ipv4 || host.ipv6)) ? (host.ipv4 || host.ipv6) : null;
);
tr.insertCell(-1).innerHTML = nowrap(String.format('%h', iw.ssid ? iw.ssid : '?')); assoctable.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(rowstyle), [
tr.insertCell(-1).innerHTML = assoclist[j].bssid; E('<div class="td"><span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span></div>'
.format(iw.device.name, iw.ifname)),
var host = hosts[assoclist[j].bssid]; E('<div class="td" style="white-space:nowrap">%h</div>'
if (host) .format(iw.ssid || '?')),
tr.insertCell(-1).innerHTML = String.format( E('<div class="td">%h</div>'
'<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%s</div>', .format(assoclist[j].bssid)),
((host.name && (host.ipv4 || host.ipv6)) E('<div class="td">', hint ? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%h (%h)</div>'
? '%h (%s)'.format(host.name, host.ipv4 || host.ipv6) .format(name || '?', hint) : (name || '?')),
: '%h'.format(host.name || host.ipv4 || host.ipv6)).nobr() E('<div class="td"><span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span></div>'
); .format(assoclist[j].signal, assoclist[j].noise, assoclist[j].signal - assoclist[j].noise, icon, assoclist[j].signal, assoclist[j].noise)),
else E('<div class="td">', [
tr.insertCell(-1).innerHTML = '?'; E('<span style="white-space:nowrap">', wifirate(assoclist[j], true)),
E('<br />'),
tr.insertCell(-1).innerHTML = String.format( E('<span style="white-space:nowrap">', wifirate(assoclist[j], false))
'<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; rowstyle = (rowstyle == 1) ? 2 : 1;
} }
} }
} }
if (assoctable && assoctable.rows.length == 1) if (assoctable && assoctable.firstElementChild === assoctable.lastElementChild)
{ assoctable.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:No information available%></em></div></div>'));
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 devup)
{ {
@ -386,15 +370,17 @@
<% for _, dev in ipairs(devices) do local nets = dev:get_wifinets() %> <% for _, dev in ipairs(devices) do local nets = dev:get_wifinets() %>
<!-- device <%=dev:name()%> --> <!-- device <%=dev:name()%> -->
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<table class="cbi-section-table" style="margin:10px; empty-cells:hide"> <div class="table cbi-section-table" style="margin:10px; empty-cells:hide">
<!-- physical device --> <!-- physical device -->
<tr> <div class="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> <div class="td">
<td colspan="2" style="text-align:left"> <img src="<%=resource%>/icons/wifi_big_disabled.png" id="<%=dev:name()%>-iw-upstate" />
</div>
<div class="td left">
<big><strong><%=guess_wifi_hw(dev)%> (<%=dev:name()%>)</strong></big><br /> <big><strong><%=guess_wifi_hw(dev)%> (<%=dev:name()%>)</strong></big><br />
<span id="<%=dev:name()%>-iw-devinfo"></span> <span id="<%=dev:name()%>-iw-devinfo"></span>
</td> </div>
<td style="width:310px;text-align:right"> <div class="td right">
<form action="<%=url('admin/network/wireless_join')%>" method="post" class="inline"> <form action="<%=url('admin/network/wireless_join')%>" method="post" class="inline">
<input type="hidden" name="device" value="<%=dev:name()%>" /> <input type="hidden" name="device" value="<%=dev:name()%>" />
<input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="token" value="<%=token%>" />
@ -405,38 +391,36 @@
<input type="hidden" name="token" value="<%=token%>" /> <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" style="width:100px" title="<%:Provide new network%>" value="<%:Add%>" />
</form> </form>
</td> </div>
</tr> </div>
<!-- /physical device --> <!-- /physical device -->
<!-- network list --> <!-- network list -->
<% if #nets > 0 then %> <% if #nets > 0 then %>
<% for i, net in ipairs(nets) do %> <% for i, net in ipairs(nets) do %>
<tr class="cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>"> <div class="tr cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>">
<td></td> <div class="td" id="<%=net:id()%>-iw-signal">
<td class="cbi-value-field" style="vertical-align:middle; padding:3px" id="<%=net:id()%>-iw-signal">
<span class="ifacebadge" title="<%:Not associated%>"><img src="<%=resource%>/icons/signal-none.png" /> 0%</span> <span class="ifacebadge" title="<%:Not associated%>"><img src="<%=resource%>/icons/signal-none.png" /> 0%</span>
</td> </div>
<td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=net:id()%>-iw-status"> <div class="td left" id="<%=net:id()%>-iw-status">
<em><%:Collecting data...%></em> <em><%:Collecting data...%></em>
</td> </div>
<td class="cbi-value-field" style="width:310px;text-align:right"> <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 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-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%>" /> <input type="button" class="cbi-button cbi-button-remove" style="width:100px" onclick="wifi_delete('<%=net:id()%>')" title="<%:Delete this network%>" value="<%:Remove%>" />
</td> </div>
</tr> </div>
<% end %> <% end %>
<% else %> <% else %>
<tr class="cbi-section-table-row cbi-rowstyle-2"> <div class="tr cbi-section-table-row cbi-rowstyle-2">
<td></td> <div class="td left">
<td colspan="3" class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px">
<em><%:No network configured on this device%></em> <em><%:No network configured on this device%></em>
</td> </div>
</tr> </div>
<% end %> <% end %>
<!-- /network list --> <!-- /network list -->
</table> </div>
</fieldset> </fieldset>
<!-- /device <%=dev:name()%> --> <!-- /device <%=dev:name()%> -->
<% end %> <% end %>
@ -445,21 +429,21 @@
<h2><%:Associated Stations%></h2> <h2><%:Associated Stations%></h2>
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<table class="cbi-section-table valign-middle" style="margin:10px" id="iw-assoclist"> <div class="table cbi-section-table valign-middle" style="margin:10px" id="iw-assoclist">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"></th> <div class="th cbi-section-table-cell"></div>
<th class="cbi-section-table-cell"><%:SSID%></th> <div class="th cbi-section-table-cell"><%:SSID%></div>
<th class="cbi-section-table-cell"><%:MAC-Address%></th> <div class="th cbi-section-table-cell"><%:MAC-Address%></div>
<th class="cbi-section-table-cell"><%:Host%></th> <div class="th cbi-section-table-cell"><%:Host%></div>
<th class="cbi-section-table-cell"><%:Signal%> / <%:Noise%></th> <div class="th cbi-section-table-cell"><%:Signal%> / <%:Noise%></div>
<th class="cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></th> <div class="th cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></div>
</tr> </div>
<tr class="cbi-section-table-row cbi-rowstyle-2"> <div class="tr cbi-section-table-row cbi-rowstyle-2">
<td class="cbi-value-field" colspan="6"> <div class="td">
<em><%:Collecting data...%></em> <em><%:Collecting data...%></em>
</td> </div>
</tr> </div>
</table> </div>
</fieldset> </fieldset>
</div> </div>

View file

@ -62,17 +62,17 @@
); );
//]]></script> //]]></script>
<table> <div class="table">
<tr class="cbi-section-table"> <div class="tr cbi-section-table">
<td></td> <div class="td"></div>
<td class="cbi-value-field" style="width:16px; padding:3px" id="<%=self.option%>-iw-signal"> <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 /> <img src="<%=resource%>/icons/signal-none.png" title="<%:Not associated%>" /><br />
<small>0%</small> <small>0%</small>
</td> </div>
<td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-iw-description"> <div class="td cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-iw-description">
<em><%:Collecting data...%></em> <em><%:Collecting data...%></em>
</td> </div>
</tr> </div>
</table> </div>
<%+cbi/valuefooter%> <%+cbi/valuefooter%>

View file

@ -275,27 +275,27 @@
<div style="text-align:right"><small id="scale">-</small></div> <div style="text-align:right"><small id="scale">-</small></div>
<br /> <br />
<table style="width:100%; table-layout:fixed" cellspacing="5"> <div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Inbound:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Inbound:%></strong></div>
<td id="rx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> <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> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="rx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> <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> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="rx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> <div class="td" id="rx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div>
</tr> </div>
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Outbound:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Outbound:%></strong></div>
<td id="tx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> <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> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="tx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> <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> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="tx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td> <div class="td" id="tx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</div>
</tr> </div>
</table> </div>
<%+footer%> <%+footer%>

View file

@ -139,8 +139,8 @@
{ {
var conn = json.connections; var conn = json.connections;
while (conn_table.rows.length > 1) while (conn_table.firstElementChild !== conn_table.lastElementChild)
conn_table.rows[0].parentNode.deleteRow(-1); conn_table.removeChild(conn_table.lastElementChild);
var lookup_queue = [ ]; var lookup_queue = [ ];
@ -153,13 +153,10 @@
{ {
var c = conn[i]; var c = conn[i];
if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1') if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1') ||
|| (c.src == '::1' && c.dst == '::1')) (c.src == '::1' && c.dst == '::1'))
continue; 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]) if (!dns_cache[c.src])
lookup_queue.push(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 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); var dst = dns_cache[c.dst] || (c.layer3 == 'ipv6' ? '[' + c.dst + ']' : c.dst);
tr.insertCell(-1).innerHTML = c.layer3.toUpperCase(); conn_table.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(1 + (i % 2)), [
tr.insertCell(-1).innerHTML = c.layer4.toUpperCase(); E('<div class="td">', c.layer3.toUpperCase()),
tr.insertCell(-1).innerHTML = String.format('%s:%d', src, c.sport); E('<div class="td">', c.layer4.toUpperCase()),
tr.insertCell(-1).innerHTML = String.format('%s:%d', dst, c.dport); E('<div class="td">', [ src, ':', c.sport ]),
E('<div class="td">', [ dst, ':', c.dport ]),
var traf = tr.insertCell(-1); E('<div class="td" style="white-space:nowrap">', '%1024.2mB (%d <%:Pkts.%>)'.format(c.bytes, c.packets)),
traf.style.whiteSpace = 'nowrap'; ]));
traf.innerHTML = String.format('%1024.2mB (%d <%:Pkts.%>)', c.bytes, c.packets);
} }
if (lookup_queue.length > 0) if (lookup_queue.length > 0)
@ -324,52 +320,52 @@
<div style="text-align:right"><small id="scale">-</small></div> <div style="text-align:right"><small id="scale">-</small></div>
<br /> <br />
<table style="width:100%; table-layout:fixed" cellspacing="5"> <div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:UDP:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:UDP:%></strong></div>
<td id="lb_udp_cur">0</td> <div class="td" id="lb_udp_cur">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="lb_udp_avg">0</td> <div class="td" id="lb_udp_avg">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="lb_udp_peak">0</td> <div class="td" id="lb_udp_peak">0</div>
</tr> </div>
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:TCP:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:TCP:%></strong></div>
<td id="lb_tcp_cur">0</td> <div class="td" id="lb_tcp_cur">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="lb_tcp_avg">0</td> <div class="td" id="lb_tcp_avg">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="lb_tcp_peak">0</td> <div class="td" id="lb_tcp_peak">0</div>
</tr> </div>
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Other:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Other:%></strong></div>
<td id="lb_otr_cur">0</td> <div class="td" id="lb_otr_cur">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="lb_otr_avg">0</td> <div class="td" id="lb_otr_avg">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="lb_otr_peak">0</td> <div class="td" id="lb_otr_peak">0</div>
</tr> </div>
</table> </div>
<br /> <br />
<div class="cbi-section-node"> <div class="cbi-section-node">
<table class="cbi-section-table" id="connections"> <div class="table cbi-section-table" id="connections">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"><%:Network%></th> <div class="th cbi-section-table-cell"><%:Network%></div>
<th class="cbi-section-table-cell"><%:Protocol%></th> <div class="th cbi-section-table-cell"><%:Protocol%></div>
<th class="cbi-section-table-cell"><%:Source%></th> <div class="th cbi-section-table-cell"><%:Source%></div>
<th class="cbi-section-table-cell"><%:Destination%></th> <div class="th cbi-section-table-cell"><%:Destination%></div>
<th class="cbi-section-table-cell"><%:Transfer%></th> <div class="th cbi-section-table-cell"><%:Transfer%></div>
</tr> </div>
<tr><td colspan="5"><em><%:Collecting data...%></em></td></tr> <div class="tr"><div class="td" colspan="5"><em><%:Collecting data...%></em></div></div>
</table> </div>
</div> </div>
</fieldset> </fieldset>

View file

@ -6,13 +6,13 @@
<% <%
local fs = require "nixio.fs" local fs = require "nixio.fs"
local ipc = require "luci.ip"
local util = require "luci.util" local util = require "luci.util"
local stat = require "luci.tools.status" local stat = require "luci.tools.status"
local ver = require "luci.version" local ver = require "luci.version"
local has_ipv6 = fs.access("/proc/net/ipv6_route") local has_ipv6 = fs.access("/proc/net/ipv6_route")
local has_dhcp = fs.access("/etc/config/dhcp") local has_dhcp = fs.access("/etc/config/dhcp")
local has_mptcp = luci.sys.exec("sysctl -n net.mptcp.mptcp_enabled | tr -d '\n'")
local has_wifi = ((fs.stat("/etc/config/wireless", "size") or 0) > 0) local has_wifi = ((fs.stat("/etc/config/wireless", "size") or 0) > 0)
local sysinfo = luci.util.ubus("system", "info") or { } local sysinfo = luci.util.ubus("system", "info") or { }
@ -59,6 +59,8 @@
} }
if wan then if wan then
local dev = wan:get_interface()
local link = dev and ipc.link(dev:name())
rv.wan = { rv.wan = {
ipaddr = wan:ipaddr(), ipaddr = wan:ipaddr(),
gwaddr = wan:gwaddr(), gwaddr = wan:gwaddr(),
@ -67,12 +69,19 @@
expires = wan:expires(), expires = wan:expires(),
uptime = wan:uptime(), uptime = wan:uptime(),
proto = wan:proto(), proto = wan:proto(),
i18n = wan:get_i18n(),
ifname = wan:ifname(), 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 end
if wan6 then if wan6 then
local dev = wan6:get_interface()
local link = dev and ipc.link(dev:name())
rv.wan6 = { rv.wan6 = {
ip6addr = wan6:ip6addr(), ip6addr = wan6:ip6addr(),
gw6addr = wan6:gw6addr(), gw6addr = wan6:gw6addr(),
@ -80,8 +89,13 @@
ip6prefix = wan6:ip6prefix(), ip6prefix = wan6:ip6prefix(),
uptime = wan6:uptime(), uptime = wan6:uptime(),
proto = wan6:proto(), proto = wan6:proto(),
i18n = wan6:get_i18n(),
ifname = wan6:ifname(), 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 end
@ -165,135 +179,95 @@
}); });
} }
function labelList(items, offset) {
var rv = [ ];
for (var i = offset || 0; i < items.length; i += 2) {
var label = items[i],
value = items[i+1];
if (value === undefined || value === null)
continue;
if (label)
rv.push(E('strong', [label, ': ']));
rv.push(value, E('br'));
}
return rv;
}
function renderBox(title, active, childs) {
childs = childs || [];
childs.unshift(E('span', labelList(arguments, 3)));
return E('div', { class: 'ifacebox' }, [
E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
E('strong', title)),
E('div', { class: 'ifacebox-body' }, 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 }, XHR.poll(5, '<%=REQUEST_URI%>', { status: 1 },
function(x, info) function(x, info)
{ {
if (!(npoll++ % 5)) if (!(npoll++ % 5))
updateHosts(); updateHosts();
<% if has_mptcp == "0" then %> var us = document.getElementById('upstream_status_table');
var si = document.getElementById('wan4_i');
var ss = document.getElementById('wan4_s');
var ifc = info.wan;
if (ifc && ifc.ifname && ifc.proto != 'none') while (us.lastElementChild)
{ us.removeChild(us.lastElementChild);
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++) var ifc = info.wan || {};
{
s += String.format(
'<strong><%:DNS%> %d: </strong>%s<br />',
i + 1, ifc.dns[i]
);
}
if (ifc.expires > -1) us.appendChild(renderBox(
{ '<%:IPv4 Upstream%>',
s += String.format( (ifc.ifname && ifc.proto != 'none'),
'<strong><%:Expires%>: </strong>%t<br />', [ E('div', {}, renderBadge(
ifc.expires '<%=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%>'),
if (ifc.uptime > 0) '<%:Address%>', (ifc.ipaddr) ? ifc.ipaddr : '0.0.0.0',
{ '<%:Netmask%>', (ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255',
s += String.format( '<%:Gateway%>', (ifc.gwaddr) ? ifc.gwaddr : '0.0.0.0',
'<strong><%:Connected%>: </strong>%t<br />', '<%:DNS%> 1', (ifc.dns) ? ifc.dns[0] : null,
ifc.uptime '<%: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,
ss.innerHTML = String.format('<small>%s</small>', s); '<%:Expires%>', (ifc.expires > -1) ? '%t'.format(ifc.expires) : null,
si.innerHTML = String.format( '<%:Connected%>', (ifc.uptime > 0) ? '%t'.format(ifc.uptime) : null));
'<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>';
}
<% if has_ipv6 then %> <% if has_ipv6 then %>
var si6 = document.getElementById('wan6_i'); var ifc6 = info.wan6 || {};
var ss6 = document.getElementById('wan6_s');
var ifc6 = info.wan6;
if (ifc6 && ifc6.ifname && ifc6.proto != 'none') us.appendChild(renderBox(
{ '<%:IPv6 Upstream%>',
var s = String.format( (ifc6.ifname && ifc6.proto != 'none'),
'<strong><%:Type%>: </strong>%s%s<br />', [ E('div', {}, renderBadge(
ifc6.proto, (ifc6.ip6prefix) ? '-pd' : '' '<%=resource%>/icons/%s.png'.format(ifc6.type || 'ethernet_disabled'), null,
); '<%:Device%>', ifc6 ? (ifc6.name || ifc6.ifname || '-') : '-',
'<%:MAC-Address%>', (ifc6 && ifc6.ether) ? ifc6.mac : null)) ],
if (!ifc6.ip6prefix) '<%:Protocol%>', ifc6.i18n ? (ifc6.i18n + (ifc6.proto === 'dhcp' && ifc6.ip6prefix ? '-PD' : '')) : E('em', '<%:Not connected%>'),
{ '<%:Prefix Delegated%>', ifc6.ip6prefix,
s += String.format( '<%:Address%>', (ifc6.ip6prefix) ? (ifc6.ip6addr || null) : (ifc6.ipaddr || '::'),
'<strong><%:Address%>: </strong>%s<br />', '<%:Gateway%>', (ifc6.gw6addr) ? ifc6.gw6addr : '::',
(ifc6.ip6addr) ? ifc6.ip6addr : '::' '<%:DNS%> 1', (ifc6.dns) ? ifc6.dns[0] : null,
); '<%:DNS%> 2', (ifc6.dns) ? ifc6.dns[1] : null,
} '<%:DNS%> 3', (ifc6.dns) ? ifc6.dns[2] : null,
else '<%:DNS%> 4', (ifc6.dns) ? ifc6.dns[3] : null,
{ '<%:DNS%> 5', (ifc6.dns) ? ifc6.dns[4] : null,
s += String.format( '<%:Connected%>', (ifc6.uptime > 0) ? '%t'.format(ifc6.uptime) : null));
'<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>';
}
<% end %>
<% end %> <% end %>
<% if has_dsl then %> <% if has_dsl then %>
@ -361,10 +335,10 @@
if (ls) if (ls)
{ {
/* clear all rows */ /* clear all rows */
while( ls.rows.length > 1 ) while (ls.firstElementChild !== ls.lastElementChild)
ls.rows[0].parentNode.deleteRow(1); ls.removeChild(ls.lastElementChild);
for( var i = 0; i < info.leases.length; i++ ) for (var i = 0; i < info.leases.length; i++)
{ {
var timestr; var timestr;
@ -375,24 +349,16 @@
else else
timestr = String.format('%t', info.leases[i].expires); timestr = String.format('%t', info.leases[i].expires);
var tr = ls.rows[0].parentNode.insertRow(-1); ls.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); E('<div class="td">', info.leases[i].hostname ? info.leases[i].hostname : '?'),
E('<div class="td">', info.leases[i].ipaddr),
tr.insertCell(-1).innerHTML = info.leases[i].hostname ? info.leases[i].hostname : '?'; E('<div class="td">', info.leases[i].macaddr),
tr.insertCell(-1).innerHTML = info.leases[i].ipaddr; E('<div class="td">', timestr)
tr.insertCell(-1).innerHTML = info.leases[i].macaddr; ]));
tr.insertCell(-1).innerHTML = timestr;
} }
if( ls.rows.length == 1 ) if (ls.firstElementChild === ls.lastElementChild)
{ ls.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>'));
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'); var ls6 = document.getElementById('lease6_status_table');
@ -401,10 +367,10 @@
ls6.parentNode.style.display = 'block'; ls6.parentNode.style.display = 'block';
/* clear all rows */ /* clear all rows */
while( ls6.rows.length > 1 ) while (ls6.firstElementChild !== ls6.lastElementChild)
ls6.rows[0].parentNode.deleteRow(1); ls6.removeChild(ls6.lastElementChild);
for( var i = 0; i < info.leases6.length; i++ ) for (var i = 0; i < info.leases6.length; i++)
{ {
var timestr; var timestr;
@ -415,35 +381,29 @@
else else
timestr = String.format('%t', info.leases6[i].expires); timestr = String.format('%t', info.leases6[i].expires);
var tr = ls6.rows[0].parentNode.insertRow(-1); var host = hosts[duid2mac(info.leases6[i].duid)],
tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); name = info.leases6[i].hostname,
hint = null;
var host = hosts[duid2mac(info.leases6[i].duid)]; if (!name) {
if (!info.leases6[i].hostname) if (host)
tr.insertCell(-1).innerHTML = hint = host.name || host.ipv4 || host.ipv6;
(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 {
: '?'; if (host && host.name && info.leases6[i].hostname != host.name)
else hint = host.name;
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 ) ls6.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
{ E('<div class="td nowrap">', hint ? '<div>%h (%h)</div>'.format(name || '?', hint) : (name || '?')),
var tr = ls6.rows[0].parentNode.insertRow(-1); E('<div class="td nowrap">', info.leases6[i].ip6addr),
tr.className = 'cbi-section-table-row'; E('<div class="td nowrap">', info.leases6[i].duid),
E('<div class="td nowrap">', timestr)
var td = tr.insertCell(-1); ]));
td.colSpan = 4;
td.innerHTML = '<em><br /><%:There are no active leases.%></em>';
} }
if (ls6.firstElementChild === ls6.lastElementChild)
ls6.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>'));
} }
<% end %> <% end %>
@ -453,30 +413,34 @@
var ws = document.getElementById('wifi_status_table'); var ws = document.getElementById('wifi_status_table');
if (ws) if (ws)
{ {
var wsbody = ws.rows[0].parentNode; while (ws.lastElementChild)
while (ws.rows.length > 0) ws.removeChild(ws.lastElementChild);
wsbody.deleteRow(0);
for (var didx = 0; didx < info.wifinets.length; didx++) for (var didx = 0; didx < info.wifinets.length; didx++)
{ {
var dev = info.wifinets[didx]; var dev = info.wifinets[didx];
var net0 = (dev.networks && dev.networks[0]) ? dev.networks[0] : {};
var tr = wsbody.insertRow(-1); var vifs = [];
var td;
td = tr.insertCell(-1);
td.width = "33%";
td.innerHTML = dev.name;
td.style.verticalAlign = "top";
td = tr.insertCell(-1);
var s = '';
for (var nidx = 0; nidx < dev.networks.length; nidx++) for (var nidx = 0; nidx < dev.networks.length; nidx++)
{ {
var net = dev.networks[nidx]; var net = dev.networks[nidx];
var is_assoc = (net.bssid != '00:00:00:00:00:00' && net.channel && !net.disabled); var is_assoc = (net.bssid != '00:00:00:00:00:00' && net.channel && !net.disabled);
var num_assoc = 0;
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);
num_assoc++;
}
var icon; var icon;
if (!is_assoc) if (!is_assoc)
@ -492,66 +456,35 @@
else else
icon = "<%=resource%>/icons/signal-75-100.png"; icon = "<%=resource%>/icons/signal-75-100.png";
s += String.format( vifs.push(renderBadge(
'<table><tr><td style="text-align:center; width:32px; padding:3px">' + icon,
'<img src="%s" title="<%:Signal%>: %d dBm / <%:Noise%>: %d dBm" />' + '<%:Signal%>: %d dBm / <%:Quality%>: %d%%'.format(net.signal, net.quality),
'<br /><small>%d%%</small>' + '<%:SSID%>', E('a', { href: net.link }, [ net.ssid || '?' ]),
'</td><td style="text-align:left; padding:3px"><small>' + '<%:Mode%>', net.mode,
'<strong><%:SSID%>:</strong> <a href="%s">%h</a><br />' + '<%:BSSID%>', is_assoc ? (net.bssid || '-') : null,
'<strong><%:Mode%>:</strong> %s<br />' + '<%:Encryption%>', is_assoc ? net.encryption : null,
'<strong><%:Channel%>:</strong> %d (%.3f <%:GHz%>)<br />' + '<%:Associations%>', is_assoc ? (num_assoc || '-') : null,
'<strong><%:Bitrate%>:</strong> %s <%:Mbit/s%><br />', null, is_assoc ? null : E('em', '<%:Wireless is disabled or not associated%>')));
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>'; ws.appendChild(renderBox(
dev.device, dev.up || net0.up,
for (var bssid in net.assoclist) [ E('div', vifs) ],
{ '<%:Type%>', dev.name.replace(/^Generic | Wireless Controller .+$/g, ''),
var bss = net.assoclist[bssid]; '<%:Channel%>', net0.channel ? '%d (%.3f <%:GHz%>)'.format(net0.channel, net0.frequency) : '-',
'<%:Bitrate%>', net0.bitrate ? '%d <%:Mbit/s%>'.format(net0.bitrate) : '-'));
bss.bssid = bssid;
bss.link = net.link;
bss.name = net.name;
bss.ifname = net.ifname;
bss.radio = dev.name;
assoclist.push(bss);
}
} }
if (!s) if (!ws.lastElementChild)
s = '<em><%:No information available%></em>'; ws.appendChild(E('<em><%:No information available%></em>'));
td.innerHTML = s;
}
} }
var ac = document.getElementById('wifi_assoc_table'); var ac = document.getElementById('wifi_assoc_table');
if (ac) if (ac)
{ {
/* clear all rows */ /* clear all rows */
while( ac.rows.length > 1 ) while (ac.firstElementChild !== ac.lastElementChild)
ac.rows[0].parentNode.deleteRow(1); ac.removeChild(ac.lastElementChild);
assoclist.sort(function(a, b) { assoclist.sort(function(a, b) {
return (a.name == b.name) return (a.name == b.name)
@ -560,11 +493,8 @@
; ;
}); });
for( var i = 0; i < assoclist.length; i++ ) 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 icon;
var q = (-1 * (assoclist[i].noise - assoclist[i].signal)) / 5; var q = (-1 * (assoclist[i].noise - assoclist[i].signal)) / 5;
if (q < 1) if (q < 1)
@ -578,49 +508,31 @@
else else
icon = "<%=resource%>/icons/signal-75-100.png"; icon = "<%=resource%>/icons/signal-75-100.png";
tr.insertCell(-1).innerHTML = String.format( var host = hosts[assoclist[i].bssid],
'<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span>', name = host ? (host.name || host.ipv4 || host.ipv6) : null,
assoclist[i].radio, assoclist[i].ifname hint = (host && host.name && (host.ipv4 || host.ipv6)) ? (host.ipv4 || host.ipv6) : null;
);
tr.insertCell(-1).innerHTML = String.format( ac.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(1 + (i % 2)), [
'<a href="%s">%s</a>', E('<div class="td"><span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span></div>'
assoclist[i].link, .format(assoclist[i].radio, assoclist[i].ifname)),
'%h'.format(assoclist[i].name).nobr() E('<div class="td"><a href="%s" style="white-space:nowrap">%h</a></div>'
); .format(assoclist[i].link, assoclist[i].name)),
E('<div class="td">',
tr.insertCell(-1).innerHTML = assoclist[i].bssid; assoclist[i].bssid),
E('<div class="td nowrap">',
var host = hosts[assoclist[i].bssid]; hint ? '<div>%h (%h)</div>'.format(name || '?', hint) : (name || '?')),
if (host) E('<div class="td"><span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span></div>'
tr.insertCell(-1).innerHTML = String.format( .format(assoclist[i].signal, assoclist[i].noise, assoclist[i].signal - assoclist[i].noise, icon, assoclist[i].signal, assoclist[i].noise)),
'<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%s</div>', E('<div class="td nowrap">', [
((host.name && (host.ipv4 || host.ipv6)) E('<span style="white-space:nowrap">', wifirate(assoclist[i], true)),
? '%h (%s)'.format(host.name, host.ipv4 || host.ipv6) E('<br />'),
: '%h'.format(host.name || host.ipv4 || host.ipv6)).nobr() E('<span style="white-space:nowrap">', wifirate(assoclist[i], false))
); ])
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();
} }
if (ac.rows.length == 1) if (ac.firstElementChild === ac.lastElementChild)
{ ac.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:No information available%></em></div></div>'));
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>';
}
} }
<% end %> <% end %>
@ -682,110 +594,104 @@
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend><%:System%></legend> <legend><%:System%></legend>
<table width="100%" cellspacing="10"> <div class="table" width="100%">
<tr><td width="33%"><%:Hostname%></td><td><%=luci.sys.hostname() or "?"%></td></tr> <div class="tr"><div class="td left" width="33%"><%:Hostname%></div><div class="td left"><%=luci.sys.hostname() or "?"%></div></div>
<tr><td width="33%"><%:Model%></td><td><%=pcdata(boardinfo.model or boardinfo.system or "?")%></td></tr> <div class="tr"><div class="td left" width="33%"><%:Model%></div><div class="td left"><%=pcdata(boardinfo.model or "?")%></div></div>
<tr><td width="33%"><%:Firmware Version%></td><td> <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.distname)%> <%=pcdata(ver.distversion)%> /
<%=pcdata(ver.luciname)%> (<%=pcdata(ver.luciversion)%>) <%=pcdata(ver.luciname)%> (<%=pcdata(ver.luciversion)%>)
</td></tr> </div></div>
<tr><td width="33%"><%:Kernel Version%></td><td><%=unameinfo.release or "?"%></td></tr> <div class="tr"><div class="td left" width="33%"><%:Kernel Version%></div><div class="td left"><%=unameinfo.release or "?"%></div></div>
<tr><td width="33%"><%:Local Time%></td><td id="localtime">-</td></tr> <div class="tr"><div class="td left" width="33%"><%:Local Time%></div><div class="td left" id="localtime">-</div></div>
<tr><td width="33%"><%:Uptime%></td><td id="uptime">-</td></tr> <div class="tr"><div class="td left" width="33%"><%:Uptime%></div><div class="td left" id="uptime">-</div></div>
<tr><td width="33%"><%:Load Average%></td><td id="loadavg">-</td></tr> <div class="tr"><div class="td left" width="33%"><%:Load Average%></div><div class="td left" id="loadavg">-</div></div>
</table> </div>
</fieldset> </fieldset>
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend><%:Memory%></legend> <legend><%:Memory%></legend>
<table width="100%" cellspacing="10"> <div class="table" width="100%">
<tr><td width="33%"><%:Total Available%></td><td id="memtotal">-</td></tr> <div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="memtotal">-</div></div>
<tr><td width="33%"><%:Free%></td><td id="memfree">-</td></tr> <div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="memfree">-</div></div>
<tr><td width="33%"><%:Buffered%></td><td id="membuff">-</td></tr> <div class="tr"><div class="td left" width="33%"><%:Buffered%></div><div class="td left" id="membuff">-</div></div>
</table> </div>
</fieldset> </fieldset>
<% if swapinfo.total > 0 then %> <% if swapinfo.total > 0 then %>
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend><%:Swap%></legend> <legend><%:Swap%></legend>
<table width="100%" cellspacing="10"> <div class="table" width="100%">
<tr><td width="33%"><%:Total Available%></td><td id="swaptotal">-</td></tr> <div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="swaptotal">-</div></div>
<tr><td width="33%"><%:Free%></td><td id="swapfree">-</td></tr> <div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="swapfree">-</div></div>
</table> </div>
</fieldset> </fieldset>
<% end %> <% end %>
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend><%:Network%></legend> <legend><%:Network%></legend>
<table width="100%" cellspacing="10"> <div id="upstream_status_table" class="network-status-table">
<% if has_mptcp == "0" then %> <em><%:Collecting data...%></em>
<tr><td width="33%" style="vertical-align:top"><%:IPv4 WAN Status%></td><td> </div>
<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> <div class="table" width="100%">
<td id="wan4_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td> <div class="tr"><div class="td left" width="33%"><%:Active Connections%></div><div class="td left" id="conns">-</div></div>
</tr></table> </div>
</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 %>
<% end %>
<tr><td width="33%"><%:Active Connections%></td><td id="conns">-</td></tr>
</table>
</fieldset> </fieldset>
<% if has_dhcp then %> <% if has_dhcp then %>
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend><%:DHCP Leases%></legend> <legend><%:DHCP Leases%></legend>
<table class="cbi-section-table" id="lease_status_table"> <div class="table cbi-section-table" id="lease_status_table">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"><%:Hostname%></th> <div class="th"><%:Hostname%></div>
<th class="cbi-section-table-cell"><%:IPv4-Address%></th> <div class="th"><%:IPv4-Address%></div>
<th class="cbi-section-table-cell"><%:MAC-Address%></th> <div class="th"><%:MAC-Address%></div>
<th class="cbi-section-table-cell"><%:Leasetime remaining%></th> <div class="th"><%:Leasetime remaining%></div>
</tr> </div>
<tr class="cbi-section-table-row"> <div class="tr cbi-section-table-row">
<td colspan="4"><em><br /><%:Collecting data...%></em></td> <div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
</tr> </div>
</table> </div>
</fieldset> </fieldset>
<fieldset class="cbi-section" style="display:none"> <fieldset class="cbi-section" style="display:none">
<legend><%:DHCPv6 Leases%></legend> <legend><%:DHCPv6 Leases%></legend>
<table class="cbi-section-table" id="lease6_status_table"> <div class="table cbi-section-table" id="lease6_status_table">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"><%:Host%></th> <div class="th"><%:Host%></div>
<th class="cbi-section-table-cell"><%:IPv6-Address%></th> <div class="th"><%:IPv6-Address%></div>
<th class="cbi-section-table-cell"><%:DUID%></th> <div class="th"><%:DUID%></div>
<th class="cbi-section-table-cell"><%:Leasetime remaining%></th> <div class="th"><%:Leasetime remaining%></div>
</tr> </div>
<tr class="cbi-section-table-row"> <div class="tr cbi-section-table-row">
<td colspan="4"><em><br /><%:Collecting data...%></em></td> <div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
</tr> </div>
</table> </div>
</fieldset> </fieldset>
<% end %> <% end %>
<% if has_dsl then %> <% if has_dsl then %>
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend><%:DSL%></legend> <legend><%:DSL%></legend>
<table width="100%" cellspacing="10"> <div class="table" width="100%">
<tr><td width="33%" style="vertical-align:top"><%:DSL Status%></td><td> <div class="tr">
<table><tr> <div class="td left" width="33%" style="vertical-align:top"><%:DSL Status%></div>
<td id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td> <div class="td">
<td id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td> <div class="table">
</tr></table> <div class="tr">
</td></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>
</table> <div class="td left" id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div>
</div>
</div>
</div>
</div>
</div>
</fieldset> </fieldset>
<% end %> <% end %>
@ -793,27 +699,27 @@
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend><%:Wireless%></legend> <legend><%:Wireless%></legend>
<table id="wifi_status_table" width="100%" cellspacing="10"> <div id="wifi_status_table" class="network-status-table">
<tr><td><em><%:Collecting data...%></em></td></tr> <em><%:Collecting data...%></em>
</table> </div>
</fieldset> </fieldset>
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend><%:Associated Stations%></legend> <legend><%:Associated Stations%></legend>
<table class="cbi-section-table valign-middle" id="wifi_assoc_table"> <div class="table cbi-section-table valign-middle" id="wifi_assoc_table">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell">&#160;</th> <div class="th">&#160;</div>
<th class="cbi-section-table-cell"><%:Network%></th> <div class="th"><%:Network%></div>
<th class="cbi-section-table-cell"><%:MAC-Address%></th> <div class="th"><%:MAC-Address%></div>
<th class="cbi-section-table-cell"><%:Host%></th> <div class="th"><%:Host%></div>
<th class="cbi-section-table-cell"><%:Signal%> / <%:Noise%></th> <div class="th"><%:Signal%> / <%:Noise%></div>
<th class="cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></th> <div class="th"><%:RX Rate%> / <%:TX Rate%></div>
</tr> </div>
<tr class="cbi-section-table-row"> <div class="tr cbi-section-table-row">
<td colspan="6"><em><br /><%:Collecting data...%></em></td> <div class="td" colspan="6"><em><br /><%:Collecting data...%></em></div>
</tr> </div>
</table> </div>
</fieldset> </fieldset>
<% end %> <% end %>

View file

@ -92,14 +92,14 @@
<% for _, tbl in ipairs(tables) do chaincnt = 0 %> <% for _, tbl in ipairs(tables) do chaincnt = 0 %>
<h3><%:Table%>: <%=tbl%></h3> <h3><%:Table%>: <%=tbl%></h3>
<table class="cbi-section-table" style="font-size:90%"> <div class="table cbi-section-table" style="font-size:90%">
<% for _, chain in ipairs(ipt:chains(tbl)) do <% for _, chain in ipairs(ipt:chains(tbl)) do
rowcnt = 0 rowcnt = 0
chaincnt = chaincnt + 1 chaincnt = chaincnt + 1
chaininfo = ipt:chain(tbl, chain) chaininfo = ipt:chain(tbl, chain)
%> %>
<tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> <div class="tr cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>">
<th class="cbi-section-table-cell" style="text-align:left" colspan="11"> <div class="th cbi-section-table-cell" style="text-align:left" colspan="11">
<br /><span id="rule_<%=tbl:lower()%>_<%=chain%>"> <br /><span id="rule_<%=tbl:lower()%>_<%=chain%>">
<%:Chain%> <em><%=chain%></em> <%:Chain%> <em><%=chain%></em>
(<%- if chaininfo.policy then -%> (<%- if chaininfo.policy then -%>
@ -107,47 +107,47 @@
<%- else -%> <%- else -%>
<%:References%>: <%=chaininfo.references-%> <%:References%>: <%=chaininfo.references-%>
<%- end -%>)</span> <%- end -%>)</span>
</th> </div>
</tr> </div>
<tr class="cbi-section-table-descr"> <div class="tr cbi-section-table-descr">
<th class="cbi-section-table-cell"><%:Pkts.%></th> <div class="th cbi-section-table-cell"><%:Pkts.%></div>
<th class="cbi-section-table-cell"><%:Traffic%></th> <div class="th cbi-section-table-cell"><%:Traffic%></div>
<th class="cbi-section-table-cell"><%:Target%></th> <div class="th cbi-section-table-cell"><%:Target%></div>
<th class="cbi-section-table-cell"><%:Prot.%></th> <div class="th cbi-section-table-cell"><%:Prot.%></div>
<th class="cbi-section-table-cell"><%:In%></th> <div class="th cbi-section-table-cell"><%:In%></div>
<th class="cbi-section-table-cell"><%:Out%></th> <div class="th cbi-section-table-cell"><%:Out%></div>
<th class="cbi-section-table-cell"><%:Source%></th> <div class="th cbi-section-table-cell"><%:Source%></div>
<th class="cbi-section-table-cell"><%:Destination%></th> <div class="th cbi-section-table-cell"><%:Destination%></div>
<th class="cbi-section-table-cell" style="width:30%"><%:Options%></th> <div class="th cbi-section-table-cell" style="width:30%"><%:Options%></div>
</tr> </div>
<% for _, rule in ipairs(ipt:find({table=tbl, chain=chain})) do %> <% for _, rule in ipairs(ipt:find({table=tbl, chain=chain})) do %>
<tr class="cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>"> <div class="tr cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>">
<td><%=rule.packets%></td> <div class="td"><%=rule.packets%></div>
<td style="white-space: nowrap"><%=wba.byte_format(rule.bytes)%></td> <div class="td" style="white-space: nowrap"><%=wba.byte_format(rule.bytes)%></div>
<td><%=rule.target and link_target(tbl, rule.target) or "-"%></td> <div class="td"><%=rule.target and link_target(tbl, rule.target) or "-"%></div>
<td><%=rule.protocol%></td> <div class="td"><%=rule.protocol%></div>
<td><%=link_iface(rule.inputif)%></td> <div class="td"><%=link_iface(rule.inputif)%></div>
<td><%=link_iface(rule.outputif)%></td> <div class="td"><%=link_iface(rule.outputif)%></div>
<td><%=rule.source%></td> <div class="td"><%=rule.source%></div>
<td><%=rule.destination%></td> <div class="td"><%=rule.destination%></div>
<td style="width:30%"><small><%=#rule.options > 0 and luci.util.pcdata(table.concat(rule.options, " ")) or "-"%></small></td> <div class="td" style="width:30%"><small><%=#rule.options > 0 and luci.util.pcdata(table.concat(rule.options, " ")) or "-"%></small></div>
</tr> </div>
<% end %> <% end %>
<% if rowcnt == 1 then %> <% if rowcnt == 1 then %>
<tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> <div class="tr cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>">
<td colspan="9"><em><%:No rules in this chain%></em></td> <div class="td" colspan="9"><em><%:No rules in this chain%></em></div>
</tr> </div>
<% end %> <% end %>
<% end %> <% end %>
<% if chaincnt == 0 then %> <% if chaincnt == 0 then %>
<tr class="cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>"> <div class="tr cbi-section-table-titles cbi-rowstyle-<%=rowstyle()%>">
<td colspan="9"><em><%:No chains in this table%></em></td> <div class="td" colspan="9"><em><%:No chains in this table%></em></div>
</tr> </div>
<% end %> <% end %>
</table> </div>
<br /><br /> <br /><br />
<% end %> <% end %>
</fieldset> </fieldset>

View file

@ -248,37 +248,37 @@
<div style="text-align:right"><small id="scale">-</small></div> <div style="text-align:right"><small id="scale">-</small></div>
<br /> <br />
<table style="width:100%; table-layout:fixed" cellspacing="5"> <div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff0000; white-space:nowrap"><%:1 Minute Load:%></strong></td> <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>
<td id="lb_load01_cur">0</td> <div class="td" id="lb_load01_cur">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="lb_load01_avg">0</td> <div class="td" id="lb_load01_avg">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="lb_load01_peak">0</td> <div class="td" id="lb_load01_peak">0</div>
</tr> </div>
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff6600; white-space:nowrap"><%:5 Minute Load:%></strong></td> <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>
<td id="lb_load05_cur">0</td> <div class="td" id="lb_load05_cur">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="lb_load05_avg">0</td> <div class="td" id="lb_load05_avg">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="lb_load05_peak">0</td> <div class="td" id="lb_load05_peak">0</div>
</tr> </div>
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ffaa00; white-space:nowrap"><%:15 Minute Load:%></strong></td> <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>
<td id="lb_load15_cur">0</td> <div class="td" id="lb_load15_cur">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="lb_load15_avg">0</td> <div class="td" id="lb_load15_avg">0</div>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="lb_load15_peak">0</td> <div class="td" id="lb_load15_peak">0</div>
</tr> </div>
</table> </div>
<%+footer%> <%+footer%>

View file

@ -39,28 +39,28 @@
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<legend>ARP</legend> <legend>ARP</legend>
<div class="cbi-section-node"> <div class="cbi-section-node">
<table class="cbi-section-table"> <div class="table cbi-section-table">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address%></th> <div class="th cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address%></div>
<th class="cbi-section-table-cell"><%_<abbr title="Media Access Control">MAC</abbr>-Address%></th> <div class="th cbi-section-table-cell"><%_<abbr title="Media Access Control">MAC</abbr>-Address%></div>
<th class="cbi-section-table-cell"><%:Interface%></th> <div class="th cbi-section-table-cell"><%:Interface%></div>
</tr> </div>
<% <%
for _, v in ipairs(ip.neighbors({ family = 4 })) do for _, v in ipairs(ip.neighbors({ family = 4 })) do
if v.mac then if v.mac then
%> %>
<tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> <div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>">
<td class="cbi-value-field"><%=v.dest%></td> <div class="td cbi-value-field"><%=v.dest%></div>
<td class="cbi-value-field"><%=v.mac%></td> <div class="td cbi-value-field"><%=v.mac%></div>
<td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td> <div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
</tr> </div>
<% <%
style = not style style = not style
end end
end end
%> %>
</table> </div>
</div> </div>
</fieldset> </fieldset>
<br /> <br />
@ -69,24 +69,24 @@
<legend><%_Active <abbr title="Internet Protocol Version 4">IPv4</abbr>-Routes%></legend> <legend><%_Active <abbr title="Internet Protocol Version 4">IPv4</abbr>-Routes%></legend>
<div class="cbi-section-node"> <div class="cbi-section-node">
<table class="cbi-section-table"> <div class="table cbi-section-table">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"><%:Network%></th> <div class="th cbi-section-table-cell"><%:Network%></div>
<th class="cbi-section-table-cell"><%:Target%></th> <div class="th cbi-section-table-cell"><%:Target%></div>
<th class="cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Gateway%></th> <div class="th cbi-section-table-cell"><%_<abbr title="Internet Protocol Version 4">IPv4</abbr>-Gateway%></div>
<th class="cbi-section-table-cell"><%:Metric%></th> <div class="th cbi-section-table-cell"><%:Metric%></div>
<th class="cbi-section-table-cell"><%:Table%></th> <div class="th cbi-section-table-cell"><%:Table%></div>
</tr> </div>
<% for _, v in ipairs(ip.routes({ family = 4, type = 1 })) do %> <% for _, v in ipairs(ip.routes({ family = 4, type = 1 })) do %>
<tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> <div class="tr 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> <div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or v.dev%></div>
<td class="cbi-value-field"><%=v.dest%></td> <div class="td cbi-value-field"><%=v.dest%></div>
<td class="cbi-value-field"><%=v.gw%></td> <div class="td cbi-value-field"><%=v.gw%></div>
<td class="cbi-value-field"><%=v.metric or 0%></td> <div class="td cbi-value-field"><%=v.metric or 0%></div>
<td class="cbi-value-field"><%=rtn[v.table] or v.table%></td> <div class="td cbi-value-field"><%=rtn[v.table] or v.table%></div>
</tr> </div>
<% style = not style end %> <% style = not style end %>
</table> </div>
</div> </div>
</fieldset> </fieldset>
<br /> <br />
@ -99,31 +99,31 @@
<legend><%_Active <abbr title="Internet Protocol Version 6">IPv6</abbr>-Routes%></legend> <legend><%_Active <abbr title="Internet Protocol Version 6">IPv6</abbr>-Routes%></legend>
<div class="cbi-section-node"> <div class="cbi-section-node">
<table class="cbi-section-table"> <div class="table cbi-section-table">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"><%:Network%></th> <div class="th cbi-section-table-cell"><%:Network%></div>
<th class="cbi-section-table-cell"><%:Target%></th> <div class="th cbi-section-table-cell"><%:Target%></div>
<th class="cbi-section-table-cell"><%:Source%></th> <div class="th cbi-section-table-cell"><%:Source%></div>
<th class="cbi-section-table-cell"><%:Metric%></th> <div class="th cbi-section-table-cell"><%:Metric%></div>
<th class="cbi-section-table-cell"><%:Table%></th> <div class="th cbi-section-table-cell"><%:Table%></div>
</tr> </div>
<% <%
for _, v in ipairs(ip.routes({ family = 6, type = 1 })) do for _, v in ipairs(ip.routes({ family = 6, type = 1 })) do
if v.dest and not v.dest:is6linklocal() then if v.dest and not v.dest:is6linklocal() then
%> %>
<tr class="cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>"> <div class="tr 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> <div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
<td class="cbi-value-field"><%=v.dest%></td> <div class="td cbi-value-field"><%=v.dest%></div>
<td class="cbi-value-field"><%=v.from%></td> <div class="td cbi-value-field"><%=v.from%></div>
<td class="cbi-value-field"><%=v.metric or 0%></td> <div class="td cbi-value-field"><%=v.metric or 0%></div>
<td class="cbi-value-field"><%=rtn[v.table] or v.table%></td> <div class="td cbi-value-field"><%=rtn[v.table] or v.table%></div>
</tr> </div>
<% <%
style = not style style = not style
end end
end end
%> %>
</table> </div>
</div> </div>
</fieldset> </fieldset>
<br /> <br />
@ -132,27 +132,27 @@
<legend><%:IPv6 Neighbours%></legend> <legend><%:IPv6 Neighbours%></legend>
<div class="cbi-section-node"> <div class="cbi-section-node">
<table class="cbi-section-table"> <div class="table cbi-section-table">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell"><%:IPv6-Address%></th> <div class="th cbi-section-table-cell"><%:IPv6-Address%></div>
<th class="cbi-section-table-cell"><%:MAC-Address%></th> <div class="th cbi-section-table-cell"><%:MAC-Address%></div>
<th class="cbi-section-table-cell"><%:Interface%></th> <div class="th cbi-section-table-cell"><%:Interface%></div>
</tr> </div>
<% <%
for _, v in ipairs(ip.neighbors({ family = 6 })) do for _, v in ipairs(ip.neighbors({ family = 6 })) do
if v.dest and not v.dest:is6linklocal() and v.mac then 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)%>"> <div class="tr cbi-section-table-row cbi-rowstyle-<%=(style and 1 or 2)%>">
<td class="cbi-value-field"><%=v.dest%></td> <div class="td cbi-value-field"><%=v.dest%></div>
<td class="cbi-value-field"><%=v.mac%></td> <div class="td cbi-value-field"><%=v.mac%></div>
<td class="cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></td> <div class="td cbi-value-field"><%=luci.tools.webadmin.iface_get_network(v.dev) or '(' .. v.dev .. ')'%></div>
</tr> </div>
<% <%
style = not style style = not style
end end
end end
%> %>
</table> </div>
</div> </div>
</fieldset> </fieldset>
<br /> <br />

View file

@ -325,28 +325,28 @@
<div style="text-align:right"><small id="scale">-</small></div> <div style="text-align:right"><small id="scale">-</small></div>
<br /> <br />
<table style="width:100%; table-layout:fixed" cellspacing="5"> <div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Signal:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Signal:%></strong></div>
<td id="rssi_bw_cur">0 <%:dBm%></td> <div class="td" id="rssi_bw_cur">0 <%:dBm%></div>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="rssi_bw_avg">0 <%:dBm%></td> <div class="td" id="rssi_bw_avg">0 <%:dBm%></div>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="rssi_bw_peak">0 <%:dBm%></td> <div class="td" id="rssi_bw_peak">0 <%:dBm%></div>
</tr> </div>
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Noise:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Noise:%></strong></div>
<td id="noise_bw_cur">0 <%:dBm%></td> <div class="td" id="noise_bw_cur">0 <%:dBm%></div>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="noise_bw_avg">0 <%:dBm%></td> <div class="td" id="noise_bw_avg">0 <%:dBm%></div>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="noise_bw_peak">0 <%:dBm%></td> <div class="td" id="noise_bw_peak">0 <%:dBm%></div>
</tr> </div>
</table> </div>
<br /> <br />
@ -354,17 +354,17 @@
<div style="text-align:right"><small id="scale2">-</small></div> <div style="text-align:right"><small id="scale2">-</small></div>
<br /> <br />
<table style="width:100%; table-layout:fixed" cellspacing="5"> <div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
<tr> <div class="tr">
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Phy Rate:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Phy Rate:%></strong></div>
<td id="rate_bw_cur">0 MBit/s</td> <div class="td" id="rate_bw_cur">0 MBit/s</div>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
<td id="rate_bw_avg">0 MBit/s</td> <div class="td" id="rate_bw_avg">0 MBit/s</div>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td> <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
<td id="rate_bw_peak">0 MBit/s</td> <div class="td" id="rate_bw_peak">0 MBit/s</div>
</tr> </div>
</table> </div>
<%+footer%> <%+footer%>

View file

@ -128,34 +128,34 @@ end
<% if display ~= "available" then %> <% if display ~= "available" then %>
<fieldset class="cbi-section"> <fieldset class="cbi-section">
<table class="cbi-section-table" style="width:100%"> <div class="table cbi-section-table" style="width:100%">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell" style="text-align:left">&#160;</th> <div class="th cbi-section-table-cell" style="text-align:left">&#160;</div>
<th class="cbi-section-table-cell" style="text-align:left"><%:Package name%></th> <div class="th cbi-section-table-cell" style="text-align:left"><%:Package name%></div>
<th class="cbi-section-table-cell" style="text-align:left"><%:Version%></th> <div class="th cbi-section-table-cell" style="text-align:left"><%:Version%></div>
</tr> </div>
<% local empty = true; luci.model.ipkg.list_installed(querypat, function(n, v, s, d) empty = false; filter[n] = true %> <% 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()%>"> <div class="tr cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>">
<td style="text-align:left; width:10%"> <div class="td" style="text-align:left; width:10%">
<form method="post" class="inline" action="<%=REQUEST_URI%>"> <form method="post" class="inline" action="<%=REQUEST_URI%>">
<input type="hidden" name="exec" value="1" /> <input type="hidden" name="exec" value="1" />
<input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="token" value="<%=token%>" />
<input type="hidden" name="remove" value="<%=pcdata(n)%>" /> <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> <a onclick="window.confirm('<%:Remove%> &quot;<%=luci.util.pcdata(n)%>&quot; ?') &#38;&#38; this.parentNode.submit(); return false" href="#"><%:Remove%></a>
</form> </form>
</td> </div>
<td style="text-align:left"><%=luci.util.pcdata(n)%></td> <div class="td" style="text-align:left"><%=luci.util.pcdata(n)%></div>
<td style="text-align:left"><%=luci.util.pcdata(v)%></td> <div class="td" style="text-align:left"><%=luci.util.pcdata(v)%></div>
</tr> </div>
<% end) %> <% end) %>
<% if empty then %> <% if empty then %>
<tr class="cbi-section-table-row"> <div class="tr cbi-section-table-row">
<td style="text-align:left">&#160;</td> <div class="td" style="text-align:left">&#160;</div>
<td style="text-align:left"><em><%:none%></em></td> <div class="td" style="text-align:left"><em><%:none%></em></div>
<td style="text-align:left"><em><%:none%></em></td> <div class="td" style="text-align:left"><em><%:none%></em></div>
</tr> </div>
<% end %> <% end %>
</table> </div>
</fieldset> </fieldset>
<% else %> <% else %>
<fieldset class="cbi-section"> <fieldset class="cbi-section">
@ -168,40 +168,40 @@ end
</ul> </ul>
<div class="cbi-section-node"> <div class="cbi-section-node">
<% end %> <% end %>
<table class="cbi-section-table" style="width:100%"> <div class="table cbi-section-table" style="width:100%">
<tr class="cbi-section-table-titles"> <div class="tr cbi-section-table-titles">
<th class="cbi-section-table-cell" style="text-align:left">&#160;</th> <div class="th cbi-section-table-cell" style="text-align:left">&#160;</div>
<th class="cbi-section-table-cell" style="text-align:left"><%:Package name%></th> <div class="th cbi-section-table-cell" style="text-align:left"><%:Package name%></div>
<th class="cbi-section-table-cell" style="text-align:left"><%:Version%></th> <div class="th cbi-section-table-cell" style="text-align:left"><%:Version%></div>
<th class="cbi-section-table-cell" style="text-align:right"><%:Size (.ipk)%></th> <div class="th cbi-section-table-cell" style="text-align:right"><%:Size (.ipk)%></div>
<th class="cbi-section-table-cell" style="text-align:left"><%:Description%></th> <div class="th cbi-section-table-cell" style="text-align:left"><%:Description%></div>
</tr> </div>
<% local empty = true; opkg_list(querypat or letterpat, function(n, v, s, d) if filter[n] then return end; empty = false %> <% 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()%>"> <div class="tr cbi-section-table-row cbi-rowstyle-<%=rowstyle()%>">
<td style="text-align:left; width:10%"> <div class="td" style="text-align:left; width:10%">
<form method="post" class="inline" action="<%=REQUEST_URI%>"> <form method="post" class="inline" action="<%=REQUEST_URI%>">
<input type="hidden" name="exec" value="1" /> <input type="hidden" name="exec" value="1" />
<input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="token" value="<%=token%>" />
<input type="hidden" name="install" value="<%=pcdata(n)%>" /> <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> <a onclick="window.confirm('<%:Install%> &quot;<%=luci.util.pcdata(n)%>&quot; ?') &#38;&#38; this.parentNode.submit(); return false" href="#"><%:Install%></a>
</form> </form>
</td> </div>
<td style="text-align:left"><%=luci.util.pcdata(n)%></td> <div class="td" style="text-align:left"><%=luci.util.pcdata(n)%></div>
<td style="text-align:left"><%=luci.util.pcdata(v)%></td> <div class="td" style="text-align:left"><%=luci.util.pcdata(v)%></div>
<td style="text-align:right"><%=luci.util.pcdata(s)%></td> <div class="td" style="text-align:right"><%=luci.util.pcdata(s)%></div>
<td style="text-align:left"><%=luci.util.pcdata(d)%></td> <div class="td" style="text-align:left"><%=luci.util.pcdata(d)%></div>
</tr> </div>
<% end) %> <% end) %>
<% if empty then %> <% if empty then %>
<tr class="cbi-section-table-row"> <div class="tr cbi-section-table-row">
<td style="text-align:left">&#160;</td> <div class="td" style="text-align:left">&#160;</div>
<td style="text-align:left"><em><%:none%></em></td> <div class="td" style="text-align:left"><em><%:none%></em></div>
<td style="text-align:left"><em><%:none%></em></td> <div class="td" style="text-align:left"><em><%:none%></em></div>
<td style="text-align:right"><em><%:none%></em></td> <div class="td" style="text-align:right"><em><%:none%></em></div>
<td style="text-align:left"><em><%:none%></em></td> <div class="td" style="text-align:left"><em><%:none%></em></div>
</tr> </div>
<% end %> <% end %>
</table> </div>
<% if not querypat then %> <% if not querypat then %>
</div> </div>
<% end %> <% end %>

View file

@ -36,7 +36,7 @@
<div style="text-align:right"> <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()" /> <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"> <form class="inline" method="post" action="<%=url("admin/uci/revert")%>">
<input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="token" value="<%=token%>" />
<input type="hidden" name="redir" value="<%=pcdata(luci.http.formvalue("redir"))%>" /> <input type="hidden" name="redir" value="<%=pcdata(luci.http.formvalue("redir"))%>" />
<input class="cbi-button cbi-button-reset" type="submit" value="<%:Revert%>" /> <input class="cbi-button cbi-button-reset" type="submit" value="<%:Revert%>" />

View file

@ -25,7 +25,8 @@ body {
h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s,
small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset,
form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td,
.table, .tbody, .tfoot, .thead, .tr, .th, .td {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -112,8 +113,6 @@ option,
textarea { textarea {
font-size: 100%; font-size: 100%;
margin: 0; margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
vertical-align: baseline; vertical-align: baseline;
*vertical-align: middle; *vertical-align: middle;
@ -137,10 +136,15 @@ input[type="submit"] {
-webkit-appearance: button; -webkit-appearance: button;
} }
button[disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
input[type="submit"][disabled] {
opacity: 0.7;
}
input[type="search"] { input[type="search"] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
} }
@ -170,7 +174,7 @@ body {
.container { .container {
width: 100%; width: 100%;
max-width: 1024px; max-width: 940px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
zoom: 1; zoom: 1;
@ -368,8 +372,6 @@ code, pre {
padding: 0 3px 2px; padding: 0 3px 2px;
font-family: Monaco, Andale Mono, Courier New, monospace; font-family: Monaco, Andale Mono, Courier New, monospace;
font-size: 12px; font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
@ -388,8 +390,6 @@ pre {
font-size: 12px; font-size: 12px;
border: 1px solid #ccc; border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
white-space: pre; white-space: pre;
white-space: pre-wrap; white-space: pre-wrap;
@ -440,7 +440,7 @@ form .cbi-value:before, form .cbi-value:after {
zoom: 1; zoom: 1;
} }
form .clearfix:after form .clearfix:after,
form .cbi-value:after { form .cbi-value:after {
clear: both; clear: both;
} }
@ -486,13 +486,13 @@ select,
line-height: 18px; line-height: 18px;
color: #808080; color: #808080;
border: 1px solid #ccc; border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
select { select {
padding: initial; padding: initial;
background: #fff;
box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
} }
input[type=checkbox], input[type=radio] { input[type=checkbox], input[type=radio] {
@ -512,8 +512,6 @@ input[type=file] {
padding: initial; padding: initial;
border: initial; border: initial;
line-height: initial; line-height: initial;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; box-shadow: none;
width: auto !important; width: auto !important;
} }
@ -542,8 +540,6 @@ textarea {
background-color: #ffffff; background-color: #ffffff;
display: block; display: block;
border-color: #eee; border-color: #eee;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
cursor: not-allowed; cursor: not-allowed;
} }
@ -557,27 +553,17 @@ textarea {
} }
input, textarea { input, textarea {
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
} }
input:focus, textarea:focus { input:focus, textarea:focus {
outline: 0; outline: 0;
border-color: rgba(82, 168, 236, 0.8); border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
} }
input[type=file]:focus, input[type=checkbox]:focus, select:focus { input[type=file]:focus, input[type=checkbox]:focus, select:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; box-shadow: none;
outline: 1px dotted #666; outline: 1px dotted #666;
} }
@ -593,8 +579,6 @@ form .clearfix.error input, form .clearfix.error textarea {
form .clearfix.error input:focus, form .clearfix.error textarea:focus { form .clearfix.error input:focus, form .clearfix.error textarea:focus {
border-color: #e9322d; border-color: #e9322d;
-webkit-box-shadow: 0 0 6px #f8b9b7;
-moz-box-shadow: 0 0 6px #f8b9b7;
box-shadow: 0 0 6px #f8b9b7; box-shadow: 0 0 6px #f8b9b7;
} }
@ -615,8 +599,6 @@ form .clearfix.warning input, form .clearfix.warning textarea {
form .clearfix.warning input:focus, form .clearfix.warning textarea:focus { form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
border-color: #be9a3f; border-color: #be9a3f;
-webkit-box-shadow: 0 0 6px #e5d6b1;
-moz-box-shadow: 0 0 6px #e5d6b1;
box-shadow: 0 0 6px #e5d6b1; box-shadow: 0 0 6px #e5d6b1;
} }
@ -637,8 +619,6 @@ form .clearfix.success input, form .clearfix.success textarea {
form .clearfix.success input:focus, form .clearfix.success textarea:focus { form .clearfix.success input:focus, form .clearfix.success textarea:focus {
border-color: #458845; border-color: #458845;
-webkit-box-shadow: 0 0 6px #9acc9a;
-moz-box-shadow: 0 0 6px #9acc9a;
box-shadow: 0 0 6px #9acc9a; box-shadow: 0 0 6px #9acc9a;
} }
@ -662,10 +642,8 @@ textarea[readonly] {
.cbi-page-actions { .cbi-page-actions {
background: #f5f5f5; background: #f5f5f5;
margin-bottom: 18px; margin-bottom: 18px;
padding: 17px 20px 18px 150px; padding: 17px 20px 18px 17px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
text-align: right; text-align: right;
} }
@ -710,6 +688,46 @@ textarea[readonly] {
* Tables.less * Tables.less
* Tables for, you guessed it, tabular data * Tables for, you guessed it, tabular data
* ---------------------------------------- */ * ---------------------------------------- */
.tr { display: table-row; }
.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
.table {
display: table;
width: 100%;
margin-bottom: 18px;
padding: 0;
font-size: 13px;
border-collapse: collapse;
}
.table .th, .table .td {
display: table-cell;
vertical-align: middle; /* Fixme */
padding: 10px 10px 9px;
line-height: 18px;
text-align: left;
}
.table .th {
padding-top: 9px;
font-weight: bold;
vertical-align: middle;
}
.table .td {
vertical-align: top;
border-top: 1px solid #ddd;
}
.table .tbody .th {
border-top: 1px solid #ddd;
vertical-align: top;
}
/*
* Table for compatibility with old packages
* ---------------------------------------- */
table { table {
width: 100%; width: 100%;
margin-bottom: 18px; margin-bottom: 18px;
@ -789,16 +807,7 @@ header p {
header .fill { header .fill {
background-color: #0d6eff; background-color: #0d6eff;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#0c5fdc), to(#0d6eff)); background-image: linear-gradient(to bottom, #0c5fdc, #0d6eff);
background-image: -moz-linear-gradient(top, #0c5fdc, #0d6eff);
background-image: -ms-linear-gradient(top, #0c5fdc, #0d6eff);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0c5fdc), color-stop(100%, #0d6eff));
background-image: -webkit-linear-gradient(top, #0c5fdc, #0d6eff);
background-image: -o-linear-gradient(top, #0c5fdc, #0d6eff);
background-image: linear-gradient(top, #0c5fdc, #0d6eff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c5fdc', endColorstr='#0d6eff', GradientType=0);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
padding: 0 5px; padding: 0 5px;
} }
@ -819,7 +828,7 @@ header div > ul > li, .nav > li {
header div > ul a, .nav a { header div > ul a, .nav a {
display: block; display: block;
float: none; float: none;
padding: 10px 10px 11px; padding: 20px 20px 11px;
line-height: 19px; line-height: 19px;
text-decoration: none; text-decoration: none;
} }
@ -904,14 +913,7 @@ header div > ul .dropdown-menu li a:hover,
.nav .dropdown-menu li a:hover { .nav .dropdown-menu li a:hover {
background-color: #191919; background-color: #191919;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919)); background-image: linear-gradient(to bottom, #292929, #191919);
background-image: -moz-linear-gradient(top, #292929, #191919);
background-image: -ms-linear-gradient(top, #292929, #191919);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
background-image: -webkit-linear-gradient(top, #292929, #191919);
background-image: -o-linear-gradient(top, #292929, #191919);
background-image: linear-gradient(top, #292929, #191919);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
color: #ffffff; color: #ffffff;
} }
@ -950,9 +952,6 @@ a.menu:after, .dropdown-toggle:after {
border-left: 4px solid transparent; border-left: 4px solid transparent;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-top: 4px solid #ffffff; border-top: 4px solid #ffffff;
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5; opacity: 0.5;
} }
@ -960,7 +959,7 @@ a.menu:after, .dropdown-toggle:after {
background-color: #ffffff; background-color: #ffffff;
float: left; float: left;
position: absolute; position: absolute;
top: 40px; top: 45px;
left: -9999px; left: -9999px;
z-index: 900; z-index: 900;
min-width: 160px; min-width: 160px;
@ -974,21 +973,15 @@ a.menu:after, .dropdown-toggle:after {
border-color: rgba(0, 0, 0, 0.2); border-color: rgba(0, 0, 0, 0.2);
border-style: solid; border-style: solid;
border-width: 0 1px 1px; border-width: 0 1px 1px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box; background-clip: padding-box;
} }
.menu-dropdown li, .dropdown-menu li { .menu-dropdown li, .dropdown-menu li {
float: none; float: none;
display: block; display: block;
background-color: none; background-color: transparent;
} }
.menu-dropdown .divider, .dropdown-menu .divider { .menu-dropdown .divider, .dropdown-menu .divider {
@ -1015,18 +1008,9 @@ header .dropdown-menu a.hover,
.dropdown-menu a.hover { .dropdown-menu a.hover {
background-color: #dddddd; background-color: #dddddd;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd)); background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(top, #eeeeee, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
color: #404040; color: #404040;
text-decoration: none; text-decoration: none;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
} }
@ -1100,14 +1084,25 @@ header .dropdown-menu a.hover,
margin-bottom: -1px; margin-bottom: -1px;
} }
.cbi-tabmenu.map {
margin: 0;
}
.cbi-tabmenu.map > li {
font-size: 16.5px;
font-weight: bold;
}
.cbi-tabcontainer > fieldset.cbi-section[id] > legend {
display: none;
}
.tabs > li > a, .tabs > li > a,
.cbi-tabmenu > li > a { .cbi-tabmenu > li > a {
padding: 0 15px; padding: 0 15px;
margin-right: 2px; margin-right: 2px;
line-height: 34px; line-height: 34px;
border: 1px solid transparent; border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
@ -1132,8 +1127,6 @@ header .dropdown-menu a.hover,
.cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu { .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
top: 35px; top: 35px;
border-width: 1px; border-width: 1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px;
} }
@ -1168,20 +1161,9 @@ header .dropdown-menu a.hover,
margin: 0 0 18px; margin: 0 0 18px;
background-color: #f5f5f5; background-color: #f5f5f5;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5)); background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(top, #ffffff, #f5f5f5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
border: 1px solid #ddd; border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff;
} }
@ -1235,14 +1217,7 @@ footer {
.alert-message.error { .alert-message.error {
background-color: #c43c35; background-color: #c43c35;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #c43c35 #c43c35 #882a25; border-color: #c43c35 #c43c35 #882a25;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
@ -1251,14 +1226,7 @@ footer {
.btn.success, .alert-message.success { .btn.success, .alert-message.success {
background-color: #57a957; background-color: #57a957;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: linear-gradient(to bottom, #62c462, #57a957);
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -ms-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #57a957 #57a957 #3d773d; border-color: #57a957 #57a957 #3d773d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
@ -1267,14 +1235,7 @@ footer {
.btn.info, .alert-message.info { .btn.info, .alert-message.info {
background-color: #339bb9; background-color: #339bb9;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
background-image: linear-gradient(top, #5bc0de, #339bb9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #339bb9 #339bb9 #22697d; border-color: #339bb9 #339bb9 #22697d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
@ -1286,13 +1247,7 @@ footer {
display: inline-block; display: inline-block;
background-color: #e6e6e6; background-color: #e6e6e6;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
padding: 5px 14px 6px; padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333; color: #333;
@ -1300,11 +1255,7 @@ footer {
line-height: normal; line-height: normal;
border: 1px solid #ccc; border: 1px solid #ccc;
border-bottom-color: #bbb; border-bottom-color: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
} }
@ -1327,14 +1278,7 @@ footer {
padding: 5px 14px 6px; padding: 5px 14px 6px;
background-color: #0064cd; background-color: #0064cd;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); background-image: linear-gradient(to bottom, #049cdb, #0064cd);
background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
background-image: -o-linear-gradient(top, #049cdb, #0064cd);
background-image: linear-gradient(top, #049cdb, #0064cd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #0064cd #0064cd #003f81; border-color: #0064cd #0064cd #003f81;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
@ -1349,22 +1293,12 @@ footer {
.cbi-button-up, .cbi-button-up,
.cbi-input-up { .cbi-input-up {
background-position: center center; background-position: center center;
background-image: url('../resources/cbi/up.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/up.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/up.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/up.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/up.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
.cbi-button-down, .cbi-button-down,
.cbi-input-down { .cbi-input-down {
background-position: center center; background-position: center center;
background-image: url('../resources/cbi/down.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/down.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/down.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/down.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/down.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
@ -1372,11 +1306,6 @@ footer {
.cbi-input-find { .cbi-input-find {
background-position: 6px center, left top; background-position: 6px center, left top;
padding-left: 28px; padding-left: 28px;
background-image: url('../resources/cbi/find.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/find.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/find.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/find.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/find.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
@ -1384,11 +1313,6 @@ footer {
.cbi-input-add { .cbi-input-add {
background-position: 6px center, left top; background-position: 6px center, left top;
padding-left: 28px; padding-left: 28px;
background-image: url('../resources/cbi/add.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/add.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/add.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/add.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/add.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
@ -1396,11 +1320,6 @@ footer {
.cbi-input-apply { .cbi-input-apply {
background-position: 6px center, left top; background-position: 6px center, left top;
padding-left: 28px; padding-left: 28px;
background-image: url('../resources/cbi/apply.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/apply.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/apply.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/apply.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/apply.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
@ -1408,11 +1327,6 @@ footer {
.cbi-input-reset { .cbi-input-reset {
background-position: 6px center, left top; background-position: 6px center, left top;
padding-left: 28px; padding-left: 28px;
background-image: url('../resources/cbi/reset.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/reset.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/reset.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/reset.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/reset.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
@ -1420,11 +1334,6 @@ footer {
.cbi-input-edit { .cbi-input-edit {
background-position: 6px center, left top; background-position: 6px center, left top;
padding-left: 28px; padding-left: 28px;
background-image: url('../resources/cbi/edit.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/edit.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/edit.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/edit.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/edit.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
@ -1432,11 +1341,6 @@ footer {
.cbi-input-remove { .cbi-input-remove {
background-position: 6px center, left top; background-position: 6px center, left top;
padding-left: 28px; padding-left: 28px;
background-image: url('../resources/cbi/remove.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/remove.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/remove.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/remove.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/remove.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
@ -1444,11 +1348,6 @@ footer {
.cbi-input-reload { .cbi-input-reload {
background-position: 6px center, left top; background-position: 6px center, left top;
padding-left: 28px; padding-left: 28px;
background-image: url('../resources/cbi/reload.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/reload.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/reload.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/reload.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/reload.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
@ -1456,11 +1355,6 @@ footer {
.cbi-input-link { .cbi-input-link {
background-position: 6px center, left top; background-position: 6px center, left top;
padding-left: 28px; padding-left: 28px;
background-image: url('../resources/cbi/link.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/link.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/link.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/link.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/link.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
@ -1468,43 +1362,24 @@ footer {
.cbi-input-download { .cbi-input-download {
background-position: 6px center, left top; background-position: 6px center, left top;
padding-left: 28px; padding-left: 28px;
background-image: url('../resources/cbi/download.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: url('../resources/cbi/download.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/download.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/download.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/download.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
} }
.btn.active, .btn:active { .btn.active, .btn:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
} }
.btn.disabled { .btn.disabled {
cursor: default; cursor: default;
background-image: none; background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65; opacity: 0.65;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn[disabled] { .btn[disabled] {
cursor: default; cursor: default;
background-image: none; background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65; opacity: 0.65;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
@ -1512,8 +1387,6 @@ footer {
font-size: 15px; font-size: 15px;
line-height: normal; line-height: normal;
padding: 9px 14px 9px; padding: 9px 14px 9px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; border-radius: 6px;
} }
@ -1562,10 +1435,6 @@ footer {
padding: 3px 9px 3px 27px; padding: 3px 9px 3px 27px;
} }
:root .alert-message, :root .btn {
border-radius: 0 0;
}
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0; padding: 0;
border: 0; border: 0;
@ -1578,47 +1447,30 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
font-weight: bold; font-weight: bold;
line-height: 13.5px; line-height: 13.5px;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff;
filter: alpha(opacity=25);
-khtml-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25; opacity: 0.25;
} }
.close:hover { .close:hover {
color: #000000; color: #000000;
text-decoration: none; text-decoration: none;
filter: alpha(opacity=40);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
opacity: 0.4; opacity: 0.4;
} }
.alert-message { .alert-message, .errorbox {
position: relative; position: relative;
padding: 7px 15px; padding: 7px 15px;
margin-bottom: 18px; margin-bottom: 18px;
color: #404040; color: #404040;
background-color: #eedc94; background-color: #eedc94;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); background-image: linear-gradient(to bottom, #fceec1, #eedc94);
background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
background-image: -o-linear-gradient(top, #fceec1, #eedc94);
background-image: linear-gradient(top, #fceec1, #eedc94);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #eedc94 #eedc94 #e4c652; border-color: #eedc94 #eedc94 #e4c652;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
} }
@ -1654,8 +1506,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
} }
.alert-message .btn { .alert-message .btn {
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
} }
@ -1667,8 +1517,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
background-color: #bfbfbf; background-color: #bfbfbf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
text-shadow: none; text-shadow: none;
} }
@ -1711,7 +1559,6 @@ a.label:hover {
color: #808080; color: #808080;
display: inline-block; display: inline-block;
font-size: 13px; font-size: 13px;
height: 22 dpx;
line-height: 18px; line-height: 18px;
} }
@ -1743,6 +1590,8 @@ header .pull-right { padding-top: 8px; }
.right { text-align: right !important; } .right { text-align: right !important; }
.center { text-align: center !important; }
.cbi-value-field { line-height: 1.5em; } .cbi-value-field { line-height: 1.5em; }
.cbi-value-field input[type=checkbox], .cbi-value-field input[type=checkbox],
@ -1756,21 +1605,25 @@ table table td,
border: none; border: none;
} }
table.cbi-section-table input, .table.cbi-section-table input,
table.cbi-section-table textarea, .table.cbi-section-table textarea,
table.cbi-section-table select { .table.cbi-section-table select {
width: auto; width: auto;
} }
table.cbi-section-table td.cbi-section-table-cell { .table.cbi-section-table .td.cbi-section-table-cell {
white-space: nowrap; white-space: nowrap;
text-align: right; text-align: right;
} }
table.cbi-section-table td.cbi-section-table-cell select { .table.cbi-section-table .td.cbi-section-table-cell select {
width: inherit; width: inherit;
} }
.table.valign-middle .td {
vertical-align: middle;
}
.cbi-value-description { display: inline; } .cbi-value-description { display: inline; }
.cbi-value-description img { vertical-align: middle; } .cbi-value-description img { vertical-align: middle; }
@ -1795,25 +1648,24 @@ table.cbi-section-table td.cbi-section-table-cell select {
margin: 0 10px; margin: 0 10px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
display: inline-flex;
flex-direction: column;
line-height: 1.2em;
min-width: 100px;
} }
.ifacebox .ifacebox-head { .ifacebox .ifacebox-head {
border-bottom: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;
padding: 2px; padding: 2px;
background: #eee;
}
.ifacebox .ifacebox-head.active {
background: #90c0e0;
} }
.ifacebox .ifacebox-body { .ifacebox .ifacebox-body {
@ -1821,26 +1673,26 @@ table.cbi-section-table td.cbi-section-table-cell select {
} }
.ifacebadge { .ifacebadge {
display: inline-block; display: inline-flex;
flex-direction: row;
white-space: nowrap; white-space: nowrap;
background-color: #FFFFFF; background-color: #FFFFFF;
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
padding: 2px; padding: 2px;
margin-left: 2px; margin-left: 2px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: default;
line-height: 1.2em;
}
.ifacebadge img {
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: .25em;
} }
.ifacebadge-active { .ifacebadge-active {
@ -1848,6 +1700,39 @@ table.cbi-section-table td.cbi-section-table-cell select {
font-weight: bold; font-weight: bold;
} }
.network-status-table {
display: flex;
flex-wrap: wrap;
}
.network-status-table .ifacebox {
margin: .5em;
flex-grow: 1;
}
.network-status-table .ifacebox-body {
display: flex;
flex-direction: column;
height: 100%;
text-align: left;
}
.network-status-table .ifacebox-body > span {
flex: 10;
}
.network-status-table .ifacebox-body > div {
display: flex;
flex-wrap: wrap;
}
.network-status-table .ifacebox-body .ifacebadge {
flex: 1;
margin: .5em .25em 0 .25em;
padding: .5em;
min-width: 220px;
}
.zonebadge { .zonebadge {
padding: 2px; padding: 2px;
border-radius: 4px; border-radius: 4px;
@ -1876,7 +1761,7 @@ table.cbi-section-table td.cbi-section-table-cell select {
} }
div.cbi-value var, div.cbi-value var,
td.cbi-value-field var { .td.cbi-value-field var {
font-style: italic; font-style: italic;
color: #0069D6; color: #0069D6;
} }
@ -1912,12 +1797,14 @@ td.cbi-value-field var {
display: block; display: block;
font-style: normal; font-style: normal;
padding: 2px; padding: 2px;
line-height: 19px;
white-space: pre;
} }
.uci-change-list var ins, .uci-change-list var ins,
.uci-change-list var del { .uci-change-list var del {
/*display: inline;*/ display: inline;
border: none; /*border: none;*/
white-space: pre; white-space: pre;
font-style: normal; font-style: normal;
padding: 0px; padding: 0px;

View file

@ -1,6 +1,6 @@
<%# <%#
Copyright 2008 Steven Barth <steven@midlink.org> Copyright 2008 Steven Barth <steven@midlink.org>
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
Copyright 2012 David Menting <david@nut-bolt.nl> Copyright 2012 David Menting <david@nut-bolt.nl>
Licensed to the public under the Apache License 2.0. Licensed to the public under the Apache License 2.0.
-%> -%>
@ -41,25 +41,22 @@
http.prepare_content("text/html") http.prepare_content("text/html")
local function nodeurl(prefix, name, query) local function nodeurl(prefix, name, query)
local url = controller .. prefix .. name .. "/" local u = url(prefix, name)
if query then if query then
url = url .. http.build_querystring(query) u = u .. http.build_querystring(query)
end end
return pcdata(url) return pcdata(u)
end end
local function subtree(prefix, node, level) local function render_tabmenu(prefix, node, level)
if not level then if not level then
level = 1 level = 1
end end
local childs = disp.node_childs(node) local childs = disp.node_childs(node)
if #childs > 0 then if #childs > 0 then
if level > 2 then if level > 2 then
%> write('<ul class="tabs">')
<ul class="tabs">
<%
end end
local selected_node local selected_node
@ -72,98 +69,69 @@
selected_node = nnode selected_node = nnode
selected_name = v selected_name = v
end end
if level > 2 then if level > 2 then
%> write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{
<li class="tabmenu-item-<%=v%><%- if nnode._menu_selected or (node.leaf and v == leaf) then %> active<% end %>"> v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '',
<a href="<%=nodeurl(prefix, v, nnode.query)%>"><%=striptags(translate(nnode.title))%></a> nodeurl(prefix, v, nnode.query),
</li> striptags(translate(nnode.title))
<% end })
end
end end
if level > 2 then if level > 2 then
%> write('</ul>')
</ul> end
<% end
if selected_node then if selected_node then
subtree(prefix .. selected_name .. "/", selected_node, level + 1) render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1)
end end
end end
end end
-%>
<!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>">
<head>
<meta charset="utf-8">
<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
<!--[if lt IE 9]><script src="<%=media%>/html5.js"></script><![endif]-->
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="<%=media%>/cascade.css">
<link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="<%=media%>/mobile.css" type="text/css" />
<link rel="icon" type="image/png" href="<%=media%>/favicon.png">
<% if node and node.css then %><link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
<% end -%>
<% if css then %><style title="text/css">
<%-= css %>
</style>
<% end -%>
<script src="<%=resource%>/xhr.js"></script>
</head>
<body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %>"> local function render_submenu(prefix, node)
<header>
<div class="fill">
<div class="container">
<a class="brand" href="#" alt="OpenMPTCProuter"><img src="<%=resource%>/openmptcprouter/images/omr-logo.png" height="30" width="30" alt="OMR" /> OpenMPTCProuter</a>
<ul class="nav">
<%-
local function submenu(prefix, node)
local childs = disp.node_childs(node) local childs = disp.node_childs(node)
if #childs > 0 then if #childs > 0 then
%> write('<ul class="dropdown-menu">')
<ul class="dropdown-menu">
<%-
for i, r in ipairs(childs) do for i, r in ipairs(childs) do
local nnode = node.nodes[r] local nnode = node.nodes[r]
local href = controller .. prefix .. r .. write('<li><a href="%s">%s</a></li>' %{
(nnode.query and http.build_querystring(nnode.query) or "") nodeurl(prefix, r, nnode.query),
%> pcdata(striptags(translate(nnode.title)))
<li><a href="<%=pcdata(href)%>"><%=pcdata(striptags(translate(nnode.title)))%></a></li> })
<%-
end end
%>
</ul> write('</ul>')
<%-
end end
end end
childs = disp.node_childs(cattree) local function render_topmenu()
local childs = disp.node_childs(cattree)
if #childs > 0 then if #childs > 0 then
write('<ul class="nav">')
for i, r in ipairs(childs) do for i, r in ipairs(childs) do
local nnode = cattree.nodes[r] local nnode = cattree.nodes[r]
local href = controller .. "/" .. category .. "/" .. r ..
(nnode.query and http.build_querystring(k.query) or "")
local grandchildren = disp.node_childs(nnode) local grandchildren = disp.node_childs(nnode)
if #grandchildren > 0 then if #grandchildren > 0 then
%> write('<li class="dropdown"><a class="menu" href="#">%s</a>' % pcdata(striptags(translate(nnode.title))))
<li class="dropdown"> render_submenu(category .. "/" .. r, nnode)
<a class="menu" href="#"><%=pcdata(striptags(translate(nnode.title)))%></a> write('</li>')
<%- submenu("/" .. category .. "/" .. r .. "/", nnode) %> else
</li> write('<li><a href="%s">%s</a></li>' %{
<% else %> nodeurl(category, r, nnode.query),
<li> pcdata(striptags(translate(nnode.title)))
<a href="<%=pcdata(href)%>"><%=pcdata(striptags(translate(nnode.title)))%></a> })
</li>
<%
end end
end end
end
%>
</ul>
<% write('</ul>')
end
end
local function render_changes()
-- calculate the number of unsaved changes -- calculate the number of unsaved changes
if tree.nodes[category] and tree.nodes[category].ucidata then if tree.nodes[category] and tree.nodes[category].ucidata then
local ucichanges = 0 local ucichanges = 0
@ -175,30 +143,69 @@
end end
end end
end end
%>
if ucichanges > 0 then
write('<a class="uci_change_indicator label notice" href="%s?redir=%s">%s: %d</a>' %{
url(category, 'uci/changes'),
http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")),
translate('Unsaved Changes'),
ucichanges
})
end
end
end
-%>
<!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>">
<head>
<meta charset="utf-8">
<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="<%=media%>/cascade.css">
<link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="<%=media%>/mobile.css" type="text/css" />
<link rel="icon" type="image/png" href="<%=media%>/favicon.png">
<% if node and node.css then %>
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
<% end -%>
<% if css then %>
<style title="text/css"><%= css %></style>
<% end -%>
<script src="<%=resource%>/xhr.js"></script>
</head>
<body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %>">
<header>
<div class="fill">
<div class="container">
<a class="brand" href="#" alt="OpenMPTCProuter"><img src="<%=resource%>/openmptcprouter/images/omr-logo.png" height="30" width="30" alt="OMR" /> OpenMPTCProuter</a>
<% render_topmenu() %>
<div class="pull-right"> <div class="pull-right">
<% if ucichanges > 0 then %> <% render_changes() %>
<a class="label notice" href="<%=controller%>/<%=category%>/uci/changes"><%:Unsaved Changes%>: <%=ucichanges%></a>
<% end %>
<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()"> <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
<span class="label success" id="xhr_poll_status_on"><%:Auto Refresh%> <%:on%></span> <span class="label success" id="xhr_poll_status_on"><%:Auto Refresh%> <%:on%></span>
<span class="label" id="xhr_poll_status_off" style="display:none"><%:Auto Refresh%> <%:off%></span> <span class="label" id="xhr_poll_status_off" style="display:none"><%:Auto Refresh%> <%:off%></span>
</span> </span>
</div> </div>
<% end %>
</div> </div>
</div> </div>
</header> </header>
<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
<div class="container"> <div class="container">
<div class="alert-message warning"> <div class="alert-message warning">
<h4><%:No password set!%></h4> <h4><%:No password set!%></h4>
<%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br> <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br>
<a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a> <a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a>
</div> </div>
</div> </div>
<%- end -%> <%- end -%>
<div id="maincontent" class="container"> <noscript>
<% if category then subtree("/" .. category .. "/", cattree) end %> <div class="alert-message warning">
<strong><%:JavaScript required!%></strong><br />
<%:You must enable JavaScript in your browser or LuCI will not work properly.%>
</div>
</noscript>
<div id="maincontent" class="container">
<% if category then render_tabmenu(category, cattree) end %>