[WebUI] Completion of WiFi and MQTT Configuration (#1603)

* Configure WiFi - 1/2 working

* WiFi and MQTT Configuration

* Refactor MQTTtoSYS

* Firmware Upgrade is Wired

main/config_WebContent.h

@@ -61,7 +61,9 @@ const char restart_script[] = "setTimeout(function() { location.href = '.'; }, 1
 
 const char information_script[] = "function i() { var s, o = \"<table style='width:100%%'><tr><th>%s</td></tr></table>\"; s = o.replace(/}1/g, \"</td></tr><tr><th>\").replace(/}2/g, \"</th><td>\"); eb('i').innerHTML = s; } wl(i);";
 
-const char console_script[] = " var sn = 0, id = 0, ft, ltm = 2345; function l(p) { var c, o = ''; clearTimeout(lt); clearTimeout(ft); t = eb('t1'); if (p == 1) { c = eb('c1'); o = '&c1=' + encodeURIComponent(c.value); c.value = ''; t.scrollTop = 99999; sn = t.scrollTop; } if (t.scrollTop >= sn) { if (x != null) { x.abort(); } x = new XMLHttpRequest(); x.onreadystatechange = function() { if (x.readyState == 4 && x.status == 200) { var z, d; d = x.responseText.split(/}1/); id = d.shift(); if (d.shift() == 0) { t.value = ''; } z = d.shift(); if (z.length > 0) { t.value += z; } t.scrollTop = 99999; sn = t.scrollTop; clearTimeout(ft); lt = setTimeout(l, ltm); } }; x.open('GET', 'cs?c2=' + id + o, true); x.send(); ft = setTimeout(l, 20000); } else { lt = setTimeout(l, ltm); } return false; } wl(l); var hc = [], cn = 0; function h() { eb('c1').addEventListener('keydown', function(e) { var b = eb('c1'), c = e.keyCode; if (38 == c || 40 == c) { b.autocomplete = 'off'; } 38 == c ? (++cn > hc.length && (cn = hc.length), b.value = hc[cn - 1] || '') : 40 == c ? (0 > --cn && (cn = 0), b.value = hc[cn - 1] || '') : 13 == c && (hc.length > 19 && hc.pop(), hc.unshift(b.value), cn = 0) }); } wl(h);";
+const char console_script[] = "var sn = 0, id = 0, ft, ltm = 2345; function l(p) { var c, o = ''; clearTimeout(lt); clearTimeout(ft); t = eb('t1'); if (p == 1) { c = eb('c1'); o = '&c1=' + encodeURIComponent(c.value); c.value = ''; t.scrollTop = 99999; sn = t.scrollTop; } if (t.scrollTop >= sn) { if (x != null) { x.abort(); } x = new XMLHttpRequest(); x.onreadystatechange = function() { if (x.readyState == 4 && x.status == 200) { var z, d; d = x.responseText.split(/}1/); id = d.shift(); if (d.shift() == 0) { t.value = ''; } z = d.shift(); if (z.length > 0) { t.value += z; } t.scrollTop = 99999; sn = t.scrollTop; clearTimeout(ft); lt = setTimeout(l, ltm); } }; x.open('GET', 'cs?c2=' + id + o, true); x.send(); ft = setTimeout(l, 20000); } else { lt = setTimeout(l, ltm); } return false; } wl(l); var hc = [], cn = 0; function h() { eb('c1').addEventListener('keydown', function(e) { var b = eb('c1'), c = e.keyCode; if (38 == c || 40 == c) { b.autocomplete = 'off'; } 38 == c ? (++cn > hc.length && (cn = hc.length), b.value = hc[cn - 1] || '') : 40 == c ? (0 > --cn && (cn = 0), b.value = hc[cn - 1] || '') : 13 == c && (hc.length > 19 && hc.pop(), hc.unshift(b.value), cn = 0) }); } wl(h);";
+
+const char wifi_script[] = "function c(l) {eb('s1').value = l.innerText || l.textContent; eb('p1').focus(); }";
 
 const char script[] = "function jd() { var t = 0, i = document.querySelectorAll('input,button,textarea,select'); while (i.length >= t) { if (i[t]) { i[t]['name'] = (i[t].hasAttribute('id') && (!i[t].hasAttribute('name'))) ? i[t]['id'] : i[t]['name']; } t++; } } wl(jd); </script>";
 
@@ -81,13 +83,15 @@ const char console_body[] = body_header "<br><textarea readonly id='t1' cols='34
 
 const char information_body[] = body_header "<style>td {padding: 0px 5px;}</style><div id='i' name='i'></div>" body_footer_main_menu;
 
-const char upgrade_body[] = body_header "<div id='f1' style='display:block;'><fieldset><legend><b>&nbsp;Upgrade by web server&nbsp;</b></legend><form method='get' action='u1'><br><b>OTA Url</b><br><input id='o' placeholder=\"OTA_URL\" value=\"%s\"><br><br><button type='submit'>Start upgrade</button></form></fieldset><br><br><fieldset><legend><b>&nbsp;Upgrade by file upload&nbsp;</b></legend><form method='post' action='u2' enctype='multipart/form-data'><br><input type='file' name='u2'><br><br><button type='submit' onclick='eb(\"f1\").style.display=\"none\";eb(\"f2\").style.display=\"block\";this.form.submit();'>Start upgrade</button></form></fieldset></div><div id='f2' style='display:none;text-align:center;'><b>Upload started ...</b></div><div id=but2d style=\"display: block;\"></div><p>" body_footer_main_menu;
+// <fieldset><legend><b>&nbsp;Upgrade by file upload&nbsp;</b></legend><form method='post' action='up' enctype='multipart/form-data'><br><input type='file' name='u2'><br><br><button type='submit' onclick='eb(\"f1\").style.display=\"none\";eb(\"f2\").style.display=\"block\";this.form.submit();'>Start upgrade</button></form></fieldset>
 
-const char config_wifi_body[] = body_header "<div title='-43 dBm (100%)'><a href='#p' onclick='c(this)'>%s</a><span class='q'><div class='si'><i class='b0'></i><i class='b1'></i><i class='b2'></i><i class='b3'></i></span></div></div><div title='-84 dBm (32%)'><a href='#p' onclick='c(this)'>BELL634</a><span class='q'><div class='si'><i class='b0'></i><i class='b1'></i><i class='b2 o30'></i><i class='b3 o30'></i></span></div></div><div title='-86 dBm (28%)'><a href='#p' onclick='c(this)'>MRC</a><span class='q'><div class='si'><i class='b0'></i><i class='b1'></i><i class='b2 o30'></i><i class='b3 o30'></i></span></div></div><br><div><a href='/wi?scan='>Scan for all WiFi Networks</a></div><br><fieldset><legend><b>&nbsp;Wifi parameters&nbsp;</b></legend><form method='get' action='wi'><p><b>WiFi Network</b> () <br><input id='s1' placeholder=\"Type or Select your WiFi Network\" value=\"%s\"></p><p><label><b>WiFi Password</b><input type='checkbox' onclick='sp(\"p1\")'></label><br><input id='p1' type='password' placeholder=\"Enter your WiFi Password\" value=\"****\"></p><p><b>WiFi Network 2</b> () <br><input id='s2' placeholder=\"Type your Alternative WiFi Network\" value=\"\"></p><p><label><b>WiFi Password</b><input type='checkbox' onclick='sp(\"p2\")'></label><br><input id='p2' type='password' placeholder=\"Enter your WiFi Password\" value=\"****\"></p><p><b>Hostname</b>%s<br><input id='h' placeholder=\"%s\" value=\"%s\"></p><p><b>CORS Domain</b><input id='c' placeholder=\"\" value=\"%s\"></p><br><button name='save' type='submit' class='button bgrn'>Save</button></form></fieldset>" body_footer_config_menu;
+const char upgrade_body[] = body_header "<div id='f1' style='display:block;'><fieldset><legend><b>&nbsp;Upgrade by web server&nbsp;</b></legend><form method='get' action='up'><br><b>OTA Url</b><br><input id='o' placeholder=\"OTA_URL\" value=\"%s\"><br><br><button type='submit'>Start upgrade</button></form></fieldset><br><br><fieldset><legend><b>Upgrade to Level</b></legend><form method='get' action='up'><p><b>level</b><br><select id='le'><option value='1'>Latest</option><option value='2'>Development</option></select></p><br><button type='submit'>Start upgrade</button></form></fieldset></div><div id='f2' style='display:none;text-align:center;'><b>Upload started ...</b></div><div id=but2d style=\"display: block;\"></div><p>" body_footer_main_menu;
+
+const char config_wifi_body[] = body_header "%s<br><div><a href='/wi?scan='>Scan for all WiFi Networks</a></div><br><fieldset><legend><b>&nbsp;Wifi parameters&nbsp;</b></legend><form method='get' action='wi'><p><b>WiFi Network</b> () <br><input id='s1' placeholder=\"Type or Select your WiFi Network\" value=\"%s\"></p><p><label><b>WiFi Password</b><input type='checkbox' onclick='sp(\"p1\")'></label><br><input id='p1' type='password' placeholder=\"Enter your WiFi Password\" value=\"%s\"></p><br><button name='save' type='submit' class='button bgrn'>Save</button></form></fieldset>" body_footer_config_menu;
 
 // mqtt server (mh), mqtt port (ml), mqtt username (mu), mqtt password (mp), secure connection (sc), server certificate (msc), topic (mt)
 
-const char config_mqtt_body[] = body_header "<fieldset><legend><b>&nbsp;MQTT parameters&nbsp;</b></legend><form method='get' action='mq'><p><b>MQTT Server</b><br><input id='mh' placeholder=" MQTT_SERVER " value='%s'></p><p><b>MQTT Port</b><br><input id='ml' placeholder=" MQTT_PORT " value='%s'></p><p><b>MQTT Username</b><br><input id='mu' placeholder=" MQTT_USER " value='%s'></p><p><label><b>MQTT Password</b><input type='checkbox' onclick='sp(\"mp\")'></label><br><input id='mp' type='password' placeholder=\"Password\" value='%s'></p><p><b>MQTT Secure Connection</b><br><input id='sc' type='checkbox' %s></p><p><b>MQTT Server Certificate</b><br><textarea class='form-control' name='msc' id='field_msc' rows='10' cols='64'>%s</textarea></p><p><b>MQTT Base Topic</b><br><input id='mt' placeholder='' value='%s'></p><br><button name='save' type='submit' class='button bgrn'>Save</button></form></fieldset>" body_footer_config_menu;
+const char config_mqtt_body[] = body_header "<fieldset><legend><b>&nbsp;MQTT parameters&nbsp;</b></legend><form method='get' action='mq'><p><b>MQTT Server</b><br><input id='mh' placeholder=" MQTT_SERVER " value='%s'></p><p><b>MQTT Port</b><br><input id='ml' placeholder=" MQTT_PORT " value='%s'></p><p><b>MQTT Username</b><br><input id='mu' placeholder=" MQTT_USER " value='%s'></p><p><label><b>MQTT Password</b><input type='checkbox' onclick='sp(\"mp\")'></label><br><input id='mp' type='password' placeholder=\"Password\" value='%s'></p><p><b>MQTT Secure Connection</b><br><input id='sc' type='checkbox' %s></p><p><b>Gateway Name</b><br><input id='h' placeholder=" Gateway_Name " value=\"%s\"></p><p><b>MQTT Base Topic</b><br><input id='mt' placeholder='' value='%s'></p><br><button name='save' type='submit' class='button bgrn'>Save</button></form></fieldset>" body_footer_config_menu;
 
 const char config_logging_body[] = body_header "<fieldset><legend><b>OpenMQTTGateway Logging</b></legend><form method='get' action='lo'><p><b>log level</b><br><select id='lo'><option %s value='0'>Silent</option><option %s value='1'>Fatal</option><option %s value='2'>Error</option><option %s value='3'>Warning</option><option %s value='4'>Notice</option><option %s value='5'>Trace</option><option %s value='6'>Verbose</option></select></p><br><button name='save' type='submit' class='button bgrn'>Save</button></form></fieldset>" body_footer_config_menu;