pull/30/head
Ondřej Hruška 7 years ago
parent 357a9b6513
commit 232e8802e2
  1. 8
      html_orig/_debug_replacements.php
  2. 3
      html_orig/_pages.php
  3. 18
      html_orig/css/app.css
  4. 2
      html_orig/index.php
  5. 7
      html_orig/messages/en.php
  6. 186
      html_orig/pages/cfg_wifi.php
  7. 14
      html_orig/sass/layout/_box.scss
  8. 14
      html_orig/sass/pages/_wifi.scss

@ -21,9 +21,11 @@ return [
'%ap_ssid%' => 'ESP-123456',
'%ap_password%' => 'Passw0rd!',
'%ap_hidden%' => '0',
'%sta_ssid%' => 'LibraryFreeWifi',
'%sta_ssid%' => 'Chlivek',
'%sta_password%' => 'windows XP is The Best',
'%sta_active_ip%' => '',
'%sta_active_ip%' => '1.2.3.4',
'%sta_active_ssid%' => 'Chlivek',
'%sta_enable%' => '0',
'%sta_enable%' => '1',
'%opmode%' => '3',
];

@ -20,6 +20,7 @@ pg('help', 'cfg', '/help');
pg('term', 'term', '/');
// technical
pg('wifi_set', '', '/cfg/wifi/set');
pg('wifi_set', '', '/wifi/set');//'/cfg/wifi/set');
pg('wifi_scan', '', '/wifi/scan');//'/cfg/wifi/scan');
return $pages;

@ -529,8 +529,12 @@ a:hover {
margin-bottom: 1rem; }
.Box.mobcol .Row {
display: none; }
.Box.mobcol #ap-box {
display: none; }
.Box.mobcol.expanded .Row {
display: flex; } }
display: flex; }
.Box.mobcol.expanded #ap-box {
display: block; } }
.Modal {
position: fixed;
width: 100%;
@ -847,7 +851,12 @@ form span.required {
font-weight: bold; }
#ap-box {
padding-bottom: 0.38198rem; }
padding-top: 0.38198rem; }
#ap-box label {
display: block;
color: white;
font-weight: bold;
margin-bottom: 0.23608rem; }
#psk-modal form {
display: flex;
@ -905,13 +914,12 @@ form span.required {
.AP-preview-nil {
padding: 0.38198rem 0.61805rem;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
border: 2px dashed black; }
.AP-preview .wrap {
flex-direction: row;
background: #eee !important;
background: #ddd !important;
cursor: default;
top: 0 !important;
overflow: hidden; }
@ -944,7 +952,7 @@ form span.required {
padding-top: calc(0.61805rem + 1px); }
.AP-preview .wrap .essid, .AP-preview .wrap .passwd {
padding-bottom: 0; }
.AP-preview .wrap .passwd {
.AP-preview .wrap .x-passwd {
font-family: monospace; }
body.term h1 {

@ -19,7 +19,7 @@ define('BODYCLASS', $_pages[CUR_PAGE]->bodyclass);
/** URL (dev or production) */
function url($name, $root=false) {
global $_pages;
if ($root) return LIVE_ROOT . $_pages[$name]->path;
if ($root) return $_pages[$name]->path;
if (DEBUG) return "/index.php?page=$name";
else return $_pages[$name]->path;

@ -19,17 +19,22 @@ return [
'wifi.ap_ssid' => 'AP SSID:',
'wifi.ap_password' => 'Password:',
'wifi.ap_hidden' => 'Hide SSID:',
'wifi.sta_info' => 'Selected Network:',
'wifi.sta_info' => 'Selected:',
'wifi.sta_ssid' => 'Network SSID:',
'wifi.sta_password' => 'Password:',
'wifi.not_conn' => 'Not connected.',
'wifi.sta_none' => 'None',
'wifi.sta_active_pw' => '🔒',
'wifi.submit' => 'Apply!',
'wifi.scanning' => 'Scanning',
'wifi.cant_scan_no_sta' => 'Can\'t scan with Client mode disabled.',
'wifi.select_ssid' => 'Available networks:',
'enabled' => 'Enabled',
'disabled' => 'Disabled',
'yes' => 'Yes',
'no' => 'No',
'confirm' => 'OK',
];

@ -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') ?>&nbsp;<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;
}
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);
}
wifiShowSelected('%sta_ssid%', '%sta_password%', '%sta_active_ip%');
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>

@ -80,8 +80,18 @@
display: none;
}
&.expanded .Row {
display: flex;
#ap-box {
display: none;
}
&.expanded {
.Row {
display: flex;
}
#ap-box {
display: block;
}
}
}
}

@ -25,7 +25,14 @@
}
#ap-box {
padding-bottom: dist(-2);
padding-top: dist(-2);
label {
display: block;
color: white;
font-weight: bold;
margin-bottom: dist(-3);
}
}
#psk-modal form {
@ -112,7 +119,6 @@
.AP-preview-nil {
padding: dist(-2) dist(-1);
background: rgba(black, .1);
border-radius: 3px;
border: 2px dashed black;
}
@ -122,7 +128,7 @@
@extend %ap-inner;
flex-direction: row;
background: #eee !important; // override the hover effect #43de81
background: #ddd !important; // override the hover effect #43de81
cursor: default;
top: 0 !important; // no click effect
overflow: hidden;
@ -169,7 +175,7 @@
padding-bottom: 0;
}
.passwd {
.x-passwd {
font-family: monospace;
}
}

Loading…
Cancel
Save