Merge branch 'develop' into idac

titles/idac/templates/ranking/index.jinja

@@ -0,0 +1,30 @@
+{% extends "titles/idac/frontend/idac_index.jinja" %}
+{% block tab %}
+
+<div class="tab-content" id="nav-tabContent">
+    <!-- Ranking -->
+    <div class="tab-pane fade show active" id="nav-ranking" role="tabpanel" aria-labelledby="nav-ranking-tab"
+        tabindex="0">
+        <div class="row justify-content-md-center form-signin">
+            <div class="col col-lg-4">
+                <select class="form-select mb-3" id="course-select">
+                    <option value="0" selected disabled>Loading Courses...</option>
+                </select>
+            </div>
+        </div>
+        <div class="card">
+            <div class="card-body">
+                <div id="table-ranking">
+                    <div class="text-center">Loading Ranking...</div>
+                </div>
+            </div>
+        </div>
+        <div id="pagination-ranking"></div>
+    </div>
+</div>
+
+<script type="text/javascript">
+    {% include "titles/idac/frontend/ranking/js/scripts.js" %}
+</script>
+
+{% endblock tab %}

titles/idac/templates/ranking/js/scripts.js

@@ -0,0 +1,95 @@
+// Function to load data based on the selected value
+function loadRanking(courseId, pageNumber = 1) {
+    // Make a GET request to the server
+    $.ajax({
+        url: "/game/idac/ranking/ranking.get",
+        type: "GET",
+        data: { courseId: courseId, pageNumber: pageNumber },
+        dataType: "json",
+        success: function (data) {
+            // check if an error inside the json exists
+            if (!data.success) {
+                // Inject the table into the container
+                $("#table-ranking").html("<div class='text-center'>" + data.error + "</div>");
+                console.error("Error: " + data.error);
+                return;
+            }
+
+            // get the total number of pages
+            var total_pages = data.total_pages;
+
+            // Generate the HTML table
+            var tableHtml = '<div data-bs-spy="scroll" data-bs-smooth-scroll="true" class="table-responsive"><table class="table table-hover"><thead><tr><th scope="col">#</th><th scope="col">Name/Car</th><th scope="col">Time</th><th scope="col" class="d-none d-sm-table-cell">Eval</th><th scope="col" class="d-none d-lg-table-cell">Store/Date</th></tr></thead><tbody>';
+            $.each(data.ranking, function (i, ranking) {
+                // Add a 1 to the i variable to get the correct rank number
+                tableHtml += `<tr id="rank-${i+1}" class="align-middle">`;
+                tableHtml += '<td>' + ranking.rank + '</td>';
+                tableHtml += '<td>' + ranking.name + '<br/>' + getCarName(ranking.style_car_id) + '</td>';
+                tableHtml += '<td class="fs-3">' + formatGoalTime(ranking.record) + '</td>';
+                tableHtml += '<td class="fs-4 d-none d-sm-table-cell">' + evaluateRank(ranking.eval_id) + '</td>';
+                // Ignore the Store and Date columns on small screens
+                tableHtml += '<td class="d-none d-lg-table-cell">' + ranking.store + '<br/>' + ranking.update_date + '</td>';
+                tableHtml += '</tr>';
+            });
+            tableHtml += '</tbody></table></div>';
+
+            // Inject the table into the container
+            $("#table-ranking").html(tableHtml);
+
+            // Generate the Pagination HTML
+            var paginationHtml = '<nav class="mt-3"><ul class="pagination justify-content-center">';
+            // Deactivate the previous button if the current page is the first page
+            paginationHtml += '<li class="page-item ' + (pageNumber === 1 ? 'disabled' : '') + '">';
+            paginationHtml += '<a class="page-link" href="#rank-1" data-page="' + (pageNumber - 1) + '">Previous</a>';
+            paginationHtml += '</li>';
+            for (var i = 1; i <= total_pages; i++) {
+                // Set the active class to the current page
+                paginationHtml += '<li class="page-item ' + (pageNumber === i ? 'active disabled' : '') + '"><a class="page-link" href="#rank-1" data-page="' + i + '">' + i + '</a></li>';
+            }
+            // Deactivate the next button if the current page is the last page
+            paginationHtml += '<li class="page-item ' + (pageNumber === total_pages ? 'disabled' : '') + '">';
+            paginationHtml += '<a class="page-link" href="#rank-1" data-page="' + (pageNumber + 1) + '">Next</a>';
+            paginationHtml += '</li>';
+            paginationHtml += '</ul></nav>';
+
+            // Inject the pagination into the container
+            $("#pagination-ranking").html(paginationHtml);
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            // Inject the table into the container
+            $("#table-ranking").html("<div class='text-center'>" + textStatus + "</div>");
+            console.error("Error: " + textStatus, errorThrown);
+        }
+    });
+}
+
+// Function to handle page changes
+function changePage(pageNumber) {
+    // Get the selected value
+    var courseId = $("#course-select").val();
+
+    // Call the function to load data with the new page number
+    loadRanking(courseId, pageNumber);
+}
+
+$(document).ready(function () {
+    // Attach an event handler to the select element
+    $("#course-select").change(function () {
+        // Get the selected value
+        var courseId = $(this).val();
+
+        // Call the function to load data
+        loadRanking(courseId);
+    });
+
+    // Event delegation for pagination links
+    $("#pagination-ranking").on("click", "a.page-link", function (event) {
+        // event.preventDefault(); // Prevent the default behavior of the link
+        var clickedPage = $(this).data("page");
+        // Check if the changePage function is not already in progress
+        if (!$(this).hasClass('disabled')) {
+            // Handle the page change here
+            changePage(clickedPage);
+        }
+    });
+});