learn-request-queue/public/main.js

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>';
	if (allRequests) requestsDivHTML += `<th class="request-state">State</td>`;
	if (window.loggedIn) requestsDivHTML += `<th class="request-vote">Vote</td>`;
	requestsDivHTML += "</tr>";
	for (request of requests) {
		console.log(request);
		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>\
			<td class="request-score">${request.score}</td>`;
		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>`;
			}
		}
		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";
}

function openAddRequestModal() {
	document.getElementById("modalBackground").style.display = "flex";
	document.getElementById("addRequestModal").style.display = "block";
}

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
	})})
		.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);
		});
}

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