From 067d7dc9f708d5ebeda1072fb6dc82e960de0d81 Mon Sep 17 00:00:00 2001
From: Jo-Philipp Wich <jo@mein.io>
Date: Mon, 28 May 2018 14:57:54 +0200
Subject: 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>
---
 .../luci-app-ahcp/luasrc/view/ahcp_status.htm      | 46 +++++++++-------------
 1 file changed, 19 insertions(+), 27 deletions(-)

(limited to 'applications/luci-app-ahcp/luasrc/view')

diff --git a/applications/luci-app-ahcp/luasrc/view/ahcp_status.htm b/applications/luci-app-ahcp/luasrc/view/ahcp_status.htm
index 946828953e..ab25f862b8 100644
--- a/applications/luci-app-ahcp/luasrc/view/ahcp_status.htm
+++ b/applications/luci-app-ahcp/luasrc/view/ahcp_status.htm
@@ -7,29 +7,21 @@
 			if (st && tb && tx)
 			{
 				/* clear all rows */
-				while( tb.rows.length > 1 )
-					tb.deleteRow(1);
+				while (tb.firstElementChild !== tb.lastElementChild)
+					tb.removeChild(tb.lastElementChild);
 
-				for( var i = 0; i < st.leases.length; i++ )
+				for (var i = 0; i < st.leases.length; i++)
 				{
-					var tr = tb.insertRow(-1);
-						tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
-
-					tr.insertCell(-1).innerHTML = st.leases[i].addr;
-					tr.insertCell(-1).innerHTML = String.format('%t', st.leases[i].age);
+					tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
+						E('<div class="td">', st.leases[i].addr),
+						E('<div class="td">', '%t'.format(st.leases[i].age))
+					]));
 				}
 
-				if( tb.rows.length == 1 )
-				{
-					var tr = tb.insertRow(-1);
-						tr.className = 'cbi-section-table-row';
-
-					var td = tr.insertCell(-1);
-						td.colSpan = 2;
-						td.innerHTML = '<em><br /><%:There are no active leases.%></em>';
-				}
+				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>'));
 
-				if( st.uid == '00:00:00:00:00:00:00:00' )
+				if (st.uid == '00:00:00:00:00:00:00:00')
 					tx.innerHTML = '<%:The AHCP Service is not running.%>';
 				else
 					tx.innerHTML = String.format('<%:The AHCP Service is running with ID %s.%>', st.uid);
@@ -41,13 +33,13 @@
 <fieldset class="cbi-section">
 	<legend><%:Active AHCP Leases%></legend>
 	<p id="ahcpd_status_text"></p>
-	<table class="cbi-section-table" id="ahcpd_status_table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:Address%></th>
-			<th class="cbi-section-table-cell"><%:Age%></th>
-		</tr>
-		<tr class="cbi-section-table-row">
-			<td colspan="5"><em><br /><%:Collecting data...%></em></td>
-		</tr>
-	</table>
+	<div class="table cbi-section-table" id="ahcpd_status_table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th cbi-section-table-cell"><%:Address%></div>
+			<div class="th cbi-section-table-cell"><%:Age%></div>
+		</div>
+		<div class="tr cbi-section-table-row">
+			<div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div>
+		</div>
+	</div>
 </fieldset>
-- 
cgit v1.2.3