From b278ab25b8e3e641ac84e3cedcfafcb106da0466 Mon Sep 17 00:00:00 2001
From: Connor <brockcc1@cardiff.ac.uk>
Date: Tue, 12 Dec 2023 01:59:56 +0000
Subject: [PATCH] Refactored QRScanner code, added a controller to direct to
the QRScanner and created a JS button to send the user to the QR url.
---
.../dragonstale/DragonsTaleController.java | 23 ++++++++++++++-
src/main/resources/static/qr-scanner.html | 29 -------------------
src/main/resources/static/scripts/DTscript.js | 3 ++
src/main/resources/static/scripts/qrCode.js | 0
.../templates/qrCodeScanner/qr-scanner.html | 27 +++++++++++++++++
5 files changed, 52 insertions(+), 30 deletions(-)
delete mode 100644 src/main/resources/static/qr-scanner.html
delete mode 100644 src/main/resources/static/scripts/qrCode.js
create mode 100644 src/main/resources/templates/qrCodeScanner/qr-scanner.html
diff --git a/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java b/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
index 74433f77..2bb14369 100644
--- a/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
+++ b/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
@@ -3,9 +3,12 @@ package Team5.SmartTowns.dragonstale;
import Team5.SmartTowns.landmarks.Landmarks;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
+import java.util.Optional;
import static Team5.SmartTowns.dragonstale.DragonsTale.landmarksDragonstrail;
@@ -13,15 +16,33 @@ import static Team5.SmartTowns.dragonstale.DragonsTale.landmarksDragonstrail;
@Controller
public class DragonsTaleController {
+ ModelAndView modelAndView;
@GetMapping("/dragonstale")
public ModelAndView getDragonsTale(){
List<Landmarks> landmarksList = landmarksDragonstrail;
- ModelAndView modelAndView = new ModelAndView("/dragonstale/index");
+ modelAndView = new ModelAndView("/dragonstale/index");
modelAndView.addObject("landmarksList", landmarksList);
return modelAndView;
}
+ @RequestMapping ("/QRScan") //In here, we could use trailID as a string variable and use it to track what trail the user clicked from.
+ public ModelAndView getQRScanner(){
+ modelAndView = new ModelAndView("qrCodeScanner/qr-scanner");
+ //Can we extract the pathvariable in a JS function?
+ return modelAndView;
+ }
+
+// @GetMapping("/{trailID}/QRScan") //In here, we could use trailID as a string variable and use it to track what trail the user clicked from.
+// public ModelAndView getQRScanner(@PathVariable Optional<Integer> trailID){
+// ModelAndView modelAndView = new ModelAndView("/dragonstale/index");
+// //Can we extract the pathvariable in a JS function?
+// return modelAndView;
+// }
+
+
+
+
// @GetMapping("dragonstale/{qrCode}/{id}")
// public String qrCodeCheck(@PathVariable Optional<String> qrCode, @PathVariable Optional<Integer> id){
// if (qrCode.isPresent()){
diff --git a/src/main/resources/static/qr-scanner.html b/src/main/resources/static/qr-scanner.html
deleted file mode 100644
index 2e93c18b..00000000
--- a/src/main/resources/static/qr-scanner.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--setup html page for QR codes - R Nute-->
-<!--Modified from (https://www.geeksforgeeks.org/create-a-qr-code-scanner-or-reader-in-html-css-javascript/)-->
-
-<!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="css/templatingstyle.css">
- <link rel="stylesheet" href="css/qrstyle.css">
- <script src="https://unpkg.com/html5-qrcode"></script>
- <script type="module" src="scripts/qr-script.js"></script>
- <title>QR Code</title>
-</head>
-
-<body>
- <header th:insert="towns/Templating.html :: header"></header>
-
- <div class="container">
- <h1>Scan location QR code</h1>
- <div class="section">
- <div id="qr-code-reader">
- </div>
- </div>
- </div>
-
- <div th:insert="towns/Templating.html :: footer"></div>
-</body>
-</html>
diff --git a/src/main/resources/static/scripts/DTscript.js b/src/main/resources/static/scripts/DTscript.js
index e69de29b..e0af5fef 100644
--- a/src/main/resources/static/scripts/DTscript.js
+++ b/src/main/resources/static/scripts/DTscript.js
@@ -0,0 +1,3 @@
+document.getElementById("qrCodeScanner").addEventListener("click", function (){
+ window.location.href = "http://localhost:8080/QRScan";
+})
\ No newline at end of file
diff --git a/src/main/resources/static/scripts/qrCode.js b/src/main/resources/static/scripts/qrCode.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/main/resources/templates/qrCodeScanner/qr-scanner.html b/src/main/resources/templates/qrCodeScanner/qr-scanner.html
new file mode 100644
index 00000000..972a236a
--- /dev/null
+++ b/src/main/resources/templates/qrCodeScanner/qr-scanner.html
@@ -0,0 +1,27 @@
+<!--setup html page for QR codes - R Nute-->
+<!--Modified from (https://www.geeksforgeeks.org/create-a-qr-code-scanner-or-reader-in-html-css-javascript/)-->
+
+<!DOCTYPE html>
+<html lang="en">
+<html xmlns:th="http://www.thymeleaf.org">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewpoint" content="width-device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/css/templatingstyle.css">
+ <link rel="stylesheet" href="/css/qrstyle.css">
+ <script src="https://unpkg.com/html5-qrcode"></script>
+ <script type="module" src="/scripts/qr-script.js"></script>
+ <title>QR Code</title>
+ </head>
+
+ <body>
+ <div class="container">
+ <h1>Scan location QR code</h1>
+ <div class="section">
+ <div id="qr-code-reader">
+ </div>
+ </div>
+ </div>
+
+ </body>
+</html>
--
GitLab