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, 37 insertions, 46 deletions

diff --git a/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm b/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm
index 03a9ed70e..66e44e967 100644
--- a/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm
+++ b/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm
@@ -5,8 +5,8 @@
 			function(x)
 			{
 				var tb = document.getElementById('ocserv_status_table');
-				if (tb && (idx < tb.rows.length))
-					tb.rows[0].parentNode.removeChild(tb.rows[idx]);
+				if (tb && (idx + 1 < tb.childNodes.length))
+					tb.removeChild(tb.childNodes[idx + 1]);
 			}
 		);
 	}
@@ -18,38 +18,28 @@
 			if (st && tb)
 			{
 				/* 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.length; i++ )
+				for (var i = 0; i < st.length; i++)
 				{
-					var tr = tb.insertRow(-1);
-						tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
-
-					tr.insertCell(-1).innerHTML = st[i].user;
-					tr.insertCell(-1).innerHTML = st[i].group;
-					tr.insertCell(-1).innerHTML = st[i].vpn_ip;
-					tr.insertCell(-1).innerHTML = st[i].ip;
-					tr.insertCell(-1).innerHTML = st[i].device;
-					tr.insertCell(-1).innerHTML = st[i].time;
-					tr.insertCell(-1).innerHTML = st[i].cipher;
-					tr.insertCell(-1).innerHTML = st[i].status;
-
-					tr.insertCell(-1).innerHTML = String.format(
-						'<input class="cbi-button cbi-input-remove" type="button" value="<%:Disconnect%>" onclick="ocserv_disconnect(%d)" />',
-							st[i].id
-					);
+					tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
+						E('<div class="td">', st[i].user),
+						E('<div class="td">', st[i].group),
+						E('<div class="td">', st[i].vpn_ip),
+						E('<div class="td">', st[i].ip),
+						E('<div class="td">', st[i].device),
+						E('<div class="td">', st[i].time),
+						E('<div class="td">', st[i].cipher),
+						E('<div class="td">', st[i].status),
+						E('<div class="td">',
+							E('<input class="cbi-button cbi-input-remove" type="button" value="<%:Disconnect%>" onclick="ocserv_disconnect(%d)" />'
+								.format(st[i].id)))
+					]));
 				}
 
-				if( tb.rows.length == 1 )
-				{
-					var tr = tb.insertRow(-1);
-						tr.className = 'cbi-section-table-row';
-
-					var td = tr.insertCell(-1);
-						td.colSpan = 5;
-						td.innerHTML = '<em><br /><%:There are no active users.%></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 users.%></em></div></div>'));
 			}
 		}
 	);
@@ -57,20 +47,21 @@
 
 <fieldset class="cbi-section">
 	<legend><%:Active OpenConnect Users%></legend>
-	<table class="cbi-section-table" id="ocserv_status_table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:User%></th>
-			<th class="cbi-section-table-cell"><%:Group%></th>
-			<th class="cbi-section-table-cell"><%:IP Address%></th>
-			<th class="cbi-section-table-cell"><%:VPN IP Address%></th>
-			<th class="cbi-section-table-cell"><%:Device%></th>
-			<th class="cbi-section-table-cell"><%:Time%></th>
-			<th class="cbi-section-table-cell"><%:Cipher%></th>
-			<th class="cbi-section-table-cell"><%:Status%></th>
-			<th class="cbi-section-table-cell">&#160;</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="ocserv_status_table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th cbi-section-table-cell"><%:User%></div>
+			<div class="th cbi-section-table-cell"><%:Group%></div>
+			<div class="th cbi-section-table-cell"><%:IP Address%></div>
+			<div class="th cbi-section-table-cell"><%:VPN IP Address%></div>
+			<div class="th cbi-section-table-cell"><%:Device%></div>
+			<div class="th cbi-section-table-cell"><%:Time%></div>
+			<div class="th cbi-section-table-cell"><%:Cipher%></div>
+			<div class="th cbi-section-table-cell"><%:Status%></div>
+			<div class="th cbi-section-table-cell">&#160;</div>
+		</div>
+		<div class="tr cbi-section-table-row">
+			<div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div>
+		</div>
+	</div>
 </fieldset>
+