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

trigger.html

@@ -152,8 +152,22 @@
       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 {
-      position: fixed;
+      position: absolute;
       width: 100vw;
       bottom: 0px;
     }
@@ -216,22 +230,25 @@
     <section class="screen-container main-screen">
       <h1 class="app-bar">Main Door</h1>
       
-        <div id="button-block">
+      <div id="message-container">
+      </div>
         
-          <div class="button-container" id="delay-unlock-button">
-            <p>
-              <span id="show-delay"></span>
-              <span>Delay Unlock</span>
-            </p>
-            <img class="button-icon" src="img/clockwise.png" alt="Unlock Button">
-          </div>
+      <div id="button-block">
 
-          <div class="button-container" id="unlock-button">
-            <p>Unlock Now</p>
-            <img class="button-icon" src="img/unlock.png" alt="Unlock Button">
-          </div>
+        <div class="button-container" id="delay-unlock-button">
+          <p>
+            <span id="show-delay"></span>
+            <span>Delay Unlock</span>
+          </p>
+          <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>
+        
     </section>
 
     
@@ -272,6 +289,8 @@
     const settingScreen = document.querySelector(".setting-screen");
     const mainScreen = document.querySelector(".main-screen");
     
+    const messageContainer = document.querySelector("#message-container");
+    
     const deviceIDInput = document.querySelector("#device-id");
     const delayInput = document.querySelector("#delay-time");
     const apiKeyInput = document.querySelector("#api-key");
@@ -280,9 +299,14 @@
     let deviceID = "";
     let delay = "";
     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)
+    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 = () => {
       if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID")) {
@@ -329,16 +353,15 @@
       gotoMainScreen();
       });
 
-    unlockButton.addEventListener("click", function () {
-      alert("unlock");
-      });
+    unlockButton.addEventListener("click", unlockDoor(deviceID, apiKey, 0));
       
     delayUnlockButton.addEventListener("click", function () {
-      alert("delay unlock");
+      messageContainer.innerHTML = "Delay Unlock";
       });
 
     document.body.onload = setSettings;
-
+    let date = new Date();
+    messageContainer.innerHTML = date.toLocaleDateString();
   </script>
 </body>