added QR functionality

1fffdb0c · Rhys Nute · 290d61c0 · 1fffdb0c · 1fffdb0c · 1fffdb0c
Commit 1fffdb0c authored 1 year ago by Rhys Nute
--- a/src/main/resources/static/css/qrstyle.css
+++ b/src/main/resources/static/css/qrstyle.css
+/*style sheet for QR code - R Nute*/
+body {
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    box-sizing: border-box;
+    text-align: center;
+    background: rgb(84 33 128 / 66%);
+}
+.container {
+    width: 100%;
+    max-width: 500px;
+    margin: 5px;
+}
+.container h1 {
+    color: rgb(84 33 128);
+}
+.section {
+    background-color: rgb(84 33 128);
+    padding: 50px 30px;
+    border: 2px solid #b2b2b2;
+    border-radius: 0.5em;
+    box-shadow: 0 20px 25px rgba(0, 0, 0, 30);
+}
+#qr-code-reader {
+    padding: 20px !important;
+    border: 2px solid #b2b2b2 !important;
+    border-radius: 10px;
+}
+#qr-code-reader img[alt="Information icon"] {
+    display: none;
+}
+#qr-code-reader img[alt="QR Code Scan"] {
+    width: 100px !important;
+    height: 100px !important;
+}
+button {
+    padding: 15px 25px;
+    border: 2px solid #b2b2b2;
+    outline: none;
+    border-radius: 0.5em;
+    color: grey;
+    font-size: 25px;
+    cursor: default;
+    margin-top: 20px;
+    margin-bottom: 15px;
+    background-color: rgb(84 33 128);
+    transition: 0.5s background-color;
+}
+button:hover {
+    background-color: rgb(84 33 128);
+}
+#html-qrcode-scan-type-change {
+    text-decoration: none !important;
+    color: #1d9bf0;
+}
+stickers {
+    width: 100% !important;
+    border: 2px solid #b2b2b2 !important;
+    border-radius: 0.5em;
+}
--- a/src/main/resources/static/qr-scanner.html
+++ b/src/main/resources/static/qr-scanner.html
+<!--setup html page for QR codes - R Nute-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewpoint" content="width-device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="qrstyle.css">
+    <title>QR Code</title>
+    <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
+    <script src="scripts/qr-script.js" class="domReady" type="text/javascript"></script>
+</head>
+<body>
+    <div class="container">
+        <h1>Scan location QR code</h1>
+        <div class="section">
+            <div id="qr-code-reader">
+            </div>
+        </div>
+    </div>
+</body>
+</html>
--- a/src/main/resources/static/scripts/qr-script.js
+++ b/src/main/resources/static/scripts/qr-script.js
+//qr-script file - R Nute
+import {Html5QrcodeScanner} from "html5-qrcode";
+import {Html5Qrcode} from "html5-qrcode";
+function domReady(fn){
+    if (
+        document.readyState === "complete" ||
+        document.readyState === "interactive"
+    ){
+        setTimeout(fn, 1000);
+    } else {
+        document.addEventListener("DOMContentLoaded", fn);
+    }
+}
+domReady(function (){
+    //if QR code found
+    function onQRSuccess(decodeText, decodeResult){
+        alert("You have collected: " + decodeText, decodeResult);
+    }
+let htmlscanner = new Html5QrcodeScanner(
+    "qr-code-reader",
+    { fps: 10, qrbos: 250}
+)
+    htmlscanner.render(onQRSuccess);
+});