setupWifi.html

<!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>