diff --git a/build.gradle b/build.gradle
index 35e48fec6bee2b4ae45087f8df5749a71edb9edb..57fb1434879e743256de069ce00e844c2c4dc68f 100644
--- a/build.gradle
+++ b/build.gradle
@@ -24,7 +24,8 @@ repositories {
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
- compileOnly 'org.projectlombok:lombok'
+ testImplementation 'org.projectlombok:lombok:1.18.28'
+ compileOnly 'org.projectlombok:lombok'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
annotationProcessor 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
diff --git a/src/main/java/Team5/SmartTowns/trails/Trail.java b/src/main/java/Team5/SmartTowns/trails/Trail.java
new file mode 100644
index 0000000000000000000000000000000000000000..81a8298177efc622eafff53e297eda6600cf5dd1
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/trails/Trail.java
@@ -0,0 +1,39 @@
+package Team5.SmartTowns.trails;
+
+import lombok.Data;
+
+import java.io.File;
+import java.util.List;
+
+@Data
+public class Trail {
+ public static List<Trail> trails = List.of(
+ new Trail(1,"Caerphilly Castle Trail", "Take a stroll through the grounds of one of Europe's finest historic buildings and you will see stunning views of the castle and the lakes. The route of the trail is marked with eight special circular markers, which depict various fascinating historical facts relating to the castle. Pupils from Ysgol Gynradd Gymraeg Caerffili, Plasyfelin Junior School, Ysgol Y Castell and Twyn Primary worked with the artist to come up with the different designs. You do not need to pay to go in the castle to complete this trail. This Trail is fairly short at 1.5 miles and very suitable for wheelchairs and pushchairs as the route stays mostly on well-marked and ramped paths with just a couple of short diversions onto grassed areas."),
+ new Trail(2,"Trail2", "This is trail two"),
+ new Trail(3,"Trail3", "This is trail three"),
+ new Trail(4,"Trail4", "This is trail four"),
+ new Trail(5,"Trail5", "EDITING THIS")
+ );
+ int id;
+ String name;
+ String description;
+ int nLandmarks;
+ int difficulty; //1-5
+ String imgPath;
+
+ public Trail(int id, String name, String description) {
+ this.id = id;
+ this.name = name;
+ this.description = description;
+ imgPath = findImagePath();
+ }
+
+ private String findImagePath(){
+ /* Finds the image in the Path folder, if image is not found assigns default image */
+ String imgPath = "images/trails/trail" + id + ".jpg";
+ String notFoundPath = "images/trails/trailNotFound.jpg";
+
+ File imgFile = new File("src/main/resources/static/" + imgPath);
+ return imgFile.exists() ? imgPath : notFoundPath;
+ }
+}
diff --git a/src/main/java/Team5/SmartTowns/trails/TrailsController.java b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
new file mode 100644
index 0000000000000000000000000000000000000000..e78b8f721fcd7852db7bbd7b549d66c10ed09248
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
@@ -0,0 +1,38 @@
+package Team5.SmartTowns.trails;
+
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+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.bind.annotation.RequestMethod;
+import org.springframework.web.servlet.ModelAndView;
+
+import java.util.ArrayList;
+import java.util.List;
+
+@Controller
+public class TrailsController {
+ @GetMapping("/allTrails")
+ public ModelAndView getAllTrails(){
+ ModelAndView mav = new ModelAndView("allTrails/allTrails");
+ mav.addObject("trails", Trail.trails); //Mock data for trails
+ return mav;
+ }
+ @RequestMapping(value="/id", method=RequestMethod.POST)
+ public String sendHtmlFragment(Model map) {
+ map.addAttribute("foo", "bar");
+ return "allTrails/allTrails";
+ }
+
+ @GetMapping("/allTrails/{id}")
+ public ModelAndView getResultBySearchKey(@PathVariable int id)
+ {
+ List<Trail> trailList= Trail.trails;//results from db
+ ModelAndView mv= new ModelAndView("fragments/allTrailsFrags :: trailSection");
+ mv.addObject("trail", trailList.get(id-1));
+
+ return mv;
+ }
+}
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
new file mode 100644
index 0000000000000000000000000000000000000000..1b441111518afb14cea3c1d1debe553ad32d941f
--- /dev/null
+++ b/src/main/resources/static/css/allTrails.css
@@ -0,0 +1,121 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ background-color: rgb(41, 41, 41);
+ margin: 0;
+}
+main {
+}
+.centerFlex {
+ display: flex;
+ justify-content: center;
+}
+#allTrailsBar {
+ padding:0;
+ max-width: 80%;
+ height: 11svh;
+ margin: 1svh auto;
+ display: flex;
+ justify-content: space-between;
+ /*border-bottom: solid grey 2px;*/
+ /*border-top: solid grey 4px;*/
+
+}
+.trailsImages {
+ margin: auto;
+ height: 10svh;
+ width: 10svh;
+ border-radius: 20px;
+ border: solid grey 2px;
+ transition: 0.5s ease-out 100ms;
+
+}
+.trailsImages:hover {
+ box-shadow: 0 0 20px 10px #bbbb00;
+ transform: scale(1.2,1.2);
+ !important; overflow: visible;
+}
+
+.selected {
+ box-shadow: 0 0 20px 10px #bbbb00;
+}
+@keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+main {
+ margin: 0;
+}
+
+#trailInfoContainer {
+ margin: auto;
+ width: 95svw;
+ min-height: 40svh;
+ min-width: 30svw;
+}
+
+.trailInfoFrag {
+ background-color: rgb(84, 33, 128);
+ border: #000000 solid 2px;
+ border-radius: 10px;
+ box-shadow: 0 5px 20px 0 #000000;
+ margin:0;
+ padding:0;
+ animation: fadeIn 3s;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ min-width: 30svh;
+
+ & h1 {
+ color: white;
+ grid-area: header;
+ margin: 10px 25%;
+ font-size: xx-large;
+ text-align: center;
+ border-bottom: #1e1e1e solid 2px;
+ }
+}
+
+#trailFragContent {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ overflow: hidden;
+ min-height: 40svh;
+ max-height: 60svh;
+
+ & img {
+ border-radius: 10px;
+ border: black solid 1px;
+ margin: 1%;
+ flex: 1 1;
+
+ min-width: 20%;
+ max-width: 40%;
+ min-height: 20svh;
+ max-height: 90%;
+ overflow: hidden;
+ }
+ & p {
+ color: white;
+ flex: 1 1;
+ padding: 5%;
+ width: 60%;
+ border-left: solid darkgrey 2px;
+ font-size: x-large;
+ text-align: justify;
+ text-justify: inter-character;
+ line-height: 1.5;
+ }
+}
+
+header {
+ box-shadow: #1e1e1e 0 0 10px 10px;
+}
+
+footer {
+ position: relative;
+ bottom: 0;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/images/trails/trail1.jpg b/src/main/resources/static/images/trails/trail1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8b2411d1083639471dc6501d8a921d6ea4dbcd5c
Binary files /dev/null and b/src/main/resources/static/images/trails/trail1.jpg differ
diff --git a/src/main/resources/static/images/trails/trail2.jpg b/src/main/resources/static/images/trails/trail2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..31e14eae5ac6e1132c33b7161dc2bc5e30c90dcf
Binary files /dev/null and b/src/main/resources/static/images/trails/trail2.jpg differ
diff --git a/src/main/resources/static/images/trails/trail3.jpg b/src/main/resources/static/images/trails/trail3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..84763490556a7e758d2d56e8b649e051bd7a770d
Binary files /dev/null and b/src/main/resources/static/images/trails/trail3.jpg differ
diff --git a/src/main/resources/static/images/trails/trail4.jpg b/src/main/resources/static/images/trails/trail4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c2b43e3a3488a4b4c7105948c4a9903bd15915e0
Binary files /dev/null and b/src/main/resources/static/images/trails/trail4.jpg differ
diff --git a/src/main/resources/static/images/trails/trailNotFound.jpg b/src/main/resources/static/images/trails/trailNotFound.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dc106d5033650fe232b4f01d8914a163c4462c75
Binary files /dev/null and b/src/main/resources/static/images/trails/trailNotFound.jpg differ
diff --git a/src/main/resources/static/scripts/allTrails.js b/src/main/resources/static/scripts/allTrails.js
new file mode 100644
index 0000000000000000000000000000000000000000..0e5132a7453bee04a1eed08dbcdb5401a68b72f7
--- /dev/null
+++ b/src/main/resources/static/scripts/allTrails.js
@@ -0,0 +1,18 @@
+function updateOutputTrail(id) {
+ /* Updates the trail being shown on screen to the one requested by ID */
+ $.get("/allTrails/" + id).done(function (fragment) {
+ $("#trailInfoContainer").html(fragment)
+ });
+ updateSelectedTrail(id);
+}
+function updateSelectedTrail(id) {
+ /* Updates the trail bar, so that it highlights the selected trail */
+ let list = document.getElementsByClassName('trailsImages')
+ for (let i = 0; i < list.length; i++) {
+ if (list[i].classList.contains('selected')) {
+ list[i].classList.remove('selected')
+ break
+ }
+ }
+ document.getElementById("img" + id).classList.add("selected")
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
new file mode 100644
index 0000000000000000000000000000000000000000..669020d15507bfcaeb8ca959df108269222ba8ec
--- /dev/null
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>All Trails</title>
+ <link rel="stylesheet" th:href="@{css/allTrails.css}">
+ <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+<body>
+
+<header th:replace="~{/towns/Templating.html :: header}"></header>
+
+<main>
+ <section id="allTrailsBar" class="centerFlex">
+ <img class="trailsImages"
+ th:each="trail : ${trails}"
+ th:src="@{${trail.getImgPath()}}"
+ th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'"
+ th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
+ >
+ </section>
+
+ <section id="trailInfoContainer">
+ <h1 class="centerFlex">Please select your trail</h1>
+ <!--Loaded from thymeleaf-->
+ </section>
+
+</main>
+<footer th:insert="~{/towns/Templating.html :: footer}"></footer>
+
+
+<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/allTrailsFrags.html b/src/main/resources/templates/fragments/allTrailsFrags.html
new file mode 100644
index 0000000000000000000000000000000000000000..fc4da1492b07e6d7f3004a95554aeae13cf58bcb
--- /dev/null
+++ b/src/main/resources/templates/fragments/allTrailsFrags.html
@@ -0,0 +1,11 @@
+<article th:fragment="trailSection" class="trailInfoFrag">
+ <h1 th:text="${trail.getName()}"></h1>
+
+ <div id="trailFragContent">
+ <img th:src="@{${trail.getImgPath()}}" th:alt="${trail.getName()} ">
+ <p th:text="${trail.getDescription()}"></p>
+ </div>
+
+
+ <!--TODO add more to this fragment and then add styling to it-->
+</article>
diff --git a/src/main/resources/templates/fragments/temp_frags.html b/src/main/resources/templates/fragments/temp_frags.html
index e2bd9778aceb58a6d3327e459f9e19baa4e29f47..03efad3ee73e973e0faf7401b7d3b0de2e1578e4 100644
--- a/src/main/resources/templates/fragments/temp_frags.html
+++ b/src/main/resources/templates/fragments/temp_frags.html
@@ -18,19 +18,6 @@
</ul>
</footer>
-<article class="trailInfo" th:fragment="trailInfo1">
- <h1 class="titleH1">Trail Info</h1>
- <p class="trailInfoTxt">Lorem ipsum dolor sit amet,
- consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi
- ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
-</article>
-<article id="trailInfoBox" class="trailInfo" th:fragment="trailInfo2">
- <h1 class="titleH1">Trail Info</h1>
- <p class="trailInfoTxt">TESTTESTETSTESdent, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+<article class="trailInfo" th:fragment="trailInfo2">
+ <h1 class="titleH1" th:text="${trail.name}">Trail Info</h1>
</article>
\ No newline at end of file