rework

2021-01-03 13:03:30 -06:00 · 2021-01-03 11:12:41 -06:00 · 2021-01-03 10:33:00 -06:00 · 2021-01-03 10:26:18 -06:00 · 2021-01-03 10:24:22 -06:00 · 2021-01-03 10:03:39 -06:00
6 changed files with 95 additions and 13 deletions
--- a/html5-qrcode.min.js
+++ b/html5-qrcode.min.js
--- a/qr.html
+++ b/qr.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Door Control</title>
+  <link rel="icon" href="/img/favicon.png" type="img/png">
+  <link rel="stylesheet" src="style.css">
+  <script defer src="html5-qrcode.min.js"></script>
+  <script defer src="qr.js"></script>
+</head>
+
+<body>
+   <div class="screen-container">
+     <div id="reader"></div>
+   </div>
+</body>
+
+</html>
--- a/qr.js
+++ b/qr.js
@ -0,0 +1,21 @@
+console.log("qr reader");
+
+sessionStorage.setItem("fromQr", "1");
+       
+function onScanSuccess(qrMessage) {
+    qrMessage = "hello";
+    sessionStorage.setItem = ("apiKeyInput", qrMessage);
+    console.log(`QR = ${qrMessage}`);
+    html5QrcodeScanner.clear();
+    window.location.replace("trigger.html");
+}
+    
+function onScanFailure(qrMessage) {
+    console.log(`QR error = $(error)`);
+}
+       
+let html5QrcodeScanner = new Html5QrcodeScanner(
+    "reader", { fps: 10, qrbox: 250 }, /* verbose= */ true);
+
+       
+html5QrcodeScanner.render(onScanSuccess, onScanFailure);
--- a/script.js
+++ b/script.js
@ -1,5 +1,6 @@
    const openSettingScreenButton = document.querySelector("#open-setting-screen-button");
    const closeSettingScreenButton = document.querySelector("#close-setting-screen-button");
+    const scanQrButton = document.querySelector("#scan-qr-button");
    const saveSettingsButton = document.querySelector("#save-settings-button");
    
    const delayUnlockButton = document.querySelector("#delay-unlock-button");
@ -7,6 +8,8 @@
    
    const settingScreen = document.querySelector(".setting-screen");
    const mainScreen = document.querySelector(".main-screen");
+    const qrScreen = document.querySelector(".qr-screen");
+    const qrReader = document.querySelector("#reader");
    
    const messageContainer = document.querySelector("#message-container");
    
@ -53,14 +56,18 @@
      fetch(`${unlockUrl}?deviceID=${dID}&apiKey=${aK}&delay=${d}`)
        .then(response => response.json())
        .then(data => { 
+              if (data.error !== "running") {
                displayUnlockMessage(data.message);
+              } else {
+                console.log("already running");
+              }
              return;
        })
        .catch(error => messageContainer.innerHTML = `Error: ${error}`)
      }

    const setSettings = () => {
-      if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID")) {
+      if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID") && sessionStorage.getItem("fromQr") !== "1") {
        apiKey = localStorage.getItem("apiKey");
        deviceID = localStorage.getItem("deviceID");
        if (localStorage.getItem("delay")) {
@ -73,6 +80,11 @@
        delayInput.value = delay;
        showDelay.innerHTML = `${delay}s`;
      } else {
+        if (sessionStorage.getItem("fromQr") === "1" && sessionStorage.getItem("apiKeyInput") ) {
+          sessionStorage.setItem("fromQr", "0");
+          apiKeyInput.value = sessionStorage.getItem("apiKeyInput");
+        }
+      
      gotoSettingScreen();
      }
    }
@ -91,10 +103,17 @@
      settingScreen.style.left = "100%";
      }
     
+     
+    const scanQr = () => {       
+      window.location.replace("qr.html");
+      }
+    
    openSettingScreenButton.addEventListener("click", gotoSettingScreen);
      
    closeSettingScreenButton.addEventListener("click", gotoMainScreen);

+    scanQrButton.addEventListener("click", scanQr);
+    
 //  Save settings button
    saveSettingsButton.addEventListener("click", function() {
      localStorage.setItem("deviceID", deviceIDInput.value);
--- a/style.css
+++ b/style.css
@ -72,9 +72,18 @@
      
      }
     
+     .qr-screen {
+/*        left: 100%; */
+       transition: all, .3s;
+     }
+     
+     #reader {
+       border: 3px solid blue;
+       width: 500px;
+    }
 /*   .settings-form h1 { */
 /*       text-align: center; */
-    }
+/*     } */
    
    .settings-form ul {
      position: relative;
@ -112,7 +121,7 @@
    }
    
    .settings-form button {
-      width: 100px;
+      min-width: 100px;
      padding: .5em;
      margin-left: auto;
      margin-right: auto;
@ -129,7 +138,13 @@
    
    .settings-form button:active {
      background-color: green;
-      width: 96px;
+      /*width: 96px;*/
+    }
+    
+    #reader {
+/*       position: absolute; */
+      height: 500px;
+      display: none;
    }
    
    h1 {
--- a/trigger.html
+++ b/trigger.html
@ -12,7 +12,6 @@
 </head>

 <body>
-
  <nav class="app-bar">
      <button id="open-setting-screen-button"><img src="img/settings2.png"></button>
      <button id="close-setting-screen-button"><img src="img/home.png"></button>
@ -46,9 +45,8 @@

    
    <!-- Settings Screen -->
-    <section class="screen-container setting-screen"">
+    <section class="screen-container setting-screen">
      <h1 class="app-bar">Settings</h1>
-
      <form class="settings-form">
        <ul>
          <li>
@ -64,12 +62,14 @@
            <input type="number" min="0" id="delay-time" name="delayTime">
          </li>
          <li>
+            <button type="button" id="scan-qr-button" name="scanQr">Scan QR</button>
            <button type="button" id="save-settings-button" name="saveSettings">Save</button>
          </li>
        </ul>
      </form>
    </section>

+    
 </body>

 </html>
Author	SHA1	Message	Date
Bryan	dd1c874c5b	rework	2021-01-03 13:03:30 -06:00
Bryan	f844ac623a	rework	2021-01-03 11:12:41 -06:00
Bryan	6957a0f04b	rework	2021-01-03 10:33:00 -06:00
Bryan	085364ebf8	rework	2021-01-03 10:26:18 -06:00
Bryan	4cd8db4312	rework	2021-01-03 10:24:22 -06:00
Bryan	4685cae579	debug	2021-01-03 10:03:39 -06:00
Bryan	f89680dc4a	debug	2021-01-03 10:01:01 -06:00
Bryan	67aad8572a	debug	2021-01-03 09:56:52 -06:00
Bryan	538db1386f	debug	2021-01-03 09:52:03 -06:00
Bryan	72bfef6bfe	debug	2021-01-03 09:49:54 -06:00
Bryan	43e9c16f35	debug	2021-01-03 09:44:55 -06:00
Bryan	737c2a6d03	debug	2021-01-03 09:40:23 -06:00
Bryan	1059fc00c7	debug	2021-01-03 09:29:06 -06:00
Bryan	51ff814bf5	rework	2021-01-03 09:24:04 -06:00
Bryan	38ba3bea39	debug	2021-01-03 09:01:16 -06:00
Bryan	272dba37cc	rework	2021-01-03 08:56:24 -06:00
Bryan	f4bea5bdb8	add qs.html to seperate out qr scanner	2021-01-03 00:55:02 -06:00
Bryan	1257afd749	debug	2021-01-03 00:17:07 -06:00
Bryan	48f6b2f7ee	debug	2021-01-03 00:11:02 -06:00
Bryan	b289df295c	debug	2021-01-03 00:03:18 -06:00
Bryan	5ea5217180	debug	2021-01-02 23:59:10 -06:00
Bryan	25b8171b14	debug	2021-01-02 23:57:16 -06:00
Bryan	86d20cfc8b	debug	2021-01-02 23:56:02 -06:00
Bryan	b1e2766ae0	debug	2021-01-02 23:45:25 -06:00
Bryan	9a9200ad00	debug	2021-01-02 23:39:14 -06:00
Bryan	ccaf13e7a8	debug	2021-01-02 23:30:55 -06:00
Bryan	047b168fe0	debug	2021-01-02 23:25:32 -06:00
Bryan	85bd03c042	debug	2021-01-02 23:23:33 -06:00
Bryan	6b5b9e602f	debug	2021-01-02 23:21:27 -06:00
Bryan	81acdfc89e	work on qr scanner	2021-01-02 23:03:30 -06:00
Bryan	68a31acbd3	work	2021-01-02 22:52:59 -06:00
Bryan	dd0cca4f52	progress	2021-01-02 22:47:11 -06:00
Bryan	30555313bd	add qr scan support	2021-01-02 22:31:11 -06:00
Bryan	5c2fc629d9	added qrcode scanner script	2021-01-02 20:19:36 -06:00