From a7d3c46b79c489dedac2061ee9d2bf1693998c80 Mon Sep 17 00:00:00 2001
From: coolsnowwolf <coolsnowwolf@gmail.com>
Date: Thu, 14 Jun 2018 22:33:08 +0800
Subject: [PATCH] update new luci style for x86/x64

---
 package/lean/autocore/Makefile        |   2 +-
 package/lean/autocore/files/index.htm | 628 +++++++++++---------------
 2 files changed, 270 insertions(+), 360 deletions(-)

diff --git a/package/lean/autocore/Makefile b/package/lean/autocore/Makefile
index 248628f34..341fb904d 100644
--- a/package/lean/autocore/Makefile
+++ b/package/lean/autocore/Makefile
@@ -9,7 +9,7 @@ include $(TOPDIR)/rules.mk
 
 PKG_NAME:=autocore
 PKG_VERSION:=1
-PKG_RELEASE:=10
+PKG_RELEASE:=12
 
 
 include $(INCLUDE_DIR)/package.mk
diff --git a/package/lean/autocore/files/index.htm b/package/lean/autocore/files/index.htm
index 7112337a9..67601633f 100644
--- a/package/lean/autocore/files/index.htm
+++ b/package/lean/autocore/files/index.htm
@@ -6,6 +6,7 @@
 
 <%
 	local fs = require "nixio.fs"
+	local ipc = require "luci.ip"
 	local util = require "luci.util"
 	local stat = require "luci.tools.status"
 	local ver = require "luci.version"
@@ -58,6 +59,8 @@
 		}
 
 		if wan then
+			local dev = wan:get_interface()
+			local link = dev and ipc.link(dev:name())
 			rv.wan = {
 				ipaddr  = wan:ipaddr(),
 				gwaddr  = wan:gwaddr(),
@@ -66,12 +69,19 @@
 				expires = wan:expires(),
 				uptime  = wan:uptime(),
 				proto   = wan:proto(),
+				i18n    = wan:get_i18n(),
 				ifname  = wan:ifname(),
-				link    = wan:adminlink()
+				link    = wan:adminlink(),
+				mac     = dev and dev:mac(),
+				type    = dev and dev:type(),
+				name    = dev and dev:get_i18n(),
+				ether   = link and link.type == 1
 			}
 		end
 
 		if wan6 then
+			local dev = wan6:get_interface()
+			local link = dev and ipc.link(dev:name())
 			rv.wan6 = {
 				ip6addr   = wan6:ip6addr(),
 				gw6addr   = wan6:gw6addr(),
@@ -79,8 +89,13 @@
 				ip6prefix = wan6:ip6prefix(),
 				uptime    = wan6:uptime(),
 				proto     = wan6:proto(),
+				i18n      = wan6:get_i18n(),
 				ifname    = wan6:ifname(),
-				link      = wan6:adminlink()
+				link      = wan6:adminlink(),
+				mac       = dev and dev:mac(),
+				type      = dev and dev:type(),
+				name      = dev and dev:get_i18n(),
+				ether     = link and link.type == 1
 			}
 		end
 
@@ -106,7 +121,7 @@
 
 <%+header%>
 
-<script type="text/javascript" src="<%=resource%>/cbi.js?v=git-18.143.28733-7acacf2"></script>
+<script type="text/javascript" src="<%=resource%>/cbi.js?v=git-18.163.61042-b5a43cf"></script>
 <script type="text/javascript">//<![CDATA[
 	function progressbar(v, m)
 	{
@@ -164,133 +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 },
 		function(x, info)
 		{
 			if (!(npoll++ % 5))
 				updateHosts();
 
-			var si = document.getElementById('wan4_i');
-			var ss = document.getElementById('wan4_s');
-			var ifc = info.wan;
+			var us = document.getElementById('upstream_status_table');
 
-			if (ifc && ifc.ifname && ifc.proto != 'none')
-			{
-				var s = String.format(
-					'<strong><%:Type%>: </strong>%s<br />' +
-					'<strong><%:Address%>: </strong>%s<br />' +
-					'<strong><%:Netmask%>: </strong>%s<br />' +
-					'<strong><%:Gateway%>: </strong>%s<br />',
-						ifc.proto,
-						(ifc.ipaddr) ? ifc.ipaddr : '0.0.0.0',
-						(ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255',
-						(ifc.gwaddr) ? ifc.gwaddr : '0.0.0.0'
-				);
+			while (us.lastElementChild)
+				us.removeChild(us.lastElementChild);
 
-				for (var i = 0; i < ifc.dns.length; i++)
-				{
-					s += String.format(
-						'<strong><%:DNS%> %d: </strong>%s<br />',
-						i + 1, ifc.dns[i]
-					);
-				}
+			var ifc = info.wan || {};
 
-				if (ifc.expires > -1)
-				{
-					s += String.format(
-						'<strong><%:Expires%>: </strong>%t<br />',
-						ifc.expires
-					);
-				}
-
-				if (ifc.uptime > 0)
-				{
-					s += String.format(
-						'<strong><%:Connected%>: </strong>%t<br />',
-						ifc.uptime
-					);
-				}
-
-				ss.innerHTML = String.format('<small>%s</small>', s);
-				si.innerHTML = String.format(
-					'<img src="<%=resource%>/icons/ethernet.png" />' +
-					'<br /><small><a href="%s">%s</a></small>',
-						ifc.link, ifc.ifname
-				);
-			}
-			else
-			{
-				si.innerHTML = '<img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small>';
-				ss.innerHTML = '<em><%:Not connected%></em>';
-			}
+			us.appendChild(renderBox(
+				'<%:IPv4 Upstream%>',
+				(ifc.ifname && ifc.proto != 'none'),
+				[ E('div', {}, renderBadge(
+					'<%=resource%>/icons/%s.png'.format((ifc && ifc.type) ? ifc.type : 'ethernet_disabled'), null,
+					'<%:Device%>', ifc ? (ifc.name || ifc.ifname || '-') : '-',
+					'<%:MAC-Address%>', (ifc && ifc.ether) ? ifc.mac : null)) ],
+				'<%:Protocol%>', ifc.i18n || E('em', '<%:Not connected%>'),
+				'<%:Address%>', (ifc.ipaddr) ? ifc.ipaddr : '0.0.0.0',
+				'<%:Netmask%>', (ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255',
+				'<%:Gateway%>', (ifc.gwaddr) ? ifc.gwaddr : '0.0.0.0',
+				'<%:DNS%> 1', (ifc.dns) ? ifc.dns[0] : null,
+				'<%:DNS%> 2', (ifc.dns) ? ifc.dns[1] : null,
+				'<%:DNS%> 3', (ifc.dns) ? ifc.dns[2] : null,
+				'<%:DNS%> 4', (ifc.dns) ? ifc.dns[3] : null,
+				'<%:DNS%> 5', (ifc.dns) ? ifc.dns[4] : null,
+				'<%:Expires%>', (ifc.expires > -1) ? '%t'.format(ifc.expires) : null,
+				'<%:Connected%>', (ifc.uptime > 0) ? '%t'.format(ifc.uptime) : null));
 
 			<% if has_ipv6 then %>
-			var si6 = document.getElementById('wan6_i');
-			var ss6 = document.getElementById('wan6_s');
-			var ifc6 = info.wan6;
+			var ifc6 = info.wan6 || {};
 
-			if (ifc6 && ifc6.ifname && ifc6.proto != 'none')
-			{
-				var s = String.format(
-					'<strong><%:Type%>: </strong>%s%s<br />',
-						ifc6.proto, (ifc6.ip6prefix) ? '-pd' : ''
-				);
-				
-				if (!ifc6.ip6prefix)
-				{
-					s += String.format(
-						'<strong><%:Address%>: </strong>%s<br />',
-						(ifc6.ip6addr) ? ifc6.ip6addr : '::'
-					);
-				}
-				else
-				{
-					s += String.format(
-						'<strong><%:Prefix Delegated%>: </strong>%s<br />',
-						ifc6.ip6prefix
-					);
-					if (ifc6.ip6addr)
-					{
-						s += String.format(
-							'<strong><%:Address%>: </strong>%s<br />',
-							ifc6.ip6addr
-						);
-					}
-				}
-
-				s += String.format(
-					'<strong><%:Gateway%>: </strong>%s<br />',
-						(ifc6.gw6addr) ? ifc6.gw6addr : '::'
-				);
-
-				for (var i = 0; i < ifc6.dns.length; i++)
-				{
-					s += String.format(
-						'<strong><%:DNS%> %d: </strong>%s<br />',
-						i + 1, ifc6.dns[i]
-					);
-				}
-
-				if (ifc6.uptime > 0)
-				{
-					s += String.format(
-						'<strong><%:Connected%>: </strong>%t<br />',
-						ifc6.uptime
-					);
-				}
-
-				ss6.innerHTML = String.format('<small>%s</small>', s);
-				si6.innerHTML = String.format(
-					'<img src="<%=resource%>/icons/ethernet.png" />' +
-					'<br /><small><a href="%s">%s</a></small>',
-						ifc6.link, ifc6.ifname
-				);
-			}
-			else
-			{
-				si6.innerHTML = '<img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small>';
-				ss6.innerHTML = '<em><%:Not connected%></em>';
-			}
+			us.appendChild(renderBox(
+				'<%:IPv6 Upstream%>',
+				(ifc6.ifname && ifc6.proto != 'none'),
+				[ E('div', {}, renderBadge(
+					'<%=resource%>/icons/%s.png'.format(ifc6.type || 'ethernet_disabled'), null,
+					'<%:Device%>', ifc6 ? (ifc6.name || ifc6.ifname || '-') : '-',
+					'<%:MAC-Address%>', (ifc6 && ifc6.ether) ? ifc6.mac : null)) ],
+				'<%:Protocol%>', ifc6.i18n ? (ifc6.i18n + (ifc6.proto === 'dhcp' && ifc6.ip6prefix ? '-PD' : '')) : E('em', '<%:Not connected%>'),
+				'<%:Prefix Delegated%>', ifc6.ip6prefix,
+				'<%:Address%>', (ifc6.ip6prefix) ? (ifc6.ip6addr || null) : (ifc6.ipaddr || '::'),
+				'<%:Gateway%>', (ifc6.gw6addr) ? ifc6.gw6addr : '::',
+				'<%:DNS%> 1', (ifc6.dns) ? ifc6.dns[0] : null,
+				'<%:DNS%> 2', (ifc6.dns) ? ifc6.dns[1] : null,
+				'<%:DNS%> 3', (ifc6.dns) ? ifc6.dns[2] : null,
+				'<%:DNS%> 4', (ifc6.dns) ? ifc6.dns[3] : null,
+				'<%:DNS%> 5', (ifc6.dns) ? ifc6.dns[4] : null,
+				'<%:Connected%>', (ifc6.uptime > 0) ? '%t'.format(ifc6.uptime) : null));
 			<% end %>
 
 			<% if has_dsl then %>
@@ -358,10 +335,10 @@
 			if (ls)
 			{
 				/* clear all rows */
-				while( ls.rows.length > 1 )
-					ls.rows[0].parentNode.deleteRow(1);
+				while (ls.firstElementChild !== ls.lastElementChild)
+					ls.removeChild(ls.lastElementChild);
 
-				for( var i = 0; i < info.leases.length; i++ )
+				for (var i = 0; i < info.leases.length; i++)
 				{
 					var timestr;
 
@@ -372,24 +349,16 @@
 					else
 						timestr = String.format('%t', info.leases[i].expires);
 
-					var tr = ls.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
-
-					tr.insertCell(-1).innerHTML = info.leases[i].hostname ? info.leases[i].hostname : '?';
-					tr.insertCell(-1).innerHTML = info.leases[i].ipaddr;
-					tr.insertCell(-1).innerHTML = info.leases[i].macaddr;
-					tr.insertCell(-1).innerHTML = timestr;
+					ls.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
+						E('<div class="td">', info.leases[i].hostname ? info.leases[i].hostname : '?'),
+						E('<div class="td">', info.leases[i].ipaddr),
+						E('<div class="td">', info.leases[i].macaddr),
+						E('<div class="td">', timestr)
+					]));
 				}
 
-				if( ls.rows.length == 1 )
-				{
-					var tr = ls.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row';
-
-					var td = tr.insertCell(-1);
-						td.colSpan = 4;
-						td.innerHTML = '<em><br /><%:There are no active leases.%></em>';
-				}
+				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 ls6 = document.getElementById('lease6_status_table');
@@ -398,10 +367,10 @@
 				ls6.parentNode.style.display = 'block';
 
 				/* clear all rows */
-				while( ls6.rows.length > 1 )
-					ls6.rows[0].parentNode.deleteRow(1);
+				while (ls6.firstElementChild !== ls6.lastElementChild)
+					ls6.removeChild(ls6.lastElementChild);
 
-				for( var i = 0; i < info.leases6.length; i++ )
+				for (var i = 0; i < info.leases6.length; i++)
 				{
 					var timestr;
 
@@ -412,35 +381,29 @@
 					else
 						timestr = String.format('%t', info.leases6[i].expires);
 
-					var tr = ls6.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
+					var host = hosts[duid2mac(info.leases6[i].duid)],
+					    name = info.leases6[i].hostname,
+					    hint = null;
 
-					var host = hosts[duid2mac(info.leases6[i].duid)];
-					if (!info.leases6[i].hostname)
-						tr.insertCell(-1).innerHTML =
-							(host && (host.name || host.ipv4 || host.ipv6))
-								? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">? (%h)</div>'.format(host.name || host.ipv4 || host.ipv6)
-								: '?';
-					else
-						tr.insertCell(-1).innerHTML =
-							(host && host.name && info.leases6[i].hostname != host.name)
-								? '<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">%h (%h)</div>'.format(info.leases6[i].hostname, host.name)
-								: info.leases6[i].hostname;
+					if (!name) {
+						if (host)
+							hint = host.name || host.ipv4 || host.ipv6;
+					}
+					else {
+						if (host && host.name && info.leases6[i].hostname != host.name)
+							hint = host.name;
+					}
 
-					tr.insertCell(-1).innerHTML = info.leases6[i].ip6addr;
-					tr.insertCell(-1).innerHTML = info.leases6[i].duid;
-					tr.insertCell(-1).innerHTML = timestr;
+					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 || '?')),
+						E('<div class="td nowrap">', info.leases6[i].ip6addr),
+						E('<div class="td nowrap">', info.leases6[i].duid),
+						E('<div class="td nowrap">', timestr)
+					]));
 				}
 
-				if( ls6.rows.length == 1 )
-				{
-					var tr = ls6.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row';
-
-					var td = tr.insertCell(-1);
-						td.colSpan = 4;
-						td.innerHTML = '<em><br /><%:There are no active leases.%></em>';
-				}
+				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 %>
 
@@ -450,30 +413,34 @@
 			var ws = document.getElementById('wifi_status_table');
 			if (ws)
 			{
-				var wsbody = ws.rows[0].parentNode;
-				while (ws.rows.length > 0)
-					wsbody.deleteRow(0);
+				while (ws.lastElementChild)
+					ws.removeChild(ws.lastElementChild);
 
 				for (var didx = 0; didx < info.wifinets.length; didx++)
 				{
 					var dev = info.wifinets[didx];
-
-					var tr = wsbody.insertRow(-1);
-					var td;
-
-					td = tr.insertCell(-1);
-					td.width     = "33%";
-					td.innerHTML = dev.name;
-					td.style.verticalAlign = "top";
-
-					td = tr.insertCell(-1);
-
-					var s = '';
+					var net0 = (dev.networks && dev.networks[0]) ? dev.networks[0] : {};
+					var vifs = [];
 
 					for (var nidx = 0; nidx < dev.networks.length; nidx++)
 					{
 						var net = dev.networks[nidx];
 						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;
 						if (!is_assoc)
@@ -489,66 +456,35 @@
 						else
 							icon = "<%=resource%>/icons/signal-75-100.png";
 
-						s += String.format(
-							'<table><tr><td style="text-align:center; width:32px; padding:3px">' +
-								'<img src="%s" title="<%:Signal%>: %d dBm / <%:Noise%>: %d dBm" />' +
-								'<br /><small>%d%%</small>' +
-							'</td><td style="text-align:left; padding:3px"><small>' +
-								'<strong><%:SSID%>:</strong> <a href="%s">%h</a><br />' +
-								'<strong><%:Mode%>:</strong> %s<br />' +
-								'<strong><%:Channel%>:</strong> %d (%.3f <%:GHz%>)<br />' +
-								'<strong><%:Bitrate%>:</strong> %s <%:Mbit/s%><br />',
-								icon, net.signal, net.noise,
-								net.quality,
-								net.link, net.ssid || '?',
-								net.mode,
-								net.channel, net.frequency,
-								net.bitrate || '?'
-						);
-
-						if (is_assoc)
-						{
-							s += String.format(
-								'<strong><%:BSSID%>:</strong> %s<br />' +
-								'<strong><%:Encryption%>:</strong> %s',
-									net.bssid || '?',
-									net.encryption
-							);
-						}
-						else
-						{
-							s += '<em><%:Wireless is disabled or not associated%></em>';
-						}
-
-						s += '</small></td></tr></table>';
-
-						for (var bssid in net.assoclist)
-						{
-							var bss = net.assoclist[bssid];
-
-							bss.bssid  = bssid;
-							bss.link   = net.link;
-							bss.name   = net.name;
-							bss.ifname = net.ifname;
-							bss.radio  = dev.name;
-
-							assoclist.push(bss);
-						}
+						vifs.push(renderBadge(
+							icon,
+							'<%:Signal%>: %d dBm / <%:Quality%>: %d%%'.format(net.signal, net.quality),
+							'<%:SSID%>', E('a', { href: net.link }, [ net.ssid || '?' ]),
+							'<%:Mode%>', net.mode,
+							'<%:BSSID%>', is_assoc ? (net.bssid || '-') : null,
+							'<%:Encryption%>', is_assoc ? net.encryption : null,
+							'<%:Associations%>', is_assoc ? (num_assoc || '-') : null,
+							null, is_assoc ? null : E('em', '<%:Wireless is disabled or not associated%>')));
 					}
 
-					if (!s)
-						s = '<em><%:No information available%></em>';
-
-					td.innerHTML = s;
+					ws.appendChild(renderBox(
+						dev.device, dev.up || net0.up,
+						[ E('div', vifs) ],
+						'<%:Type%>', dev.name.replace(/^Generic | Wireless Controller .+$/g, ''),
+						'<%:Channel%>', net0.channel ? '%d (%.3f <%:GHz%>)'.format(net0.channel, net0.frequency) : '-',
+						'<%:Bitrate%>', net0.bitrate ? '%d <%:Mbit/s%>'.format(net0.bitrate) : '-'));
 				}
+
+				if (!ws.lastElementChild)
+					ws.appendChild(E('<em><%:No information available%></em>'));
 			}
 
 			var ac = document.getElementById('wifi_assoc_table');
 			if (ac)
 			{
 				/* clear all rows */
-				while( ac.rows.length > 1 )
-					ac.rows[0].parentNode.deleteRow(1);
+				while (ac.firstElementChild !== ac.lastElementChild)
+					ac.removeChild(ac.lastElementChild);
 
 				assoclist.sort(function(a, b) {
 					return (a.name == b.name)
@@ -557,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 q = (-1 * (assoclist[i].noise - assoclist[i].signal)) / 5;
 					if (q < 1)
@@ -575,49 +508,31 @@
 					else
 						icon = "<%=resource%>/icons/signal-75-100.png";
 
-					tr.insertCell(-1).innerHTML = String.format(
-						'<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span>',
-						assoclist[i].radio, assoclist[i].ifname
-					);
+					var host = hosts[assoclist[i].bssid],
+					    name = host ? (host.name || host.ipv4 || host.ipv6) : null,
+					    hint = (host && host.name && (host.ipv4 || host.ipv6)) ? (host.ipv4 || host.ipv6) : null;
 
-					tr.insertCell(-1).innerHTML = String.format(
-						'<a href="%s">%s</a>',
-							assoclist[i].link,
-							'%h'.format(assoclist[i].name).nobr()
-					);
-
-					tr.insertCell(-1).innerHTML = assoclist[i].bssid;
-
-					var host = hosts[assoclist[i].bssid];
-					if (host)
-						tr.insertCell(-1).innerHTML = String.format(
-							'<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%s</div>',
-							((host.name && (host.ipv4 || host.ipv6))
-								? '%h (%s)'.format(host.name, host.ipv4 || host.ipv6)
-								: '%h'.format(host.name || host.ipv4 || host.ipv6)).nobr()
-						);
-					else
-						tr.insertCell(-1).innerHTML = '?';
-
-					tr.insertCell(-1).innerHTML = String.format(
-						'<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span>',
-						assoclist[i].signal, assoclist[i].noise, assoclist[i].signal - assoclist[i].noise,
-						icon,
-						assoclist[i].signal, assoclist[i].noise
-					);
-
-					tr.insertCell(-1).innerHTML = wifirate(assoclist[i], true).nobr() + '<br />' + wifirate(assoclist[i], false).nobr();
+					ac.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(1 + (i % 2)), [
+						E('<div class="td"><span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span></div>'
+							.format(assoclist[i].radio, assoclist[i].ifname)),
+						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">',
+							assoclist[i].bssid),
+						E('<div class="td nowrap">',
+							hint ? '<div>%h (%h)</div>'.format(name || '?', hint) : (name || '?')),
+						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[i].signal, assoclist[i].noise, assoclist[i].signal - assoclist[i].noise, icon, assoclist[i].signal, assoclist[i].noise)),
+						E('<div class="td nowrap">', [
+							E('<span style="white-space:nowrap">', wifirate(assoclist[i], true)),
+							E('<br />'),
+							E('<span style="white-space:nowrap">', wifirate(assoclist[i], false))
+						])
+					]));
 				}
 
-				if (ac.rows.length == 1)
-				{
-					var tr = ac.rows[0].parentNode.insertRow(-1);
-						tr.className = 'cbi-section-table-row';
-
-					var td = tr.insertCell(-1);
-						td.colSpan = 7;
-						td.innerHTML = '<br /><em><%:No information available%></em>';
-				}
+				if (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>'));
 			}
 			<% end %>
 
@@ -679,109 +594,104 @@
 <fieldset class="cbi-section">
 	<legend><%:System%></legend>
 
-	<table width="100%" cellspacing="10">
-		<tr><td width="33%"><%:Hostname%></td><td><%=luci.sys.hostname() or "?"%></td></tr>
-		<tr><td width="33%"><%:Model%></td><td><%=pcdata(boardinfo.model or boardinfo.system or "?")%></td></tr>
-		<tr><td width="33%"><%:CPU Temperature%></td><td><%=luci.sys.exec("sensors | grep 'Core 0' | cut -c10-24")%> @ <%=luci.sys.exec("grep 'MHz' /proc/cpuinfo | cut -c11- |sed -n '1p'")%> MHz</td></tr>
-		<tr><td width="33%"><%:Firmware Version%></td><td>
+	<div class="table" width="100%">
+		<div class="tr"><div class="td left" width="33%"><%:Hostname%></div><div class="td left"><%=luci.sys.hostname() or "?"%></div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Model%></div><div class="td left"><%=pcdata(boardinfo.model or "?")%></div></div>
+		<div class="tr"><div class="td left" width="33%"><%:CPU Temperature%></div><div class="td left"><%=luci.sys.exec("sensors | grep 'Core 0' | cut -c10-24")%> @ <%=luci.sys.exec("grep 'MHz' /proc/cpuinfo | cut -c11- |sed -n '1p'")%> MHz</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Firmware Version%></div><div class="td left">
 			<%=pcdata(ver.distname)%> <%=pcdata(ver.distversion)%> /
 			<%=pcdata(ver.luciname)%> (<%=pcdata(ver.luciversion)%>)
-		</td></tr>
-		<tr><td width="33%"><%:Kernel Version%></td><td><%=unameinfo.release or "?"%></td></tr>
-		<tr><td width="33%"><%:Local Time%></td><td id="localtime">-</td></tr>
-		<tr><td width="33%"><%:Uptime%></td><td id="uptime">-</td></tr>
-		<tr><td width="33%"><%:Load Average%></td><td id="loadavg">-</td></tr>
-	</table>
+		</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Kernel Version%></div><div class="td left"><%=unameinfo.release or "?"%></div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Local Time%></div><div class="td left" id="localtime">-</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Uptime%></div><div class="td left" id="uptime">-</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Load Average%></div><div class="td left" id="loadavg">-</div></div>
+	</div>
 </fieldset>
 
 <fieldset class="cbi-section">
 	<legend><%:Memory%></legend>
 
-	<table width="100%" cellspacing="10">
-		<tr><td width="33%"><%:Total Available%></td><td id="memtotal">-</td></tr>
-		<tr><td width="33%"><%:Free%></td><td id="memfree">-</td></tr>
-		<tr><td width="33%"><%:Buffered%></td><td id="membuff">-</td></tr>
-	</table>
+	<div class="table" width="100%">
+		<div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="memtotal">-</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="memfree">-</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Buffered%></div><div class="td left" id="membuff">-</div></div>
+	</div>
 </fieldset>
 
 <% if swapinfo.total > 0 then %>
 <fieldset class="cbi-section">
 	<legend><%:Swap%></legend>
 
-	<table width="100%" cellspacing="10">
-		<tr><td width="33%"><%:Total Available%></td><td id="swaptotal">-</td></tr>
-		<tr><td width="33%"><%:Free%></td><td id="swapfree">-</td></tr>
-	</table>
+	<div class="table" width="100%">
+		<div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="swaptotal">-</div></div>
+		<div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="swapfree">-</div></div>
+	</div>
 </fieldset>
 <% end %>
 
 <fieldset class="cbi-section">
 	<legend><%:Network%></legend>
 
-	<table width="100%" cellspacing="10">
-		<tr><td width="33%" style="vertical-align:top"><%:IPv4 WAN Status%></td><td>
-			<table><tr>
-				<td id="wan4_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td>
-				<td id="wan4_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td>
-			</tr></table>
-		</td></tr>
-		<% if has_ipv6 then %>
-		<tr><td width="33%" style="vertical-align:top"><%:IPv6 WAN Status%></td><td>
-			<table><tr>
-				<td id="wan6_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td>
-				<td id="wan6_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td>
-			</tr></table>
-		</td></tr>
-		<% end %>
-		<tr><td width="33%"><%:Active Connections%></td><td id="conns">-</td></tr>
-	</table>
+	<div id="upstream_status_table" class="network-status-table">
+		<em><%:Collecting data...%></em>
+	</div>
+
+	<div class="table" width="100%">
+		<div class="tr"><div class="td left" width="33%"><%:Active Connections%></div><div class="td left" id="conns">-</div></div>
+	</div>
 </fieldset>
 
 <% if has_dhcp then %>
 <fieldset class="cbi-section">
 	<legend><%:DHCP Leases%></legend>
 
-	<table class="cbi-section-table" id="lease_status_table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:Hostname%></th>
-			<th class="cbi-section-table-cell"><%:IPv4-Address%></th>
-			<th class="cbi-section-table-cell"><%:MAC-Address%></th>
-			<th class="cbi-section-table-cell"><%:Leasetime remaining%></th>
-		</tr>
-		<tr class="cbi-section-table-row">
-			<td colspan="4"><em><br /><%:Collecting data...%></em></td>
-		</tr>
-	</table>
+	<div class="table cbi-section-table" id="lease_status_table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th"><%:Hostname%></div>
+			<div class="th"><%:IPv4-Address%></div>
+			<div class="th"><%:MAC-Address%></div>
+			<div class="th"><%:Leasetime remaining%></div>
+		</div>
+		<div class="tr cbi-section-table-row">
+			<div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
+		</div>
+	</div>
 </fieldset>
 
 <fieldset class="cbi-section" style="display:none">
 	<legend><%:DHCPv6 Leases%></legend>
 
-	<table class="cbi-section-table" id="lease6_status_table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:Host%></th>
-			<th class="cbi-section-table-cell"><%:IPv6-Address%></th>
-			<th class="cbi-section-table-cell"><%:DUID%></th>
-			<th class="cbi-section-table-cell"><%:Leasetime remaining%></th>
-		</tr>
-		<tr class="cbi-section-table-row">
-			<td colspan="4"><em><br /><%:Collecting data...%></em></td>
-		</tr>
-	</table>
+	<div class="table cbi-section-table" id="lease6_status_table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th"><%:Host%></div>
+			<div class="th"><%:IPv6-Address%></div>
+			<div class="th"><%:DUID%></div>
+			<div class="th"><%:Leasetime remaining%></div>
+		</div>
+		<div class="tr cbi-section-table-row">
+			<div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
+		</div>
+	</div>
 </fieldset>
 <% end %>
 
 <% if has_dsl then %>
 <fieldset class="cbi-section">
-       <legend><%:DSL%></legend>
-       <table width="100%" cellspacing="10">
-               <tr><td width="33%" style="vertical-align:top"><%:DSL Status%></td><td>
-                       <table><tr>
-                               <td id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></td>
-                               <td id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></td>
-                       </tr></table>
-               </td></tr>
-       </table>
+	<legend><%:DSL%></legend>
+	<div class="table" width="100%">
+		<div class="tr">
+			<div class="td left" width="33%" style="vertical-align:top"><%:DSL Status%></div>
+			<div class="td">
+				<div class="table">
+					<div class="tr">
+						<div class="td" id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></div>
+						<div class="td left" id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </fieldset>
 <% end %>
 
@@ -789,27 +699,27 @@
 <fieldset class="cbi-section">
 	<legend><%:Wireless%></legend>
 
-	<table id="wifi_status_table" width="100%" cellspacing="10">
-		<tr><td><em><%:Collecting data...%></em></td></tr>
-	</table>
+	<div id="wifi_status_table" class="network-status-table">
+		<em><%:Collecting data...%></em>
+	</div>
 </fieldset>
 
 <fieldset class="cbi-section">
 	<legend><%:Associated Stations%></legend>
 
-	<table class="cbi-section-table valign-middle" id="wifi_assoc_table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell">&#160;</th>
-			<th class="cbi-section-table-cell"><%:Network%></th>
-			<th class="cbi-section-table-cell"><%:MAC-Address%></th>
-			<th class="cbi-section-table-cell"><%:Host%></th>
-			<th class="cbi-section-table-cell"><%:Signal%> / <%:Noise%></th>
-			<th class="cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></th>
-		</tr>
-		<tr class="cbi-section-table-row">
-			<td colspan="6"><em><br /><%:Collecting data...%></em></td>
-		</tr>
-	</table>
+	<div class="table cbi-section-table valign-middle" id="wifi_assoc_table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th">&#160;</div>
+			<div class="th"><%:Network%></div>
+			<div class="th"><%:MAC-Address%></div>
+			<div class="th"><%:Host%></div>
+			<div class="th"><%:Signal%> / <%:Noise%></div>
+			<div class="th"><%:RX Rate%> / <%:TX Rate%></div>
+		</div>
+		<div class="tr cbi-section-table-row">
+			<div class="td" colspan="6"><em><br /><%:Collecting data...%></em></div>
+		</div>
+	</div>
 </fieldset>
 <% end %>