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

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.
parent 72e65142
No related branches found
No related tags found
1 merge request!29Resolve "As a child, I want an interesting and exciting story based trail with obvious landmarks, so I can follow the trail with ease. (Outline Only)"
......@@ -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;
......
......@@ -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;
......
......@@ -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()
// }
}
......@@ -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;
}
......@@ -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>
......
<!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
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