learn-request-queue/public/main.js

144 lines
4.4 KiB
JavaScript
Raw Normal View History

2020-07-04 06:22:28 +00:00
var requestsDiv = document.getElementById("requests");
function getRequests(count,allRequests) {
var reqUrl;
if (allRequests) {
reqUrl = "/api/getAllRequests";
} else {
reqUrl = "/api/getRequests";
}
reqUrl += `?count=${count}`;
fetch(reqUrl)
.then(response => response.json())
.then(requests => buildTable(requests,allRequests));
}
function buildTable(requests,allRequests) {
var requestsDivHTML = '<table><tr><th class="request-url">URL</th><th class="request-requester">Requester</th><th class="request-score">Score</th>';
2020-08-08 04:32:06 +00:00
if (allRequests) requestsDivHTML += `<th class="request-state">State</td>`;
if (window.loggedIn) requestsDivHTML += `<th class="request-vote">Vote</td>`;
2020-07-04 06:22:28 +00:00
requestsDivHTML += "</tr>";
for (request of requests) {
console.log(request);
2020-08-10 01:39:43 +00:00
requestsDivHTML += `<tr><td class="request-url"><a href="${request.url}" target="_blank">${request.url}</a></td>\
<td class="request-requester">${request.imageurl ? `<img src="${request.imageurl}" class="table-userpic"/>` : ''}${request.requester}</td>\
2020-07-04 06:22:28 +00:00
<td class="request-score">${request.score}</td>`;
2020-08-08 04:32:06 +00:00
if (allRequests) requestsDivHTML += `<td class="request-state">${request.state}</td>`;
if (window.loggedIn) {
if (request.voted) {
requestsDivHTML += `<td class="request-vote"><button onclick="deleteVote('${request.url}')">Unvote</button></td>`;
} else {
requestsDivHTML += `<td class="request-vote"><button onclick="addVote('${request.url}')">Vote</button></td>`;
}
}
2020-07-04 06:22:28 +00:00
requestsDivHTML += "</tr>";
}
requestsDivHTML += "</table>";
requestsDiv.innerHTML = requestsDivHTML;
}
function updateTable() {
var count = document.getElementById("count").value;
var allRequests = document.getElementById("allRequests").checked;
getRequests(count,allRequests);
}
function addRequestErr(msg) {
document.getElementById('addRequestError').style.display = "inline-block";
document.getElementById('addRequestError').innerText = msg;
}
function addRequestErrReset() {
document.getElementById('addRequestError').style.display = "none";
document.getElementById('addRequestError').innerText = "";
}
function showMessage(msg) {
document.getElementById("messageModalText").innerText = msg;
document.getElementById("modalBackground").style.display = "flex";
document.getElementById("messageModal").style.display = "block";
}
function closeMessageModal() {
document.getElementById("modalBackground").style.display = "none";
document.getElementById("messageModal").style.display = "none";
}
2020-07-05 22:20:22 +00:00
function openAddRequestModal() {
document.getElementById("modalBackground").style.display = "flex";
document.getElementById("addRequestModal").style.display = "block";
2020-07-05 22:20:22 +00:00
}
function closeAddRequestModal() {
document.getElementById("modalBackground").style.display = "none";
document.getElementById("addRequestModal").style.display = "none";
}
const validUrlRegexes = [
/^https:\/\/www\.youtube\.com\/watch\?v=[a-zA-Z0-9_-]{11}$/
];
function validateAndSubmitRequest() {
addRequestErrReset();
var url = document.getElementById("addRequestUrl").value;
var validUrl = false;
for (var regex of validUrlRegexes) {
if (regex.test(url)) {
validUrl = true;
break;
}
}
if (!validUrl) {
addRequestErr("Invalid URL");
return;
}
fetch("/api/addRequest", { method: 'POST', body: new URLSearchParams({
url: url
2020-08-08 04:32:06 +00:00
})})
.then(response => {
updateTable();
document.getElementById("addRequestUrl").value = "";
response.text().then((message) => {
closeAddRequestModal();
showMessage(message);
});
});
}
function addVote(url) {
fetch("/api/addVote", { method: 'POST', body: new URLSearchParams({
url: url
})})
.then(response => {
if (!response.ok) {
response.text().then(addRequestErr);
return;
}
updateTable();
response.text().then(showMessage);
});
}
function deleteVote(url) {
fetch("/api/deleteVote", { method: 'POST', body: new URLSearchParams({
url: url
})})
.then(response => {
if (!response.ok) {
response.text().then(addRequestErr);
return;
}
updateTable();
response.text().then(showMessage);
});
2020-07-05 22:20:22 +00:00
}
2020-07-04 06:22:28 +00:00
updateTable();
document.addEventListener("keydown", function onEvent(event) {
if (event.key === "Escape") {
closeMessageModal();
closeAddRequestModal();
}
});
document.getElementById("modalBackground").addEventListener("click", (e) => { if (e.target === e.currentTarget) closeAddRequestModal();});