From 9fb3f3457dd5acc6e680753aeca187dd09fb1085 Mon Sep 17 00:00:00 2001
From: Connor <brockcc1@cardiff.ac.uk>
Date: Tue, 12 Dec 2023 03:22:03 +0000
Subject: [PATCH] Converted QR code scanner into a fragment for later
development, also removed in file script tag in index.html and converted to
externally call the neccessary function.
---
.../dragonstale/DragonsTaleController.java | 4 +--
src/main/resources/static/scripts/DTscript.js | 6 ++--
.../templates/dragonstale/index.html | 36 ++++++++-----------
.../qr-scanner.html | 2 +-
4 files changed, 19 insertions(+), 29 deletions(-)
rename src/main/resources/templates/{qrCodeScanner => fragments}/qr-scanner.html (94%)
diff --git a/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java b/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
index 20ed064f..3eb604a8 100644
--- a/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
+++ b/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
@@ -3,12 +3,10 @@ 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;
@@ -30,7 +28,7 @@ public class DragonsTaleController {
@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");
+ modelAndView = new ModelAndView("fragments/qr-scanner");
//Can we extract the pathvariable in a JS function?
return modelAndView;
}
diff --git a/src/main/resources/static/scripts/DTscript.js b/src/main/resources/static/scripts/DTscript.js
index e0af5fef..7536b6ce 100644
--- a/src/main/resources/static/scripts/DTscript.js
+++ b/src/main/resources/static/scripts/DTscript.js
@@ -1,3 +1,3 @@
-document.getElementById("qrCodeScanner").addEventListener("click", function (){
- window.location.href = "http://localhost:8080/QRScan";
-})
\ No newline at end of file
+var getQR = function (){
+ window.location.href = "/QRScan";
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/dragonstale/index.html b/src/main/resources/templates/dragonstale/index.html
index f4bdde65..911c1eee 100644
--- a/src/main/resources/templates/dragonstale/index.html
+++ b/src/main/resources/templates/dragonstale/index.html
@@ -1,23 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
+<head>
<meta charset="UTF-8">
<title>A Dragon's Tale</title>
<link rel="stylesheet" th:href="@{/css/dragonstaless.css}">
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
-<!-- <script defer src="../../static/scripts/DTscript.js"></script>-->
+ <script type="text/javascript" th:src="@{/scripts/DTscript.js}"></script>
</head>
<body>
<header th:insert="fragments/Templating.html :: header"></header>
<!-- As this predefined trail will be accessible from multiple different towns, this thymeleaf element will display the town the user is currently trying to access and display it accordingly. <span th:text="${townName}"> -->
- <div class="centre">
+ <div>
<h1> Welcome, to a dragon's tale! </h1>
<img th:src="@{/images/trails/dragonstalehome.png}" alt="Image of a dragon" id="homeimg">
<h2> Discover the mystery of the dragon, track its location and follow it throughout the town of to discover a prize! </h2>
</div>
- <div class="centre">
+ <div>
<p>
Adventurers... embark through mystical historical landmarks to ultimately discover the lair of the dragon.
Legend has it that within this ominous lair, mighty dragons, guardians of ancient wisdom and treasures untold lay....
@@ -25,39 +26,30 @@
</div>
- <!-- tabs -->
- <div class="centre">
- <h2>There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </h2>
+ <div class="dropdown">
+ <button class="dropdownButton">There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </button>
<ul th:each="item : ${landmarksList}" id="tabBox">
<li>
- <a id="tabIdCounter" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a>
-<!-- <button id="qrcodescanner">Click here to scan a QR code for <span th:text="${item.landmarkName}">Landmark Name Here</span></button>-->
+ <a id="#" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a>
+ <button id="qrCodeScanner" onclick="getQR()">Click here to scan a QR code for: <span th:text="${item.landmarkName}">Landmark Name Here</span></button>
</li>
</ul>
</div>
<!-- Need to mark each element to an ID then loop through them. -->
- <div class="centre" id="listOfLandmarks">
- <p th:each="item : ${landmarksList}">
- <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>
- </p>
- </div>
+<!-- <div id="listOfLandmarks">-->
+<!-- <p th:each="item : ${landmarksList}">-->
+<!-- <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>-->
+<!-- </p>-->
+<!-- </div>-->
- <!-- If use is starting their journey, this will display begin. If not, they'll continue their journey. <span th:text="${beginOrContinue}"> -->
- <div class="centre">
+ <div>
<h3> Begin or Continue your hunt!</h3>
<button type="button" id="begin">Click here!</button>
</div>
<div th:insert="fragments/Templating.html :: footer"></div>
- <script>
-
- document.getElementById("begin").addEventListener("click", function (){
- window.location.href = ("/dragonstale/landmarkone");
- })
-
- </script>
</body>
</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/qrCodeScanner/qr-scanner.html b/src/main/resources/templates/fragments/qr-scanner.html
similarity index 94%
rename from src/main/resources/templates/qrCodeScanner/qr-scanner.html
rename to src/main/resources/templates/fragments/qr-scanner.html
index 972a236a..509c40ef 100644
--- a/src/main/resources/templates/qrCodeScanner/qr-scanner.html
+++ b/src/main/resources/templates/fragments/qr-scanner.html
@@ -15,7 +15,7 @@
</head>
<body>
- <div class="container">
+ <div th:fragment="qrCode" class="container">
<h1>Scan location QR code</h1>
<div class="section">
<div id="qr-code-reader">
--
GitLab