bryan
/
DoorControl-Frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: bryan:qr
Branches Tags
bryan:qr
bryan:master
..
compare: bryan:master
Branches Tags
bryan:qr
bryan:master

No commits in common. "qr" and "master" have entirely different histories.
qr ... master

6 changed files with 13 additions and 95 deletions
Show Stats Expand all files Collapse all files

7
html5-qrcode.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
qr.html
View File

@ -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
View File

@ -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
View File

@ -1,6 +1,5 @@
const openSettingScreenButton = document.querySelector("#open-setting-screen-button"); const openSettingScreenButton = document.querySelector("#open-setting-screen-button");
const closeSettingScreenButton = document.querySelector("#close-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 saveSettingsButton = document.querySelector("#save-settings-button");
const delayUnlockButton = document.querySelector("#delay-unlock-button"); const delayUnlockButton = document.querySelector("#delay-unlock-button");
@ -8,8 +7,6 @@
const settingScreen = document.querySelector(".setting-screen"); const settingScreen = document.querySelector(".setting-screen");
const mainScreen = document.querySelector(".main-screen"); const mainScreen = document.querySelector(".main-screen");
const qrScreen = document.querySelector(".qr-screen");
const qrReader = document.querySelector("#reader");
const messageContainer = document.querySelector("#message-container"); const messageContainer = document.querySelector("#message-container");
@ -56,18 +53,14 @@
fetch(`${unlockUrl}?deviceID=${dID}&apiKey=${aK}&delay=${d}`) fetch(`${unlockUrl}?deviceID=${dID}&apiKey=${aK}&delay=${d}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.error !== "running") { displayUnlockMessage(data.message);
displayUnlockMessage(data.message);
} else {
console.log("already running");
}
return; return;
}) })
.catch(error => messageContainer.innerHTML = `Error: ${error}`) .catch(error => messageContainer.innerHTML = `Error: ${error}`)
} }
const setSettings = () => { const setSettings = () => {
if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID") && sessionStorage.getItem("fromQr") !== "1") { if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID")) {
apiKey = localStorage.getItem("apiKey"); apiKey = localStorage.getItem("apiKey");
deviceID = localStorage.getItem("deviceID"); deviceID = localStorage.getItem("deviceID");
if (localStorage.getItem("delay")) { if (localStorage.getItem("delay")) {
@ -80,11 +73,6 @@
delayInput.value = delay; delayInput.value = delay;
showDelay.innerHTML = `${delay}s`; showDelay.innerHTML = `${delay}s`;
} else { } else {
if (sessionStorage.getItem("fromQr") === "1" && sessionStorage.getItem("apiKeyInput") ) {
sessionStorage.setItem("fromQr", "0");
apiKeyInput.value = sessionStorage.getItem("apiKeyInput");
}
gotoSettingScreen(); gotoSettingScreen();
} }
} }
@ -96,24 +84,17 @@
mainScreen.style.left = "-100%"; mainScreen.style.left = "-100%";
} }
const gotoMainScreen = () => { const gotoMainScreen = () => {
closeSettingScreenButton.style.display = "none"; closeSettingScreenButton.style.display = "none";
openSettingScreenButton.style.display = "block"; openSettingScreenButton.style.display = "block";
mainScreen.style.left = "0"; mainScreen.style.left = "0";
settingScreen.style.left = "100%"; settingScreen.style.left = "100%";
} }
const scanQr = () => {
window.location.replace("qr.html");
}
openSettingScreenButton.addEventListener("click", gotoSettingScreen); openSettingScreenButton.addEventListener("click", gotoSettingScreen);
closeSettingScreenButton.addEventListener("click", gotoMainScreen); closeSettingScreenButton.addEventListener("click", gotoMainScreen);
scanQrButton.addEventListener("click", scanQr);
// Save settings button // Save settings button
saveSettingsButton.addEventListener("click", function() { saveSettingsButton.addEventListener("click", function() {
localStorage.setItem("deviceID", deviceIDInput.value); localStorage.setItem("deviceID", deviceIDInput.value);

25
style.css
View File

@ -71,19 +71,10 @@
/* border: 1px solid blue; */ /* border: 1px solid blue; */
} }
.qr-screen { /* .settings-form h1 { */
/* left: 100%; */
transition: all, .3s;
}
#reader {
border: 3px solid blue;
width: 500px;
}
/* .settings-form h1 { */
/* text-align: center; */ /* text-align: center; */
/* } */ }
.settings-form ul { .settings-form ul {
position: relative; position: relative;
@ -121,7 +112,7 @@
} }
.settings-form button { .settings-form button {
min-width: 100px; width: 100px;
padding: .5em; padding: .5em;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -138,13 +129,7 @@
.settings-form button:active { .settings-form button:active {
background-color: green; background-color: green;
/*width: 96px;*/ width: 96px;
}
#reader {
/* position: absolute; */
height: 500px;
display: none;
} }
h1 { h1 {

8
trigger.html
View File

@ -12,6 +12,7 @@
</head> </head>
<body> <body>
<nav class="app-bar"> <nav class="app-bar">
<button id="open-setting-screen-button"><img src="img/settings2.png"></button> <button id="open-setting-screen-button"><img src="img/settings2.png"></button>
<button id="close-setting-screen-button"><img src="img/home.png"></button> <button id="close-setting-screen-button"><img src="img/home.png"></button>
@ -45,8 +46,9 @@
<!-- Settings Screen --> <!-- Settings Screen -->
<section class="screen-container setting-screen"> <section class="screen-container setting-screen"">
<h1 class="app-bar">Settings</h1> <h1 class="app-bar">Settings</h1>
<form class="settings-form"> <form class="settings-form">
<ul> <ul>
<li> <li>
@ -62,14 +64,12 @@
<input type="number" min="0" id="delay-time" name="delayTime"> <input type="number" min="0" id="delay-time" name="delayTime">
</li> </li>
<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> <button type="button" id="save-settings-button" name="saveSettings">Save</button>
</li> </li>
</ul> </ul>
</form> </form>
</section> </section>
</body> </body>
</html> </html>