Add sorting to UI

Fixes #27
master
Dessa Simpson 2021-04-24 21:13:45 -07:00
parent 5e42236354
commit 8483705ae4
4 changed files with 61 additions and 19 deletions

View File

@ -2,11 +2,14 @@ var requestsDiv = document.getElementById("requests");
var cronJobs = ['processBans']; var cronJobs = ['processBans'];
var currentPage = 1; var currentPage = 1;
var totalPages = 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"; if (allRequests) var reqUrl = "/api/getAllRequests";
else var reqUrl = "/api/getRequests"; else var reqUrl = "/api/getRequests";
reqUrl += `?count=${count}&offset=${offset}`; reqUrl += `?count=${count}&offset=${offset}&sort=${sortBy}&sortDirection=${sortDir}`;
fetch(reqUrl) fetch(reqUrl)
.then(response => response.json()) .then(response => response.json())
.then(requests => { .then(requests => {
@ -38,7 +41,7 @@ function buildTable(requests) {
document.getElementById("page").innerHTML += `<option value=${i}>${i}</option>`; document.getElementById("page").innerHTML += `<option value=${i}>${i}</option>`;
} }
document.getElementById("page").value = currentPage; 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>'; requestsDivHTML += '<th class="request-state">State</td>';
if (window.loggedIn) requestsDivHTML += '<th class="request-vote">Vote</td>'; if (window.loggedIn) requestsDivHTML += '<th class="request-vote">Vote</td>';
if (window.isStreamer) requestsDivHTML += '<th class="request-update">Update</th>' if (window.isStreamer) requestsDivHTML += '<th class="request-update">Update</th>'
@ -65,10 +68,9 @@ function buildTable(requests) {
} }
function updateTable() { function updateTable() {
var count = document.getElementById("count").value;
var offset = (currentPage - 1) * count; var offset = (currentPage - 1) * count;
var allRequests = document.getElementById("allRequests").checked; var allRequests = document.getElementById("allRequests").checked;
getRequests(count,offset,allRequests); getRequests(offset,allRequests);
} }
function applyUrlTransforms(url) { function applyUrlTransforms(url) {
@ -375,5 +377,16 @@ for(state of validStates) {
var opt = document.createElement("option"); var opt = document.createElement("option");
opt.text = state; opt.text = state;
opt.value = 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();
} }

View File

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

View File

@ -47,23 +47,26 @@ app.get("/api/getRequests", async (request, response) => {
var requestCount = ( request.query.count ? parseInt(request.query.count as string, 10) : 5 ); var requestCount = ( request.query.count ? parseInt(request.query.count as string, 10) : 5 );
var requestOffset = ( request.query.offset ? parseInt(request.query.offset as string, 10) : 0 ); var requestOffset = ( request.query.offset ? parseInt(request.query.offset as string, 10) : 0 );
var sortDirection = ( request.query.sortDirection == "asc" ? "ASC" : "DESC" ); var sortDirection = ( request.query.sortDirection == "asc" ? "ASC" : "DESC" );
var inverseSortDirection = ( sortDirection == "ASC" ? "DESC" : "ASC" );
switch (request.query.sort) { switch (request.query.sort) {
case undefined: case undefined: // Default sort by newest
case "score":
var requestSort = `score ${sortDirection}, reqTimestamp ASC`;
break;
case "timestamp": case "timestamp":
var requestSort = `reqTimestamp ${sortDirection}`; var requestSort = `reqTimestamp ${sortDirection}`;
break; break;
case "alpha": case "score":
var requestSort = `score ${sortDirection}, reqTimestamp ${inverseSortDirection}`;
break;
case "title":
var requestSort = `title ${sortDirection}` var requestSort = `title ${sortDirection}`
break; break;
case "requester":
var requestSort = `requester ${sortDirection}, title ${sortDirection}`
break;
default: default:
response.status(400); response.status(400);
response.send("Invalid sort"); response.send("Invalid sort");
return; return;
}; };
console.log('foo')
var requestsTotal = await requests.getRequestsTotal(); var requestsTotal = await requests.getRequestsTotal();
if (request.session.user) { if (request.session.user) {
requests.getRequestsVoted(requestCount,requestOffset,requestSort,request.session.user.id) requests.getRequestsVoted(requestCount,requestOffset,requestSort,request.session.user.id)

View File

@ -29,11 +29,10 @@
<%- } %> <%- } %>
</div> </div>
<div id="main"> <div id="main">
<div id="requests"></div><br> <div class="tableSettings" id="tableSettingsTop">
<div id="tableSettings">
<span style="width:420px"> <span style="width:420px">
Count: Count:
<select id="count" value="10" onchange="updateTable()"> <select id="count" value="10" onchange="window.count = this.value;updateTable()">
<option>5</option> <option>5</option>
<option selected="selected">10</option> <option selected="selected">10</option>
<option>25</option> <option>25</option>
@ -41,6 +40,22 @@
<option>100</option> <option>100</option>
</select> </select>
</span> </span>
<span>
Sort by:
<select id="sortBy" onchange="window.sortBy = this.value;updateTable()">
<option value="title">Song Title</option>
<option value="requester">Requester</option>
<option value="score">Score</option>
<option value="timestamp" selected>Request Time</option>
</select>
<button id="sortDir" onclick="toggleSortDir()">↓</button>
</span>
<span style="width:420px">
<input type="checkbox" id="allRequests" onchange="updateTable()">View all requests</input>
</span>
</div>
<div id="requests"></div><br>
<div class="tableSettings">
<span> <span>
<button id="pageBtnFirst" onclick="goToPage(1)">&lt;&lt;</button> <button id="pageBtnFirst" onclick="goToPage(1)">&lt;&lt;</button>
<button id="pageBtnPrev" onclick="goToPage(currentPage-1)">&lt;</button> <button id="pageBtnPrev" onclick="goToPage(currentPage-1)">&lt;</button>
@ -51,9 +66,6 @@
<button id="pageBtnNext" onclick="goToPage(currentPage+1)">&gt;</button> <button id="pageBtnNext" onclick="goToPage(currentPage+1)">&gt;</button>
<button id="pageBtnLast" onclick="goToPage(totalPages)">&gt;&gt;</button> <button id="pageBtnLast" onclick="goToPage(totalPages)">&gt;&gt;</button>
</span> </span>
<span style="width:420px">
<input type="checkbox" id="allRequests" onchange="updateTable()">View learned and rejected requests</input>
</span>
</div> </div>
</div> </div>
<div id="modalBackground"> <div id="modalBackground">