Skip to content
Snippets Groups Projects
Commit 9fb3f345 authored by Connor Brock's avatar Connor Brock
Browse files

Converted QR code scanner into a fragment for later development, also removed...

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.
parent 150f273b
No related branches found
No related tags found
1 merge request!41Resolve "As a convenience enthusiast, I want a drop down menu to be able to quickly scan QR codes I find along my dragon trail so that I may continue on my adventure without disruption."
......@@ -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;
}
......
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
<!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
......@@ -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">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment