Set up landing page for Dragons Tale, intergrated Thymeleaf and related...

Set up landing page for Dragons Tale, intergrated Thymeleaf and related controllers. Applied simple CSS and JS button to redirect to a new URL. Need to set up a controller to support this redirect.

Set up landing page for Dragons Tale, intergrated Thymeleaf and related...
f48ff1dc · Connor Brock · 72e65142 · f48ff1dc · f48ff1dc · f48ff1dc
Commit f48ff1dc authored 1 year ago by Connor Brock
--- a/src/main/java/Team5/SmartTowns/Landmarks/Landmarks.java
+++ b/src/main/java/Team5/SmartTowns/Landmarks/Landmarks.java
@@ -18,11 +18,10 @@ public class Landmarks {
    // Initialized object to getID from trail.

    //Predefined Landmark for Dragons Tale.
-    public static List<Landmarks> landmarksDragonstrail = List.of(
+    private static List<Landmarks> landmarksDragonstrail = List.of(
            new Landmarks( 1, "A scent of...Dragon", "The Dragon has been spotted near by, find the QR code to continue" , "Start your discovery, at the sweet shop."),
            new Landmarks( 2, "They've been found!", "Don't let them escape, find the next QR code to continue!", "Location test")
    );
-
    private Integer trailID;
    private int landmarkID;
    @NotEmpty(message = "You must type in a username.")
@@ -34,6 +33,10 @@ public class Landmarks {
    private String landmarkLocation;
    private String landmarkPicture;

+    public static List<Landmarks> getLandmarksDragonstrail() {
+        return landmarksDragonstrail;
+    }
+
    // Constructor for List above.
    public Landmarks( int landmarkID, String landmarkName, String landmarkDescription, String landmarkLocation) {
        this.landmarkID = landmarkID;

--- a/src/main/java/Team5/SmartTowns/trails/Trail.java
+++ b/src/main/java/Team5/SmartTowns/trails/Trail.java
@@ -14,6 +14,7 @@ public class Trail {
            new Trail(4,"Trail4", "This is trail four"),
            new Trail(5,"A Dragon's Tale", "EDITING THIS")
    );
+
    int id;
    String name;
    String description;

--- a/src/main/java/Team5/SmartTowns/trails/TrailsController.java
+++ b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
@@ -13,7 +13,7 @@ import org.springframework.web.servlet.ModelAndView;
 import java.util.ArrayList;
 import java.util.List;

-import static Team5.SmartTowns.Landmarks.Landmarks.landmarksDragonstrail;
+import static Team5.SmartTowns.Landmarks.Landmarks.getLandmarksDragonstrail;

 @Controller
 public class TrailsController {
@@ -40,11 +40,21 @@ public class TrailsController {

    @GetMapping("/dragonstale")
    public ModelAndView getDragonsTale(){
-        List<Landmarks> landmarksList = landmarksDragonstrail;
+        List<Landmarks> landmarksList = getLandmarksDragonstrail();
+        Landmarks landmarks = new Landmarks();
+        int listSize = landmarksList.size();
        ModelAndView modelAndView = new ModelAndView("towns/trails/dragonstale/index");
        modelAndView.addObject("landmarksList", landmarksList);
+        modelAndView.addObject("getListSize", listSize);
        return modelAndView;
    }

+//    @GetMapping("/dragonstale/{landmarks}")
+//    public ModelAndView getDragonstaleLandmarks(){
+//        ModelAndView modelAndView = new ModelAndView();
+//        modelAndView.addObject()
+//    }
+
+
 }

--- a/src/main/resources/static/css/dragonstaless.css
+++ b/src/main/resources/static/css/dragonstaless.css
@@ -8,10 +8,19 @@
    background-color: #927BB7;
 }

-#homeimg.centre{
-    box-shadow: 100px -100px purple;
+.landmarkName{
+    font-weight: bold;
+    text-align: left;
+}
+
+.landmarkDesc{
+    font-style: italic;
+    text-align: left;
 }

 body{
-    background-color: #927BB7;
-}
\ No newline at end of file
+    background-color: #E8A87C;
+}
+
+
+
--- a/src/main/resources/static/scripts/qrCode.js
+++ b/src/main/resources/static/scripts/qrCode.js
--- a/src/main/resources/templates/towns/trails/dragonstale/index.html
+++ b/src/main/resources/templates/towns/trails/dragonstale/index.html
@@ -5,14 +5,16 @@
    <title>A Dragon's Tale</title>
    <link rel="stylesheet" th:href="@{/css/dragonstaless.css}">
    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+    <script src="./node_modules/html5-qrcode/html5-qrcode.min.js"></script>
 </head>
    <body>
        <header th:insert="towns/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">
            <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 (thymeleaf element) to discover a prize! </h2>
+            <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">
@@ -22,15 +24,28 @@
            </p>
        </div>

+
+        <!-- tabs -->
        <div class="centre">
-            <ul th:each="item : ${landmarksList}">
-                <p th:text="${item.landmarkName}"></p>
-                <p th:text="${item.landmarkDescription}"></p>
+            <h2>There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </h2>
+            <ul th:each="item : ${landmarksList}" id="tabBox">
+                <li>
+                    <a id="tabIdCounter" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a>
+                </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>
+
+        <!-- If use is starting their journey, this will display begin. If not, they'll continue their journey.  <span th:text="${beginOrContinue}"> -->
        <div class="centre">
-            <h3>Begin your hunt!</h3>
+            <h3>  Begin or Continue your hunt!</h3>
            <button type="button" id="begin">Click here!</button>
        </div>


--- a/src/main/resources/templates/towns/trails/welshhistory/welshhistory.html
+++ b/src/main/resources/templates/towns/trails/welshhistory/welshhistory.html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>The Roman Empire</title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file