From: Jo-Philipp Wich <jo@mein.io>
Date: Tue, 19 Jun 2018 15:18:02 +0000 (+0200)
Subject: luci-app-upnp: rework lease status indicator
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=ce8101ae75fa8767bf84f692c5424e2cf3441f34;p=oweals%2Fluci.git

luci-app-upnp: rework lease status indicator

Turn the dynamic lease status table into responsive table by using the
cbi_update_table() helper in conjunction with title annotation attributes.

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

diff --git a/applications/luci-app-upnp/luasrc/view/upnp_status.htm b/applications/luci-app-upnp/luasrc/view/upnp_status.htm
index 1e0922579..459c63c1d 100644
--- a/applications/luci-app-upnp/luasrc/view/upnp_status.htm
+++ b/applications/luci-app-upnp/luasrc/view/upnp_status.htm
@@ -16,40 +16,39 @@
 			var tb = document.getElementById('upnp_status_table');
 			if (st && tb)
 			{
-				/* clear all rows */
-				while (tb.firstElementChild !== tb.lastElementChild)
-					tb.removeChild(tb.lastElementChild);
+				var rows = [];
 
 				for (var i = 0; i < st.length; i++)
-					tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
-						E('<div class="td">', st[i].proto),
-						E('<div class="td">', st[i].extport),
-						E('<div class="td">', st[i].intaddr),
-						E('<div class="td">', st[i].intport),
-						E('<div class="td">', st[i].descr),
-						E('<input class="cbi-button cbi-input-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />'.format(st[i].num))
-					]));
+					rows.push([
+						st[i].proto,
+						st[i].extport,
+						st[i].intaddr,
+						st[i].intport,
+						st[i].descr,
+						E('<input class="cbi-button cbi-button-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />'.format(st[i].num))
+					]);
 
-				if (tb.firstElementChild === tb.lastElementChild)
-					tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active redirects.%></em></div></div>'));
+				cbi_update_table(tb, rows, '<em><%:There are no active redirects.%></em>');
 			}
 		}
 	);
 //]]></script>
 
-<fieldset class="cbi-section">
+<div class="cbi-section">
 	<legend><%:Active UPnP Redirects%></legend>
-	<div class="table cbi-section-table" id="upnp_status_table">
-		<div class="tr cbi-section-table-titles">
-			<div class="th cbi-section-table-cell"><%:Protocol%></div>
-			<div class="th cbi-section-table-cell"><%:External Port%></div>
-			<div class="th cbi-section-table-cell"><%:Client Address%></div>
-			<div class="th cbi-section-table-cell"><%:Client Port%></div>
-			<div class="th cbi-section-table-cell"><%:Description%></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 class="cbi-section-node">
+		<div class="table" id="upnp_status_table">
+			<div class="tr table-titles">
+				<div class="th"><%:Protocol%></div>
+				<div class="th"><%:External Port%></div>
+				<div class="th"><%:Client Address%></div>
+				<div class="th"><%:Client Port%></div>
+				<div class="th"><%:Description%></div>
+				<div class="th cbi-section-actions">&#160;</div>
+			</div>
+			<div class="tr">
+				<div class="td" colspan="5"><em><%:Collecting data...%></em></div>
+			</div>
 		</div>
 	</div>
-</fieldset>
+</div>