forked from Hay1tsme/artemis
96 lines
4.5 KiB
JavaScript
96 lines
4.5 KiB
JavaScript
// 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 class="table-responsive"><table class="table table-hover"><thead><tr><th scope="col">#</th><th scope="col">Name</th><th scope="col">Car</th><th scope="col">Time</th><th scope="col" class="d-none d-lg-table-cell">Store</th><th scope="col" class="d-none d-lg-table-cell">Date</th></tr></thead><tbody>';
|
|
$.each(data.ranking, function (i, ranking) {
|
|
tableHtml += '<tr class="align-middle">';
|
|
tableHtml += '<td>' + ranking.rank + '</td>';
|
|
tableHtml += '<td>' + ranking.name + '</td>';
|
|
tableHtml += '<td>' + getCarName(ranking.style_car_id) + '</td>';
|
|
tableHtml += '<td>' + formatGoalTime(ranking.record) + '</td>';
|
|
// Ignore the Store and Date columns on small screens
|
|
tableHtml += '<td class="d-none d-lg-table-cell">' + ranking.store + '</td>';
|
|
tableHtml += '<td class="d-none d-lg-table-cell">' + 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="#" 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="#" 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="#" 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);
|
|
}
|
|
});
|
|
});
|