diff --git a/script.js b/script.js index 56d31f7..e0aba64 100644 --- a/script.js +++ b/script.js @@ -15,19 +15,46 @@ 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"; - -// make fetch function that calls cgi script with attributes (device id, api key, delay) + + 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 = "green"; + 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 => { - setTimeout(function() { messageContainer.innerHTML = "" }, 3000); - messageContainer.innerHTML = data.message; - return; + displayUnlockMessage(data.message); + return; }) .catch(error => messageContainer.innerHTML = `Error: ${error}`) } @@ -82,5 +109,3 @@ delayUnlockButton.addEventListener("click", (e) => unlockDoor(e, deviceID, apiKey, delay)); document.body.onload = setSettings; - let date = new Date(); - messageContainer.innerHTML = date.toLocaleDateString(); diff --git a/style.css b/style.css index 5014056..b0f6bce 100644 --- a/style.css +++ b/style.css @@ -142,17 +142,14 @@ } #message-container { - border: 3px solid blue; position: absolute; text-align: center; width: 100vw; + background: #FF8800; bottom: 50vh; font-size: 2em; -/* border-radius: 56px; */ -/* height: 300px; */ -/* width: 300px; */ -/* margin-left: auto; */ -/* margin-right: auto; */ + padding: .5em; + display: none; } #button-block {