luci-mod-admin-full: rework wireless network status indicator

Rework markup and logic of the wireless network status indicator to match
that of the interface status widget.

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

1 files changed, 22 insertions, 25 deletions

diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm
index 85468252e..ad20ea38f 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_status.htm
@@ -24,21 +24,22 @@
 				else
 					icon = "<%=resource%>/icons/signal-75-100.png";
 
-				var s = document.getElementById('<%=self.option%>-iw-signal');
-				if (s)
-					s.innerHTML = String.format(
-						'<img src="%s" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%>" /><br />' +
-						'<small>%d%%</small>', icon, iw.signal, iw.noise, p
-					);
+				var s = document.getElementById('<%=self.option%>-iw-status'),
+				    small = s.querySelector('small'),
+				    info = s.querySelector('span');
+
+				small.innerHTML = info.innerHTML = String.format(
+					'<img src="%s" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%>" />&#160;<br />%d%%&#160;',
+						icon, iw.signal, iw.noise, p
+				);
 
-				var d = document.getElementById('<%=self.option%>-iw-description');
-				if (d && is_assoc)
-					d.innerHTML = String.format(
+				if (is_assoc)
+					info.innerHTML = String.format(
 						'<strong><%:Mode%>:</strong> %s | ' +
 						'<strong><%:SSID%>:</strong> %h<br />' +
-						'<strong><%:BSSID%>:</strong> %s | ' +
+						'<strong><%:BSSID%>:</strong> %s<br />' +
 						'<strong><%:Encryption%>:</strong> %s<br />' +
-						'<strong><%:Channel%>:</strong> %d (%.3f <%:GHz%>) | ' +
+						'<strong><%:Channel%>:</strong> %d (%.3f <%:GHz%>)<br />' +
 						'<strong><%:Tx-Power%>:</strong> %d <%:dBm%><br />' +
 						'<strong><%:Signal%>:</strong> %d <%:dBm%> | ' +
 						'<strong><%:Noise%>:</strong> %d <%:dBm%><br />' +
@@ -50,8 +51,8 @@
 							iw.txpower, iw.signal, iw.noise,
 							iw.bitrate ? iw.bitrate : 0, iw.country
 					);
-				else if (d)
-					d.innerHTML = String.format(
+				else
+					info.innerHTML = String.format(
 						'<strong><%:SSID%>:</strong> %h | ' +
 						'<strong><%:Mode%>:</strong> %s<br />' +
 						'<em><%:Wireless is disabled or not associated%></em>',
@@ -62,17 +63,13 @@
 	);
 //]]></script>
 
-<div class="table">
-	<div class="tr cbi-section-table">
-		<div class="td"></div>
-		<div class="td cbi-value-field" style="width:16px; padding:3px" id="<%=self.option%>-iw-signal">
-			<img src="<%=resource%>/icons/signal-none.png" title="<%:Not associated%>" /><br />
-			<small>0%</small>
-		</div>
-		<div class="td cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=self.option%>-iw-description">
-			<em><%:Collecting data...%></em>
-		</div>
-	</div>
-</div>
+<span class="ifacebadge large" id="<%=self.option%>-iw-status">
+	<small>
+		<img src="<%=resource%>/icons/signal-none.png" title="<%:Not associated%>" />&#160;
+	</small>
+	<span>
+		<em><%:Collecting data...%></em>
+	</span>
+</span>
 
 <%+cbi/valuefooter%>