diff --git a/src/main/resources/static/images/trails/trail1.jpg b/src/main/resources/static/images/trails/trail1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..cd0a8efd807a1298eceb3a7f0ae92b806a5ff52f Binary files /dev/null and b/src/main/resources/static/images/trails/trail1.jpg differ diff --git a/src/main/resources/static/images/trails/trail2.jpg b/src/main/resources/static/images/trails/trail2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..31e14eae5ac6e1132c33b7161dc2bc5e30c90dcf Binary files /dev/null and b/src/main/resources/static/images/trails/trail2.jpg differ diff --git a/src/main/resources/static/images/trails/trail3.jpg b/src/main/resources/static/images/trails/trail3.jpg new file mode 100644 index 0000000000000000000000000000000000000000..84763490556a7e758d2d56e8b649e051bd7a770d Binary files /dev/null and b/src/main/resources/static/images/trails/trail3.jpg differ diff --git a/src/main/resources/static/images/trails/trail4.jpg b/src/main/resources/static/images/trails/trail4.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c2b43e3a3488a4b4c7105948c4a9903bd15915e0 Binary files /dev/null and b/src/main/resources/static/images/trails/trail4.jpg differ diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html index 70a7e5fa47fdd8a8368b626fab7d705937532023..161f9e25606f902cc35b003acb5d803eb4fb8916 100644 --- a/src/main/resources/templates/allTrails/allTrails.html +++ b/src/main/resources/templates/allTrails/allTrails.html @@ -10,8 +10,12 @@ <header> <ul class="flexList"> + <!--TODO trail image instead of title--> <li class="listButton" th:each="trail : ${trails}"> - <a class="listA" th:onclick="'updateOutputTrail('+ ${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}"> + <img th:src="@{${trail.getImgPath()}}" class="trailsImages" th:id="'img' + ${trail.getId()}" alt="IMG"> + </a> + </li> </ul> </header> @@ -28,16 +32,18 @@ $.get("/allTrails/" + id).done(function (fragment) { $("#trailInfoBox").html(fragment) }); + updateSelectedTrail(id); } - - function updateSelectedTrail(string) { + function updateSelectedTrail(id) { /* 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') + 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(string).classList.add("selected") - + document.getElementById("img" + id).classList.add("selected") } </script> </body>