luci-mod-network: move wifi overview markup and JS code into external files
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich
parent
f598b10c49
commit
a03ec60696
4 changed files with 157 additions and 200 deletions
|
|
@ -0,0 +1,93 @@
|
||||||
|
function wifi_delete(ev) {
|
||||||
|
if (!confirm(_('Really delete this wireless network? The deletion cannot be undone! You might lose access to this device if you are connected via this network.'))) {
|
||||||
|
ev.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
ev.target.previousElementSibling.value = '1';
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function wifi_restart(ev) {
|
||||||
|
L.halt();
|
||||||
|
|
||||||
|
findParent(ev.target, '.table').querySelectorAll('[data-disabled="false"]').forEach(function(s) {
|
||||||
|
L.dom.content(s, E('em', _('Wireless is restarting...')));
|
||||||
|
});
|
||||||
|
|
||||||
|
L.post(L.url('admin/network/wireless_reconnect', ev.target.getAttribute('data-radio')), L.run);
|
||||||
|
}
|
||||||
|
|
||||||
|
var networks = [ ];
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-network]').forEach(function(n) {
|
||||||
|
networks.push(n.getAttribute('data-network'));
|
||||||
|
});
|
||||||
|
|
||||||
|
L.poll(5, L.url('admin/network/wireless_status', networks.join(',')), null,
|
||||||
|
function(x, st) {
|
||||||
|
if (st) {
|
||||||
|
var rowstyle = 1;
|
||||||
|
var radiostate = { };
|
||||||
|
|
||||||
|
st.forEach(function(s) {
|
||||||
|
var r = radiostate[s.device.device] || (radiostate[s.device.device] = {});
|
||||||
|
|
||||||
|
s.is_assoc = (s.bssid && s.bssid != '00:00:00:00:00:00' && s.channel && s.mode != 'Unknown' && !s.disabled);
|
||||||
|
|
||||||
|
r.up = r.up || s.is_assoc;
|
||||||
|
r.channel = r.channel || s.channel;
|
||||||
|
r.bitrate = r.bitrate || s.bitrate;
|
||||||
|
r.frequency = r.frequency || s.frequency;
|
||||||
|
});
|
||||||
|
|
||||||
|
for (var i = 0; i < st.length; i++) {
|
||||||
|
var iw = st[i],
|
||||||
|
sig = document.getElementById(iw.id + '-iw-signal'),
|
||||||
|
info = document.getElementById(iw.id + '-iw-status'),
|
||||||
|
disabled = (info && info.getAttribute('data-disabled') === 'true');
|
||||||
|
|
||||||
|
var p = iw.quality;
|
||||||
|
var q = 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(sig, E('span', {
|
||||||
|
class: 'ifacebadge',
|
||||||
|
title: '%s %d %s / %s: %d %s'.format(_('Signal'), iw.signal, _('dBm'), _('Noise'), iw.noise, _('dBm'))
|
||||||
|
}, [ E('img', { src: icon }), ' %d%%'.format(p) ]));
|
||||||
|
|
||||||
|
L.itemlist(info, [
|
||||||
|
_('SSID'), '%h'.format(iw.ssid || '?'),
|
||||||
|
_('Mode'), iw.mode,
|
||||||
|
_('BSSID'), iw.is_assoc ? iw.bssid : null,
|
||||||
|
_('Encryption'), iw.is_assoc ? iw.encryption || _('None') : null,
|
||||||
|
null, iw.is_assoc ? null : E('em', disabled ? _('Wireless is disabled') : _('Wireless is not associated'))
|
||||||
|
], [ ' | ', E('br') ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var dev in radiostate) {
|
||||||
|
var img = document.getElementById(dev + '-iw-upstate');
|
||||||
|
if (img) img.src = L.resource('icons/wifi' + (radiostate[dev].up ? '' : '_disabled') + '.png');
|
||||||
|
|
||||||
|
var stat = document.getElementById(dev + '-iw-devinfo');
|
||||||
|
L.itemlist(stat, [
|
||||||
|
_('Channel'), '%s (%s %s)'.format(radiostate[dev].channel || '?', radiostate[dev].frequency || '?', _('GHz')),
|
||||||
|
_('Bitrate'), '%s %s'.format(radiostate[dev].bitrate || '?', _('Mbit/s'))
|
||||||
|
], ' | ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
@ -64,68 +64,6 @@ function guess_wifi_hw(dev)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
local tpl_radio = tpl.Template(nil, [[
|
|
||||||
<div class="cbi-section-node">
|
|
||||||
<div class="table">
|
|
||||||
<!-- physical device -->
|
|
||||||
<div class="tr cbi-rowstyle-2">
|
|
||||||
<div class="td col-2 center middle">
|
|
||||||
<span class="ifacebadge"><img src="<%=resource%>/icons/wifi_disabled.png" id="<%=dev:name()%>-iw-upstate" /> <%=dev:name()%></span>
|
|
||||||
</div>
|
|
||||||
<div class="td col-7 left middle">
|
|
||||||
<big><strong><%=hw%></strong></big><br />
|
|
||||||
<span id="<%=dev:name()%>-iw-devinfo"></span>
|
|
||||||
</div>
|
|
||||||
<div class="td middle cbi-section-actions">
|
|
||||||
<div>
|
|
||||||
<input type="button" class="cbi-button cbi-button-neutral" title="<%:Restart radio interface%>" value="<%:Restart%>" data-radio="<%=dev:name()%>" onclick="wifi_restart(event)" />
|
|
||||||
<input type="button" class="cbi-button cbi-button-action important" title="<%:Find and join network%>" value="<%:Scan%>" onclick="cbi_submit(this, 'device', '<%=dev:name()%>', '<%=url('admin/network/wireless_join')%>')" />
|
|
||||||
<input type="button" class="cbi-button cbi-button-add" title="<%:Provide new network%>" value="<%:Add%>" onclick="cbi_submit(this, 'device', '<%=dev:name()%>', '<%=url('admin/network/wireless_add')%>')" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- /physical device -->
|
|
||||||
|
|
||||||
<!-- network list -->
|
|
||||||
<% if #wnets > 0 then %>
|
|
||||||
<% for i, net in ipairs(wnets) do local disabled = (dev:get("disabled") == "1" or net:get("disabled") == "1") %>
|
|
||||||
<div class="tr cbi-rowstyle-<%=1 + ((i-1) % 2)%>">
|
|
||||||
<div class="td col-2 center middle" id="<%=net:id()%>-iw-signal">
|
|
||||||
<span class="ifacebadge" title="<%:Not associated%>"><img src="<%=resource%>/icons/signal-<%= disabled and "none" or "0" %>.png" /> 0%</span>
|
|
||||||
</div>
|
|
||||||
<div class="td col-7 left middle" id="<%=net:id()%>-iw-status" data-network="<%=net:id()%>" data-disabled="<%= disabled and "true" or "false" %>">
|
|
||||||
<em><%= disabled and translate("Wireless is disabled") or translate("Collecting data...") %></em>
|
|
||||||
</div>
|
|
||||||
<div class="td middle cbi-section-actions">
|
|
||||||
<div>
|
|
||||||
<% if disabled then %>
|
|
||||||
<input name="cbid.wireless.<%=net:name()%>.__disable__" type="hidden" value="1" />
|
|
||||||
<input name="cbi.apply" type="submit" class="cbi-button cbi-button-neutral" title="<%:Enable this network%>" value="<%:Enable%>" onclick="this.previousElementSibling.value='0'" />
|
|
||||||
<% else %>
|
|
||||||
<input name="cbid.wireless.<%=net:name()%>.__disable__" type="hidden" value="0" />
|
|
||||||
<input name="cbi.apply" type="submit" class="cbi-button cbi-button-neutral" title="<%:Disable this network%>" value="<%:Disable%>" onclick="this.previousElementSibling.value='1'" />
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<input type="button" class="cbi-button cbi-button-action important" onclick="location.href='<%=net:adminlink()%>'" title="<%:Edit this network%>" value="<%:Edit%>" />
|
|
||||||
|
|
||||||
<input name="cbid.wireless.<%=net:name()%>.__delete__" type="hidden" value="" />
|
|
||||||
<input name="cbi.apply" type="submit" class="cbi-button cbi-button-negative" title="<%:Delete this network%>" value="<%:Remove%>" onclick="wifi_delete(event)" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
<% else %>
|
|
||||||
<div class="tr placeholder">
|
|
||||||
<div class="td">
|
|
||||||
<em><%:No network configured on this device%></em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
<!-- /network list -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
]])
|
|
||||||
|
|
||||||
|
|
||||||
m = Map("wireless", translate("Wireless Overview"))
|
m = Map("wireless", translate("Wireless Overview"))
|
||||||
m:chain("network")
|
m:chain("network")
|
||||||
|
|
@ -147,15 +85,10 @@ end
|
||||||
local _, dev, net
|
local _, dev, net
|
||||||
for _, dev in ipairs(ntm:get_wifidevs()) do
|
for _, dev in ipairs(ntm:get_wifidevs()) do
|
||||||
s = m:section(TypedSection)
|
s = m:section(TypedSection)
|
||||||
|
s.template = "admin_network/wifi_overview"
|
||||||
s.wnets = dev:get_wifinets()
|
s.wnets = dev:get_wifinets()
|
||||||
|
s.dev = dev
|
||||||
function s.render(self, sid)
|
s.hw = guess_wifi_hw(dev)
|
||||||
tpl_radio:render({
|
|
||||||
hw = guess_wifi_hw(dev),
|
|
||||||
dev = dev,
|
|
||||||
wnets = self.wnets
|
|
||||||
})
|
|
||||||
end
|
|
||||||
|
|
||||||
function s.cfgsections(self)
|
function s.cfgsections(self)
|
||||||
local _, net, sl = nil, nil, { }
|
local _, net, sl = nil, nil, { }
|
||||||
|
|
@ -208,9 +141,6 @@ for _, dev in ipairs(ntm:get_wifidevs()) do
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
s = m:section(NamedSection, "__script__")
|
|
||||||
s.template = "admin_network/wifi_overview_status"
|
|
||||||
|
|
||||||
s = m:section(NamedSection, "__assoclist__")
|
s = m:section(NamedSection, "__assoclist__")
|
||||||
|
|
||||||
function s.render(self, sid)
|
function s.render(self, sid)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<div class="cbi-section-node">
|
||||||
|
<div class="table">
|
||||||
|
<!-- physical device -->
|
||||||
|
<div class="tr cbi-rowstyle-2">
|
||||||
|
<div class="td col-2 center middle">
|
||||||
|
<span class="ifacebadge"><img src="<%=resource%>/icons/wifi_disabled.png" id="<%=self.dev:name()%>-iw-upstate" /> <%=self.dev:name()%></span>
|
||||||
|
</div>
|
||||||
|
<div class="td col-7 left middle">
|
||||||
|
<big><strong><%=self.hw%></strong></big><br />
|
||||||
|
<span id="<%=self.dev:name()%>-iw-devinfo"></span>
|
||||||
|
</div>
|
||||||
|
<div class="td middle cbi-section-actions">
|
||||||
|
<div>
|
||||||
|
<input type="button" class="cbi-button cbi-button-neutral" title="<%:Restart radio interface%>" value="<%:Restart%>" data-radio="<%=self.dev:name()%>" onclick="wifi_restart(event)" />
|
||||||
|
<input type="button" class="cbi-button cbi-button-action important" title="<%:Find and join network%>" value="<%:Scan%>" onclick="cbi_submit(this, 'device', '<%=self.dev:name()%>', '<%=url('admin/network/wireless_join')%>')" />
|
||||||
|
<input type="button" class="cbi-button cbi-button-add" title="<%:Provide new network%>" value="<%:Add%>" onclick="cbi_submit(this, 'device', '<%=self.dev:name()%>', '<%=url('admin/network/wireless_add')%>')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- /physical device -->
|
||||||
|
|
||||||
|
<!-- network list -->
|
||||||
|
<% if #self.wnets > 0 then %>
|
||||||
|
<% for i, net in ipairs(self.wnets) do local disabled = (self.dev:get("disabled") == "1" or net:get("disabled") == "1") %>
|
||||||
|
<div class="tr cbi-rowstyle-<%=1 + ((i-1) % 2)%>">
|
||||||
|
<div class="td col-2 center middle" id="<%=net:id()%>-iw-signal">
|
||||||
|
<span class="ifacebadge" title="<%:Not associated%>"><img src="<%=resource%>/icons/signal-<%= disabled and "none" or "0" %>.png" /> 0%</span>
|
||||||
|
</div>
|
||||||
|
<div class="td col-7 left middle" id="<%=net:id()%>-iw-status" data-network="<%=net:id()%>" data-disabled="<%= disabled and "true" or "false" %>">
|
||||||
|
<em><%= disabled and translate("Wireless is disabled") or translate("Collecting data...") %></em>
|
||||||
|
</div>
|
||||||
|
<div class="td middle cbi-section-actions">
|
||||||
|
<div>
|
||||||
|
<% if disabled then %>
|
||||||
|
<input name="cbid.wireless.<%=net:name()%>.__disable__" type="hidden" value="1" />
|
||||||
|
<input name="cbi.apply" type="submit" class="cbi-button cbi-button-neutral" title="<%:Enable this network%>" value="<%:Enable%>" onclick="this.previousElementSibling.value='0'" />
|
||||||
|
<% else %>
|
||||||
|
<input name="cbid.wireless.<%=net:name()%>.__disable__" type="hidden" value="0" />
|
||||||
|
<input name="cbi.apply" type="submit" class="cbi-button cbi-button-neutral" title="<%:Disable this network%>" value="<%:Disable%>" onclick="this.previousElementSibling.value='1'" />
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<input type="button" class="cbi-button cbi-button-action important" onclick="location.href='<%=net:adminlink()%>'" title="<%:Edit this network%>" value="<%:Edit%>" />
|
||||||
|
|
||||||
|
<input name="cbid.wireless.<%=net:name()%>.__delete__" type="hidden" value="" />
|
||||||
|
<input name="cbi.apply" type="submit" class="cbi-button cbi-button-negative" title="<%:Delete this network%>" value="<%:Remove%>" onclick="wifi_delete(event)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
<% else %>
|
||||||
|
<div class="tr placeholder">
|
||||||
|
<div class="td">
|
||||||
|
<em><%:No network configured on this device%></em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
<!-- /network list -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="<%=resource%>/view/network/wireless.js"></script>
|
||||||
|
|
@ -1,127 +0,0 @@
|
||||||
<%#
|
|
||||||
Copyright 2008-2009 Steven Barth <steven@midlink.org>
|
|
||||||
Copyright 2008-2018 Jo-Philipp Wich <jo@mein.io>
|
|
||||||
Licensed to the public under the Apache License 2.0.
|
|
||||||
-%>
|
|
||||||
|
|
||||||
<script type="text/javascript">//<![CDATA[
|
|
||||||
function wifi_delete(ev) {
|
|
||||||
if (!confirm(<%=luci.http.write_json(translate('Really delete this wireless network? The deletion cannot be undone! You might lose access to this device if you are connected via this network.'))%>)) {
|
|
||||||
ev.preventDefault();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
ev.target.previousElementSibling.value = '1';
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function wifi_restart(ev) {
|
|
||||||
XHR.halt();
|
|
||||||
|
|
||||||
findParent(ev.target, '.table').querySelectorAll('[data-disabled="false"]').forEach(function(s) {
|
|
||||||
s.innerHTML = '<em><%:Wireless is restarting...%></em>';
|
|
||||||
});
|
|
||||||
|
|
||||||
(new XHR()).post('<%=url('admin/network/wireless_reconnect')%>/' + ev.target.getAttribute('data-radio'),
|
|
||||||
{ token: '<%=token%>' }, XHR.run);
|
|
||||||
}
|
|
||||||
|
|
||||||
var networks = [ ];
|
|
||||||
|
|
||||||
document.querySelectorAll('[data-network]').forEach(function(n) {
|
|
||||||
networks.push(n.getAttribute('data-network'));
|
|
||||||
});
|
|
||||||
|
|
||||||
XHR.poll(5, '<%=url('admin/network/wireless_status')%>/' + networks.join(','), null,
|
|
||||||
function(x, st)
|
|
||||||
{
|
|
||||||
if (st)
|
|
||||||
{
|
|
||||||
var rowstyle = 1;
|
|
||||||
var radiostate = { };
|
|
||||||
|
|
||||||
st.forEach(function(s) {
|
|
||||||
var r = radiostate[s.device.device] || (radiostate[s.device.device] = {});
|
|
||||||
|
|
||||||
s.is_assoc = (s.bssid && s.bssid != '00:00:00:00:00:00' && s.channel && s.mode != 'Unknown' && !s.disabled);
|
|
||||||
|
|
||||||
r.up = r.up || s.is_assoc;
|
|
||||||
r.channel = r.channel || s.channel;
|
|
||||||
r.bitrate = r.bitrate || s.bitrate;
|
|
||||||
r.frequency = r.frequency || s.frequency;
|
|
||||||
});
|
|
||||||
|
|
||||||
for( var i = 0; i < st.length; i++ )
|
|
||||||
{
|
|
||||||
var iw = st[i],
|
|
||||||
sig = document.getElementById(iw.id + '-iw-signal'),
|
|
||||||
info = document.getElementById(iw.id + '-iw-status'),
|
|
||||||
disabled = (info && info.getAttribute('data-disabled') === 'true');
|
|
||||||
|
|
||||||
var p = iw.quality;
|
|
||||||
var q = 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";
|
|
||||||
|
|
||||||
|
|
||||||
if (sig)
|
|
||||||
sig.innerHTML = String.format(
|
|
||||||
'<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%>"><img src="%s" /> %d%%</span>',
|
|
||||||
iw.signal, iw.noise, icon, p
|
|
||||||
);
|
|
||||||
|
|
||||||
if (info)
|
|
||||||
{
|
|
||||||
if (iw.is_assoc)
|
|
||||||
info.innerHTML = String.format(
|
|
||||||
'<strong><%:SSID%>:</strong> %h | ' +
|
|
||||||
'<strong><%:Mode%>:</strong> %s<br />' +
|
|
||||||
'<strong><%:BSSID%>:</strong> %s | ' +
|
|
||||||
'<strong><%:Encryption%>:</strong> %s',
|
|
||||||
iw.ssid, iw.mode, iw.bssid,
|
|
||||||
iw.encryption ? iw.encryption : '<%:None%>'
|
|
||||||
);
|
|
||||||
else
|
|
||||||
info.innerHTML = String.format(
|
|
||||||
'<strong><%:SSID%>:</strong> %h | ' +
|
|
||||||
'<strong><%:Mode%>:</strong> %s<br />' +
|
|
||||||
'<em>%s</em>',
|
|
||||||
iw.ssid || '?', iw.mode,
|
|
||||||
disabled ? '<em><%:Wireless is disabled%></em>'
|
|
||||||
: '<em><%:Wireless is not associated%></em>'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var dev in radiostate)
|
|
||||||
{
|
|
||||||
var img = document.getElementById(dev + '-iw-upstate');
|
|
||||||
if (img)
|
|
||||||
img.src = '<%=resource%>/icons/wifi' + (radiostate[dev].up ? '' : '_disabled') + '.png';
|
|
||||||
|
|
||||||
var stat = document.getElementById(dev + '-iw-devinfo');
|
|
||||||
if (stat)
|
|
||||||
stat.innerHTML = String.format(
|
|
||||||
'<strong><%:Channel%>:</strong> %s (%s <%:GHz%>) | ' +
|
|
||||||
'<strong><%:Bitrate%>:</strong> %s <%:Mbit/s%>',
|
|
||||||
radiostate[dev].channel ? radiostate[dev].channel : '?',
|
|
||||||
radiostate[dev].frequency ? radiostate[dev].frequency : '?',
|
|
||||||
radiostate[dev].bitrate ? radiostate[dev].bitrate : '?'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
//]]></script>
|
|
||||||
Loading…
Reference in a new issue