-
Stéphan Bernard authored50939fa5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" />
<img class="logo" src="copain.png" />
</head>
<body>
<script type="text/JavaScript">
fetch('scan')
.then(function (response) {return response.json();})
.then(function (data) { listScan(data);})
.catch(function (err) { console.log('error: ' + err); });
fetch('mqttbroker')
.then(function (response) {return response.json();})
.then(function (data) { fillForm(data);})
.catch(function (err) { console.log('error: ' + err); });
function fillForm(data) {
document.getElementById("mqtt").value = data.broker;
document.getElementById("port").value = data.port; }
function listScan(data) {
var mainContainer = document.getElementById("listwifi");
if (data.length == 0) {
mainContainer.innerHTML = "<em>No network available</em>"; return; }
var str = "<form id=\"selectwifi\">";
for (var i = 0; i < data.length; i++) {
var ssid = data[i].slice(2,data[i].lastIndexOf("(")-1).trim();
str += "<div class=\"itxt\"><div class=\"chk\">";
str += "<input type=\"radio\" name=\"ssidRadio\" id=\""+ssid+"\" value=\"";
str += +ssid+"\" onchange=\"copyssid(this)\">";
str += "<label for\""+ssid+"\">"+data[i].slice(2)+"</label></div></div>\n";
} mainContainer.innerHTML = str; }
function copyssid(radio) { var txtbx = document.getElementById("txt");
txtbx.value = radio.id; }
function showPw() { var x = document.getElementById("pass");
if (x.type === "password") x.type = "text";
else x.type = "password"; }
function checkRadio(txtbx) {
var cbr = document.getElementsByName('ssidRadio');
for(var i = 0; i < cbr.length; i++)
cbr[i].checked = (txtbx.value == cbr[i].id);
}
</script>
<nav role="navigation">
<div id="menuToggle"><input class="menuchk" type="checkbox" />
<span></span><span></span><span></span><ul id="menu" class="menul">
<li><h3>Main menu</h3></li>
<li><a href="index.html">Home</a></li>
<li><a href="download.html">Data files</a></li>
<li><h3>Setup</h3></li>
<li><div class="menusel">Wifi setup</div><li/>
<li><a href="setupAP.html">AP setup</a><li/>
<li><a href="setupSensor.html">Sensor settings</a><li/>
<li><a href="setupDateTime.html">Date and time</a><li/>
</ul>
</div>
</nav>
<div class="main">
<h1 id="wifi-co2-sensor">Wifi Setup</h1>
<h2>Wifi settings</h2>
<div class="linfopanel">
<form method='get' id="ssid" action='WifiSetting'>
<div class="linfo"><div class="ititle">Wifi connexion</div><div class="icont"><div class="itxt">
<table>
<tr><td>SSID : </td><td><input type='text' id='txt' name='ssid' oninput='checkRadio(this)' length=32 /></td></tr>
<tr><td>Password : </td><td><input type='password' id='pass' name='pass' length=64 /></td></tr>
</table></div>
717273747576777879808182838485868788899091929394
<div class="itxt"><div class="chk"><input type="checkbox" onclick="showPw()">Show Password</div></div>
</div></div>
<div class="linfo"><div class="ititle">MQTT</div><div class="icont"><div class="itxt">
<table>
<tr><td>Broker : </td><td><input type='text' id='mqtt' name='broker' length=16 /></td></tr>
<tr><td>Port : </td><td><input type='text' id='port' name='port' length=5 /></td></tr>
</table>
</div></div></div>
<div class="linfo"><div class="icont">
<div class="itxt"><div class="chk"><input type='checkbox' id='donotsave' name='save'>
<label for='donotsave'>Do not save to flash.</label></div></div>
<div class="itxt"><div class="btn"><input type='submit' value='Set' /></div></div>
</div></div>
</form>
<form id="donotsend">
<div class="linfo"><div class="ititle">Detected AP</div><div class="icont">
<div id="listwifi"><div class="itxt"><div class="loader"></div></div></div>
</div></div></form>
</div>
</form></div></body></html>