diff --git a/src/main/java/Team5/SmartTowns/trails/TrailsController.java b/src/main/java/Team5/SmartTowns/trails/TrailsController.java index 0e5f2192d0994c43b91a47fd25bff9c69008b20a..cdc9880b3734a8ff070c8008315d34a7c0278006 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 b718322edf0e13dbade9014b60f080ea44ef7cec..f311772cd5bdeb4e7021e68660363560d970c36a 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 2028494c7502ff8a2677f014cb4b355afa88cb90..70a7e5fa47fdd8a8368b626fab7d705937532023 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 0000000000000000000000000000000000000000..35f4bf9ef04f3949a61665f7102a517e291d9ac7 --- /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