1088 lines
36 KiB
JavaScript
1088 lines
36 KiB
JavaScript
|
let colorPicker = new iro.ColorPicker("#colorpicker");
|
||
|
|
let $discordFrame;
|
||
|
|
const $loader = document.querySelector("#loader");
|
||
|
|
const $colorPickerModal = document.querySelector("div#pickColorModal");
|
||
|
|
const $colorPickerInput = $colorPickerModal.querySelector("input");
|
||
|
|
const $deleteReminderBtn = document.querySelector("#delete-reminder-confirm");
|
||
|
|
const $reminderTemplate = document.querySelector("template#guildReminder");
|
||
|
|
const $embedFieldTemplate = document.querySelector("template#embedFieldTemplate");
|
||
|
|
const $createReminder = document.querySelector("#reminderCreator");
|
||
|
|
const $createReminderBtn = $createReminder.querySelector("button#createReminder");
|
||
|
|
const $createTemplateBtn = $createReminder.querySelector("button#createTemplate");
|
||
|
|
const $loadTemplateBtn = document.querySelector("button#load-template");
|
||
|
|
const $deleteTemplateBtn = document.querySelector("button#delete-template");
|
||
|
|
const $templateSelect = document.querySelector("select#templateSelect");
|
||
|
|
const $exportBtn = document.querySelector("button#export-data");
|
||
|
|
const $importBtn = document.querySelector("button#import-data");
|
||
|
|
const $downloader = document.querySelector("a#downloader");
|
||
|
|
const $uploader = document.querySelector("input#uploader");
|
||
|
|
|
||
|
|
let channels = [];
|
||
|
|
let guildNames = {};
|
||
|
|
let roles = [];
|
||
|
|
let templates = {};
|
||
|
|
let mentions = new Tribute({
|
||
|
|
values: [],
|
||
|
|
allowSpaces: true,
|
||
|
|
selectTemplate: (item) => {
|
||
|
|
return `<@&${item.original.value}>`;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
let globalPatreon = false;
|
||
|
|
let guildPatreon = false;
|
||
|
|
|
||
|
|
function guildId() {
|
||
|
|
return document.querySelector(".guildList a.is-active").dataset["guild"];
|
||
|
|
}
|
||
|
|
|
||
|
|
function colorToInt(r, g, b) {
|
||
|
|
return (r << 16) + (g << 8) + b;
|
||
|
|
}
|
||
|
|
|
||
|
|
function intToColor(i) {
|
||
|
|
return `#${i.toString(16).padStart(6, "0")}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function switch_pane(selector) {
|
||
|
|
document.querySelectorAll("aside a").forEach((el) => {
|
||
|
|
el.classList.remove("is-active");
|
||
|
|
});
|
||
|
|
document.querySelectorAll("div.is-main-content > section").forEach((el) => {
|
||
|
|
el.classList.add("is-hidden");
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById(selector).classList.remove("is-hidden");
|
||
|
|
}
|
||
|
|
|
||
|
|
function update_select(sel) {
|
||
|
|
let channelDisplay = sel.closest("div.reminderContent").querySelector(".channel-bar");
|
||
|
|
|
||
|
|
if (channelDisplay !== null) {
|
||
|
|
channelDisplay.textContent = `#${sel.selectedOptions[0].textContent}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (sel.selectedOptions[0] === undefined) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const avatarInput = sel.closest("div.reminderContent").querySelector("img.avatar");
|
||
|
|
|
||
|
|
if (!avatarInput.dataset["set"]) {
|
||
|
|
if (sel.selectedOptions[0].dataset["webhookAvatar"]) {
|
||
|
|
avatarInput.src = sel.selectedOptions[0].dataset["webhookAvatar"];
|
||
|
|
} else {
|
||
|
|
avatarInput.src = "/static/img/icon.png";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const usernameInput = sel
|
||
|
|
.closest("div.reminderContent")
|
||
|
|
.querySelector("input.discord-username");
|
||
|
|
|
||
|
|
if (usernameInput.value.length === 0) {
|
||
|
|
if (sel.selectedOptions[0].dataset["webhookName"]) {
|
||
|
|
usernameInput.value = sel.selectedOptions[0].dataset["webhookName"];
|
||
|
|
} else {
|
||
|
|
usernameInput.value = "Reminder";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function reset_guild_pane() {
|
||
|
|
document
|
||
|
|
.querySelectorAll("select.channel-selector option")
|
||
|
|
.forEach((opt) => opt.remove());
|
||
|
|
}
|
||
|
|
|
||
|
|
async function fetch_patreon(guild_id) {
|
||
|
|
fetch(`/dashboard/api/guild/${guild_id}/patreon`)
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
} else {
|
||
|
|
return data.patreon;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function fetch_roles(guild_id) {
|
||
|
|
fetch(`/dashboard/api/guild/${guild_id}/roles`)
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
} else {
|
||
|
|
let values = Array.from(
|
||
|
|
data.map((role) => {
|
||
|
|
return {
|
||
|
|
key: role.name,
|
||
|
|
value: role.id,
|
||
|
|
};
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
mentions.collection[0].values = values;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function fetch_templates(guild_id) {
|
||
|
|
fetch(`/dashboard/api/guild/${guild_id}/templates`)
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
} else {
|
||
|
|
templates = {};
|
||
|
|
|
||
|
|
const select = document.querySelector("#templateSelect");
|
||
|
|
select.innerHTML = "";
|
||
|
|
for (let template of data) {
|
||
|
|
templates[template["id"]] = template;
|
||
|
|
|
||
|
|
let option = document.createElement("option");
|
||
|
|
option.value = template["id"];
|
||
|
|
option.textContent = template["name"];
|
||
|
|
|
||
|
|
select.appendChild(option);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function fetch_channels(guild_id) {
|
||
|
|
const event = new Event("channelsLoading");
|
||
|
|
document.dispatchEvent(event);
|
||
|
|
|
||
|
|
let hasError = false;
|
||
|
|
|
||
|
|
await fetch(`/dashboard/api/guild/${guild_id}/channels`)
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
if (data.error === "Bot not in guild") {
|
||
|
|
switch_pane("guild-error");
|
||
|
|
hasError = true;
|
||
|
|
} else if (data.error === "Incorrect permissions") {
|
||
|
|
switch_pane("user-error");
|
||
|
|
hasError = true;
|
||
|
|
} else {
|
||
|
|
show_error(data.error);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
channels = data;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
const event = new Event("channelsLoaded");
|
||
|
|
document.dispatchEvent(event);
|
||
|
|
});
|
||
|
|
|
||
|
|
return hasError;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function fetch_reminders(guild_id) {
|
||
|
|
document.dispatchEvent(new Event("remindersLoading"));
|
||
|
|
|
||
|
|
const $reminderBox = document.querySelector("div#guildReminders");
|
||
|
|
|
||
|
|
// reset div contents
|
||
|
|
$reminderBox.innerHTML = "";
|
||
|
|
|
||
|
|
// fetch reminders
|
||
|
|
await fetch(`/dashboard/api/guild/${guild_id}/reminders`)
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
} else {
|
||
|
|
for (let reminder of data) {
|
||
|
|
let newFrame = $reminderTemplate.content.cloneNode(true);
|
||
|
|
|
||
|
|
newFrame.querySelector(".reminderContent").dataset["uid"] =
|
||
|
|
reminder["uid"];
|
||
|
|
|
||
|
|
mentions.attach(newFrame.querySelector("textarea"));
|
||
|
|
|
||
|
|
deserialize_reminder(reminder, newFrame, "load");
|
||
|
|
|
||
|
|
$reminderBox.appendChild(newFrame);
|
||
|
|
|
||
|
|
reminder.node = $reminderBox.lastElementChild;
|
||
|
|
}
|
||
|
|
|
||
|
|
const remindersLoadedEvent = new CustomEvent("remindersLoaded", {
|
||
|
|
detail: data,
|
||
|
|
});
|
||
|
|
|
||
|
|
document.dispatchEvent(remindersLoadedEvent);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function serialize_reminder(node, mode) {
|
||
|
|
let utc_time, expiration_time;
|
||
|
|
let interval = get_interval(node);
|
||
|
|
|
||
|
|
if (mode !== "template") {
|
||
|
|
utc_time = luxon.DateTime.fromISO(
|
||
|
|
node.querySelector('input[name="time"]').value
|
||
|
|
).setZone("UTC");
|
||
|
|
|
||
|
|
if (utc_time.invalid) {
|
||
|
|
return { error: "Time provided invalid." };
|
||
|
|
} else {
|
||
|
|
utc_time = utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss");
|
||
|
|
}
|
||
|
|
|
||
|
|
let expiration = node.querySelector('input[name="expiration"]').value;
|
||
|
|
|
||
|
|
if (expiration) {
|
||
|
|
expiration_time = luxon.DateTime.fromISO(
|
||
|
|
node.querySelector('input[name="expiration"]').value
|
||
|
|
).setZone("UTC");
|
||
|
|
if (expiration_time.invalid) {
|
||
|
|
return { error: "Expiration provided invalid." };
|
||
|
|
} else {
|
||
|
|
expiration_time = expiration_time.toFormat("yyyy-LL-dd'T'HH:mm:ss");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let name = node.querySelector('input[name="name"]').value;
|
||
|
|
if (name.length > 100) {
|
||
|
|
return { error: "Name exceeds maximum length (100)." };
|
||
|
|
}
|
||
|
|
|
||
|
|
let rgb_color = window.getComputedStyle(
|
||
|
|
node.querySelector("div.discord-embed")
|
||
|
|
).borderLeftColor;
|
||
|
|
let rgb = rgb_color.match(/\d+/g);
|
||
|
|
let color = colorToInt(parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2]));
|
||
|
|
|
||
|
|
let fields = [
|
||
|
|
...node.querySelectorAll("div.embed-multifield-box div.embed-field-box"),
|
||
|
|
]
|
||
|
|
.map((el) => {
|
||
|
|
return {
|
||
|
|
title: el.querySelector("textarea.discord-field-title").value,
|
||
|
|
value: el.querySelector("textarea.discord-field-value").value,
|
||
|
|
inline: el.dataset["inlined"] === "1",
|
||
|
|
};
|
||
|
|
})
|
||
|
|
.filter(({ title, value, inline }) => title.length + value.length > 0);
|
||
|
|
|
||
|
|
let attachment = null;
|
||
|
|
let attachment_name = null;
|
||
|
|
|
||
|
|
if (node.querySelector('input[name="attachment"]').files.length > 0) {
|
||
|
|
let file = node.querySelector('input[name="attachment"]').files[0];
|
||
|
|
|
||
|
|
if (file.size >= 8 * 1024 * 1024) {
|
||
|
|
return { error: "File too large." };
|
||
|
|
}
|
||
|
|
|
||
|
|
attachment = await new Promise((resolve) => {
|
||
|
|
let fileReader = new FileReader();
|
||
|
|
fileReader.onload = (e) => resolve(fileReader.result);
|
||
|
|
fileReader.readAsDataURL(file);
|
||
|
|
});
|
||
|
|
attachment = attachment.split(",")[1];
|
||
|
|
attachment_name = file.name;
|
||
|
|
}
|
||
|
|
|
||
|
|
let uid = "";
|
||
|
|
if (mode === "edit") {
|
||
|
|
uid = node.closest(".reminderContent").dataset["uid"];
|
||
|
|
}
|
||
|
|
|
||
|
|
let enabled = null;
|
||
|
|
if (mode === "create") {
|
||
|
|
enabled = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
const content = node.querySelector('textarea[name="content"]').value;
|
||
|
|
const embed_author_url = has_source(node.querySelector("img.embed_author_url").src);
|
||
|
|
const embed_author = node.querySelector('textarea[name="embed_author"]').value;
|
||
|
|
const embed_description = node.querySelector(
|
||
|
|
'textarea[name="embed_description"]'
|
||
|
|
).value;
|
||
|
|
const embed_footer = node.querySelector('textarea[name="embed_footer"]').value;
|
||
|
|
const embed_footer_url = has_source(node.querySelector("img.embed_footer_url").src);
|
||
|
|
const embed_image_url = has_source(node.querySelector("img.embed_image_url").src);
|
||
|
|
const embed_thumbnail_url = has_source(
|
||
|
|
node.querySelector("img.embed_thumbnail_url").src
|
||
|
|
);
|
||
|
|
const embed_title = node.querySelector('textarea[name="embed_title"]').value;
|
||
|
|
|
||
|
|
if (
|
||
|
|
content.length === 0 &&
|
||
|
|
embed_author.length === 0 &&
|
||
|
|
embed_title.length === 0 &&
|
||
|
|
embed_description.length === 0 &&
|
||
|
|
embed_footer.length === 0 &&
|
||
|
|
embed_author_url === null &&
|
||
|
|
embed_footer_url === null &&
|
||
|
|
embed_image_url === null &&
|
||
|
|
embed_thumbnail_url === null &&
|
||
|
|
fields.length === 0 &&
|
||
|
|
attachment === null
|
||
|
|
) {
|
||
|
|
return { error: "Reminder needs content." };
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
// if we're creating a reminder, ignore this field
|
||
|
|
uid: uid,
|
||
|
|
// if we're editing a reminder, ignore this field
|
||
|
|
enabled: enabled,
|
||
|
|
restartable: false,
|
||
|
|
attachment: attachment,
|
||
|
|
attachment_name: attachment_name,
|
||
|
|
avatar: has_source(node.querySelector("img.avatar").src),
|
||
|
|
channel: node.querySelector("select.channel-selector").value,
|
||
|
|
content: content,
|
||
|
|
embed_author_url: embed_author_url,
|
||
|
|
embed_author: embed_author,
|
||
|
|
embed_color: color,
|
||
|
|
embed_description: embed_description,
|
||
|
|
embed_footer: embed_footer,
|
||
|
|
embed_footer_url: embed_footer_url,
|
||
|
|
embed_image_url: embed_image_url,
|
||
|
|
embed_thumbnail_url: embed_thumbnail_url,
|
||
|
|
embed_title: embed_title,
|
||
|
|
embed_fields: fields,
|
||
|
|
expires: expiration_time,
|
||
|
|
interval_seconds: interval.seconds,
|
||
|
|
interval_days: interval.days,
|
||
|
|
interval_months: interval.months,
|
||
|
|
name: node.querySelector('input[name="name"]').value,
|
||
|
|
tts: node.querySelector('input[name="tts"]').checked,
|
||
|
|
username: node.querySelector('input[name="username"]').value,
|
||
|
|
utc_time: utc_time,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function deserialize_reminder(reminder, frame, mode) {
|
||
|
|
// populate channels
|
||
|
|
set_channels(frame.querySelector("select.channel-selector"));
|
||
|
|
|
||
|
|
frame.querySelector(`*[name="interval_hours"]`).value = 0;
|
||
|
|
frame.querySelector(`*[name="interval_minutes"]`).value = 0;
|
||
|
|
|
||
|
|
// populate majority of items
|
||
|
|
for (let prop in reminder) {
|
||
|
|
if (reminder.hasOwnProperty(prop) && reminder[prop] !== null) {
|
||
|
|
if (prop === "attachment") {
|
||
|
|
} else if (prop === "attachment_name") {
|
||
|
|
frame.querySelector(".file-cta > .file-label").textContent =
|
||
|
|
reminder[prop];
|
||
|
|
} else {
|
||
|
|
let $input = frame.querySelector(`*[name="${prop}"]`);
|
||
|
|
let $image = frame.querySelector(`img.${prop}`);
|
||
|
|
|
||
|
|
if ($input !== null) {
|
||
|
|
$input.value = reminder[prop];
|
||
|
|
} else if ($image !== null) {
|
||
|
|
console.log(`loading img ${prop}`);
|
||
|
|
$image.src = reminder[prop];
|
||
|
|
$image.dataset["set"] = "1";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
update_interval(frame);
|
||
|
|
update_select(frame.querySelector(".channel-selector"));
|
||
|
|
|
||
|
|
const lastChild = frame.querySelector(
|
||
|
|
"div.embed-multifield-box .embed-field-box:last-child"
|
||
|
|
);
|
||
|
|
|
||
|
|
// Drop existing fields
|
||
|
|
frame
|
||
|
|
.querySelectorAll(".embed-field-box:not(:last-child)")
|
||
|
|
.forEach((el) => el.remove());
|
||
|
|
|
||
|
|
for (let field of reminder["embed_fields"] || []) {
|
||
|
|
let embed_field = $embedFieldTemplate.content.cloneNode(true);
|
||
|
|
embed_field.querySelector("textarea.discord-field-title").value = field["title"];
|
||
|
|
embed_field.querySelector("textarea.discord-field-value").value = field["value"];
|
||
|
|
embed_field.querySelector(".embed-field-box").dataset["inlined"] = field["inline"]
|
||
|
|
? "1"
|
||
|
|
: "0";
|
||
|
|
|
||
|
|
frame
|
||
|
|
.querySelector("div.embed-multifield-box")
|
||
|
|
.insertBefore(embed_field, lastChild);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (reminder["interval_seconds"]) update_interval(frame);
|
||
|
|
|
||
|
|
if (mode !== "template") {
|
||
|
|
let $enableBtn = frame.querySelector(".disable-enable");
|
||
|
|
$enableBtn.dataset["action"] = reminder["enabled"] ? "disable" : "enable";
|
||
|
|
|
||
|
|
let timeInput = frame.querySelector('input[name="time"]');
|
||
|
|
let localTime = luxon.DateTime.fromISO(reminder["utc_time"], {
|
||
|
|
zone: "UTC",
|
||
|
|
}).setZone(timezone);
|
||
|
|
timeInput.value = localTime.toFormat("yyyy-LL-dd'T'HH:mm:ss");
|
||
|
|
|
||
|
|
if (reminder["expires"]) {
|
||
|
|
let expiresInput = frame.querySelector('input[name="expiration"]');
|
||
|
|
let expiresTime = luxon.DateTime.fromISO(reminder["expires"], {
|
||
|
|
zone: "UTC",
|
||
|
|
}).setZone(timezone);
|
||
|
|
expiresInput.value = expiresTime.toFormat("yyyy-LL-dd'T'HH:mm:ss");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener("guildSwitched", async (e) => {
|
||
|
|
$loader.classList.remove("is-hidden");
|
||
|
|
|
||
|
|
document
|
||
|
|
.querySelectorAll(".patreon-only")
|
||
|
|
.forEach((el) => el.classList.add("is-locked"));
|
||
|
|
|
||
|
|
let $anchor = document.querySelector(
|
||
|
|
`.switch-pane[data-guild="${e.detail.guild_id}"]`
|
||
|
|
);
|
||
|
|
|
||
|
|
let hasError = false;
|
||
|
|
|
||
|
|
if ($anchor === null) {
|
||
|
|
switch_pane("user-error");
|
||
|
|
hasError = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
switch_pane($anchor.dataset["pane"]);
|
||
|
|
reset_guild_pane();
|
||
|
|
$anchor.classList.add("is-active");
|
||
|
|
|
||
|
|
if (globalPatreon || (await fetch_patreon(e.detail.guild_id))) {
|
||
|
|
document
|
||
|
|
.querySelectorAll(".patreon-only")
|
||
|
|
.forEach((el) => el.classList.remove("is-locked"));
|
||
|
|
}
|
||
|
|
|
||
|
|
hasError = await fetch_channels(e.detail.guild_id);
|
||
|
|
if (!hasError) {
|
||
|
|
fetch_roles(e.detail.guild_id);
|
||
|
|
fetch_templates(e.detail.guild_id);
|
||
|
|
fetch_reminders(e.detail.guild_id);
|
||
|
|
|
||
|
|
document.querySelectorAll("p.pageTitle").forEach((el) => {
|
||
|
|
el.textContent = `${e.detail.guild_name} Reminders`;
|
||
|
|
});
|
||
|
|
document.querySelectorAll("select.channel-selector").forEach((el) => {
|
||
|
|
el.addEventListener("change", (e) => {
|
||
|
|
update_select(e.target);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
$loader.classList.add("is-hidden");
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener("channelsLoaded", () => {
|
||
|
|
document.querySelectorAll("select.channel-selector").forEach(set_channels);
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener("remindersLoaded", (event) => {
|
||
|
|
const guild = guildId();
|
||
|
|
|
||
|
|
document.querySelectorAll("select.channel-selector").forEach((el) => {
|
||
|
|
el.addEventListener("change", (e) => {
|
||
|
|
update_select(e.target);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
for (let reminder of event.detail) {
|
||
|
|
let node = reminder.node;
|
||
|
|
|
||
|
|
node.querySelector("button.hide-box").addEventListener("click", () => {
|
||
|
|
node.closest(".reminderContent").classList.toggle("is-collapsed");
|
||
|
|
});
|
||
|
|
|
||
|
|
node.querySelector("div.discord-embed").style.borderLeftColor = intToColor(
|
||
|
|
reminder.embed_color
|
||
|
|
);
|
||
|
|
|
||
|
|
const enableBtn = node.querySelector(".disable-enable");
|
||
|
|
enableBtn.addEventListener("click", () => {
|
||
|
|
let enable = enableBtn.dataset["action"] === "enable";
|
||
|
|
|
||
|
|
fetch(`/dashboard/api/guild/${guild}/reminders`, {
|
||
|
|
method: "PATCH",
|
||
|
|
body: JSON.stringify({
|
||
|
|
uid: reminder["uid"],
|
||
|
|
enabled: enable,
|
||
|
|
}),
|
||
|
|
})
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
} else {
|
||
|
|
enableBtn.dataset["action"] = data.reminder["enabled"]
|
||
|
|
? "disable"
|
||
|
|
: "enable";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
node.querySelector("button.delete-reminder").addEventListener("click", () => {
|
||
|
|
$deleteReminderBtn.dataset["uid"] = reminder["uid"];
|
||
|
|
$deleteReminderBtn.closest(".modal").classList.toggle("is-active");
|
||
|
|
});
|
||
|
|
|
||
|
|
const $saveBtn = node.querySelector("button.save-btn");
|
||
|
|
|
||
|
|
$saveBtn.addEventListener("click", async (event) => {
|
||
|
|
$saveBtn.querySelector("span.icon > i").classList = [
|
||
|
|
"fas fa-spinner fa-spin",
|
||
|
|
];
|
||
|
|
|
||
|
|
let reminder = await serialize_reminder(node, "edit");
|
||
|
|
if (reminder.error) {
|
||
|
|
show_error(reminder.error);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let guild = guildId();
|
||
|
|
|
||
|
|
fetch(`/dashboard/api/guild/${guild}/reminders`, {
|
||
|
|
method: "PATCH",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify(reminder),
|
||
|
|
})
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
for (let error of data.errors) show_error(error);
|
||
|
|
|
||
|
|
deserialize_reminder(data.reminder, node, "reload");
|
||
|
|
});
|
||
|
|
|
||
|
|
$saveBtn.querySelector("span.icon > i").classList = ["fas fa-check"];
|
||
|
|
|
||
|
|
window.setTimeout(() => {
|
||
|
|
$saveBtn.querySelector("span.icon > i").classList = ["fas fa-save"];
|
||
|
|
}, 1500);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$deleteReminderBtn.addEventListener("click", () => {
|
||
|
|
let guild = guildId();
|
||
|
|
|
||
|
|
fetch(`/dashboard/api/guild/${guild}/reminders`, {
|
||
|
|
method: "DELETE",
|
||
|
|
body: JSON.stringify({
|
||
|
|
uid: $deleteReminderBtn.dataset["uid"],
|
||
|
|
}),
|
||
|
|
}).then(() => {
|
||
|
|
document.querySelector("#deleteReminderModal").classList.remove("is-active");
|
||
|
|
fetch_reminders(guild);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function show_error(error) {
|
||
|
|
document.getElementById("errors").querySelector("span.error-message").textContent =
|
||
|
|
error;
|
||
|
|
document.getElementById("errors").classList.add("is-active");
|
||
|
|
|
||
|
|
window.setTimeout(() => {
|
||
|
|
document.getElementById("errors").classList.remove("is-active");
|
||
|
|
}, 5000);
|
||
|
|
}
|
||
|
|
|
||
|
|
function show_success(error) {
|
||
|
|
document.getElementById("success").querySelector("span.success-message").textContent =
|
||
|
|
error;
|
||
|
|
document.getElementById("success").classList.add("is-active");
|
||
|
|
|
||
|
|
window.setTimeout(() => {
|
||
|
|
document.getElementById("success").classList.remove("is-active");
|
||
|
|
}, 5000);
|
||
|
|
}
|
||
|
|
|
||
|
|
$colorPickerInput.value = colorPicker.color.hexString;
|
||
|
|
|
||
|
|
$colorPickerInput.addEventListener("input", () => {
|
||
|
|
if (/^#[0-9a-fA-F]{6}$/.test($colorPickerInput.value) === true) {
|
||
|
|
colorPicker.color.hexString = $colorPickerInput.value;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
colorPicker.on("color:change", function (color) {
|
||
|
|
$colorPickerInput.value = color.hexString;
|
||
|
|
});
|
||
|
|
|
||
|
|
$colorPickerModal.querySelector("button.is-success").addEventListener("click", () => {
|
||
|
|
$discordFrame.style.borderLeftColor = colorPicker.color.rgbString;
|
||
|
|
|
||
|
|
$colorPickerModal.classList.remove("is-active");
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll(".show-modal").forEach((element) => {
|
||
|
|
element.addEventListener("click", (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
document.getElementById(element.dataset["modal"]).classList.toggle("is-active");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
||
|
|
$loader.classList.remove("is-hidden");
|
||
|
|
|
||
|
|
mentions.attach(document.querySelectorAll("textarea"));
|
||
|
|
|
||
|
|
document.querySelectorAll(".navbar-burger").forEach((el) => {
|
||
|
|
el.addEventListener("click", () => {
|
||
|
|
const target = el.dataset["target"];
|
||
|
|
const $target = document.getElementById(target);
|
||
|
|
|
||
|
|
el.classList.toggle("is-active");
|
||
|
|
$target.classList.toggle("is-active");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
let hideBox = document.querySelector("#reminderCreator button.hide-box");
|
||
|
|
hideBox.addEventListener("click", () => {
|
||
|
|
hideBox.closest(".reminderContent").classList.toggle("is-collapsed");
|
||
|
|
});
|
||
|
|
|
||
|
|
await fetch("/dashboard/api/user")
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
} else {
|
||
|
|
if (data.timezone !== null) botTimezone = data.timezone;
|
||
|
|
|
||
|
|
globalPatreon = data.patreon;
|
||
|
|
|
||
|
|
update_times();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
await fetch("/dashboard/api/user/guilds")
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
} else {
|
||
|
|
const $template = document.getElementById("guildListEntry");
|
||
|
|
|
||
|
|
for (let guild of data) {
|
||
|
|
guildNames[guild.id] = guild.name;
|
||
|
|
|
||
|
|
document.querySelectorAll(".guildList").forEach((element) => {
|
||
|
|
const $clone = $template.content.cloneNode(true);
|
||
|
|
const $anchor = $clone.querySelector("a");
|
||
|
|
|
||
|
|
let $span = $clone.querySelector("a > span.guild-name");
|
||
|
|
|
||
|
|
$span.textContent = $span.textContent.replace(
|
||
|
|
"%guildname%",
|
||
|
|
guild.name
|
||
|
|
);
|
||
|
|
$anchor.dataset["guild"] = guild.id;
|
||
|
|
$anchor.dataset["name"] = guild.name;
|
||
|
|
$anchor.href = `/dashboard/${guild.id}?name=${guild.name}`;
|
||
|
|
|
||
|
|
$anchor.addEventListener("click", async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
window.history.pushState({}, "", `/dashboard/${guild.id}`);
|
||
|
|
const event = new CustomEvent("guildSwitched", {
|
||
|
|
detail: {
|
||
|
|
guild_name: guild.name,
|
||
|
|
guild_id: guild.id,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
document.dispatchEvent(event);
|
||
|
|
});
|
||
|
|
|
||
|
|
element.append($clone);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const matches = window.location.href.match(/dashboard\/(\d+)/);
|
||
|
|
if (matches) {
|
||
|
|
let id = matches[1];
|
||
|
|
let name = guildNames[id];
|
||
|
|
|
||
|
|
const event = new CustomEvent("guildSwitched", {
|
||
|
|
detail: {
|
||
|
|
guild_name: name,
|
||
|
|
guild_id: id,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
document.dispatchEvent(event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$loader.classList.add("is-hidden");
|
||
|
|
});
|
||
|
|
|
||
|
|
function set_channels(element) {
|
||
|
|
for (let channel of channels) {
|
||
|
|
let newOption = document.createElement("option");
|
||
|
|
|
||
|
|
newOption.value = channel.id;
|
||
|
|
newOption.textContent = channel.name;
|
||
|
|
|
||
|
|
element.appendChild(newOption);
|
||
|
|
}
|
||
|
|
|
||
|
|
update_select(element);
|
||
|
|
}
|
||
|
|
|
||
|
|
function has_source(string) {
|
||
|
|
if (string.startsWith(`https://${window.location.hostname}`)) {
|
||
|
|
return null;
|
||
|
|
} else {
|
||
|
|
return string;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$uploader.addEventListener("change", (ev) => {
|
||
|
|
const urlTail = document.querySelector('input[name="exportSelect"]:checked').value;
|
||
|
|
|
||
|
|
new Promise((resolve) => {
|
||
|
|
let fileReader = new FileReader();
|
||
|
|
fileReader.onload = (e) => resolve(fileReader.result);
|
||
|
|
fileReader.readAsDataURL($uploader.files[0]);
|
||
|
|
}).then((dataUrl) => {
|
||
|
|
$importBtn.setAttribute("disabled", true);
|
||
|
|
|
||
|
|
fetch(`/dashboard/api/guild/${guildId()}/export/${urlTail}`, {
|
||
|
|
method: "PUT",
|
||
|
|
body: JSON.stringify({ body: dataUrl.split(",")[1] }),
|
||
|
|
})
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
$importBtn.removeAttribute("disabled");
|
||
|
|
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
} else {
|
||
|
|
show_success(data.message);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
delete $uploader.files[0];
|
||
|
|
fetch_reminders(guild);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$importBtn.addEventListener("click", () => {
|
||
|
|
$uploader.click();
|
||
|
|
});
|
||
|
|
|
||
|
|
$exportBtn.addEventListener("click", () => {
|
||
|
|
const urlTail = document.querySelector('input[name="exportSelect"]:checked').value;
|
||
|
|
|
||
|
|
fetch(`/dashboard/api/guild/${guildId()}/export/${urlTail}`)
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
$downloader.href =
|
||
|
|
"data:text/plain;charset=utf-8," + encodeURIComponent(data.body);
|
||
|
|
$downloader.click();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$createReminderBtn.addEventListener("click", async () => {
|
||
|
|
$createReminderBtn.querySelector("span.icon > i").classList = [
|
||
|
|
"fas fa-spinner fa-spin",
|
||
|
|
];
|
||
|
|
|
||
|
|
let reminder = await serialize_reminder($createReminder, "create");
|
||
|
|
if (reminder.error) {
|
||
|
|
show_error(reminder.error);
|
||
|
|
$createReminderBtn.querySelector("span.icon > i").classList = ["fas fa-sparkles"];
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let guild = guildId();
|
||
|
|
|
||
|
|
fetch(`/dashboard/api/guild/${guild}/reminders`, {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify(reminder),
|
||
|
|
})
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
|
||
|
|
$createReminderBtn.querySelector("span.icon > i").classList = [
|
||
|
|
"fas fa-sparkles",
|
||
|
|
];
|
||
|
|
} else {
|
||
|
|
const $reminderBox = document.querySelector("div#guildReminders");
|
||
|
|
let newFrame = $reminderTemplate.content.cloneNode(true);
|
||
|
|
|
||
|
|
newFrame.querySelector(".reminderContent").dataset["uid"] = data["uid"];
|
||
|
|
|
||
|
|
deserialize_reminder(data, newFrame, "load");
|
||
|
|
|
||
|
|
$reminderBox.appendChild(newFrame);
|
||
|
|
|
||
|
|
data.node = $reminderBox.lastElementChild;
|
||
|
|
|
||
|
|
document.dispatchEvent(
|
||
|
|
new CustomEvent("remindersLoaded", {
|
||
|
|
detail: [data],
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
$createReminderBtn.querySelector("span.icon > i").classList = [
|
||
|
|
"fas fa-check",
|
||
|
|
];
|
||
|
|
|
||
|
|
window.setTimeout(() => {
|
||
|
|
$createReminderBtn.querySelector("span.icon > i").classList = [
|
||
|
|
"fas fa-sparkles",
|
||
|
|
];
|
||
|
|
}, 1500);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$createTemplateBtn.addEventListener("click", async () => {
|
||
|
|
$createTemplateBtn.querySelector("span.icon > i").classList = [
|
||
|
|
"fas fa-spinner fa-spin",
|
||
|
|
];
|
||
|
|
|
||
|
|
let reminder = await serialize_reminder($createReminder, "template");
|
||
|
|
if (reminder.error) {
|
||
|
|
show_error(reminder.error);
|
||
|
|
$createTemplateBtn.querySelector("span.icon > i").classList = [
|
||
|
|
"fas fa-file-spreadsheet",
|
||
|
|
];
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let guild = guildId();
|
||
|
|
|
||
|
|
fetch(`/dashboard/api/guild/${guild}/templates`, {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify(reminder),
|
||
|
|
})
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
$createTemplateBtn.querySelector("span.icon > i").classList = [
|
||
|
|
"fas fa-file-spreadsheet",
|
||
|
|
];
|
||
|
|
} else {
|
||
|
|
fetch_templates(guildId());
|
||
|
|
|
||
|
|
$createTemplateBtn.querySelector("span.icon > i").classList = [
|
||
|
|
"fas fa-check",
|
||
|
|
];
|
||
|
|
|
||
|
|
window.setTimeout(() => {
|
||
|
|
$createTemplateBtn.querySelector("span.icon > i").classList = [
|
||
|
|
"fas fa-file-spreadsheet",
|
||
|
|
];
|
||
|
|
}, 1500);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$loadTemplateBtn.addEventListener("click", (ev) => {
|
||
|
|
deserialize_reminder(
|
||
|
|
templates[parseInt($templateSelect.value)],
|
||
|
|
$createReminder,
|
||
|
|
"template"
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
$deleteTemplateBtn.addEventListener("click", (ev) => {
|
||
|
|
if (parseInt($templateSelect.value) !== null) {
|
||
|
|
fetch(`/dashboard/api/guild/${guildId()}/templates`, {
|
||
|
|
method: "DELETE",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ id: parseInt($templateSelect.value) }),
|
||
|
|
})
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
if (data.error) {
|
||
|
|
show_error(data.error);
|
||
|
|
} else {
|
||
|
|
$templateSelect
|
||
|
|
.querySelector(`option[value="${$templateSelect.value}"]`)
|
||
|
|
.remove();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
let $img;
|
||
|
|
const $urlModal = document.querySelector("div#addImageModal");
|
||
|
|
const $urlInput = $urlModal.querySelector("input");
|
||
|
|
|
||
|
|
$urlModal.querySelector("button#setImgUrl").addEventListener("click", () => {
|
||
|
|
$img.src = $urlInput.value;
|
||
|
|
|
||
|
|
$urlInput.value = "";
|
||
|
|
$urlModal.classList.remove("is-active");
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll("button.close-modal").forEach((element) => {
|
||
|
|
element.addEventListener("click", () => {
|
||
|
|
let $modal = element.closest("div.modal");
|
||
|
|
|
||
|
|
$urlInput.value = "";
|
||
|
|
|
||
|
|
$modal.classList.remove("is-active");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener("remindersLoaded", () => {
|
||
|
|
document.querySelectorAll(".customizable").forEach((element) => {
|
||
|
|
element.querySelector("a").addEventListener("click", (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
$img = element.querySelector("img");
|
||
|
|
|
||
|
|
$urlModal.classList.toggle("is-active");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
const fileInput = document.querySelectorAll("input.file-input[type=file]");
|
||
|
|
|
||
|
|
fileInput.forEach((element) => {
|
||
|
|
element.addEventListener("change", () => {
|
||
|
|
if (element.files.length > 0) {
|
||
|
|
const fileName = element.parentElement.querySelector(".file-label");
|
||
|
|
fileName.textContent = element.files[0].name;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll(".change-color").forEach((element) => {
|
||
|
|
element.addEventListener("click", (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
$discordFrame = element
|
||
|
|
.closest("div.reminderContent")
|
||
|
|
.querySelector("div.discord-embed");
|
||
|
|
$colorPickerModal.classList.toggle("is-active");
|
||
|
|
colorPicker.color.rgbString =
|
||
|
|
window.getComputedStyle($discordFrame).borderLeftColor;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll("textarea.autoresize").forEach((element) => {
|
||
|
|
element.addEventListener("input", () => {
|
||
|
|
element.style.height = "";
|
||
|
|
element.style.height = element.scrollHeight + 3 + "px";
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function check_embed_fields() {
|
||
|
|
document.querySelectorAll(".embed-field-box").forEach((element) => {
|
||
|
|
const $titleInput = element.querySelector(".discord-field-title");
|
||
|
|
const $valueInput = element.querySelector(".discord-field-value");
|
||
|
|
|
||
|
|
// when the user clicks out of the field title and if the field title/value are empty, remove the field
|
||
|
|
$titleInput.addEventListener("blur", () => {
|
||
|
|
if (
|
||
|
|
$titleInput.value === "" &&
|
||
|
|
$valueInput.value === "" &&
|
||
|
|
element.nextElementSibling !== null
|
||
|
|
) {
|
||
|
|
element.remove();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$valueInput.addEventListener("blur", () => {
|
||
|
|
if (
|
||
|
|
$titleInput.value === "" &&
|
||
|
|
$valueInput.value === "" &&
|
||
|
|
element.nextElementSibling !== null
|
||
|
|
) {
|
||
|
|
element.remove();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// when the user inputs into the end field, create a new field after it
|
||
|
|
$titleInput.addEventListener("input", () => {
|
||
|
|
if (
|
||
|
|
$titleInput.value !== "" &&
|
||
|
|
$valueInput.value !== "" &&
|
||
|
|
element.nextElementSibling === null
|
||
|
|
) {
|
||
|
|
const $clone = $embedFieldTemplate.content.cloneNode(true);
|
||
|
|
element.parentElement.append($clone);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$valueInput.addEventListener("input", () => {
|
||
|
|
if (
|
||
|
|
$titleInput.value !== "" &&
|
||
|
|
$valueInput.value !== "" &&
|
||
|
|
element.nextElementSibling === null
|
||
|
|
) {
|
||
|
|
const $clone = $embedFieldTemplate.content.cloneNode(true);
|
||
|
|
element.parentElement.append($clone);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener("DOMNodeInserted", () => {
|
||
|
|
document.querySelectorAll("div.mobile-sidebar a").forEach((element) => {
|
||
|
|
element.addEventListener("click", (e) => {
|
||
|
|
document.getElementById("mobileSidebar").classList.remove("is-active");
|
||
|
|
document.querySelectorAll(".navbar-burger").forEach((el) => {
|
||
|
|
el.classList.remove("is-active");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll('input[type="datetime-local"]').forEach((el) => {
|
||
|
|
let now = luxon.DateTime.now().setZone(timezone);
|
||
|
|
el.min = now.toFormat("yyyy-LL-dd'T'HH:mm:ss");
|
||
|
|
});
|
||
|
|
|
||
|
|
check_embed_fields();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener("click", (ev) => {
|
||
|
|
if (ev.target.closest("button.inline-btn") !== null) {
|
||
|
|
let inlined = ev.target.closest(".embed-field-box").dataset["inlined"];
|
||
|
|
ev.target.closest(".embed-field-box").dataset["inlined"] =
|
||
|
|
inlined === "1" ? "0" : "1";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener("DOMContentLoaded", () => {
|
||
|
|
let now = luxon.DateTime.now().setZone(timezone);
|
||
|
|
document.querySelectorAll(".prefill-now").forEach((el) => {
|
||
|
|
el.value = now.toFormat("yyyy-LL-dd'T'HH:mm:ss");
|
||
|
|
});
|
||
|
|
});
|