Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2018-11-23 15:47:44 +01:00
parent f73dc51ea1
commit 4bd7f4ba42
4 changed files with 111 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
modules/luci-mod-network/htdocs/luci-static/resources/view/network/iface_status.js Normal file
View file

@ -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();
});
});

59
modules/luci-mod-network/htdocs/luci-static/resources/view/network/wifi_status.js Normal file
View file

@ -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();
});
});

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

@ -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%>

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

@ -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%>