diff options
| author | Jakob Stendahl <jakst070500@ntvgs.no> | 2017-10-23 14:16:27 +0200 |
|---|---|---|
| committer | Jakob Stendahl <jakst070500@ntvgs.no> | 2017-10-23 14:16:27 +0200 |
| commit | 2d7d728e184f24961e4a0871f4d5bed3e2fe652a (patch) | |
| tree | 52147439c27002cc5ccabef86fd8156dc50a588f /webPage/index.html | |
| parent | c962ad1b2ade35022cc614dd4cc0e5e6d17ddb91 (diff) | |
| download | Luxcena-cs-2d7d728e184f24961e4a0871f4d5bed3e2fe652a.tar.gz Luxcena-cs-2d7d728e184f24961e4a0871f4d5bed3e2fe652a.zip | |
Moved everything into the new REPO
Diffstat (limited to 'webPage/index.html')
| -rw-r--r-- | webPage/index.html | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/webPage/index.html b/webPage/index.html new file mode 100644 index 0000000..c80ee61 --- /dev/null +++ b/webPage/index.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<html> + + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + + <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"> + <link rel="stylesheet" href="./style.css"> + </head> + + + <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> + </nav> + + <div class="container-fluid pt-3"> + + <div class="card card-inverse bg-dark text-white"> + <div class="card-body"> + + <div class="card-title"> + <h3> + {{NAME}} + <span class="text-align:right;"> + <label class="switch float-right"> + <input type="checkbox" id="lampActive"> + <span class="slider round"></span> + </label> + </span> + </h3> + </div> + <h6 class="card-subtitle mb-2 text-muted">{{Location}}</h6> + + <hr /> + <div class="toggle-button toggle-button--tuli"> + <input id="sensorActive" type="checkbox"> + <label for="sensorActive">Clap sensor</label> + <div class="toggle-button__icon"></div> + </div> + + </div> + </div> + + </div> + + + <script type="text/javascript"> + 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) { + pollingActive = false; + ajax_request("/j?lamp=1", function(e) { + pollingActive = true; + console.log(e); + }); + } else { + pollingActive = false; + ajax_request("/j?lamp=0", function(e) { + pollingActive = true; + console.log(e); + }); + } + } + + function changSensorState() { + var sensorState = document.getElementById("sensorActive").checked; + if (sensorState) { + pollingActive = false; + ajax_request("/j?sens=1", function(e) { + pollingActive = true; + console.log(e); + }); + } else { + pollingActive = false; + ajax_request("/j?sens=0", function(e) { + pollingActive = true; + console.log(e); + }); + } + } + + function getStates() { + 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; } + + document.getElementById("lampActive").checked = lampOn; + document.getElementById("sensorActive").checked = sensorOn; + }); + } + } + </script> + </body> + +</html> |