diff options
Diffstat (limited to 'index.h')
| -rw-r--r-- | index.h | 64 |
1 files changed, 31 insertions, 33 deletions
@@ -8,7 +8,7 @@ const char MAIN_page[] PROGMEM = R"=====( <title>{{NAME}}</title> - <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> + {{BOOTSTRAPLINK}} <link rel="stylesheet" href="./style.css"> </head> @@ -16,8 +16,8 @@ const char MAIN_page[] PROGMEM = R"=====( <body> <nav class="navbar navbar-dark bg-dark"> - <a class="navbar-brand" href="/">IOT Device</a> - <a class="navbar-toggler navbar-toggler-right" href="/settings"> + <a id="homePageAddr" class="navbar-brand" href="/">IOT Device</a> + <a id="settingsPageAddr" class="navbar-toggler navbar-toggler-right" href="/settings"> ⚙ </a> </nav> @@ -32,7 +32,7 @@ const char MAIN_page[] PROGMEM = R"=====( {{NAME}} <span class="text-align:right;"> <label class="switch float-right"> - <input type="checkbox" id="lampActive"> + <input type="checkbox" id="lampActive" {{LAMPACTIVECHECKED}}> <span class="slider round"></span> </label> </span> @@ -42,7 +42,7 @@ const char MAIN_page[] PROGMEM = R"=====( <hr /> <div class="toggle-button toggle-button--tuli"> - <input id="sensorActive" type="checkbox"> + <input id="sensorActive" type="checkbox" {{SENSORCHECKED}}> <label for="sensorActive">Clap sensor</label> <div class="toggle-button__icon"></div> </div> @@ -53,33 +53,26 @@ const char MAIN_page[] PROGMEM = R"=====( </div> + <script src="/script.js" charset="utf-8"></script> <script type="text/javascript"> + fixNoNetwork(); + var pollingActive = true; // Prevent states from being updated while trying to change them. document.getElementById("lampActive").addEventListener("change", changLampState); document.getElementById("sensorActive").addEventListener("change", changSensorState); setInterval(getStates, 1000); - function ajax_request(adress, callback_function) { - /* A simple ajax request wrapper - Doesn´t return anything else than the callback */ - var xhttp = new XMLHttpRequest(); - xhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - callback_function(this.responseText); - } - }; - xhttp.open("POST", adress, true); - xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); - xhttp.send(); - } - function changLampState() { var boxState = document.getElementById("lampActive").checked; if (boxState) { - ajax_request("/j/lamp/1", function(e) { + pollingActive = false; + ajax_request("/j?lamp=1", function(e) { + pollingActive = true; console.log(e); }); } else { - ajax_request("/j/lamp/0", function(e) { + pollingActive = false; + ajax_request("/j?lamp=0", function(e) { + pollingActive = true; console.log(e); }); } @@ -88,32 +81,37 @@ const char MAIN_page[] PROGMEM = R"=====( function changSensorState() { var sensorState = document.getElementById("sensorActive").checked; if (sensorState) { - ajax_request("/j/sens/1", function(e) { + pollingActive = false; + ajax_request("/j?sens=1", function(e) { + pollingActive = true; console.log(e); }); } else { - ajax_request("/j/sens/0", function(e) { + pollingActive = false; + ajax_request("/j?sens=0", function(e) { + pollingActive = true; console.log(e); }); } } function getStates() { - ajax_request("/j/", function(e) { - result = JSON.parse(e); + if (pollingActive) { + ajax_request("/j/", function(e) { + result = JSON.parse(e); - var lampOn = false; - var sensorOn = false; - if (result['lampOn'] == 1) { lampOn = true; } - if (result['sensorOn'] == 1) { sensorOn = true; } + var lampOn = false; + var sensorOn = false; + if (result['lampOn'] == 1) { lampOn = true; } + if (result['sensorOn'] == 1) { sensorOn = true; } - document.getElementById("lampActive").checked = lampOn; - document.getElementById("sensorActive").checked = sensorOn; - }); + document.getElementById("lampActive").checked = lampOn; + document.getElementById("sensorActive").checked = sensorOn; + }); + } } </script> </body> </html> - )====="; |