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

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

modules/luci-mod-network/htdocs/luci-static/resources/view/network/iface_status.js

@@ -0,0 +1,44 @@
+requestAnimationFrame(function() {
+	document.querySelectorAll('[data-iface-status]').forEach(function(container) {
+		var network = container.getAttribute('data-iface-status'),
+		    icon = container.querySelector('img'),
+		    info = container.querySelector('span');
+
+		L.poll(5, L.url('admin/network/iface_status', network), null, function(xhr, ifaces) {
+			var ifc = Array.isArray(ifaces) ? ifaces[0] : null;
+			if (!ifc) {
+				alert('No ifc!');
+				return;
+			}
+
+			L.itemlist(info, [
+				_('Device'),  ifc.ifname,
+				_('Uptime'),  ifc.is_up ? '%t'.format(ifc.uptime) : null,
+				_('MAC'),     ifc.ifname ? ifc.macaddr : null,
+				_('RX'),      ifc.ifname ? '%.2mB (%d %s)'.format(ifc.rx_bytes, ifc.rx_packets, _('Pkts.')) : null,
+				_('TX'),      ifc.ifname ? '%.2mB (%d %s)'.format(ifc.tx_bytes, ifc.tx_packets, _('Pkts.')) : null,
+				_('IPv4'),    ifc.ipaddrs ? ifc.ipaddrs[0] : null,
+				_('IPv4'),    ifc.ipaddrs ? ifc.ipaddrs[1] : null,
+				_('IPv4'),    ifc.ipaddrs ? ifc.ipaddrs[2] : null,
+				_('IPv4'),    ifc.ipaddrs ? ifc.ipaddrs[3] : null,
+				_('IPv4'),    ifc.ipaddrs ? ifc.ipaddrs[4] : null,
+				_('IPv6'),    ifc.ip6addrs ? ifc.ip6addrs[0] : null,
+				_('IPv6'),    ifc.ip6addrs ? ifc.ip6addrs[1] : null,
+				_('IPv6'),    ifc.ip6addrs ? ifc.ip6addrs[2] : null,
+				_('IPv6'),    ifc.ip6addrs ? ifc.ip6addrs[3] : null,
+				_('IPv6'),    ifc.ip6addrs ? ifc.ip6addrs[4] : null,
+				_('IPv6'),    ifc.ip6addrs ? ifc.ip6addrs[5] : null,
+				_('IPv6'),    ifc.ip6addrs ? ifc.ip6addrs[6] : null,
+				_('IPv6'),    ifc.ip6addrs ? ifc.ip6addrs[7] : null,
+				_('IPv6'),    ifc.ip6addrs ? ifc.ip6addrs[8] : null,
+				_('IPv6'),    ifc.ip6addrs ? ifc.ip6addrs[9] : null,
+				_('IPv6-PD'), ifc.ip6prefix,
+				null,         ifc.ifname ? null : E('em', _('Interface not present or not connected yet.'))
+			]);
+
+			icon.src = L.resource('icons/%s%s.png').format(ifc.type, ifc.is_up ? '' : '_disabled');
+		});
+
+		L.run();
+	});
+});

modules/luci-mod-network/htdocs/luci-static/resources/view/network/wifi_status.js

@@ -0,0 +1,59 @@
+requestAnimationFrame(function() {
+	document.querySelectorAll('[data-wifi-status]').forEach(function(container) {
+		var ifname = container.getAttribute('data-wifi-status'),
+		    small = container.querySelector('small'),
+		    info = container.querySelector('span');
+
+		L.poll(5, L.url('admin/network/wireless_status', ifname), null, function(xhr, iws) {
+			var iw = Array.isArray(iws) ? iws[0] : null;
+			if (!iw)
+				return;
+
+			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 = L.resource('icons/signal-none.png');
+			else if (q == 0)
+				icon = L.resource('icons/signal-0.png');
+			else if (q < 25)
+				icon = L.resource('icons/signal-0-25.png');
+			else if (q < 50)
+				icon = L.resource('icons/signal-25-50.png');
+			else if (q < 75)
+				icon = L.resource('icons/signal-50-75.png');
+			else
+				icon = L.resource('icons/signal-75-100.png');
+
+			L.dom.content(small, [
+				E('img', {
+					src: icon,
+					title: '%s: %d %s / %s: %d %s'.format(
+						_('Signal'), iw.signal, _('dBm'),
+						_('Noise'), iw.noise, _('dBm'))
+				}),
+				'\u00a0', E('br'), '%d%%\u00a0'.format(p)
+			]);
+
+			L.itemlist(info, [
+				_('Mode'),       iw.mode,
+				_('SSID'),       '%h'.format(iw.ssid || '?'),
+				_('BSSID'),      is_assoc ? iw.bssid : null,
+				_('Encryption'), is_assoc ? iw.encryption || _('None') : null,
+				_('Channel'),    is_assoc ? '%d (%.3f %s)'.format(iw.channel, iw.frequency || 0, _('GHz')) : null,
+				_('Tx-Power'),   is_assoc ? '%d %s'.format(iw.txpower, _('dBm')) : null,
+				_('Signal'),     is_assoc ? '%d %s'.format(iw.signal, _('dBm')) : null,
+				_('Noise'),      is_assoc ? '%d %s'.format(iw.noise, _('dBm')) : null,
+				_('Bitrate'),    is_assoc ? '%.1f %s'.format(iw.bitrate || 0, _('Mbit/s')) : null,
+				_('Country'),    is_assoc ? iw.country : null
+			], [ ' | ', E('br'), E('br'), E('br'), E('br'), E('br'), ' | ', E('br'), ' | ' ]);
+
+			if (!is_assoc)
+				L.dom.append(info, E('em', iw.disabled ? _('Wireless is disabled') : _('Wireless is not associated')));
+		});
+
+		L.run();
+	});
+});

modules/luci-mod-network/luasrc/view/admin_network/iface_status.htm

@@ -1,66 +1,12 @@
 <%+cbi/valueheader%>
 
-<script type="text/javascript">//<![CDATA[
+<span class="ifacebadge large"<%=attr("data-iface-status", self.network)%>>
-	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">
 	<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%>

modules/luci-mod-network/luasrc/view/admin_network/wifi_status.htm

@@ -1,77 +1,14 @@
 <%+cbi/valueheader%>
 
-<script type="text/javascript">//<![CDATA[
+<span class="ifacebadge large"<%=attr("data-wifi-status", self.ifname)%>>
-	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">
 	<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%>