Add sorting to UI

Fixes #27

public/main.js

@@ -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();
 }

public/style.css

@@ -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;
+}

src/app.ts

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

views/main.eta

@@ -29,11 +29,10 @@
 			<%- } %>
 		</div>
 		<div id="main">
-			<div id="requests"></div><br>
-			<div id="tableSettings">
+			<div class="tableSettings" id="tableSettingsTop">
 				<span style="width:420px">
 					Count:
-					<select id="count" value="10" onchange="updateTable()">
+					<select id="count" value="10" onchange="window.count = this.value;updateTable()">
 						<option>5</option>
 						<option selected="selected">10</option>
 						<option>25</option>
@@ -41,6 +40,22 @@
 						<option>100</option>
 					</select>
 				</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>
 					<button id="pageBtnFirst" onclick="goToPage(1)">&lt;&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="pageBtnLast" onclick="goToPage(totalPages)">&gt;&gt;</button>
 				</span>
-				<span style="width:420px">
-					<input type="checkbox" id="allRequests" onchange="updateTable()">View learned and rejected requests</input>
-				</span>
 			</div>
 		</div>
 	<div id="modalBackground">