diff options
Diffstat (limited to 'webPage')
| -rw-r--r-- | webPage/index.html | 26 | ||||
| -rw-r--r-- | webPage/settings.html | 18 |
2 files changed, 16 insertions, 28 deletions
diff --git a/webPage/index.html b/webPage/index.html index c80ee61..a3564a6 100644 --- a/webPage/index.html +++ b/webPage/index.html @@ -7,7 +7,7 @@ <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> @@ -15,8 +15,8 @@ <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> @@ -31,7 +31,7 @@ {{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> @@ -41,7 +41,7 @@ <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> @@ -52,26 +52,14 @@ </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) { diff --git a/webPage/settings.html b/webPage/settings.html index cdda75a..25b6d2b 100644 --- a/webPage/settings.html +++ b/webPage/settings.html @@ -7,7 +7,7 @@ <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> @@ -15,17 +15,15 @@ <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> + <a id="homePageAddr" class="navbar-brand" href="/">IOT Device</a> + <a id="settingsPageAddr" class="navbar-toggler navbar-toggler-right" href="/settings"> + ⚙ + </a> </nav> <div class="container-fluid pt-3 pb-3"> - <div id="success-box" class="alert alert-success" role="alert"> - {{SUCCESSMSG}} - </div> + <div id="success-box" class="alert alert-success" role="alert">{{SUCCESSMSG}}</div> <div class="alert alert-danger" role="alert"> <b>Warning:</b> The password-protection does not work yet! Make sure to don´t expose the device. @@ -146,13 +144,15 @@ </div> + <script src="/script.js" charset="utf-8"></script> <script type="text/javascript"> + fixNoNetwork(); var successAlert = document.getElementById('success-box'); updatePlaceholder("txtDeviceName", "{{DEVICENAME}}"); updatePlaceholder("txtDeviceLocation", "{{DEVICELOCATION}}");; - if (successAlert.innerHtml == "") { + if (successAlert.innerHTML.length < 1) { successAlert.style.display = "none"; } |