allTrails.html

  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>All Trails</title>
    <link rel="stylesheet" th:href="@{css/allTrails.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<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}">
                <img th:src="@{${trail.getImgPath()}}" class="trailsImages" th:id="'img' + ${trail.getId()}" alt="IMG">
            </a>

        </li>
    </ul>
</header>

<main>
    <section id="trailInfoBox"></section>
</main>


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