function log(str) {
c++;
document.getElementById("log").innerText = str;
setTimeout(
function() {
--c;
if (!c) {
document.getElementById("log").innerText = " ";
}
}, 3000
);
}
function addToOutput(starting, json, key, title) {
starting += `
${title}
`; // Title
for (let i = 0; i < json[key].length; i++) {
starting += `
`;
}
starting += `
`;
return starting;
}
function add_input(key) {
let x = document.createElement("div")
let q = [...document.querySelectorAll(`#${key} div[id^="${key}-"]`)];
let i = Number(q[q.length - 1] ? q[q.length - 1].dataset.id : "-1") + 1;
x.id = `${key}-${i}`;
x.setAttribute("data-id", i);
x.innerHTML = `
`;
dom(key).append(x);
}
function updateColors() {
document.body.setAttribute("style", `--background: ${colors.background}; --background-low-opacity: ${colors.background}33; --accent: ${colors.accent}; --accent-low-opacity: ${colors.accent}66; --text: ${colors.text}; --text-low-opacity: ${colors.text}88;`);
}
function get_list(key) {
let output = [];
[...document.querySelectorAll(`#${key} div[id^="${key}-"]`)].forEach((val, index) => {
output.push([val.querySelector("input").value, val.querySelector("select").value]);
});
return output;
}
if (localStorage.getItem("token")) {
setCookie("token", localStorage.getItem("token"));
} else {
window.location.href = "/logout";
}
let colors, c;
fetch("/api/account/self", {
"method": "GET"
}).then((response) => (response.json()))
.then((json) => {
colors = json.colors;
updateColors();
let x = document.createElement("div");
let inner = `
Text color:
Background color:
Accent color:
`;
inner = addToOutput(inner, json, "names", "Names");
inner = addToOutput(inner, json, "pronouns", "Pronouns");
inner = addToOutput(inner, json, "honorifics", "Honorifics");
inner = addToOutput(inner, json, "compliments", "Compliments");
inner = addToOutput(inner, json, "relationship", "Relationship
Descriptions");
inner += "
";
x.id = "container";
x.innerHTML = inner;
document.body.append(x);
dom("input-description").addEventListener("input", function() {
let cursorPosition = this.selectionStart;
if (this.value.indexOf("\n") !== -1) {
--cursorPosition;
}
this.value = this.value.replaceAll("\n", "").replaceAll("\r", "");
this.setSelectionRange(cursorPosition, cursorPosition);
});
dom("save").addEventListener("click", function() {
fetch("/api/save", {
"method": "PATCH",
"body": JSON.stringify({
colors: colors,
display_name: dom("input-display-name").value,
description: dom("input-description").value,
names: get_list("names"),
pronouns: get_list("pronouns"),
honorifics: get_list("honorifics"),
compliments: get_list("compliments"),
relationship: get_list("relationship")
})
}).then((response) => (response.text()))
.then((text) => {
if (text === "200 OK") {
log("Saved!");
} else {
log("Something went wrong when saving!");
}
})
.catch((err) => {
log("Something went wrong when saving!");
})
});
dom("input-col-text").addEventListener("input", function() {
colors.text = this.value;
updateColors();
});
dom("input-col-accent").addEventListener("input", function() {
colors.accent = this.value;
updateColors();
});
dom("input-col-background").addEventListener("input", function() {
colors.background = this.value;
updateColors();
});
})
.catch((err) => {
window.location.href = "/logout";
});