luci-mod-network: move wifi and iface status JS into external files

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

2 files changed, 8 insertions, 125 deletions

diff --git a/modules/luci-mod-network/luasrc/view/admin_network/iface_status.htm b/modules/luci-mod-network/luasrc/view/admin_network/iface_status.htm
index 34be35dd20..a75b2755cd 100644
--- a/modules/luci-mod-network/luasrc/view/admin_network/iface_status.htm
+++ b/modules/luci-mod-network/luasrc/view/admin_network/iface_status.htm
@@ -1,66 +1,12 @@
 <%+cbi/valueheader%>
 
-<script type="text/javascript">//<![CDATA[
-	XHR.poll(5, '<%=url('admin/network/iface_status', self.network)%>', null,
-		function(x, ifc)
-		{
-			if (ifc && (ifc = ifc[0]))
-			{
-				var s = document.getElementById('<%=self.option%>-ifc-status'),
-				    img = s.querySelector('img'),
-				    info = s.querySelector('span'),
-				    html = '<strong><%:Device%>:</strong> %h<br />'.format(ifc.ifname);
-
-				if (ifc.ifname)
-				{
-					if (ifc.is_up)
-						html += String.format('<strong><%:Uptime%>:</strong> %t<br />', ifc.uptime);
-
-					if (ifc.macaddr)
-						html += String.format('<strong><%:MAC%>:</strong> %s<br />', ifc.macaddr);
-
-					html += String.format(
-						'<strong><%:RX%></strong>: %.2mB (%d <%:Pkts.%>)<br />' +
-						'<strong><%:TX%></strong>: %.2mB (%d <%:Pkts.%>)<br />',
-							ifc.rx_bytes, ifc.rx_packets,
-							ifc.tx_bytes, ifc.tx_packets
-					);
-
-					if (ifc.ipaddrs && ifc.ipaddrs.length)
-						for (var i = 0; i < ifc.ipaddrs.length; i++)
-							html += String.format(
-								'<strong><%:IPv4%>:</strong> %s<br />',
-								ifc.ipaddrs[i]
-							);
-
-					if (ifc.ip6addrs && ifc.ip6addrs.length)
-						for (var i = 0; i < ifc.ip6addrs.length; i++)
-							html += String.format(
-								'<strong><%:IPv6%>:</strong> %s<br />',
-								ifc.ip6addrs[i]
-							);
-
-					if (ifc.ip6prefix)
-						html += String.format('<strong><%:IPv6-PD%>:</strong> %s<br />', ifc.ip6prefix);
-
-					info.innerHTML = html;
-				}
-				else
-				{
-					info.innerHTML = '<em><%:Interface not present or not connected yet.%></em>';
-				}
-
-				img.src = '<%=resource%>/icons/%s%s.png'.format(ifc.type, ifc.is_up ? '' : '_disabled');
-			}
-		}
-	);
-//]]></script>
-
-<span class="ifacebadge large" id="<%=self.option%>-ifc-status">
+<span class="ifacebadge large"<%=attr("data-iface-status", self.network)%>>
 	<img src="<%=resource%>/icons/ethernet_disabled.png" />
 	<span>
-		<em><%:Collecting data...%></em>
+		<em class="spinning"><%:Collecting data...%></em>
 	</span>
 </span>
 
+<script type="text/javascript" src="<%=resource%>/view/network/iface_status.js"></script>
+
 <%+cbi/valuefooter%>
diff --git a/modules/luci-mod-network/luasrc/view/admin_network/wifi_status.htm b/modules/luci-mod-network/luasrc/view/admin_network/wifi_status.htm
index bfad3d0804..93ae2f51fb 100644
--- a/modules/luci-mod-network/luasrc/view/admin_network/wifi_status.htm
+++ b/modules/luci-mod-network/luasrc/view/admin_network/wifi_status.htm
@@ -1,77 +1,14 @@
 <%+cbi/valueheader%>
 
-<script type="text/javascript">//<![CDATA[
-	XHR.poll(5, '<%=url('admin/network/wireless_status', self.ifname)%>', null,
-		function(x, iw)
-		{
-			if (iw && (iw = iw[0]))
-			{
-				var is_assoc = (iw.bssid && iw.bssid != '00:00:00:00:00:00' && iw.channel && !iw.disabled);
-				var p = iw.quality;
-				var q = iw.disabled ? -1 : p;
-
-				var icon;
-				if (q < 0)
-					icon = "<%=resource%>/icons/signal-none.png";
-				else if (q == 0)
-					icon = "<%=resource%>/icons/signal-0.png";
-				else if (q < 25)
-					icon = "<%=resource%>/icons/signal-0-25.png";
-				else if (q < 50)
-					icon = "<%=resource%>/icons/signal-25-50.png";
-				else if (q < 75)
-					icon = "<%=resource%>/icons/signal-50-75.png";
-				else
-					icon = "<%=resource%>/icons/signal-75-100.png";
-
-				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
-				);
-
-				if (is_assoc)
-					info.innerHTML = String.format(
-						'<strong><%:Mode%>:</strong> %s | ' +
-						'<strong><%:SSID%>:</strong> %h<br />' +
-						'<strong><%:BSSID%>:</strong> %s<br />' +
-						'<strong><%:Encryption%>:</strong> %s<br />' +
-						'<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 />' +
-						'<strong><%:Bitrate%>:</strong> %.1f <%:Mbit/s%> | ' +
-						'<strong><%:Country%>:</strong> %s',
-							iw.mode, iw.ssid, iw.bssid,
-							iw.encryption ? iw.encryption : '<%:None%>',
-							iw.channel, iw.frequency ? iw.frequency : 0,
-							iw.txpower, iw.signal, iw.noise,
-							iw.bitrate ? iw.bitrate : 0, iw.country
-					);
-				else
-					info.innerHTML = String.format(
-						'<strong><%:SSID%>:</strong> %h | ' +
-						'<strong><%:Mode%>:</strong> %s<br />' +
-						'<em>%s</em>',
-							iw.ssid || '?', iw.mode,
-							iw.disabled ? '<em><%:Wireless is disabled%></em>'
-							            : '<em><%:Wireless is not associated%></em>'
-					);
-			}
-		}
-	);
-//]]></script>
-
-<span class="ifacebadge large" id="<%=self.option%>-iw-status">
+<span class="ifacebadge large"<%=attr("data-wifi-status", self.ifname)%>>
 	<small>
 		<img src="<%=resource%>/icons/signal-none.png" title="<%:Not associated%>" />&#160;
 	</small>
 	<span>
-		<em><%:Collecting data...%></em>
+		<em class="spinning"><%:Collecting data...%></em>
 	</span>
 </span>
 
+<script type="text/javascript" src="<%=resource%>/view/network/wifi_status.js"></script>
+
 <%+cbi/valuefooter%>