diff options
4 files changed, 111 insertions, 125 deletions
diff --git a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/iface_status.js b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/iface_status.js new file mode 100644 index 000000000..1852f179f --- /dev/null +++ b/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(); + }); +}); diff --git a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/wifi_status.js b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/wifi_status.js new file mode 100644 index 000000000..7e14d999b --- /dev/null +++ b/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(); + }); +}); 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 34be35dd2..a75b2755c 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 bfad3d080..93ae2f51f 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%>" /> <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%> |