From ead56d8df0778df2c4df5ac6ad21fd1d3d0881e3 Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Wed, 29 Nov 2023 11:35:41 +0000
Subject: [PATCH] Moved JavaScript to it's own file

---
 .../resources/static/scripts/allTrails.js     | 20 +++++++++--
 .../templates/allTrails/allTrails.html        | 34 +++++--------------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/main/resources/static/scripts/allTrails.js b/src/main/resources/static/scripts/allTrails.js
index ea21bb4e..d04eed9d 100644
--- a/src/main/resources/static/scripts/allTrails.js
+++ b/src/main/resources/static/scripts/allTrails.js
@@ -1,2 +1,18 @@
-
-/* Functions taken from https://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css*/
+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)
+    });
+    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
index a05cf5ff..1179d272 100644
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -4,12 +4,15 @@
     <meta charset="UTF-8">
     <title>All Trails</title>
     <link rel="stylesheet" th:href="@{css/allTrails.css}">
+    <link rel="stylesheet" th:href="@{css/banners.css}">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
 <body>
 
-<header>
-    <div id="allTrailsBar" class="centerFlex">
+<header th:replace="towns/templates.server/Templating.html :: headerBlock"></header>
+
+<main>
+    <section id="allTrailsBar" class="centerFlex">
         <!--TODO add rest of page-->
         <img class="trailsImages"
              th:each="trail : ${trails}"
@@ -17,34 +20,13 @@
              th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'"
              th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
         >
-    </div>
-</header>
-
-<main>
+    </section>
     <section id="trailInfoBox"></section>
 </main>
 
+<footer th:replace="towns/templates.server/Templating.html:: footerBlock"></footer>
 
 <script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
-<script th:inline="javascript">
-    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)
-        });
-        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")
-    }
-</script>
+
 </body>
 </html>
\ No newline at end of file
-- 
GitLab