aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJakob Stendahl <jakob.stendahl@outlook.com>2017-10-25 17:08:26 +0200
committerJakob Stendahl <jakob.stendahl@outlook.com>2017-10-25 17:08:26 +0200
commit9cc5356fb7a347aac223997c8ece296fe2bd4f96 (patch)
tree14ed326f255a8723f9ad594d972e9a3caeb4b3da
parent883d5171ef945fc6312cb7be9e4c771199f005bd (diff)
downloadLuxcena-cs-9cc5356fb7a347aac223997c8ece296fe2bd4f96.tar.gz
Luxcena-cs-9cc5356fb7a347aac223997c8ece296fe2bd4f96.zip
Updated webapp-content, now we have a local fallback for CDN
Diffstat
-rw-r--r--index.h64
-rw-r--r--settings.h55
-rw-r--r--webPage/index.html26
-rw-r--r--webPage/settings.html18
4 files changed, 86 insertions, 77 deletions
diff --git a/index.h b/index.h
index caa1df7..1341204 100644
--- a/index.h
+++ b/index.h
@@ -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">
&#9881;
</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>
-
)=====";
diff --git a/settings.h b/settings.h
index af1b7f6..f2f3d9f 100644
--- a/settings.h
+++ b/settings.h
@@ -8,7 +8,7 @@ const char SETTINGS_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,14 +16,16 @@ const char SETTINGS_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">
- &#9881;
- </a>
+ <a id="homePageAddr" class="navbar-brand" href="/">IOT Device</a>
+ <a id="settingsPageAddr" class="navbar-toggler navbar-toggler-right" href="/settings">
+ &#9881;
+ </a>
</nav>
<div class="container-fluid pt-3 pb-3">
+ <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.
</div>
@@ -42,7 +44,7 @@ const char SETTINGS_page[] PROGMEM = R"=====(
<div class="form-group row">
<div class="col-sm-12">
- <input type="password" class="form-control" id="name" placeholder="Device password" readonly>
+ <input type="password" class="form-control" id="" placeholder="Device password" readonly>
</div>
</div>
@@ -60,35 +62,37 @@ const char SETTINGS_page[] PROGMEM = R"=====(
</div>
<div class="container">
- <form>
+ <form method="post">
+
+ <input type="hidden" name="type" value="settings">
<h5 class="small text-muted">Device settings:</h5>
<div class="form-group row">
- <label for="inputEmail3" class="col-sm-2 col-form-label">Device name</label>
+ <label for="lblDeviceName" class="col-sm-2 col-form-label">Device name</label>
<div class="col-sm-10">
- <input type="name" class="form-control" id="name" placeholder="Rooflight">
+ <input type="text" class="form-control" name="txtDeviceName" id="txtDeviceName" placeholder="Ex. Rooflight">
</div>
</div>
<div class="form-group row">
- <label for="inputEmail3" class="col-sm-2 col-form-label">Location</label>
+ <label for="lblDeviceLocation" class="col-sm-2 col-form-label">Location</label>
<div class="col-sm-10">
- <input type="name" class="form-control" id="name" placeholder="Bathroom">
+ <input type="text" class="form-control" name="txtDeviceLocation" id="txtDeviceLocation" placeholder="Ex. Bathroom">
</div>
</div>
<h5 class="small text-muted">Wifi settings:</h5>
<div class="form-group row">
- <label for="inputEmail3" class="col-sm-2 col-form-label">SSID</label>
+ <label for="lblSSID" class="col-sm-2 col-form-label">SSID</label>
<div class="col-sm-10">
- <input type="name" class="form-control" id="name" placeholder="Name of router">
+ <input type="name" class="form-control" name="txtSSID" id="txtSSID" placeholder="Name of router">
</div>
</div>
<div class="form-group row">
- <label for="inputEmail3" class="col-sm-2 col-form-label">Pasword</label>
+ <label for="lblPassword" class="col-sm-2 col-form-label">Pasword</label>
<div class="col-sm-10">
- <input type="name" class="form-control" id="name" placeholder="Passphrase (If open, write nothing)">
+ <input type="name" class="form-control" name="txtPassword" id="txtPassword" placeholder="Passphrase (If open, write nothing)">
</div>
</div>
@@ -96,8 +100,8 @@ const char SETTINGS_page[] PROGMEM = R"=====(
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
- <button type="submit" class="btn btn-muted">Cancel</button>
<br /><span class="small text-muted"> <b> Note:</b> The device will reboot and turn of any connected appliances when you save the settings.</span>
+ <br /><span class="small text-muted"> <b> Note:</b> Empty or unchanged fields will not be updated.</span>
</div>
</div>
@@ -140,6 +144,25 @@ const char SETTINGS_page[] PROGMEM = R"=====(
</div>
</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.length < 1) {
+ successAlert.style.display = "none";
+ }
+
+ function updatePlaceholder(elemId, textToInsert) {
+ var field = document.getElementById(elemId);
+ if (textToInsert != "") { field.placeholder = "Curr; " + textToInsert }
+ }
+
+ </script>
</body>
</html>
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">
&#9881;
</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">
- &#9881;
- </a>
+ <a id="homePageAddr" class="navbar-brand" href="/">IOT Device</a>
+ <a id="settingsPageAddr" class="navbar-toggler navbar-toggler-right" href="/settings">
+ &#9881;
+ </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";
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-06-26 22:55:42 +0000