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 => {
			window.requests = requests;
			buildTable();
		});
}

function buildTable() {
	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) {
		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>`;
		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>`;
			}
			if (window.isStreamer) {
				requestsDivHTML += '<td class="request-update"><button onclick="openUpdateRequestModal(this.parentElement.parentElement)">Update</button></td>'
			}
		}
		requestsDivHTML += "</tr>";
	}
	requestsDivHTML += "</table>";
	requestsDiv.innerHTML = requestsDivHTML;
}

function updateTable() {
	allRequests = document.getElementById("allRequests").checked;
	getRequests(document.getElementById("count").value,allRequests);
}

function applyUrlTransforms(url) {
	console.log("Begin applyUrlTransforms:" + url);
	if (url.match(/^https?:\/\/(www\.)?youtu(\.be|be\.com)\//)) { // Youtube
		console.log("Youtube");
		var videoid = "";
		// youtu.be share url - Do not anchor to $ due to parameters such as ?t=
		if (url.match(/^https?:\/\/youtu.be\/[A-Za-z0-9_-]{11}/)) {
			videoid = url.match(/(?<=^https:\/\/youtu.be\/)[A-Za-z0-9_-]{11}/)[0];
		} else if (url.match(/^https?:\/\/(www\.)?youtube\.com\//)) {
			videoid = url.match(/(?<=^https?:\/\/(www\.)?youtube\.com\/watch.*[?&]v=)[A-Za-z0-9_-]{11}/)[0];
		}
		var result = 'https://www.youtube.com/watch?v=' + videoid;
		console.log("Result: " + result);
		return result;
	}
}

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 updateRequestErr(msg) {
	document.getElementById('updateRequestError').style.display = "inline-block";
	document.getElementById('updateRequestError').innerText = msg;
}

function updateRequestErrReset() {
	document.getElementById('updateRequestError').style.display = "none";
	document.getElementById('updateRequestError').innerText = "";
}

function showMessage(msg) {
	document.getElementById("messageModalText").innerText = msg;
	document.getElementById("addRequestModal").style.display = "none";
	document.getElementById("updateRequestModal").style.display = "none";
	document.getElementById("deleteRequestModal").style.display = "none";
	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("updateRequestModal").style.display = "none";
	document.getElementById("messageModal").style.display = "none";
	document.getElementById("addRequestModal").style.display = "block";
}

function closeAddRequestModal() {
	document.getElementById("modalBackground").style.display = "none";
	document.getElementById("addRequestModal").style.display = "none";
}

function openUpdateRequestModal(tr) {
	var url = tr.getElementsByClassName('request-link')[0].firstChild.href;
	var score = tr.getElementsByClassName('request-score')[0].innerText;
	var state = tr.getElementsByClassName('request-state')[0].innerText;
	document.getElementById("updateRequestUrl").href = url;
	document.getElementById("updateRequestUrl").innerText = url;
	document.getElementById("updateRequestModalCurrentScore").innerText = score;
	document.querySelector(`#updateRequestStateSelect [value="${state}"]`).selected = true;
	document.getElementById("scoreModifierInput").value = 0;
	document.getElementById("messageModal").style.display = "none";
	document.getElementById("addRequestModal").style.display = "none";
	document.getElementById("modalBackground").style.display = "flex";
	document.getElementById("updateRequestModal").style.display = "block";
}

function closeUpdateRequestModal() {
	document.getElementById("modalBackground").style.display = "none";
	document.getElementById("updateRequestModal").style.display = "none";
}

function openDeleteRequestModal(url) {
	document.getElementById("updateRequestUrl").href = url;
	document.getElementById("updateRequestUrl").innerText = url;
	document.getElementById("messageModal").style.display = "none";
	document.getElementById("addRequestModal").style.display = "none";
	document.getElementById("updateRequestModal").style.display = "none";
	document.getElementById("modalBackground").style.display = "flex";
	document.getElementById("deleteRequestModal").style.display = "block";
}

function closeDeleteRequestModal() {
	document.getElementById("deleteRequestModal").style.display = "none";
	document.getElementById("updateRequestModal").style.display = "block";
}

function closeAllModals() {
	document.getElementById("messageModal").style.display = "none";
	document.getElementById("addRequestModal").style.display = "none";
	document.getElementById("updateRequestModal").style.display = "none";
	document.getElementById("deleteRequestModal").style.display = "none";
	document.getElementById("modalBackground").style.display = "none";
}

const validUrlRegexes = [
    /^https:\/\/www\.youtube\.com\/watch\?v=[a-zA-Z0-9_-]{11}$/
];
function validateAndSubmitRequest() {
	addRequestErrReset();
	var url = applyUrlTransforms(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(showMessage);
				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);
		});
}

function updateRequestState(url,state) {
	updateRequestErrReset();
	fetch("/api/updateRequestState", { method: 'POST', body: new URLSearchParams({
		url: url,
		state: state
	})})
		.then(response => {
			if (!response.ok) {
				response.text().then(updateRequestErr);
				return;
			}
			updateTable();
			response.text().then(showMessage);
		});
}

function updateRequestScoreModifier(url,scoreDiff) {
	updateRequestErrReset();
	fetch("/api/updateRequestScoreModifier", { method: 'POST', body: new URLSearchParams({
		url: url,
		scoreDiff: scoreDiff
	})})
		.then(response => {
			if (!response.ok) {
				response.text().then(updateRequestErr);
				return;
			}
			updateTable();
			response.text().then(showMessage);
		});
}

function updateRequestMetadata(url) {
	fetch("/api/updateRequestMetadata?url=" + url)
		.then(response => {
			updateTable();
			response.text().then(showMessage);
		});
}

function deleteRequest(url) {
	fetch("/api/deleteRequest", { method: 'POST', body: new URLSearchParams({
		url: url
	})})
		.then(response => {
			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) closeAllModals();});

var updateRequestStateSelect = document.getElementById("updateRequestStateSelect");
for(state of validStates) {
	var opt = document.createElement("option");
	opt.text = state;
	opt.value = state;
	updateRequestStateSelect.add(opt)
}