Compare commits
No commits in common. "qr" and "master" have entirely different histories.
File diff suppressed because one or more lines are too long
20
qr.html
20
qr.html
|
|
@ -1,20 +0,0 @@
|
|||
<!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>
|
||||
21
qr.js
21
qr.js
|
|
@ -1,21 +0,0 @@
|
|||
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);
|
||||
27
script.js
27
script.js
|
|
@ -1,6 +1,5 @@
|
|||
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");
|
||||
|
|
@ -8,8 +7,6 @@
|
|||
|
||||
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");
|
||||
|
||||
|
|
@ -56,18 +53,14 @@
|
|||
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");
|
||||
}
|
||||
displayUnlockMessage(data.message);
|
||||
return;
|
||||
})
|
||||
.catch(error => messageContainer.innerHTML = `Error: ${error}`)
|
||||
}
|
||||
|
||||
const setSettings = () => {
|
||||
if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID") && sessionStorage.getItem("fromQr") !== "1") {
|
||||
if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID")) {
|
||||
apiKey = localStorage.getItem("apiKey");
|
||||
deviceID = localStorage.getItem("deviceID");
|
||||
if (localStorage.getItem("delay")) {
|
||||
|
|
@ -80,11 +73,6 @@
|
|||
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();
|
||||
}
|
||||
}
|
||||
|
|
@ -96,24 +84,17 @@
|
|||
mainScreen.style.left = "-100%";
|
||||
}
|
||||
|
||||
const gotoMainScreen = () => {
|
||||
const gotoMainScreen = () => {
|
||||
closeSettingScreenButton.style.display = "none";
|
||||
openSettingScreenButton.style.display = "block";
|
||||
mainScreen.style.left = "0";
|
||||
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);
|
||||
|
|
|
|||
25
style.css
25
style.css
|
|
@ -71,19 +71,10 @@
|
|||
/* border: 1px solid blue; */
|
||||
|
||||
}
|
||||
|
||||
.qr-screen {
|
||||
/* left: 100%; */
|
||||
transition: all, .3s;
|
||||
}
|
||||
|
||||
#reader {
|
||||
border: 3px solid blue;
|
||||
width: 500px;
|
||||
}
|
||||
/* .settings-form h1 { */
|
||||
|
||||
/* .settings-form h1 { */
|
||||
/* text-align: center; */
|
||||
/* } */
|
||||
}
|
||||
|
||||
.settings-form ul {
|
||||
position: relative;
|
||||
|
|
@ -121,7 +112,7 @@
|
|||
}
|
||||
|
||||
.settings-form button {
|
||||
min-width: 100px;
|
||||
width: 100px;
|
||||
padding: .5em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -138,13 +129,7 @@
|
|||
|
||||
.settings-form button:active {
|
||||
background-color: green;
|
||||
/*width: 96px;*/
|
||||
}
|
||||
|
||||
#reader {
|
||||
/* position: absolute; */
|
||||
height: 500px;
|
||||
display: none;
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
</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>
|
||||
|
|
@ -45,8 +46,9 @@
|
|||
|
||||
|
||||
<!-- 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>
|
||||
|
|
@ -62,14 +64,12 @@
|
|||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue