Customization!

Add ability to control page title and color scheme.

Also, partially implements manual triggering of cronjobs.

Fixes #18
This commit is contained in:
Dessa Simpson 2021-02-21 23:25:23 -07:00
parent 1c34b3f013
commit 6495e1c8ef
6 changed files with 294 additions and 40 deletions

View file

@ -1,4 +1,5 @@
var requestsDiv = document.getElementById("requests");
var cronJobs = ['processBans']
function getRequests(count,allRequests) {
var reqUrl;
@ -65,6 +66,22 @@ function applyUrlTransforms(url) {
}
}
function getColorObject() {
return {
bg: {
primary: document.getElementById('color-bg-primary').value,
table: document.getElementById('color-bg-table').value,
navbar: document.getElementById('color-bg-navbar').value,
error: document.getElementById('color-bg-error').value,
},
fg: {
primary: document.getElementById('color-fg-primary').value,
ahover: document.getElementById('color-fg-ahover').value,
title: document.getElementById('color-fg-title').value,
}
}
}
function addRequestErr(msg) {
document.getElementById('addRequestError').style.display = "inline-block";
document.getElementById('addRequestError').innerText = msg;
@ -85,33 +102,45 @@ function updateRequestErrReset() {
document.getElementById('updateRequestError').innerText = "";
}
function showMessage(msg) {
document.getElementById("messageModalText").innerText = msg;
function streamerSettingsErr(msg) {
document.getElementById('streamerSettingsError').style.display = "inline-block";
document.getElementById('streamerSettingsError').innerText = msg;
}
function streamerSettingsErrReset() {
document.getElementById('streamerSettingsError').style.display = "none";
document.getElementById('streamerSettingsError').innerText = "";
}
// Hides all modals in preparation to show a one or to close out of
// all modals and return to the page. Does NOT hide modalBackground.
function hideModals() {
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("streamerSettingsModal").style.display = "none";
}
function closeAllModals() {
hideModals();
document.getElementById("modalBackground").style.display = "none";
}
function showMessage(msg) {
hideModals();
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() {
hideModals();
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) {
hideModals();
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;
@ -120,18 +149,12 @@ function openUpdateRequestModal(tr) {
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) {
hideModals();
document.getElementById("updateRequestUrl").href = url;
document.getElementById("updateRequestUrl").innerText = url;
document.getElementById("messageModal").style.display = "none";
@ -141,17 +164,21 @@ function openDeleteRequestModal(url) {
document.getElementById("deleteRequestModal").style.display = "block";
}
// Returns to update request modal
function closeDeleteRequestModal() {
hideModals();
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";
function openStreamerSettingsModal() {
hideModals();
document.getElementById("modalBackground").style.display = "flex";
document.getElementById("streamerSettingsModal").style.display = "block";
}
function cronRequest(job) {
if (!cronJobs.includes(job)) throw new Error("Request for invalid job");
}
const validUrlRegexes = [
@ -262,7 +289,33 @@ function deleteRequest(url) {
});
}
function updatePageTitle(pageTitle) {
streamerSettingsErrReset();
fetch("/api/updatePageTitle", { method: 'POST', body: new URLSearchParams({
pageTitle: pageTitle
})})
.then(response => {
if (response.ok) {
location.reload();
} else {
response.text().then(streamerSettingsErr);
}
});
}
function updateColors(colors) {
streamerSettingsErrReset();
fetch("/api/updateColors", { method: 'POST', headers: {
'Content-Type': 'application/json'
}, body: JSON.stringify(colors)})
.then(response => {
if (response.ok) {
location.reload();
} else {
response.text().then(streamerSettingsErr);
}
});
}
updateTable();

View file

@ -12,6 +12,12 @@ button, input, select {
font-size: 100%;
}
input[type="color"] {
border: none;
padding: 0px;
vertical-align: middle;
}
a {
color: #ddd;
}