From 207756f97e5535ec950bc4fe5ec616f50ee12ad6 Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Tue, 28 Nov 2023 16:46:29 +0000
Subject: [PATCH] Changed method of updaing trail data to a GET request.
Trails now load as nescessary instead of having all trails loaded and then hidding/unhiding as needed
---
.../SmartTowns/trails/TrailsController.java | 14 ++++
src/main/resources/static/css/allTrails.css | 2 +-
.../templates/allTrails/allTrails.html | 64 +++----------------
.../templates/fragments/allTrailsFrags.html | 3 +
4 files changed, 27 insertions(+), 56 deletions(-)
create mode 100644 src/main/resources/templates/fragments/allTrailsFrags.html
diff --git a/src/main/java/Team5/SmartTowns/trails/TrailsController.java b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
index 0e5f2192..cdc9880b 100644
--- a/src/main/java/Team5/SmartTowns/trails/TrailsController.java
+++ b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
@@ -4,10 +4,14 @@ 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")
@@ -21,4 +25,14 @@ public class TrailsController {
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("searchList", trailList.get(id-1));
+
+ return mv;
+ }
}
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
index b718322e..f311772c 100644
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
@@ -30,6 +30,6 @@
}
.trailInfoBox {
- opacity: 0;
+ /*opacity: 0;*/
}
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
index 2028494c..70a7e5fa 100644
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -11,73 +11,27 @@
<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>
+ <a class="listA" th:onclick="'updateOutputTrail('+ ${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>
-
-
-
+ <section id="trailInfoBox"></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 updateOutputTrail(id) {
+ /* Updates the trail being shown on screen to the one requested by ID */
+ $.get("/allTrails/" + id).done(function (fragment) {
+ $("#trailInfoBox").html(fragment)
+ });
}
- 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)
- clicked.style.display="block"
- } else if (active !== clicked) {
- fade(active);
- active.style.display="none"
- unfade(clicked)
- clicked.style.display="block"
- }
-
- }
- function selectTrail(string) {
+ function updateSelectedTrail(string) {
+ /* Updates the trail bar, so that it highlights the selected trail */
let listEl = document.getElementsByClassName('listA')
for (let i = 0; i < listEl.length; i++) {
listEl[i].classList.remove('selected')
diff --git a/src/main/resources/templates/fragments/allTrailsFrags.html b/src/main/resources/templates/fragments/allTrailsFrags.html
new file mode 100644
index 00000000..35f4bf9e
--- /dev/null
+++ b/src/main/resources/templates/fragments/allTrailsFrags.html
@@ -0,0 +1,3 @@
+<section th:fragment="trailSection" class="trailInfoBox">
+ <h1 th:text="${searchList.description}"></h1>
+</section>
\ No newline at end of file
--
GitLab