2022-03-20 15:46:22 +00:00
|
|
|
let colorPicker = new iro.ColorPicker("#colorpicker");
|
2022-03-19 23:47:40 +00:00
|
|
|
let $discordFrame;
|
2022-03-20 15:46:22 +00:00
|
|
|
const $loader = document.querySelector("#loader");
|
|
|
|
const $colorPickerModal = document.querySelector("div#pickColorModal");
|
|
|
|
const $colorPickerInput = $colorPickerModal.querySelector("input");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
let timezone = luxon.DateTime.now().zone.name;
|
|
|
|
const browserTimezone = luxon.DateTime.now().zone.name;
|
2022-03-20 15:46:22 +00:00
|
|
|
let botTimezone = "UTC";
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
let channels;
|
|
|
|
let roles;
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
const remindersLoadedEvent = new Event("remindersLoaded");
|
|
|
|
|
2022-03-19 23:47:40 +00:00
|
|
|
function colorToInt(r, g, b) {
|
2022-03-20 15:46:22 +00:00
|
|
|
return (r << 16) + (g << 8) + b;
|
2022-03-19 23:47:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function resize_textareas() {
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("textarea.autoresize").forEach((element) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
element.style.height = "";
|
|
|
|
element.style.height = element.scrollHeight + 3 + "px";
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
element.addEventListener("input", () => {
|
2022-03-19 23:47:40 +00:00
|
|
|
element.style.height = "";
|
|
|
|
element.style.height = element.scrollHeight + 3 + "px";
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function switch_pane(selector) {
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("aside a").forEach((el) => {
|
|
|
|
el.classList.remove("is-active");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("div.is-main-content > section").forEach((el) => {
|
|
|
|
el.classList.add("is-hidden");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.getElementById(selector).classList.remove("is-hidden");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
resize_textareas();
|
|
|
|
}
|
|
|
|
|
|
|
|
function update_select(sel) {
|
2022-03-20 15:46:22 +00:00
|
|
|
if (sel.selectedOptions[0].dataset["webhookAvatar"]) {
|
2022-03-19 23:47:40 +00:00
|
|
|
sel
|
2022-03-20 15:46:22 +00:00
|
|
|
.closest("div.reminderContent")
|
|
|
|
.querySelector("img.discord-avatar").src =
|
|
|
|
sel.selectedOptions[0].dataset["webhookAvatar"];
|
2022-03-19 23:47:40 +00:00
|
|
|
} else {
|
|
|
|
sel
|
2022-03-20 15:46:22 +00:00
|
|
|
.closest("div.reminderContent")
|
|
|
|
.querySelector("img.discord-avatar").src = "";
|
2022-03-19 23:47:40 +00:00
|
|
|
}
|
2022-03-20 15:46:22 +00:00
|
|
|
if (sel.selectedOptions[0].dataset["webhookName"]) {
|
2022-03-19 23:47:40 +00:00
|
|
|
sel
|
2022-03-20 15:46:22 +00:00
|
|
|
.closest("div.reminderContent")
|
|
|
|
.querySelector("input.discord-username").value =
|
|
|
|
sel.selectedOptions[0].dataset["webhookName"];
|
2022-03-19 23:47:40 +00:00
|
|
|
} else {
|
|
|
|
sel
|
2022-03-20 15:46:22 +00:00
|
|
|
.closest("div.reminderContent")
|
|
|
|
.querySelector("input.discord-username").value = "";
|
2022-03-19 23:47:40 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function reset_guild_pane() {
|
2022-03-20 15:46:22 +00:00
|
|
|
document
|
|
|
|
.querySelectorAll("select.channel-selector option")
|
|
|
|
.forEach((opt) => opt.remove());
|
2022-03-19 23:47:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function fetch_roles(guild_id) {
|
|
|
|
fetch(`/dashboard/api/guild/${guild_id}/roles`)
|
2022-03-20 15:46:22 +00:00
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
if (data.error) {
|
|
|
|
show_error(data.error);
|
|
|
|
} else {
|
|
|
|
roles = data;
|
|
|
|
}
|
2022-03-20 15:46:22 +00:00
|
|
|
});
|
2022-03-19 23:47:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
async function fetch_reminders(guild_id) {
|
|
|
|
// fetch dm reminders instead
|
|
|
|
if (guild_id === undefined) {
|
2022-03-20 15:46:22 +00:00
|
|
|
const $reminderBox = document.querySelector("div#personalReminders");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
// reset div contents
|
2022-03-20 15:46:22 +00:00
|
|
|
$reminderBox.innerHTML = "";
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
// fetch reminders
|
2022-03-20 15:46:22 +00:00
|
|
|
await fetch("dashboard/api/user/reminders")
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
if (data.error) {
|
|
|
|
show_error(data.error);
|
|
|
|
} else {
|
2022-03-20 15:46:22 +00:00
|
|
|
const $template = document.querySelector(
|
|
|
|
"template#personalReminder"
|
|
|
|
);
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
for (let reminder of data) {
|
|
|
|
let newFrame = $template.content.cloneNode(true);
|
|
|
|
|
|
|
|
for (let prop in reminder) {
|
2022-03-20 15:46:22 +00:00
|
|
|
if (
|
|
|
|
reminder.hasOwnProperty(prop) &&
|
|
|
|
reminder[prop] !== null
|
|
|
|
) {
|
|
|
|
let $input = newFrame.querySelector(
|
|
|
|
`*[name="${prop}"]`
|
|
|
|
);
|
|
|
|
let $image = newFrame.querySelector(
|
|
|
|
`img.${prop}`
|
|
|
|
);
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
if ($input !== null) {
|
|
|
|
$input.value = reminder[prop];
|
|
|
|
} else if ($image !== null) {
|
|
|
|
$image.src = reminder[prop];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$reminderBox.append(newFrame);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
2022-03-20 15:46:22 +00:00
|
|
|
const $reminderBox = document.querySelector("div#guildReminders");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
// reset div contents
|
2022-03-20 15:46:22 +00:00
|
|
|
$reminderBox.innerHTML = "";
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
// fetch reminders
|
|
|
|
await fetch(`dashboard/api/guild/${guild_id}/reminders`)
|
2022-03-20 15:46:22 +00:00
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
if (data.error) {
|
|
|
|
show_error(data.error);
|
|
|
|
} else {
|
|
|
|
console.log(data);
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
const $template = document.querySelector(
|
|
|
|
"template#guildReminder"
|
|
|
|
);
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
for (let reminder of data) {
|
|
|
|
let newFrame = $template.content.cloneNode(true);
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
newFrame.querySelector(".reminderContent").dataset.uid =
|
|
|
|
reminder["uid"];
|
2022-03-20 00:10:19 +00:00
|
|
|
|
2022-03-19 23:47:40 +00:00
|
|
|
// populate channels
|
2022-03-20 15:46:22 +00:00
|
|
|
set_channels(
|
|
|
|
newFrame.querySelector("select.channel-selector")
|
|
|
|
);
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
// populate majority of items
|
|
|
|
for (let prop in reminder) {
|
2022-03-20 15:46:22 +00:00
|
|
|
if (
|
|
|
|
reminder.hasOwnProperty(prop) &&
|
|
|
|
reminder[prop] !== null
|
|
|
|
) {
|
|
|
|
let $input = newFrame.querySelector(
|
|
|
|
`*[name="${prop}"]`
|
|
|
|
);
|
|
|
|
let $image = newFrame.querySelector(
|
|
|
|
`img.${prop}`
|
|
|
|
);
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
if ($input !== null) {
|
|
|
|
$input.value = reminder[prop];
|
|
|
|
} else if ($image !== null) {
|
|
|
|
$image.src = reminder[prop];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
let guild = document.querySelector(
|
|
|
|
".guildList a.is-active"
|
|
|
|
).dataset["guild"];
|
2022-03-20 00:10:19 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
let $enableBtn =
|
|
|
|
newFrame.querySelector(".disable-enable");
|
2022-03-20 00:10:19 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$enableBtn.textContent = reminder["enabled"]
|
|
|
|
? "Disable"
|
|
|
|
: "Enable";
|
|
|
|
$enableBtn.addEventListener("click", () => {
|
2022-03-20 00:10:19 +00:00
|
|
|
fetch(`/dashboard/api/guild/${guild}/reminders`, {
|
2022-03-20 15:46:22 +00:00
|
|
|
method: "PATCH",
|
2022-03-20 00:10:19 +00:00
|
|
|
body: JSON.stringify({
|
2022-03-20 15:46:22 +00:00
|
|
|
uid: reminder["uid"],
|
|
|
|
enabled: false,
|
|
|
|
}),
|
|
|
|
});
|
|
|
|
});
|
2022-03-20 00:10:19 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
let timeInput =
|
|
|
|
newFrame.querySelector('input[name="time"]');
|
|
|
|
let localTime = luxon.DateTime.fromISO(
|
|
|
|
reminder["utc_time"]
|
|
|
|
).setZone(timezone);
|
|
|
|
timeInput.value = localTime.toFormat(
|
|
|
|
"yyyy-LL-dd'T'HH:mm:ss"
|
|
|
|
);
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
$reminderBox.appendChild(newFrame);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.dispatchEvent(remindersLoadedEvent);
|
2022-03-19 23:47:40 +00:00
|
|
|
register_interval_hide();
|
|
|
|
}
|
|
|
|
|
|
|
|
function show_error(error) {
|
2022-03-20 15:46:22 +00:00
|
|
|
document
|
|
|
|
.getElementById("errors")
|
|
|
|
.querySelector("span.error-message").textContent = error;
|
|
|
|
document.getElementById("errors").classList.add("is-active");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
window.setTimeout(() => {
|
2022-03-20 15:46:22 +00:00
|
|
|
document.getElementById("errors").classList.remove("is-active");
|
2022-03-19 23:47:40 +00:00
|
|
|
}, 5000);
|
|
|
|
}
|
|
|
|
|
|
|
|
function update_times() {
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("span.set-timezone").forEach((element) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
element.textContent = timezone;
|
|
|
|
});
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("span.set-time").forEach((element) => {
|
|
|
|
element.textContent = luxon.DateTime.now()
|
|
|
|
.setZone(timezone)
|
|
|
|
.toFormat("HH:mm");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("span.browser-timezone").forEach((element) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
element.textContent = browserTimezone;
|
|
|
|
});
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("span.browser-time").forEach((element) => {
|
|
|
|
element.textContent = luxon.DateTime.now().toFormat("HH:mm");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("span.bot-timezone").forEach((element) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
element.textContent = botTimezone;
|
|
|
|
});
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("span.bot-time").forEach((element) => {
|
|
|
|
element.textContent = luxon.DateTime.now()
|
|
|
|
.setZone(botTimezone)
|
|
|
|
.toFormat("HH:mm");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
window.setInterval(() => {
|
|
|
|
update_times();
|
2022-03-20 15:46:22 +00:00
|
|
|
}, 30000);
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.getElementById("set-bot-timezone").addEventListener("click", () => {
|
2022-03-19 23:47:40 +00:00
|
|
|
timezone = botTimezone;
|
|
|
|
update_times();
|
|
|
|
});
|
2022-03-20 15:46:22 +00:00
|
|
|
document
|
|
|
|
.getElementById("set-browser-timezone")
|
|
|
|
.addEventListener("click", () => {
|
|
|
|
timezone = browserTimezone;
|
|
|
|
update_times();
|
|
|
|
});
|
|
|
|
document.getElementById("update-bot-timezone").addEventListener("click", () => {
|
2022-03-19 23:47:40 +00:00
|
|
|
timezone = browserTimezone;
|
2022-03-20 15:46:22 +00:00
|
|
|
fetch("/dashboard/api/user", {
|
|
|
|
method: "PATCH",
|
2022-03-19 23:47:40 +00:00
|
|
|
headers: {
|
2022-03-20 15:46:22 +00:00
|
|
|
Accept: "application/json",
|
|
|
|
"Content-Type": "application/json",
|
2022-03-19 23:47:40 +00:00
|
|
|
},
|
2022-03-20 15:46:22 +00:00
|
|
|
body: JSON.stringify({ timezone: timezone }),
|
2022-03-19 23:47:40 +00:00
|
|
|
})
|
2022-03-20 15:46:22 +00:00
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
if (data.error) {
|
2022-03-20 15:46:22 +00:00
|
|
|
show_error(data.error);
|
2022-03-19 23:47:40 +00:00
|
|
|
} else {
|
|
|
|
botTimezone = browserTimezone;
|
|
|
|
update_times();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
$colorPickerInput.value = colorPicker.color.hexString;
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$colorPickerInput.addEventListener("input", () => {
|
2022-03-19 23:47:40 +00:00
|
|
|
if (/^#[0-9a-fA-F]{6}$/.test($colorPickerInput.value) === true) {
|
|
|
|
colorPicker.color.hexString = $colorPickerInput.value;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
colorPicker.on("color:change", function (color) {
|
2022-03-19 23:47:40 +00:00
|
|
|
$colorPickerInput.value = color.hexString;
|
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll(".discord-embed").forEach((element) => {
|
|
|
|
element.addEventListener("click", (e) => {
|
|
|
|
if (
|
|
|
|
e.offsetX <
|
|
|
|
parseInt(window.getComputedStyle(element).borderLeftWidth)
|
|
|
|
) {
|
2022-03-19 23:47:40 +00:00
|
|
|
$discordFrame = element;
|
2022-03-20 15:46:22 +00:00
|
|
|
$colorPickerModal.classList.toggle("is-active");
|
|
|
|
colorPicker.color.rgbString =
|
|
|
|
window.getComputedStyle($discordFrame).borderLeftColor;
|
2022-03-19 23:47:40 +00:00
|
|
|
}
|
2022-03-20 15:46:22 +00:00
|
|
|
});
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll(".set-color").forEach((element) => {
|
|
|
|
element.addEventListener("click", (e) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
e.preventDefault();
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$discordFrame = element
|
|
|
|
.closest("div.reminderContent")
|
|
|
|
.querySelector("div.discord-embed");
|
|
|
|
$colorPickerModal.classList.toggle("is-active");
|
|
|
|
colorPicker.color.rgbString =
|
|
|
|
window.getComputedStyle($discordFrame).borderLeftColor;
|
|
|
|
});
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$colorPickerModal
|
|
|
|
.querySelector("button.is-success")
|
|
|
|
.addEventListener("click", () => {
|
|
|
|
$discordFrame.style.borderLeftColor = colorPicker.color.rgbString;
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$colorPickerModal.classList.remove("is-active");
|
|
|
|
});
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("a.show-modal").forEach((element) => {
|
|
|
|
element.addEventListener("click", (e) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
e.preventDefault();
|
2022-03-20 15:46:22 +00:00
|
|
|
document
|
|
|
|
.getElementById(element.dataset["modal"])
|
|
|
|
.classList.toggle("is-active");
|
|
|
|
});
|
|
|
|
});
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
|
|
$loader.classList.remove("is-hidden");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll(".navbar-burger").forEach((el) => {
|
|
|
|
el.addEventListener("click", () => {
|
2022-03-19 23:47:40 +00:00
|
|
|
const target = el.dataset.target;
|
|
|
|
const $target = document.getElementById(target);
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
el.classList.toggle("is-active");
|
|
|
|
$target.classList.toggle("is-active");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
fetch("/dashboard/api/user")
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
if (data.error) {
|
|
|
|
show_error(data.error);
|
|
|
|
} else {
|
2022-03-20 15:46:22 +00:00
|
|
|
document
|
|
|
|
.querySelectorAll("a.switch-pane")
|
|
|
|
.forEach((element) => {
|
|
|
|
element.innerHTML = element.innerHTML.replace(
|
|
|
|
"%username%",
|
|
|
|
data.name
|
|
|
|
);
|
|
|
|
|
|
|
|
element.addEventListener("click", (e) => {
|
|
|
|
e.preventDefault();
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
switch_pane(element.dataset["pane"]);
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
element.classList.add("is-active");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document
|
|
|
|
.querySelectorAll("p.pageTitle")
|
|
|
|
.forEach((el) => {
|
|
|
|
el.textContent = "Your Reminders";
|
|
|
|
});
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
if (data.timezone !== null) {
|
|
|
|
botTimezone = data.timezone;
|
|
|
|
}
|
|
|
|
|
|
|
|
update_times();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
fetch("/dashboard/api/user/guilds")
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
if (data.error) {
|
|
|
|
show_error(data.error);
|
|
|
|
} else {
|
2022-03-20 15:46:22 +00:00
|
|
|
const $template = document.getElementById("guildListEntry");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
for (let guild of data) {
|
2022-03-20 15:46:22 +00:00
|
|
|
document
|
|
|
|
.querySelectorAll(".guildList")
|
|
|
|
.forEach((element) => {
|
|
|
|
const $clone = $template.content.cloneNode(true);
|
|
|
|
const $anchor = $clone.querySelector("a");
|
|
|
|
|
|
|
|
$anchor.innerHTML = $clone
|
|
|
|
.querySelector("a")
|
|
|
|
.innerHTML.replace("%guildname%", guild.name);
|
|
|
|
$anchor.dataset["guild"] = guild.id;
|
|
|
|
$anchor.dataset["name"] = guild.name;
|
|
|
|
|
|
|
|
$anchor.addEventListener("click", async (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
$loader.classList.remove("is-hidden");
|
|
|
|
|
|
|
|
switch_pane($anchor.dataset["pane"]);
|
|
|
|
|
|
|
|
reset_guild_pane();
|
|
|
|
|
|
|
|
fetch_roles($anchor.dataset["guild"]);
|
|
|
|
|
|
|
|
await fetch(
|
|
|
|
`/dashboard/api/guild/${$anchor.dataset["guild"]}/channels`
|
|
|
|
)
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => {
|
|
|
|
if (data.error) {
|
|
|
|
if (
|
|
|
|
data.error ===
|
|
|
|
"Bot not in guild"
|
|
|
|
) {
|
|
|
|
switch_pane("guild-error");
|
|
|
|
} else {
|
|
|
|
show_error(data.error);
|
|
|
|
}
|
2022-03-19 23:47:40 +00:00
|
|
|
} else {
|
2022-03-20 15:46:22 +00:00
|
|
|
channels = data;
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document
|
|
|
|
.querySelectorAll(
|
|
|
|
"select.channel-selector"
|
|
|
|
)
|
|
|
|
.forEach(set_channels);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
fetch_reminders($anchor.dataset["guild"]);
|
|
|
|
|
|
|
|
document
|
|
|
|
.querySelectorAll("p.pageTitle")
|
|
|
|
.forEach((el) => {
|
|
|
|
el.textContent =
|
|
|
|
$anchor.dataset["name"] +
|
|
|
|
" Reminders";
|
|
|
|
});
|
|
|
|
document
|
|
|
|
.querySelectorAll("select.channel-selector")
|
|
|
|
.forEach((el) => {
|
|
|
|
el.addEventListener("change", (e) => {
|
|
|
|
update_select(e.target);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
$anchor.classList.add("is-active");
|
|
|
|
resize_textareas();
|
|
|
|
|
|
|
|
$loader.classList.add("is-hidden");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
element.append($clone);
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$loader.classList.add("is-hidden");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
function set_channels(element) {
|
|
|
|
for (let channel of channels) {
|
2022-03-20 15:46:22 +00:00
|
|
|
let newOption = document.createElement("option");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
newOption.value = channel.id;
|
|
|
|
newOption.textContent = channel.name;
|
|
|
|
if (channel.webhook_avatar !== null) {
|
2022-03-20 15:46:22 +00:00
|
|
|
newOption.dataset["webhookAvatar"] = channel.webhook_avatar;
|
2022-03-19 23:47:40 +00:00
|
|
|
}
|
|
|
|
if (channel.webhook_name !== null) {
|
2022-03-20 15:46:22 +00:00
|
|
|
newOption.dataset["webhookName"] = channel.webhook_name;
|
2022-03-19 23:47:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
element.appendChild(newOption);
|
|
|
|
}
|
|
|
|
|
|
|
|
update_select(element);
|
|
|
|
}
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
let $createReminder = document.querySelector("#reminderCreator");
|
|
|
|
|
|
|
|
$createReminder
|
|
|
|
.querySelector("button#createReminder")
|
|
|
|
.addEventListener("click", () => {
|
|
|
|
// create reminder object
|
|
|
|
let seconds =
|
|
|
|
parseInt(
|
|
|
|
$createReminder.querySelector('input[name="interval_seconds"]')
|
|
|
|
.value
|
|
|
|
) || null;
|
|
|
|
let months =
|
|
|
|
parseInt(
|
|
|
|
$createReminder.querySelector('input[name="interval_months"]')
|
|
|
|
.value
|
|
|
|
) || null;
|
|
|
|
|
|
|
|
let rgb_color = window.getComputedStyle(
|
|
|
|
$createReminder.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 utc_time = luxon.DateTime.fromISO(
|
|
|
|
$createReminder.querySelector('input[name="time"]').value
|
|
|
|
).setZone("UTC");
|
|
|
|
|
|
|
|
let reminder = {
|
|
|
|
avatar: $createReminder.querySelector("img.discord-avatar").src,
|
|
|
|
channel: $createReminder.querySelector("select.channel-selector")
|
|
|
|
.value,
|
|
|
|
content: $createReminder.querySelector("textarea#messageContent")
|
|
|
|
.value,
|
|
|
|
embed_author_url: $createReminder.querySelector(
|
|
|
|
"img.embed_author_url"
|
|
|
|
).src,
|
|
|
|
embed_author: $createReminder.querySelector("textarea#embedAuthor")
|
|
|
|
.value,
|
|
|
|
embed_color: color,
|
|
|
|
embed_description: $createReminder.querySelector(
|
|
|
|
"textarea#embedDescription"
|
|
|
|
).value,
|
|
|
|
embed_footer: $createReminder.querySelector("textarea#embedFooter")
|
|
|
|
.value,
|
|
|
|
embed_footer_url: $createReminder.querySelector(
|
|
|
|
"img.embed_footer_url"
|
|
|
|
).src,
|
|
|
|
embed_image_url: $createReminder.querySelector(
|
|
|
|
"img.embed_image_url"
|
|
|
|
).src,
|
|
|
|
embed_thumbnail_url: $createReminder.querySelector(
|
|
|
|
"img.embed_thumbnail_url"
|
|
|
|
).src,
|
|
|
|
embed_title: $createReminder.querySelector("textarea#embedTitle")
|
|
|
|
.value,
|
|
|
|
enabled: true,
|
|
|
|
expires: null,
|
|
|
|
interval_seconds: seconds,
|
|
|
|
interval_months: months,
|
|
|
|
name: $createReminder.querySelector('input[name="name"]').value,
|
|
|
|
pin: $createReminder.querySelector('input[name="pin"]').checked,
|
|
|
|
restartable: false,
|
|
|
|
tts: $createReminder.querySelector('input[name="tts"]').checked,
|
|
|
|
username: $createReminder.querySelector("input#reminderUsername")
|
|
|
|
.value,
|
|
|
|
utc_time: utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
|
|
|
|
};
|
|
|
|
|
|
|
|
// send to server
|
|
|
|
let guild = document.querySelector(".guildList a.is-active").dataset[
|
|
|
|
"guild"
|
|
|
|
];
|
|
|
|
|
|
|
|
fetch(`/dashboard/api/guild/${guild}/reminders`, {
|
|
|
|
method: "POST",
|
|
|
|
headers: {
|
|
|
|
"Content-Type": "application/json",
|
|
|
|
},
|
|
|
|
body: JSON.stringify(reminder),
|
|
|
|
})
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => console.log(data));
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
// process response
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
// reset inputs
|
|
|
|
});
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("textarea.autoresize").forEach((element) => {
|
|
|
|
element.addEventListener("input", () => {
|
2022-03-19 23:47:40 +00:00
|
|
|
element.style.height = "";
|
|
|
|
element.style.height = element.scrollHeight + 3 + "px";
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
let $img;
|
2022-03-20 15:46:22 +00:00
|
|
|
const $urlModal = document.querySelector("div#addImageModal");
|
|
|
|
const $urlInput = $urlModal.querySelector("input");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$urlModal.querySelector("button.is-success").addEventListener("click", () => {
|
2022-03-19 23:47:40 +00:00
|
|
|
$img.src = $urlInput.value;
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$urlInput.value = "";
|
|
|
|
$urlModal.classList.remove("is-active");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("button.close-modal").forEach((element) => {
|
|
|
|
element.addEventListener("click", () => {
|
|
|
|
let $modal = element.closest("div.modal");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$urlInput.value = "";
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$modal.classList.remove("is-active");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll(".customizable").forEach((element) => {
|
|
|
|
element.querySelector("a").addEventListener("click", (e) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
e.preventDefault();
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$img = element.querySelector("img");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$urlModal.classList.toggle("is-active");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll("a.icon-toggle").forEach((element) => {
|
|
|
|
element.addEventListener("click", (e) => {
|
2022-03-19 23:47:40 +00:00
|
|
|
e.preventDefault();
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
element.classList.toggle("is-active");
|
|
|
|
});
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
let $showButton = document.querySelector("button#showReminderCreator");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$showButton.addEventListener("click", () => {
|
|
|
|
$showButton
|
|
|
|
.querySelector("span.icon i")
|
|
|
|
.classList.toggle("fa-chevron-right");
|
|
|
|
$showButton
|
|
|
|
.querySelector("span.icon i")
|
|
|
|
.classList.toggle("fa-chevron-down");
|
|
|
|
document.querySelector("div#reminderCreator").classList.toggle("is-hidden");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
function register_interval_hide() {
|
2022-03-20 15:46:22 +00:00
|
|
|
let $showInterval = document.querySelectorAll("a.intervalLabel");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
$showInterval.forEach((element) => {
|
2022-03-20 15:46:22 +00:00
|
|
|
element.addEventListener("click", () => {
|
|
|
|
element.querySelector("i").classList.toggle("fa-chevron-right");
|
|
|
|
element.querySelector("i").classList.toggle("fa-chevron-down");
|
|
|
|
element.nextElementSibling.classList.toggle("is-hidden");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
const fileInput = document.querySelectorAll("input[type=file]");
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
fileInput.forEach((element) => {
|
2022-03-20 15:46:22 +00:00
|
|
|
element.addEventListener("change", () => {
|
2022-03-19 23:47:40 +00:00
|
|
|
if (element.files.length > 0) {
|
2022-03-20 15:46:22 +00:00
|
|
|
const fileName = element.parentElement.querySelector(".file-label");
|
2022-03-19 23:47:40 +00:00
|
|
|
fileName.textContent = element.files[0].name;
|
|
|
|
}
|
2022-03-20 15:46:22 +00:00
|
|
|
});
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
function check_embed_fields() {
|
2022-03-20 15:46:22 +00:00
|
|
|
document.querySelectorAll(".discord-field-title").forEach((element) => {
|
|
|
|
const $template = document.querySelector("template#embedFieldTemplate");
|
|
|
|
const $complement = element.parentElement.querySelector(
|
|
|
|
".discord-field-value"
|
|
|
|
);
|
2022-03-19 23:47:40 +00:00
|
|
|
|
|
|
|
// when the user clicks out of the field title and if the field title/value are empty, remove the field
|
2022-03-20 15:46:22 +00:00
|
|
|
element.addEventListener("blur", () => {
|
|
|
|
if (
|
|
|
|
element.value === "" &&
|
|
|
|
$complement.value === "" &&
|
|
|
|
element.parentElement.nextElementSibling !== null
|
|
|
|
) {
|
2022-03-19 23:47:40 +00:00
|
|
|
element.parentElement.remove();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$complement.addEventListener("blur", () => {
|
|
|
|
if (
|
|
|
|
element.value === "" &&
|
|
|
|
$complement.value === "" &&
|
|
|
|
element.parentElement.nextElementSibling !== null
|
|
|
|
) {
|
2022-03-19 23:47:40 +00:00
|
|
|
element.parentElement.remove();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// when the user inputs into the end field, create a new field after it
|
2022-03-20 15:46:22 +00:00
|
|
|
element.addEventListener("input", () => {
|
|
|
|
if (
|
|
|
|
element.value !== "" &&
|
|
|
|
$complement.value !== "" &&
|
|
|
|
element.parentElement.nextElementSibling === null
|
|
|
|
) {
|
2022-03-19 23:47:40 +00:00
|
|
|
const $clone = $template.content.cloneNode(true);
|
|
|
|
element.parentElement.parentElement.append($clone);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
$complement.addEventListener("input", () => {
|
|
|
|
if (
|
|
|
|
element.value !== "" &&
|
|
|
|
$complement.value !== "" &&
|
|
|
|
element.parentElement.nextElementSibling === null
|
|
|
|
) {
|
2022-03-19 23:47:40 +00:00
|
|
|
const $clone = $template.content.cloneNode(true);
|
|
|
|
element.parentElement.parentElement.append($clone);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-03-20 15:46:22 +00:00
|
|
|
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");
|
2022-03-19 23:47:40 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
check_embed_fields();
|
|
|
|
resize_textareas();
|
|
|
|
});
|