diff --git a/build.gradle b/build.gradle
index de322fceebe23864820f63c414daeb1dcbe1c391..599ec4e190a93e02619c1bf621754de5cd0e6e9b 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/Webpages/WebpageController.java b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
index 612aa55309408aaf2b59e3e84d768617f71c108d..c9df9c7de432dd6b4f64ca6d7011141265c54d75 100644
--- a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
+++ b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
@@ -1,12 +1,17 @@
package Team5.SmartTowns.Webpages;
+
+import Team5.SmartTowns.trails.Trail;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.stereotype.Controller;
+
+import static Team5.SmartTowns.trails.Trail.trails;
+
@Controller
public class WebpageController {
@GetMapping("/Caerleon")
@@ -41,4 +46,6 @@ public class WebpageController {
+
+
}
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..be2d5aaa9966d91a80d43dce3e3b1107d0250b4b
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/trails/Trail.java
@@ -0,0 +1,26 @@
+package Team5.SmartTowns.trails;
+
+import lombok.Data;
+
+import java.util.List;
+
+@Data
+public class Trail {
+ public static List<Trail> trails = List.of(
+ new Trail(1,"Trail1", "This is trail one"),
+ new Trail(2,"Trail2", "This is trail two"),
+ new Trail(3,"Trail3", "This is trail three"),
+ new Trail(4,"Trail4", "This is trail four")
+ );
+ int id;
+ String name;
+ String description;
+ int nLandmarks;
+ int difficulty; //1-5
+
+ public Trail(int id, String name, String description) {
+ this.id = id;
+ this.name = name;
+ this.description = description;
+ }
+}
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..0e5f2192d0994c43b91a47fd25bff9c69008b20a
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
@@ -0,0 +1,24 @@
+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.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.servlet.ModelAndView;
+
+@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";
+ }
+}
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
new file mode 100644
index 0000000000000000000000000000000000000000..b718322edf0e13dbade9014b60f080ea44ef7cec
--- /dev/null
+++ b/src/main/resources/static/css/allTrails.css
@@ -0,0 +1,35 @@
+.flexList {
+ display: flex;
+ list-style: none;
+ width: 100%;
+ padding-left:0;
+ margin-left:0;
+ justify-content: center;
+}
+
+.listButton {
+ flex: 1 1;
+ display: flex;
+ text-align: center;
+}
+
+.listA{
+ flex: 1 1;
+ background-color: black;
+ color: white;
+ padding: 10px;
+
+}
+.listA:hover{
+ background-color: #656565;
+ color: white;
+
+}
+.selected {
+ color: red;
+}
+
+.trailInfoBox {
+ opacity: 0;
+}
+
diff --git a/src/main/resources/static/scripts/allTrails.js b/src/main/resources/static/scripts/allTrails.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea21bb4e80f8301b542c6410dd3a5bee8f4ed64a
--- /dev/null
+++ b/src/main/resources/static/scripts/allTrails.js
@@ -0,0 +1,2 @@
+
+/* Functions taken from https://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css*/
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
new file mode 100644
index 0000000000000000000000000000000000000000..903ebcd44052fb521fe056b167d3a01ae44248f8
--- /dev/null
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>All Trails</title>
+ <link rel="stylesheet" th:href="@{css/allTrails.css}">
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+<body>
+
+<header>
+ <ul class="flexList">
+ <li class="listButton" th:each="trail : ${trails}">
+ <a class="listA" th:onclick="'update(' + ${trail.id} + ');'" th:id="'li' + ${trail.id}" th:text="${trail.name}"></a>
+ </li>
+ </ul>
+</header>
+
+<main>
+ <section class="trailInfoBox" th:each="trail : ${trails}" th:id="${trail.id}">
+ <h1 th:text="${trail.description}"></h1>
+ </section>
+
+
+
+</main>
+
+
+<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
+<script th:inline="javascript">
+ function fade(element) {
+ var op = 1; // initial opacity
+ var timer = setInterval(function () {
+ if (op <= 0.1){
+ clearInterval(timer);
+ element.style.display = 'none';
+ }
+ element.style.opacity = op;
+ element.style.filter = 'alpha(opacity=' + op * 100 + ")";
+ op -= op * 0.1;
+ }, 50);
+ }
+
+ function unfade(element) {
+ var op = 0.1; // initial opacity
+ element.style.display = 'block';
+ var timer = setInterval(function () {
+ if (op >= 1){
+ clearInterval(timer);
+ }
+ element.style.opacity = op;
+ element.style.filter = 'alpha(opacity=' + op * 100 + ")";
+ op += op * 0.1;
+ }, 10);
+ }
+ async function update(id){
+ await updateTrailInfo(id);
+ selectTrail('li' + id);
+ }
+ async function updateTrailInfo(id){
+ let blocks = document.getElementsByClassName('trailInfoBox');
+ let clicked = document.getElementById(id);
+ let active = null;
+ for (let i = 0; i < blocks.length; i++) {
+ if (blocks[i].style.display === 'block') {
+ active = blocks[i];
+ }
+ }
+ if (active == null) {
+ unfade(clicked)
+ } else if (active !== clicked) {
+ fade(active);
+ unfade(clicked)
+ }
+
+ }
+ function selectTrail(string) {
+ let listEl = document.getElementsByClassName('listA')
+ for (let i = 0; i < listEl.length; i++) {
+ listEl[i].classList.remove('selected')
+ }
+ document.getElementById(string).classList.add("selected")
+
+ }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/allTrails/oneTrail.html b/src/main/resources/templates/allTrails/oneTrail.html
new file mode 100644
index 0000000000000000000000000000000000000000..30d74d258442c7c65512eafab474568dd706c430
--- /dev/null
+++ b/src/main/resources/templates/allTrails/oneTrail.html
@@ -0,0 +1 @@
+test
\ No newline at end of file
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