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

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;
+    }
 }

src/main/resources/static/css/allTrails.css

@@ -30,6 +30,6 @@
 }
 
 .trailInfoBox {
-    opacity: 0;
+    /*opacity: 0;*/
 }
 

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')

src/main/resources/templates/fragments/allTrailsFrags.html

+<section th:fragment="trailSection" class="trailInfoBox">
+    <h1 th:text="${searchList.description}"></h1>
+</section>
\ No newline at end of file