almost complete wifi page redesign

2017-07-16 20:37:31 +02:00
parent a85582b94e
commit 856a694f0b
41 changed files with 1692 additions and 651 deletions
@@ -0,0 +1,15 @@
+
+<nav id="menu">
+	<div id="brand" onclick="$('#menu').toggleClass('expanded')"><?= tr('appname') ?></div>
+	<?php
+	// generate the menu
+	foreach($_pages as $k => $page) {
+		if ($page->bodyclass !== 'cfg') continue;
+		$sel = (CUR_PAGE == $k) ? ' class="selected"' : '';
+		$text = $page->label;
+		$url = e(url($k));
+		echo "<a href=\"$url\"$sel>$text</a>";
+	}
+	?><a href="<?= e(url('term')) ?>"><?= tr('menu.term') ?></a>
+
+</nav>
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title><?= PAGE_TITLE ?></title>
+	<link href="/css/app.css" rel="stylesheet">
+	<script src="/js/app.js"></script>
+	<script>var _root = <?= json_encode(LIVE_ROOT) ?>;</script>
+</head>
+<body class="<?= BODYCLASS ?>">
+<div id="outer">
+<?php
+$cfg = false;
+if ($_pages[CUR_PAGE]->bodyclass == 'cfg') {
+	$cfg = true;
+	require __DIR__ . '/_cfg_menu.php';
+}
+?>
+
+<div id="content">
+<img src="/img/loader.gif" alt="Loading…" id="loader">
+<?php if ($cfg): ?>
+<h1><?= tr('menu.' . CUR_PAGE) ?></h1>
+<?php endif; ?>
@@ -0,0 +1,5 @@
+</div>
+
+</div>
+</body>
+</html>
@@ -0,0 +1,123 @@
+<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="POST">
+	<h2><?= tr('box.ap') ?></h2>
+
+	<div class="Row checkbox">
+		<label><?= tr('wifi.enable') ?></label><!--
+		--><span class="box"></span>
+		<input type="hidden" name="ap_enable" value="%ap_enable%">
+	</div>
+
+	<div class="Row">
+		<label for="ap_ssid"><?= tr('wifi.ap_ssid') ?></label>
+		<input type="text" name="ap_ssid" id="ap_ssid" value="%ap_ssid%" required>
+	</div>
+
+	<div class="Row">
+		<label for="ap_password"><?= tr('wifi.ap_password') ?></label>
+		<input type="text" name="ap_password" id="ap_password" value="%ap_password%">
+	</div>
+
+	<div class="Row">
+		<label for="ap_channel"><?= tr('wifi.ap_channel') ?></label>
+		<input type="number" name="ap_channel" id="ap_channel" min=1 max=14 value="%ap_channel%" required>
+	</div>
+
+	<div class="Row range">
+		<label for="tpw">
+			<?= tr('wifi.tpw') ?>
+			<span class="display x-disp1 mq-phone"></span>
+		</label>
+		<input type="range" name="tpw" id="tpw" step=1 min=0 max=82 value="%tpw%">
+		<span class="display x-disp2 mq-tablet-min"></span>
+	</div>
+
+	<div class="Row checkbox">
+		<label><?= tr('wifi.ap_hidden') ?></label><!--
+		--><span class="box"></span>
+		<input type="hidden" name="ap_hidden" value="%ap_hidden%">
+	</div>
+
+	<div class="Row buttons">
+		<input type="submit" value="<?= tr('wifi.submit') ?>">
+	</div>
+</form>
+
+<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="POST">
+	<h2><?= tr('box.sta') ?></h2>
+
+	<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%">
+
+	<div class="Row sta-info">
+		<label><?= tr('wifi.sta_info') ?></label>
+		<div class="AP-preview" id="sta-nw">
+			<div class="wrap">
+				<div class="inner">
+					<div class="essid"></div>
+					<div class="passwd"></div>
+					<div class="ip"></div>
+				</div>
+				<a class="forget" id="forget-sta">×</a>
+			</div>
+		</div>
+	</div>
+
+	<div class="Row buttons">
+		<input type="submit" value="<?= tr('wifi.submit') ?>">
+	</div>
+</form>
+
+<script>
+	$('.Row.checkbox').forEach(function(x) {
+		var inp = x.querySelector('input');
+		var box = x.querySelector('.box');
+
+		$(box).toggleClass('checked', inp.value);
+
+		$(x).on('click', function() {
+			inp.value = 1 - inp.value;
+			$(box).toggleClass('checked', inp.value)
+		});
+	});
+
+	$('.Box.mobcol').forEach(function(x) {
+		var h = x.querySelector('h2');
+		$(h).on('click', function() {
+			$(x).toggleClass('expanded');
+		});
+	});
+
+	function rangePt(inp) {
+		return Math.round(((inp.value / inp.max)*100)) + '%';
+	}
+
+	$('.Row.range').forEach(function(x) {
+		var inp = x.querySelector('input');
+		var disp1 = x.querySelector('.x-disp1');
+		var disp2 = x.querySelector('.x-disp2');
+		var t = rangePt(inp);
+		$(disp1).html(t);
+		$(disp2).html(t);
+		$(inp).on('input', function() {
+			t = rangePt(inp);
+			$(disp1).html(t);
+			$(disp2).html(t);
+		});
+	});
+
+	function wifiShowSelected(name, password, ip) {
+		$('#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')?>');
+	}
+
+	wifiShowSelected('%sta_ssid%', '%sta_password%', '%sta_active_ip%');
+
+</script>
@@ -0,0 +1,37 @@
+<script>
+	// Workaround for badly loaded page
+	setTimeout(function() {
+		if (typeof termInit == 'undefined' || typeof $ == 'undefined') {
+			location.reload(true);
+		}
+	}, 2000);
+</script>
+
+<h1 onclick="location.href='<?= e(url('cfg_wifi_simple')) ?>'">%term_title%</h1>
+
+<div id="termwrap">
+	<div id="screen"></div>
+
+	<div id="buttons">
+		<button data-n="1" class="btn-blue">%b1%</button><!--
+		--><button data-n="2" class="btn-blue">%b2%</button><!--
+		--><button data-n="3" class="btn-blue">%b3%</button><!--
+		--><button data-n="4" class="btn-blue">%b4%</button><!--
+		--><button data-n="5" class="btn-blue">%b5%</button>
+	</div>
+</div>
+
+<nav id="botnav">
+	<a href="<?= url('cfg_wifi_simple') ?>"><?= tr('menu.cfg_wifi') ?></a><!--
+		--><a href="<?= url('help') ?>">Help</a><!--
+		--><a href="<?= url('about') ?>">About</a>
+</nav>
+
+<script>
+	try {
+		termInit(%screenData%);
+	} catch(e) {
+		console.error("Fail, reloading...");
+		location.reload(true);
+	}
+</script>