DoorControl-Frontend/script.js

    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");
    const unlockButton = document.querySelector("#unlock-button");
    
    const settingScreen = document.querySelector(".setting-screen");
    const mainScreen = document.querySelector(".main-screen");
    const qrScreen = document.querySelector(".qr-screen");
    const reader = document.querySelector("#reader");
    
    const messageContainer = document.querySelector("#message-container");
    
    const deviceIDInput = document.querySelector("#device-id");
    const delayInput = document.querySelector("#delay-time");
    const apiKeyInput = document.querySelector("#api-key");
    
    const showDelay = document.querySelector("#show-delay");
    
    const colorGreen = "#7FBD32";
    const colorOrange = "#FF8800";
    
    let deviceID = "";
    let delay = "";
    let apiKey = "";
    const unlockUrl = "https://ths.tnet.space/cgi-bin/unlock-main.cgi";
    
    function displayCountdownMessage(_delay) {
      let remainingSeconds = _delay;
      
      function displayCountdown() {
        messageContainer.style.background = colorOrange;
        messageContainer.style.display = "block";
        messageContainer.innerHTML = `Unlocking in ${remainingSeconds}s`;
        remainingSeconds -= 1;
        if (remainingSeconds < 1) {
          clearInterval(createCountdown);
        }
      }
      const createCountdown = setInterval(displayCountdown, 1000);
    }
    
    const displayUnlockMessage = (message) => {
      setTimeout(function() { messageContainer.innerHTML = ""; messageContainer.style.display = "none"; }, 3000);
      messageContainer.style.display = "block";
      messageContainer.style.background = colorGreen;
      messageContainer.innerHTML = message;
    }
    
    const unlockDoor = (e, dID, aK, d) => {
      if (d > 0 ) {
        displayCountdownMessage(d);  
      }
      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")) {
        apiKey = localStorage.getItem("apiKey");
        deviceID = localStorage.getItem("deviceID");
        if (localStorage.getItem("delay")) {
          delay = localStorage.getItem("delay");
        } else {
          delay = 0;
        }
        apiKeyInput.value = apiKey;
        deviceIDInput.value = deviceID;
        delayInput.value = delay;
        showDelay.innerHTML = `${delay}s`;
      } else {
      gotoSettingScreen();
      }
    }

    const gotoSettingScreen = () => {
      openSettingScreenButton.style.display = "none";
      closeSettingScreenButton.style.display = "block";
      settingScreen.style.left = "0";
      mainScreen.style.left = "-100%";
      }
      
     const gotoMainScreen = () => {
      closeSettingScreenButton.style.display = "none";
      openSettingScreenButton.style.display = "block";
      mainScreen.style.left = "0";
      settingScreen.style.left = "100%";
      }
     
     
     const scanQr = () => {       
       settingScreen.style.left = "-100%";
       mainScreen.style.left = "-200%";
       qrScreen.style.left = "0";
       
       console.log("qr reader");
       
       function onScanSuccess(qrMessage) {
         apiKeyInput.value = qrMessage;
         console.log(`QR = ${qrMessage}`);
         html5QrcodeScanner.clear();
       }
    
       function onScanFailure(qrMessage) {
          console.log(`QR error = $(error)`);
       }
       
       let html5QrcodeScanner = new Html5QrcodeScanner(
             "reader", { fps: 10, qrbox: 250 }, /* verbose= */ true);
       
       html5QrcodeScanner.render(onScanSuccess, onScanFailure);
       
     }
    
    openSettingScreenButton.addEventListener("click", gotoSettingScreen);
      
    closeSettingScreenButton.addEventListener("click", gotoMainScreen);

    scanQrButton.addEventListener("click", scanQr);
    
//  Save settings button
    saveSettingsButton.addEventListener("click", function() {
      localStorage.setItem("deviceID", deviceIDInput.value);
      localStorage.setItem("delay", delayInput.value);
      localStorage.setItem("apiKey", apiKeyInput.value);
      setSettings();
      gotoMainScreen();
      });

    unlockButton.addEventListener("click", (e) => unlockDoor(e, deviceID, apiKey, 0));
      
    delayUnlockButton.addEventListener("click", (e) => unlockDoor(e, deviceID, apiKey, delay));

    document.body.onload = setSettings;