222 lines
6.4 KiB
JavaScript
222 lines
6.4 KiB
JavaScript
import {$, doAfterLoad, footer, header, nav} from "@fwdekker/template";
|
|
import Cookies from "js-cookie";
|
|
|
|
|
|
const signatureColCount = 8;
|
|
|
|
|
|
/**
|
|
* Returns an array of the signatures that are currently selected.
|
|
*/
|
|
const getSelectedSignatures = () => {
|
|
const signatures = [];
|
|
|
|
const selectedCheckboxes = document.querySelectorAll("#signatures input:checked");
|
|
for (let i = 0; i < selectedCheckboxes.length; i++) {
|
|
const selectedCheckbox = selectedCheckboxes[i];
|
|
signatures.push(selectedCheckbox.value);
|
|
}
|
|
|
|
return signatures;
|
|
};
|
|
|
|
/**
|
|
* Selects the indicated signatures, and deselects all others.
|
|
*
|
|
* @param signatures the array of signatures to select
|
|
*/
|
|
const setSelectedSignatures = signatures => {
|
|
const checkboxes = document.querySelectorAll("#signatures input");
|
|
for (let i = 0; i < checkboxes.length; i++)
|
|
checkboxes[i].checked = false;
|
|
|
|
for (let i = 0; i < signatures.length; i++)
|
|
$(`#signature-${signatures[i]}`).checked = true;
|
|
|
|
updateSignatureToggle();
|
|
};
|
|
|
|
/**
|
|
* Selects all signatures.
|
|
*/
|
|
const setAllSignatures = checked => {
|
|
const checkboxes = document.querySelectorAll("#signatures input");
|
|
for (let i = 0; i < checkboxes.length; i++)
|
|
checkboxes[i].checked = checked;
|
|
saveSelectedSignaturesToCookie();
|
|
|
|
updateSignatureToggle();
|
|
};
|
|
|
|
/**
|
|
* (De)selects signatures based on the selection stored in a cookie.
|
|
*/
|
|
const loadSelectedSignaturesFromCookie = () => {
|
|
const cookie = Cookies.get("selectedSignatures");
|
|
let signatures;
|
|
if (cookie === undefined)
|
|
signatures = [];
|
|
else
|
|
signatures = cookie.split(",");
|
|
|
|
setSelectedSignatures(signatures);
|
|
};
|
|
|
|
/**
|
|
* Saves the currently-selected signatures to a cookie.
|
|
*/
|
|
const saveSelectedSignaturesToCookie =
|
|
() => Cookies.set("selectedSignatures", getSelectedSignatures().join(","), {
|
|
expires: 5 * 365,
|
|
secure: true,
|
|
sameSite: "lax"
|
|
});
|
|
|
|
/**
|
|
* Updates the button used to toggle all signatures on or off.
|
|
*/
|
|
const updateSignatureToggle = () => {
|
|
const signatureToggle = $("#signatureToggle");
|
|
|
|
if (getSelectedSignatures().length === document.querySelectorAll("#signatures input").length) {
|
|
signatureToggle.innerHTML = "Deselect all signatures";
|
|
signatureToggle.onclick = () => setAllSignatures(false);
|
|
} else {
|
|
signatureToggle.innerHTML = "Select all signatures";
|
|
signatureToggle.onclick = () => setAllSignatures(true);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Downloads an array of signatures from the API.
|
|
*
|
|
* @param callback the function to execute with the array of signatures
|
|
* @param handle the function to execute if signatures could not be downloaded
|
|
*/
|
|
const downloadSignatures = (callback, handle) => {
|
|
fetch("api.php?action=list-signatures")
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
if (handle) handle(response);
|
|
console.error(response);
|
|
throw new Error("Failed to fetch list of signatures.");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then(signatures => callback(signatures));
|
|
};
|
|
|
|
/**
|
|
* Creates buttons for the signatures and adds them to the form.
|
|
*
|
|
* @param signatures an array of signatures to create buttons for
|
|
*/
|
|
const createSignatureButtons = signatures => {
|
|
const form = $("#signatures");
|
|
form.innerHTML = "";
|
|
|
|
let row;
|
|
for (let i = 0; i < signatures.length; i++) {
|
|
const signature = signatures[i];
|
|
|
|
if (i % signatureColCount === 0) {
|
|
if (row !== undefined)
|
|
form.appendChild(row);
|
|
|
|
row = document.createElement("div");
|
|
row.className = "row";
|
|
}
|
|
|
|
const col = document.createElement("div");
|
|
col.className = "column";
|
|
|
|
const label = document.createElement("label");
|
|
label.htmlFor = `signature-${signature}`;
|
|
label.innerHTML = signature;
|
|
col.appendChild(label);
|
|
|
|
const checkbox = document.createElement("input");
|
|
checkbox.type = "checkbox";
|
|
checkbox.id = `signature-${signature}`;
|
|
checkbox.name = `signature-${signature}`;
|
|
checkbox.value = signature;
|
|
checkbox.onclick = () => {
|
|
updateSignatureToggle();
|
|
saveSelectedSignaturesToCookie();
|
|
};
|
|
col.appendChild(checkbox);
|
|
|
|
row.appendChild(col);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Downloads a random record from the API.
|
|
*
|
|
* @param callback the function to execute with the record
|
|
* @param handle the function to execute if signatures could not be downloaded
|
|
*/
|
|
const downloadRandomRecord = (callback, handle) => {
|
|
const selectedSignatures = getSelectedSignatures();
|
|
|
|
fetch(`api.php?action=get-random&signatures=${selectedSignatures.join(",")}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
if (handle) handle(response);
|
|
console.error(response);
|
|
throw new Error("Failed to fetch random record.");
|
|
}
|
|
|
|
return response.text();
|
|
})
|
|
.then(record => callback(record));
|
|
};
|
|
|
|
/**
|
|
* Displays a record on the page.
|
|
*
|
|
* @param record the record to display
|
|
*/
|
|
const showRecord = (record) => {
|
|
$("#output").innerHTML = record;
|
|
|
|
const scrollingElement = (document.scrollingElement || document.body);
|
|
scrollingElement.scrollTop = scrollingElement.scrollHeight;
|
|
};
|
|
|
|
|
|
doAfterLoad(() => {
|
|
$("#nav").appendChild(nav());
|
|
$("#header").appendChild(header({
|
|
title: "Random Fallout 76 record",
|
|
description: "Retrieve a random record from the <i>Fallout 76</i> game files"
|
|
}));
|
|
$("#footer").appendChild(footer({
|
|
author: "Felix W. Dekker",
|
|
authorURL: "https://fwdekker.com/",
|
|
license: "MIT License",
|
|
licenseURL: "https://git.fwdekker.com/FWDekker/interlanguage-checker/src/branch/master/LICENSE",
|
|
vcs: "git",
|
|
vcsURL: "https://git.fwdekker.com/FWDekker/interlanguage-checker/",
|
|
version: "v%%VERSION_NUMBER%%"
|
|
}));
|
|
$("main").style.display = null;
|
|
});
|
|
|
|
doAfterLoad(() => {
|
|
$("#submit").onclick = () => downloadRandomRecord(record => showRecord(record));
|
|
|
|
downloadSignatures(
|
|
signatures => {
|
|
createSignatureButtons(signatures);
|
|
loadSelectedSignaturesFromCookie();
|
|
},
|
|
errorResponse => {
|
|
const form = $("#signatureForm");
|
|
form.style.color = "red";
|
|
form.innerHTML = "Error: Failed to download signatures."
|
|
});
|
|
});
|