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

Compare commits

merge into: bryan:master
Branches Tags
bryan:qr
bryan:master
...
pull from: bryan:qr
Branches Tags
bryan:qr
bryan:master

34 Commits
master ... qr

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
6 changed files with 95 additions and 13 deletions
Show Stats Expand all files Collapse all files

7
html5-qrcode.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

20
qr.html Normal file
View File

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

21
qr.js Normal file
View File

@ -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);

21
script.js
View File

@ -1,5 +1,6 @@
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");
@ -7,6 +8,8 @@
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");
@ -53,14 +56,18 @@
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")) { if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID") && sessionStorage.getItem("fromQr") !== "1") {
apiKey = localStorage.getItem("apiKey"); apiKey = localStorage.getItem("apiKey");
deviceID = localStorage.getItem("deviceID"); deviceID = localStorage.getItem("deviceID");
if (localStorage.getItem("delay")) { if (localStorage.getItem("delay")) {
@ -73,6 +80,11 @@
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();
} }
} }
@ -91,10 +103,17 @@
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);

21
style.css
View File

@ -72,9 +72,18 @@
} }
.qr-screen {
/* left: 100%; */
transition: all, .3s;
}
#reader {
border: 3px solid blue;
width: 500px;
}
/* .settings-form h1 { */ /* .settings-form h1 { */
/* text-align: center; */ /* text-align: center; */
} /* } */
.settings-form ul { .settings-form ul {
position: relative; position: relative;
@ -112,7 +121,7 @@
} }
.settings-form button { .settings-form button {
width: 100px; min-width: 100px;
padding: .5em; padding: .5em;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -129,7 +138,13 @@
.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 {

6
trigger.html
View File

@ -12,7 +12,6 @@
</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>
@ -46,9 +45,8 @@
<!-- 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>
@ -64,12 +62,14 @@
<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>