|
|
|
@ -5,6 +5,10 @@ |
|
|
|
|
<input type="submit" value="<?= tr('wifi.submit') ?>">
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row buttons mq-no-phone"> |
|
|
|
|
<input type="submit" value="<?= tr('wifi.submit') ?>">
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row checkbox"> |
|
|
|
|
<label><?= tr('wifi.enable') ?></label><!--
|
|
|
|
|
--><span class="box"></span> |
|
|
|
@ -40,10 +44,6 @@ |
|
|
|
|
--><span class="box"></span> |
|
|
|
|
<input type="hidden" name="ap_hidden" value="%ap_hidden%"> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row buttons mq-no-phone"> |
|
|
|
|
<input type="submit" value="<?= tr('wifi.submit') ?>">
|
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="POST">
|
|
|
|
@ -53,14 +53,18 @@ |
|
|
|
|
<input type="submit" value="<?= tr('wifi.submit') ?>">
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row buttons mq-no-phone"> |
|
|
|
|
<input type="submit" value="<?= tr('wifi.submit') ?>">
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row checkbox"> |
|
|
|
|
<label><?= tr('wifi.enable') ?></label><!--
|
|
|
|
|
--><span class="box"></span> |
|
|
|
|
<input type="hidden" name="sta_enable" value="%sta_enable%"> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<input type="hidden" name="sta_ssid" id="sta_ssid" value="%sta_ssid%"> |
|
|
|
|
<input type="hidden" name="sta_password" id="sta_password" value="%sta_password%"> |
|
|
|
|
<input type="hidden" name="sta_ssid" id="sta_ssid" value=""> |
|
|
|
|
<input type="hidden" name="sta_password" id="sta_password" value=""> |
|
|
|
|
|
|
|
|
|
<div class="Row sta-info"> |
|
|
|
|
<label><?= tr('wifi.sta_info') ?></label>
|
|
|
|
@ -68,7 +72,7 @@ |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="essid"></div> |
|
|
|
|
<div class="passwd"></div> |
|
|
|
|
<div class="passwd"><?= tr('wifi.sta_active_pw') ?> <span class="x-passwd"></span></div>
|
|
|
|
|
<div class="ip"></div> |
|
|
|
|
</div> |
|
|
|
|
<a class="forget" id="forget-sta">×</a> |
|
|
|
@ -79,12 +83,27 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row buttons mq-no-phone"> |
|
|
|
|
<input type="submit" value="<?= tr('wifi.submit') ?>">
|
|
|
|
|
<div id="ap-box"> |
|
|
|
|
<label><?= tr('wifi.select_ssid') ?></label>
|
|
|
|
|
<div id="ap-loader"><?= tr('wifi.scanning') ?><span class="anim-dots">.</span></div>
|
|
|
|
|
<div id="ap-noscan" class="hidden"><?= tr('wifi.cant_scan_no_sta') ?></div>
|
|
|
|
|
<div id="ap-list" class="hidden"></div> |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
<div class="Modal hidden" id="psk-modal"> |
|
|
|
|
<div class="Dialog"> |
|
|
|
|
<form id="conn-form" onsubmit="submitPskModal(); return false;"> |
|
|
|
|
<input type="hidden" id="conn-ssid"><!-- |
|
|
|
|
--><label for="conn-passwd"><?= tr('wifi.sta_password') ?></label><!--
|
|
|
|
|
--><input type="text" id="conn-passwd"><!-- |
|
|
|
|
--><input type="submit" value="<?= tr('confirm') ?>">
|
|
|
|
|
</form> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
// Magic checkbox |
|
|
|
|
$('.Row.checkbox').forEach(function(x) { |
|
|
|
|
var inp = x.querySelector('input'); |
|
|
|
|
var box = x.querySelector('.box'); |
|
|
|
@ -97,6 +116,7 @@ |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// Expanding boxes on mobile |
|
|
|
|
$('.Box.mobcol').forEach(function(x) { |
|
|
|
|
var h = x.querySelector('h2'); |
|
|
|
|
$(h).on('click', function() { |
|
|
|
@ -104,10 +124,12 @@ |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// Get XX % for a slider input |
|
|
|
|
function rangePt(inp) { |
|
|
|
|
return Math.round(((inp.value / inp.max)*100)) + '%'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Update slider value displays |
|
|
|
|
$('.Row.range').forEach(function(x) { |
|
|
|
|
var inp = x.querySelector('input'); |
|
|
|
|
var disp1 = x.querySelector('.x-disp1'); |
|
|
|
@ -122,23 +144,153 @@ |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// Forget STA credentials |
|
|
|
|
$('#forget-sta').on('click', function() { |
|
|
|
|
$('#sta_ssid').val(''); |
|
|
|
|
$('#sta_password').val(''); |
|
|
|
|
|
|
|
|
|
wifiShowSelected('', '', ''); |
|
|
|
|
selectSta('', '', ''); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
function wifiShowSelected(name, password, ip) { |
|
|
|
|
// Display selected STA SSID etc |
|
|
|
|
function selectSta(name, password, ip) { |
|
|
|
|
$('#sta_ssid').val(name); |
|
|
|
|
$('#sta_password').val(password); |
|
|
|
|
|
|
|
|
|
$('#sta-nw').toggleClass('hidden', name.length == 0); |
|
|
|
|
$('#sta-nw-nil').toggleClass('hidden', name.length > 0); |
|
|
|
|
|
|
|
|
|
$('#sta-nw .essid').html(e(name)); |
|
|
|
|
var nopw = undef(password) || password.length == 0; |
|
|
|
|
$('#sta-nw .passwd').html(e(password)).toggleClass('hidden', nopw); |
|
|
|
|
$('#sta-nw .ip').html(ip.length>0 ? ip : '<?=tr('wifi.not_conn')?>');
|
|
|
|
|
$('#sta-nw .x-passwd').html(e(password)); |
|
|
|
|
$('#sta-nw .passwd').toggleClass('hidden', nopw); |
|
|
|
|
$('#sta-nw .ip').html(ip.length>0 ? 'IP = '+ip : '<?=tr('wifi.not_conn')?>');
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
selectSta('%sta_ssid%', '%sta_password%', '%sta_active_ip%'); |
|
|
|
|
|
|
|
|
|
var authStr = ['Open', 'WEP', 'WPA', 'WPA2', 'WPA/WPA2']; |
|
|
|
|
var curSSID = '%sta_active_ssid%'; |
|
|
|
|
|
|
|
|
|
function submitPskModal(e) { |
|
|
|
|
var passwd = $('#conn-passwd').val(); |
|
|
|
|
var ssid = $('#conn-ssid').val(); |
|
|
|
|
$('#sta_password').val(passwd); |
|
|
|
|
$('#sta_ssid').val(ssid); |
|
|
|
|
selectSta(ssid, passwd, ''); |
|
|
|
|
|
|
|
|
|
if (e) e.preventDefault(); |
|
|
|
|
Modal.hide('#psk-modal'); |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** Update display for received response */ |
|
|
|
|
function onScan(resp, status) { |
|
|
|
|
if (status != 200) { |
|
|
|
|
// bad response |
|
|
|
|
rescan(5000); // wait 5sm then retry |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
resp = JSON.parse(resp); |
|
|
|
|
} catch (e) { |
|
|
|
|
console.log(e); |
|
|
|
|
rescan(5000); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
wifiShowSelected('%sta_ssid%', '%sta_password%', '%sta_active_ip%'); |
|
|
|
|
var done = !bool(resp.result.inProgress) && (resp.result.APs.length > 0); |
|
|
|
|
rescan(done ? 15000 : 1000); |
|
|
|
|
if (!done) return; // no redraw yet |
|
|
|
|
|
|
|
|
|
// clear the AP list |
|
|
|
|
var $list = $('#ap-list'); |
|
|
|
|
// remove old APs |
|
|
|
|
$('#ap-list .AP').remove(); |
|
|
|
|
|
|
|
|
|
$list.toggleClass('hidden', !done); |
|
|
|
|
$('#ap-loader').toggleClass('hidden', done); |
|
|
|
|
|
|
|
|
|
// scan done |
|
|
|
|
resp.result.APs.sort(function (a, b) { |
|
|
|
|
return b.rssi - a.rssi; |
|
|
|
|
}).forEach(function (ap) { |
|
|
|
|
ap.enc = intval(ap.enc); |
|
|
|
|
|
|
|
|
|
if (ap.enc > 4) return; // hide unsupported auths |
|
|
|
|
|
|
|
|
|
var item = document.createElement('div'); |
|
|
|
|
|
|
|
|
|
var $item = $(item) |
|
|
|
|
.data('ssid', ap.essid) |
|
|
|
|
.data('pwd', ap.enc) |
|
|
|
|
.addClass('AP'); |
|
|
|
|
|
|
|
|
|
// mark current SSID |
|
|
|
|
if (ap.essid == curSSID) { |
|
|
|
|
$item.addClass('selected'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var inner = document.createElement('div'); |
|
|
|
|
$(inner).addClass('inner') |
|
|
|
|
.htmlAppend('<div class="rssi">{0}</div>'.format(ap.rssi_perc)) |
|
|
|
|
.htmlAppend('<div class="essid" title="{0}">{0}</div>'.format($.htmlEscape(ap.essid))) |
|
|
|
|
.htmlAppend('<div class="auth">{0}</div>'.format(authStr[ap.enc])); |
|
|
|
|
|
|
|
|
|
$item.on('click', function () { |
|
|
|
|
var $th = $(this); |
|
|
|
|
|
|
|
|
|
var ssid = $th.data('ssid'); |
|
|
|
|
|
|
|
|
|
$('#conn-ssid').val(ssid); |
|
|
|
|
$('#conn-passwd').val(''); |
|
|
|
|
|
|
|
|
|
if (+$th.data('pwd')) { |
|
|
|
|
// this AP needs a password |
|
|
|
|
Modal.show('#psk-modal'); |
|
|
|
|
$('#conn-passwd')[0].focus(); |
|
|
|
|
} else { |
|
|
|
|
//Modal.show('#reset-modal'); |
|
|
|
|
submitPskModal(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
item.appendChild(inner); |
|
|
|
|
$list[0].appendChild(item); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** Ask the CGI what APs are visible (async) */ |
|
|
|
|
function scanAPs() { |
|
|
|
|
$.get('http://'+_root+'<?= url('wifi_scan', true) ?>', onScan);
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function rescan(time) { |
|
|
|
|
setTimeout(scanAPs, time); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** Set up the WiFi page */ |
|
|
|
|
function wifiInit(obj) { |
|
|
|
|
//var ap_json = { |
|
|
|
|
// "result": { |
|
|
|
|
// "inProgress": "0", |
|
|
|
|
// "APs": [ |
|
|
|
|
// {"essid": "Chlivek", "bssid": "88:f7:c7:52:b3:99", "rssi": "204", "enc": "4", "channel": "1"}, |
|
|
|
|
// {"essid": "TyNikdy", "bssid": "5c:f4:ab:0d:f1:1b", "rssi": "164", "enc": "3", "channel": "1"}, |
|
|
|
|
// ] |
|
|
|
|
// } |
|
|
|
|
//}; |
|
|
|
|
|
|
|
|
|
// Hide what should be hidden in this mode |
|
|
|
|
obj.mode = +obj.mode; |
|
|
|
|
|
|
|
|
|
$('#ap-noscan').toggleClass('hidden', obj.mode != 2); |
|
|
|
|
$('#ap-loader').toggleClass('hidden', obj.mode == 2); |
|
|
|
|
|
|
|
|
|
// scan if not AP |
|
|
|
|
if (obj.mode != 2) { |
|
|
|
|
scanAPs(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
wifiInit({mode: '%opmode%'}); |
|
|
|
|
</script> |
|
|
|
|