diff --git a/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java b/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
index 20ed064fb0ee0cb4f7903870d0523af2cd8e0d2a..3eb604a847ceb3eb660c521b178c9373c19f130a 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 e0af5fef775e471f5e6c4b42d7b6d2b7038e3e78..7536b6ced2bb9c6dc78e3f99aafbabf2d9627874 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 f4bdde6582dfb7f0dd8593cc1d8c19193d1726d3..911c1eee68df6f62112139cbd4810e943c16de87 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 972a236a3c842ea89c01a0651167ddd1443b900b..509c40efa6095d4f3e159fac6f0f60cea278a17f 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">