treewide: convert HTML tables to div

Mostly convert HTML tables to div based markup to allow for easier styling
in the future. Also change JS accessor code accordingly.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 54 insertions, 58 deletions

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