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

Add sorting to UI

Browse source 
Fixes #27
This commit is contained in:
Dessa Simpson 2021-04-24 21:13:45 -07:00
parent 5e42236354
commit 8483705ae4
4 changed files with 61 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

25
public/main.js
View file

@ -2,11 +2,14 @@ var requestsDiv = document.getElementById("requests");
var cronJobs = ['processBans'];
var currentPage = 1;
var totalPages = 1;
var count = document.getElementById("count").value;
var sortBy = document.getElementById("sortBy").value;
var sortDir = "desc";
function getRequests(count,offset,allRequests) {
function getRequests(offset,allRequests) {
if (allRequests) var reqUrl = "/api/getAllRequests";
else var reqUrl = "/api/getRequests";
reqUrl += `?count=${count}&offset=${offset}`;
reqUrl += `?count=${count}&offset=${offset}&sort=${sortBy}&sortDirection=${sortDir}`;
fetch(reqUrl)
.then(response => response.json())
.then(requests => {
@ -38,7 +41,7 @@ function buildTable(requests) {
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>';
var requestsDivHTML = '<table><tr><th class="request-link">Song Title</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>'
@ -65,10 +68,9 @@ function buildTable(requests) {
}
function updateTable() {
var count = document.getElementById("count").value;
var offset = (currentPage - 1) * count;
var allRequests = document.getElementById("allRequests").checked;
getRequests(count,offset,allRequests);
getRequests(offset,allRequests);
}
function applyUrlTransforms(url) {
@ -375,5 +377,16 @@ for(state of validStates) {
var opt = document.createElement("option");
opt.text = state;
opt.value = state;
updateRequestStateSelect.add(opt)
updateRequestStateSelect.add(opt);
}
function toggleSortDir() {
if (window.sortDir == "desc") {
document.getElementById("sortDir").innerText = "↑";
window.sortDir = "asc";
} else {
document.getElementById("sortDir").innerText = "↓";
window.sortDir = "desc";
}
updateTable();
}

16
public/style.css
View file

@ -111,11 +111,20 @@ div#nav-userpic {
text-align: right;
}
#tableSettings {
.tableSettings {
display: flex;
align-items: center;
justify-content: space-between;
}
.tableSettings > span {
margin: auto;
}
#tableSettingsTop {
margin-bottom: 10px;
}
#modalBackground {
display: none;
position: fixed;
@ -128,6 +137,7 @@ div#nav-userpic {
height: 100%;
background-color: #444;
background-color: #444a;
margin: 5px;
}
.modal {
@ -201,3 +211,7 @@ div#nav-userpic {
display: flex;
justify-content: space-between;
}
#sortDir {
padding: 0;
}