dxs/learn-request-queue
1
0
Fork 0
Code Issues 12 Pull requests Projects Releases 11 Wiki Activity

Add pagination

Browse source 
Note: Requests API endpoints /getRequests and /getRequestsAll have 
breaking changes (the response schema changed entirely).

Fixes #26
This commit is contained in:
Dessa Simpson 2021-02-25 19:52:57 -07:00
parent c634e763f3
commit 84a22ccffd
6 changed files with 139 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

57
public/main.js
View file

@ -1,29 +1,49 @@
var requestsDiv = document.getElementById("requests");
var cronJobs = ['processBans']
var cronJobs = ['processBans'];
var currentPage = 1;
var totalPages = 1;
function getRequests(count,allRequests) {
var reqUrl;
if (allRequests) {
reqUrl = "/api/getAllRequests";
} else {
reqUrl = "/api/getRequests";
}
reqUrl += `?count=${count}`;
function getRequests(count,offset,allRequests) {
if (allRequests) var reqUrl = "/api/getAllRequests";
else var reqUrl = "/api/getRequests";
reqUrl += `?count=${count}&offset=${offset}`;
fetch(reqUrl)
.then(response => response.json())
.then(requests => {
window.requests = requests;
buildTable();
buildTable(requests);
});
}
function buildTable() {
function buildTable(requests) {
totalPages = Math.ceil(requests.total/document.getElementById("count").value);
document.getElementById("totalPages").innerText = totalPages;
if (currentPage <= 1) {
currentPage = 1;
document.getElementById("pageBtnFirst").disabled = true;
document.getElementById("pageBtnPrev").disabled = true;
} else {
document.getElementById("pageBtnFirst").disabled = false;
document.getElementById("pageBtnPrev").disabled = false;
}
if (currentPage >= totalPages) {
currentPage = totalPages;
document.getElementById("pageBtnLast").disabled = true;
document.getElementById("pageBtnNext").disabled = true;
} else {
document.getElementById("pageBtnLast").disabled = false;
document.getElementById("pageBtnNext").disabled = false;
}
document.getElementById("page").innerHTML = "";
for (i = 1; i <= totalPages; i++) {
document.getElementById("page").innerHTML += `<option value=${i}>${i}</option>`;
}
document.getElementById("page").value = currentPage;
var requestsDivHTML = '<table><tr><th class="request-link">Song</th><th class="request-requester">Requester</th><th class="request-score">Score</th>';
requestsDivHTML += '<th class="request-state">State</td>';
if (window.loggedIn) requestsDivHTML += '<th class="request-vote">Vote</td>';
if (window.isStreamer) requestsDivHTML += '<th class="request-update">Update</th>'
requestsDivHTML += "</tr>";
for (request of requests) {
for (request of requests.requests) {
requestsDivHTML += `<tr><td class="request-link"><a href="${request.url}" target="_blank">${request.title}</a></td>\
<td class="request-requester">${request.imageurl ? `<img src="${request.imageurl}" class="table-userpic"/>` : ''}${request.requester}</td>\
<td class="request-score">${request.score}</td>`;
@ -45,8 +65,10 @@ function buildTable() {
}
function updateTable() {
allRequests = document.getElementById("allRequests").checked;
getRequests(document.getElementById("count").value,allRequests);
var count = document.getElementById("count").value;
var offset = (currentPage - 1) * count;
var allRequests = document.getElementById("allRequests").checked;
getRequests(count,offset,allRequests);
}
function applyUrlTransforms(url) {
@ -66,6 +88,11 @@ function applyUrlTransforms(url) {
}
}
function goToPage(page) {
currentPage = parseInt(page,10);
updateTable();
}
function getColorObject() {
return {
bg: {

5
public/style.css
View file

@ -111,6 +111,11 @@ div#nav-userpic {
text-align: right;
}
#tableSettings {
display: flex;
justify-content: space-between;
}
#modalBackground {
display: none;
position: fixed;