--- /dev/null
+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();
+ });
+});
--- /dev/null
+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();
+ });
+});
<%+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%>
<%+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%>" /> <br />%d%% ',
- 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%>" /> 
</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%>
projects / project / luci.git / commitdiff