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>

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 85468252e9af39b32f1e695ba8a8b0fa83288406..ad20ea38fe54cfcf1c075a3a267712105fffa4fd 100644 (file)
--- 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%>