bryan
/
DoorControl-Frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add fetch to call cgi script, add message block to main screen

master
Bryan 2020-12-20 00:45:03 -06:00
parent 3b8e959e88
commit f8197e8eb0
1 changed files with 43 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
trigger.html
View File

@ -152,8 +152,22 @@
margin: 0; margin: 0;
} }
#message-container {
border: 3px solid blue;
position: absolute;
text-align: center;
width: 100vw;
bottom: 50vh;
font-size: 2em;
/* border-radius: 56px; */
/* height: 300px; */
/* width: 300px; */
/* margin-left: auto; */
/* margin-right: auto; */
}
#button-block { #button-block {
position: fixed; position: absolute;
width: 100vw; width: 100vw;
bottom: 0px; bottom: 0px;
} }
@ -216,21 +230,24 @@
<section class="screen-container main-screen"> <section class="screen-container main-screen">
<h1 class="app-bar">Main Door</h1> <h1 class="app-bar">Main Door</h1>
<div id="button-block"> <div id="message-container">
</div>
<div id="button-block">
<div class="button-container" id="delay-unlock-button"> <div class="button-container" id="delay-unlock-button">
<p> <p>
<span id="show-delay"></span> <span id="show-delay"></span>
<span>Delay Unlock</span> <span>Delay Unlock</span>
</p> </p>
<img class="button-icon" src="img/clockwise.png" alt="Unlock Button"> <img class="button-icon" src="img/clockwise.png" alt="Unlock Button">
</div>
<div class="button-container" id="unlock-button">
<p>Unlock Now</p>
<img class="button-icon" src="img/unlock.png" alt="Unlock Button">
</div>
</div> </div>
<div class="button-container" id="unlock-button">
<p>Unlock Now</p>
<img class="button-icon" src="img/unlock.png" alt="Unlock Button">
</div>
</div>
</section> </section>
@ -272,6 +289,8 @@
const settingScreen = document.querySelector(".setting-screen"); const settingScreen = document.querySelector(".setting-screen");
const mainScreen = document.querySelector(".main-screen"); const mainScreen = document.querySelector(".main-screen");
const messageContainer = document.querySelector("#message-container");
const deviceIDInput = document.querySelector("#device-id"); const deviceIDInput = document.querySelector("#device-id");
const delayInput = document.querySelector("#delay-time"); const delayInput = document.querySelector("#delay-time");
const apiKeyInput = document.querySelector("#api-key"); const apiKeyInput = document.querySelector("#api-key");
@ -280,9 +299,14 @@
let deviceID = ""; let deviceID = "";
let delay = ""; let delay = "";
let apiKey = ""; let apiKey = "";
const unlockUrl = "https://ths.tnet.space/cgi-bin/doorcontrol-cgi/unlock-main.cgi";
// make fetch function that calls cgi script with attributes (device id, api key, delay) // make fetch function that calls cgi script with attributes (device id, api key, delay)
const unlockDoor = (deviceID, apiKey, delay) => {
fetch(`${unlockUrl}?deviceID=${deviceID}&apiKey=${apiKey}&delay=${delay}`)
.then(response => response.json())
.then(data => messageContainer.innerHTML = data.message);
}
const setSettings = () => { const setSettings = () => {
if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID")) { if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID")) {
@ -329,16 +353,15 @@
gotoMainScreen(); gotoMainScreen();
}); });
unlockButton.addEventListener("click", function () { unlockButton.addEventListener("click", unlockDoor(deviceID, apiKey, 0));
alert("unlock");
});
delayUnlockButton.addEventListener("click", function () { delayUnlockButton.addEventListener("click", function () {
alert("delay unlock"); messageContainer.innerHTML = "Delay Unlock";
}); });
document.body.onload = setSettings; document.body.onload = setSettings;
let date = new Date();
messageContainer.innerHTML = date.toLocaleDateString();
</script> </script>
</body> </body>