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

Add streamer UI

Browse source 
Closes #11
This commit is contained in:
Dessa Simpson 2020-11-01 13:07:16 -07:00
parent b479cd2948
commit 68faec1ae8
7 changed files with 207 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

135
public/main.js
View file

@ -10,26 +10,34 @@ function getRequests(count,allRequests) {
reqUrl += `?count=${count}`;
fetch(reqUrl)
.then(response => response.json())
.then(requests => buildTable(requests,allRequests));
.then(requests => {
window.requests = requests;
console.log(requests);
buildTable();
});
}
function buildTable(requests,allRequests) {
function buildTable() {
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 += '<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) {
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>`;
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>";
}
@ -38,9 +46,8 @@ function buildTable(requests,allRequests) {
}
function updateTable() {
var count = document.getElementById("count").value;
var allRequests = document.getElementById("allRequests").checked;
getRequests(count,allRequests);
allRequests = document.getElementById("allRequests").checked;
getRequests(document.getElementById("count").value,allRequests);
}
function addRequestErr(msg) {
@ -53,8 +60,21 @@ function addRequestErrReset() {
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";
}
@ -66,6 +86,8 @@ function closeMessageModal() {
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";
}
@ -74,6 +96,49 @@ function closeAddRequestModal() {
document.getElementById("addRequestModal").style.display = "none";
}
function openUpdateRequestModal(tr) {
var url = tr.getElementsByClassName('request-url')[0].innerText;
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}$/
];
@ -132,6 +197,50 @@ function deleteVote(url) {
});
}
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 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) {
@ -140,4 +249,12 @@ document.addEventListener("keydown", function onEvent(event) {
closeAddRequestModal();
}
});
document.getElementById("modalBackground").addEventListener("click", (e) => { if (e.target === e.currentTarget) 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)
}

15
public/style.css
View file

@ -130,7 +130,7 @@ div#nav-userpic {
box-shadow: 0px 5px 20px black;
}
.modal h1 {
.modal h1, .modal h2, .modal h3 {
margin: 0;
}
@ -166,3 +166,16 @@ div#nav-userpic {
margin-top: -3px;
margin-bottom: -7px;
}
#scoreModifierInput {
width: 4em;
text-align: right;
}
#scoreModifierHelp {
font-size: 75%;
}
#deleteRequestLink {
color: #f00;
}