From 232e8802e25318cbfcf992928e121650ddaa6df9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Sun, 16 Jul 2017 22:34:22 +0200
Subject: [PATCH] wifi scan

---
 html_orig/_debug_replacements.php |   8 +-
 html_orig/_pages.php              |   3 +-
 html_orig/css/app.css             |  18 ++-
 html_orig/index.php               |   2 +-
 html_orig/messages/en.php         |   7 +-
 html_orig/pages/cfg_wifi.php      | 186 +++++++++++++++++++++++++++---
 html_orig/sass/layout/_box.scss   |  14 ++-
 html_orig/sass/pages/_wifi.scss   |  14 ++-
 8 files changed, 218 insertions(+), 34 deletions(-)

diff --git a/html_orig/_debug_replacements.php b/html_orig/_debug_replacements.php
index 8b59dca..d9c7dbd 100644
--- a/html_orig/_debug_replacements.php
+++ b/html_orig/_debug_replacements.php
@@ -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',
 ];
diff --git a/html_orig/_pages.php b/html_orig/_pages.php
index e15e2c7..37e0ee7 100644
--- a/html_orig/_pages.php
+++ b/html_orig/_pages.php
@@ -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;
diff --git a/html_orig/css/app.css b/html_orig/css/app.css
index 0e2390b..1e206f9 100644
--- a/html_orig/css/app.css
+++ b/html_orig/css/app.css
@@ -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 {
diff --git a/html_orig/index.php b/html_orig/index.php
index 8402ea6..ddb1499 100644
--- a/html_orig/index.php
+++ b/html_orig/index.php
@@ -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;
diff --git a/html_orig/messages/en.php b/html_orig/messages/en.php
index 1fb7650..1fdd2b3 100644
--- a/html_orig/messages/en.php
+++ b/html_orig/messages/en.php
@@ -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',
 ];
diff --git a/html_orig/pages/cfg_wifi.php b/html_orig/pages/cfg_wifi.php
index 5e7f7c9..4c6613c 100644
--- a/html_orig/pages/cfg_wifi.php
+++ b/html_orig/pages/cfg_wifi.php
@@ -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>
diff --git a/html_orig/sass/layout/_box.scss b/html_orig/sass/layout/_box.scss
index f14448c..60e1cbc 100755
--- a/html_orig/sass/layout/_box.scss
+++ b/html_orig/sass/layout/_box.scss
@@ -80,8 +80,18 @@
 			display: none;
 		}
 
-		&.expanded .Row {
-			display: flex;
+		#ap-box {
+			display: none;
+		}
+
+		&.expanded {
+			.Row {
+				display: flex;
+			}
+
+			#ap-box {
+				display: block;
+			}
 		}
 	}
 }
diff --git a/html_orig/sass/pages/_wifi.scss b/html_orig/sass/pages/_wifi.scss
index 6e46a6a..8e97dde 100755
--- a/html_orig/sass/pages/_wifi.scss
+++ b/html_orig/sass/pages/_wifi.scss
@@ -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;
 		}
 	}