jude/reminder-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

collapse/expand elements. moved the embed color picker

Browse Source
This commit is contained in:
jude
2022-03-20 18:29:27 +00:00
parent 318be1fa5e
commit af9d8bea62
9 changed files with 599 additions and 568 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/static/js/expand.js Normal file
View File

@ -0,0 +1,23 @@
function collapse_all() {
document.querySelectorAll("div.reminderContent:not(.creator)").forEach((el) => {
el.classList.add("is-collapsed");
});
}
function expand_all() {
document.querySelectorAll("div.reminderContent:not(.creator)").forEach((el) => {
el.classList.remove("is-collapsed");
});
}
const expandAll = document.querySelector("#expandAll");
expandAll.addEventListener("change", (ev) => {
if (ev.target.value === "expand") {
expand_all();
} else if (ev.target.value === "collapse") {
collapse_all();
}
ev.target.value = "";
});

566
web/static/js/main.js
View File

@ -11,8 +11,6 @@ let botTimezone = "UTC";
let channels;
let roles;
const remindersLoadedEvent = new Event("remindersLoaded");
function colorToInt(r, g, b) {
return (r << 16) + (g << 8) + b;
}
@ -44,24 +42,17 @@ function switch_pane(selector) {
function update_select(sel) {
if (sel.selectedOptions[0].dataset["webhookAvatar"]) {
sel
.closest("div.reminderContent")
.querySelector("img.discord-avatar").src =
sel.closest("div.reminderContent").querySelector("img.discord-avatar").src =
sel.selectedOptions[0].dataset["webhookAvatar"];
} else {
sel
.closest("div.reminderContent")
.querySelector("img.discord-avatar").src = "";
sel.closest("div.reminderContent").querySelector("img.discord-avatar").src = "";
}
if (sel.selectedOptions[0].dataset["webhookName"]) {
sel
.closest("div.reminderContent")
.querySelector("input.discord-username").value =
sel.closest("div.reminderContent").querySelector("input.discord-username").value =
sel.selectedOptions[0].dataset["webhookName"];
} else {
sel
.closest("div.reminderContent")
.querySelector("input.discord-username").value = "";
sel.closest("div.reminderContent").querySelector("input.discord-username").value =
"";
}
}
@ -84,145 +75,106 @@ function fetch_roles(guild_id) {
}
async function fetch_reminders(guild_id) {
// fetch dm reminders instead
if (guild_id === undefined) {
const $reminderBox = document.querySelector("div#personalReminders");
const $reminderBox = document.querySelector("div#guildReminders");
// reset div contents
$reminderBox.innerHTML = "";
// reset div contents
$reminderBox.innerHTML = "";
// fetch reminders
await fetch("dashboard/api/user/reminders")
.then((response) => response.json())
.then((data) => {
if (data.error) {
show_error(data.error);
} else {
const $template = document.querySelector(
"template#personalReminder"
);
// fetch reminders
await fetch(`dashboard/api/guild/${guild_id}/reminders`)
.then((response) => response.json())
.then((data) => {
if (data.error) {
show_error(data.error);
} else {
const $template = document.querySelector("template#guildReminder");
for (let reminder of data) {
let newFrame = $template.content.cloneNode(true);
for (let reminder of data) {
let newFrame = $template.content.cloneNode(true);
for (let prop in reminder) {
if (
reminder.hasOwnProperty(prop) &&
reminder[prop] !== null
) {
let $input = newFrame.querySelector(
`*[name="${prop}"]`
);
let $image = newFrame.querySelector(
`img.${prop}`
);
newFrame.querySelector(".reminderContent").dataset.uid =
reminder["uid"];
if ($input !== null) {
$input.value = reminder[prop];
} else if ($image !== null) {
$image.src = reminder[prop];
}
// populate channels
set_channels(newFrame.querySelector("select.channel-selector"));
// populate majority of items
for (let prop in reminder) {
if (reminder.hasOwnProperty(prop) && reminder[prop] !== null) {
let $input = newFrame.querySelector(`*[name="${prop}"]`);
let $image = newFrame.querySelector(`img.${prop}`);
if ($input !== null) {
$input.value = reminder[prop];
} else if ($image !== null) {
$image.src = reminder[prop];
}
}
$reminderBox.append(newFrame);
}
}
});
} else {
const $reminderBox = document.querySelector("div#guildReminders");
// reset div contents
$reminderBox.innerHTML = "";
let $enableBtn = newFrame.querySelector(".disable-enable");
$enableBtn.textContent = reminder["enabled"] ? "Disable" : "Enable";
$enableBtn.dataset.action = reminder["enabled"]
? "disable"
: "enable";
// fetch reminders
await fetch(`dashboard/api/guild/${guild_id}/reminders`)
.then((response) => response.json())
.then((data) => {
if (data.error) {
show_error(data.error);
} else {
console.log(data);
const $template = document.querySelector(
"template#guildReminder"
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");
for (let reminder of data) {
let newFrame = $template.content.cloneNode(true);
$reminderBox.appendChild(newFrame);
newFrame.querySelector(".reminderContent").dataset.uid =
reminder["uid"];
// populate channels
set_channels(
newFrame.querySelector("select.channel-selector")
);
// populate majority of items
for (let prop in reminder) {
if (
reminder.hasOwnProperty(prop) &&
reminder[prop] !== null
) {
let $input = newFrame.querySelector(
`*[name="${prop}"]`
);
let $image = newFrame.querySelector(
`img.${prop}`
);
if ($input !== null) {
$input.value = reminder[prop];
} else if ($image !== null) {
$image.src = reminder[prop];
}
}
}
let guild = document.querySelector(
".guildList a.is-active"
).dataset["guild"];
let $enableBtn =
newFrame.querySelector(".disable-enable");
$enableBtn.textContent = reminder["enabled"]
? "Disable"
: "Enable";
$enableBtn.addEventListener("click", () => {
fetch(`/dashboard/api/guild/${guild}/reminders`, {
method: "PATCH",
body: JSON.stringify({
uid: reminder["uid"],
enabled: false,
}),
});
});
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"
);
$reminderBox.appendChild(newFrame);
}
reminder.node = $reminderBox.lastElementChild;
}
});
}
document.dispatchEvent(remindersLoadedEvent);
const remindersLoadedEvent = new CustomEvent("remindersLoaded", {
detail: data,
});
document.dispatchEvent(remindersLoadedEvent);
}
});
register_interval_hide();
}
document.addEventListener("remindersLoaded", (event) => {
const guild = document.querySelector(".guildList a.is-active").dataset["guild"];
for (let reminder of event.detail) {
reminder.node.querySelector("button.hide-box").addEventListener("click", () => {
reminder.node.closest(".reminderContent").classList.toggle("is-collapsed");
});
const enableBtn = reminder.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.textContent = data["enabled"] ? "Disable" : "Enable";
enableBtn.dataset.action = data["enabled"] ? "enable" : "disable";
}
});
});
}
});
function show_error(error) {
document
.getElementById("errors")
.querySelector("span.error-message").textContent = error;
document.getElementById("errors").querySelector("span.error-message").textContent =
error;
document.getElementById("errors").classList.add("is-active");
window.setTimeout(() => {
@ -235,9 +187,7 @@ function update_times() {
element.textContent = timezone;
});
document.querySelectorAll("span.set-time").forEach((element) => {
element.textContent = luxon.DateTime.now()
.setZone(timezone)
.toFormat("HH:mm");
element.textContent = luxon.DateTime.now().setZone(timezone).toFormat("HH:mm");
});
document.querySelectorAll("span.browser-timezone").forEach((element) => {
element.textContent = browserTimezone;
@ -249,9 +199,7 @@ function update_times() {
element.textContent = botTimezone;
});
document.querySelectorAll("span.bot-time").forEach((element) => {
element.textContent = luxon.DateTime.now()
.setZone(botTimezone)
.toFormat("HH:mm");
element.textContent = luxon.DateTime.now().setZone(botTimezone).toFormat("HH:mm");
});
}
@ -263,12 +211,10 @@ document.getElementById("set-bot-timezone").addEventListener("click", () => {
timezone = botTimezone;
update_times();
});
document
.getElementById("set-browser-timezone")
.addEventListener("click", () => {
timezone = browserTimezone;
update_times();
});
document.getElementById("set-browser-timezone").addEventListener("click", () => {
timezone = browserTimezone;
update_times();
});
document.getElementById("update-bot-timezone").addEventListener("click", () => {
timezone = browserTimezone;
fetch("/dashboard/api/user", {
@ -302,21 +248,7 @@ colorPicker.on("color:change", function (color) {
$colorPickerInput.value = color.hexString;
});
document.querySelectorAll(".discord-embed").forEach((element) => {
element.addEventListener("click", (e) => {
if (
e.offsetX <
parseInt(window.getComputedStyle(element).borderLeftWidth)
) {
$discordFrame = element;
$colorPickerModal.classList.toggle("is-active");
colorPicker.color.rgbString =
window.getComputedStyle($discordFrame).borderLeftColor;
}
});
});
document.querySelectorAll(".set-color").forEach((element) => {
document.querySelectorAll(".change-color").forEach((element) => {
element.addEventListener("click", (e) => {
e.preventDefault();
@ -329,20 +261,16 @@ document.querySelectorAll(".set-color").forEach((element) => {
});
});
$colorPickerModal
.querySelector("button.is-success")
.addEventListener("click", () => {
$discordFrame.style.borderLeftColor = colorPicker.color.rgbString;
$colorPickerModal.querySelector("button.is-success").addEventListener("click", () => {
$discordFrame.style.borderLeftColor = colorPicker.color.rgbString;
$colorPickerModal.classList.remove("is-active");
});
$colorPickerModal.classList.remove("is-active");
});
document.querySelectorAll("a.show-modal").forEach((element) => {
element.addEventListener("click", (e) => {
e.preventDefault();
document
.getElementById(element.dataset["modal"])
.classList.toggle("is-active");
document.getElementById(element.dataset["modal"]).classList.toggle("is-active");
});
});
@ -359,34 +287,35 @@ document.addEventListener("DOMContentLoaded", () => {
});
});
let hideBox = document.querySelector("#reminderCreator button.hide-box");
hideBox.addEventListener("click", () => {
hideBox.closest(".reminderContent").classList.toggle("is-collapsed");
});
fetch("/dashboard/api/user")
.then((response) => response.json())
.then((data) => {
if (data.error) {
show_error(data.error);
} else {
document
.querySelectorAll("a.switch-pane")
.forEach((element) => {
element.innerHTML = element.innerHTML.replace(
"%username%",
data.name
);
document.querySelectorAll("a.switch-pane").forEach((element) => {
element.innerHTML = element.innerHTML.replace(
"%username%",
data.name
);
element.addEventListener("click", (e) => {
e.preventDefault();
element.addEventListener("click", (e) => {
e.preventDefault();
switch_pane(element.dataset["pane"]);
switch_pane(element.dataset["pane"]);
element.classList.add("is-active");
element.classList.add("is-active");
document
.querySelectorAll("p.pageTitle")
.forEach((el) => {
el.textContent = "Your Reminders";
});
document.querySelectorAll("p.pageTitle").forEach((el) => {
el.textContent = "Your Reminders";
});
});
});
if (data.timezone !== null) {
botTimezone = data.timezone;
@ -405,78 +334,67 @@ document.addEventListener("DOMContentLoaded", () => {
const $template = document.getElementById("guildListEntry");
for (let guild of data) {
document
.querySelectorAll(".guildList")
.forEach((element) => {
const $clone = $template.content.cloneNode(true);
const $anchor = $clone.querySelector("a");
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.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();
$anchor.addEventListener("click", async (e) => {
e.preventDefault();
$loader.classList.remove("is-hidden");
$loader.classList.remove("is-hidden");
switch_pane($anchor.dataset["pane"]);
switch_pane($anchor.dataset["pane"]);
reset_guild_pane();
reset_guild_pane();
fetch_roles($anchor.dataset["guild"]);
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);
}
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 {
channels = data;
document
.querySelectorAll(
"select.channel-selector"
)
.forEach(set_channels);
show_error(data.error);
}
});
} else {
channels = data;
fetch_reminders($anchor.dataset["guild"]);
document
.querySelectorAll("select.channel-selector")
.forEach(set_channels);
}
});
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();
fetch_reminders($anchor.dataset["guild"]);
$loader.classList.add("is-hidden");
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();
element.append($clone);
$loader.classList.add("is-hidden");
});
element.append($clone);
});
}
}
});
@ -505,95 +423,68 @@ function set_channels(element) {
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;
$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 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 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"),
};
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"
];
// 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));
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));
// process response
// process response
// reset inputs
});
// reset inputs
});
document.querySelectorAll("textarea.autoresize").forEach((element) => {
element.addEventListener("input", () => {
@ -641,18 +532,6 @@ document.querySelectorAll("a.icon-toggle").forEach((element) => {
});
});
let $showButton = document.querySelector("button#showReminderCreator");
$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");
});
function register_interval_hide() {
let $showInterval = document.querySelectorAll("a.intervalLabel");
@ -679,9 +558,7 @@ fileInput.forEach((element) => {
function check_embed_fields() {
document.querySelectorAll(".discord-field-title").forEach((element) => {
const $template = document.querySelector("template#embedFieldTemplate");
const $complement = element.parentElement.querySelector(
".discord-field-value"
);
const $complement = element.parentElement.querySelector(".discord-field-value");
// when the user clicks out of the field title and if the field title/value are empty, remove the field
element.addEventListener("blur", () => {
@ -732,15 +609,18 @@ function check_embed_fields() {
document.addEventListener("DOMNodeInserted", () => {
document.querySelectorAll("div.mobile-sidebar a").forEach((element) => {
element.addEventListener("click", (e) => {
document
.getElementById("mobileSidebar")
.classList.remove("is-active");
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();
resize_textareas();
});

26
web/static/js/sort.js
View File

@ -12,9 +12,27 @@ function sort_by(cond) {
.forEach((node) => guildReminders.appendChild(node));
// go through and add channel categories
for (let child in guildReminders.children) {
let currentChannelGroup = null;
for (let child of guildReminders.querySelectorAll("div.reminderContent")) {
let thisChannelGroup = child.querySelector("select.channel-selector").value;
if (currentChannelGroup !== thisChannelGroup) {
let newNode = document.createElement("div");
newNode.textContent =
"#" + channels.find((a) => a.id === thisChannelGroup).name;
newNode.classList.add("channel-tag");
guildReminders.insertBefore(newNode, child);
currentChannelGroup = thisChannelGroup;
}
}
} else {
// remove any channel tags if previous ordering was by channel
guildReminders.querySelectorAll("div.channel-tag").forEach((el) => {
el.remove();
});
if (cond === "time") {
[...guildReminders.children]
.sort((a, b) => {
@ -41,8 +59,10 @@ function sort_by(cond) {
}
}
document.querySelector("#orderBy").addEventListener("change", (element) => {
sort_by(element.value);
const selector = document.querySelector("#orderBy");
selector.addEventListener("change", () => {
sort_by(selector.value);
});
document.addEventListener("remindersLoaded", () => {