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

Add pagination 

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

Fixes #26
master
Dessa Simpson 2021-02-25 19:52:57 -07:00
parent c634e763f3
commit 84a22ccffd
6 changed files with 139 additions and 53 deletions
Show Stats 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;

43
src/app.ts
View File

@ -42,31 +42,47 @@ app.use(session({
// API
app.get("/api/getRequests", async (request, response) => {
if (!request.session) {
throw new Error ("Missing request.session")
}
var requestCount = ( request.query.count ? parseInt(request.query.count as string, 10) : 5 );
if (!request.session) throw new Error ("Missing request.session");
await validateApiToken(request.session);
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 requestsTotal = await requests.getRequestsTotal();
if (request.session.user) {
requests.getRequestsVoted(requestCount,request.session.user.id).then((val: Array<any>) => response.send(val))
requests.getRequestsVoted(requestCount,requestOffset,request.session.user.id)
.then((val: Array<any>) => response.send({
total: requestsTotal,
requests: val
}))
.catch((e: any) => errorHandler(request,response,e));
} else {
requests.getRequests(requestCount).then((val: Array<any>) => response.send(val))
requests.getRequests(requestCount,requestOffset)
.then((val: Array<any>) => response.send({
total: requestsTotal,
requests: val
}))
.catch((e: any) => errorHandler(request,response,e));
}
});
app.get("/api/getAllRequests", async (request, response) => {
if (!request.session) {
throw new Error ("Missing request.session")
}
var requestCount = ( request.query.count ? parseInt(request.query.count as string, 10) : 5 );
if (!request.session) throw new Error ("Missing request.session");
await validateApiToken(request.session);
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 requestsTotal = await requests.getAllRequestsTotal();
if (request.session.user) {
requests.getAllRequestsVoted(requestCount,request.session.user.id).then((val: Array<any>) => response.send(val))
requests.getAllRequestsVoted(requestCount,requestOffset,request.session.user.id)
.then((val: Array<any>) => response.send({
total: requestsTotal,
requests: val
}))
.catch((e: any) => errorHandler(request,response,e));
} else {
requests.getAllRequests(requestCount).then((val: Array<any>) => response.send(val))
requests.getAllRequests(requestCount,requestOffset)
.then((val: Array<any>) => response.send({
total: requestsTotal,
requests: val
}))
.catch((e: any) => errorHandler(request,response,e));
}
});
@ -79,7 +95,8 @@ app.post("/api/addRequest", async (request, response) => {
response.send("Session expired; please log in again");
return;
}
var banned = await db.query(Object.assign(queries.checkBan, { values: [request.session.user.id] })).then((result: pg.QueryResult) => result.rowCount > 0);
var banned = await db.query(Object.assign(queries.checkBan, { values: [request.session.user.id] }))
.then((result: pg.QueryResult) => result.rowCount > 0);
if (banned) {
response.status(401);
response.send("You are banned; you may not add new requests.");

27
src/queries.ts
View File

@ -56,27 +56,38 @@ export const updateVotePoints = {
export const getRequests = {
name: "getRequests",
text: "SELECT * FROM requests_vw \
JOIN states ON requests_vw.state = states.state \
WHERE active ORDER BY score DESC, reqTimestamp ASC LIMIT $1"
JOIN states ON requests_vw.state = states.state WHERE active \
ORDER BY score DESC, reqTimestamp ASC LIMIT $1 OFFSET $2"
}
export const getRequestsVoted = {
name: "getRequestsVoted",
text: "SELECT * FROM get_requests_voted($2) \
JOIN states ON get_requests_voted.state = states.state \
WHERE active ORDER BY score DESC, reqTimestamp ASC LIMIT $1"
text: "SELECT * FROM get_requests_voted($3) \
JOIN states ON get_requests_voted.state = states.state WHERE active \
ORDER BY score DESC, reqTimestamp ASC LIMIT $1 OFFSET $2"
}
export const getRequestsTotal = {
name: "getRequestsTotal",
text: "SELECT COUNT(*) FROM requests_vw \
JOIN states ON requests_vw.state = states.state WHERE active"
}
export const getAllRequests = {
name: "getAllRequests",
text: "SELECT * FROM requests_vw \
ORDER BY score DESC, reqTimestamp ASC LIMIT $1"
ORDER BY score DESC, reqTimestamp ASC LIMIT $1 OFFSET $2"
}
export const getAllRequestsVoted = {
name: "getAllRequestsVoted",
text: "SELECT * FROM get_requests_voted($2) \
ORDER BY score DESC, reqTimestamp ASC LIMIT $1"
text: "SELECT * FROM get_requests_voted($3) \
ORDER BY score DESC, reqTimestamp ASC LIMIT $1 OFFSET $2"
}
export const getAllRequestsTotal = {
name: "getAllRequestsTotal",
text: "SELECT COUNT(*) FROM requests_vw"
}
export const checkRequestExists = {

26
src/requests.ts
View File

@ -4,30 +4,40 @@ import { log, LogLevel } from "./logging"
import pg from "pg";
import db from "./db";
export async function getRequests(count: number) {
var query = Object.assign(queries.getRequests, { values: [count] });
export async function getRequests(count: number, offset: number) {
var query = Object.assign(queries.getRequests, { values: [count,offset] });
return db.query(query)
.then((result: pg.QueryResult) => result.rows);
};
export async function getAllRequests(count: number) {
var query = Object.assign(queries.getAllRequests, { values: [count] });
export async function getRequestsVoted(count: number, offset: number, user: number) {
var query = Object.assign(queries.getRequestsVoted, { values: [count,offset,user] });
return db.query(query)
.then((result: pg.QueryResult) => result.rows);
};
export async function getRequestsVoted(count: number, user: number) {
var query = Object.assign(queries.getRequestsVoted, { values: [count,user] });
export async function getRequestsTotal() {
return db.query(queries.getRequestsTotal)
.then((result: pg.QueryResult) => result.rows[0]["count"]);
};
export async function getAllRequests(count: number, offset: number) {
var query = Object.assign(queries.getAllRequests, { values: [count,offset] });
return db.query(query)
.then((result: pg.QueryResult) => result.rows);
};
export async function getAllRequestsVoted(count: number,user: number) {
var query = Object.assign(queries.getAllRequestsVoted, { values: [count,user] });
export async function getAllRequestsVoted(count: number, offset: number, user: number) {
var query = Object.assign(queries.getAllRequestsVoted, { values: [count,offset,user] });
return db.query(query)
.then((result: pg.QueryResult) => result.rows);
};
export async function getAllRequestsTotal() {
return db.query(queries.getAllRequestsTotal)
.then((result: pg.QueryResult) => result.rows[0]["count"]);
};
const validUrlRegexes = [
/^https:\/\/www\.youtube\.com\/watch\?v=[a-zA-Z0-9_-]{11}$/
];

34
views/main.eta
View File

@ -30,15 +30,31 @@
</div>
<div id="main">
<div id="requests"></div><br>
Count:
<select id="count" value="10" onchange="updateTable()">
<option>5</option>
<option selected="selected">10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
<input type="checkbox" id="allRequests" onchange="updateTable()">View requests in any state</input>
<div id="tableSettings">
<span style="width:420px">
Count:
<select id="count" value="10" onchange="updateTable()">
<option>5</option>
<option selected="selected">10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</span>
<span>
<button id="pageBtnFirst" onclick="goToPage(1)">&lt;&lt;</button>
<button id="pageBtnPrev" onclick="goToPage(currentPage-1)">&lt;</button>
<select id="page" onchange="goToPage(this.value)">
<option value=1>1</option>
</select>
of <span id="totalPages">?</span>
<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">
<div class="modal" id="messageModal">