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></tr>`;
	requestsDivHTML += "</tr>";
	for (request of requests) {
		requestsDivHTML += `<tr><td class="request-url"><a href="${request.url}">${request.url}</a></td>\
			<td class="request-requester">${request.requester}</td>\
			<td class="request-score">${request.score}</td>`;
		if (allRequests) requestsDivHTML += `<td class="request-state">${request.state}</td></tr>`;
		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 openAddRequestModal() {
	document.getElementById("addRequestModalBackground").style.display = "flex";
}

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

updateTable();