From 8483705ae4d75f277760a3f0ad8ec58df084c773 Mon Sep 17 00:00:00 2001
From: Dessa Simpson <dxs@k7dxs.net>
Date: Sat, 24 Apr 2021 21:13:45 -0700
Subject: [PATCH] Add sorting to UI

Fixes #27
---
 public/main.js   | 25 +++++++++++++++++++------
 public/style.css | 16 +++++++++++++++-
 src/app.ts       | 15 +++++++++------
 views/main.eta   | 24 ++++++++++++++++++------
 4 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/public/main.js b/public/main.js
index 388af6b..a5fc0dd 100644
--- a/public/main.js
+++ b/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();
 }
diff --git a/public/style.css b/public/style.css
index 6be863d..ccea461 100644
--- a/public/style.css
+++ b/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;
+}
diff --git a/src/app.ts b/src/app.ts
index ee577a3..583a56e 100644
--- a/src/app.ts
+++ b/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)
diff --git a/views/main.eta b/views/main.eta
index 9f986d1..ce7d520 100644
--- a/views/main.eta
+++ b/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">