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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierrc.toml
View File

@ -1 +1,2 @@
printWidth = 90
tabWidth = 4 tabWidth = 4

44
web/src/routes/dashboard/guild.rs
View File

@ -362,7 +362,49 @@ pub async fn edit_reminder(
.await; .await;
} }
json!({}) match sqlx::query_as_unchecked!(
Reminder,
"SELECT reminders.attachment,
reminders.attachment_name,
reminders.avatar,
channels.channel,
reminders.content,
reminders.embed_author,
reminders.embed_author_url,
reminders.embed_color,
reminders.embed_description,
reminders.embed_footer,
reminders.embed_footer_url,
reminders.embed_image_url,
reminders.embed_thumbnail_url,
reminders.embed_title,
reminders.enabled,
reminders.expires,
reminders.interval_seconds,
reminders.interval_months,
reminders.name,
reminders.pin,
reminders.restartable,
reminders.tts,
reminders.uid,
reminders.username,
reminders.utc_time
FROM reminders
LEFT JOIN channels ON channels.id = reminders.channel_id
WHERE uid = ?",
reminder.uid
)
.fetch_one(pool.inner())
.await
{
Ok(reminder) => json!(reminder),
Err(e) => {
warn!("Error exiting `edit_reminder': {:?}", e);
json!({"error": "Unknown error"})
}
}
} }
#[delete("/api/guild/<id>/reminders", data = "<reminder>")] #[delete("/api/guild/<id>/reminders", data = "<reminder>")]

93
web/static/css/style.css
View File

@ -2,6 +2,69 @@
font-family: "Ubuntu Bold", "Ubuntu", sans-serif; font-family: "Ubuntu Bold", "Ubuntu", sans-serif;
} }
/* override styles for when the div is collapsed */
div.reminderContent.is-collapsed .column.discord-frame {
display: none;
}
div.reminderContent.is-collapsed .collapses {
display: none;
}
div.reminderContent.is-collapsed .invert-collapses {
display: inline-flex;
}
div.reminderContent .invert-collapses {
display: none;
}
div.reminderContent.is-collapsed .settings {
display: flex;
flex-direction: row;
padding-bottom: 0;
}
div.reminderContent.is-collapsed .channel-field {
display: inline-flex;
order: 1;
}
div.reminderContent.is-collapsed .columns {
display: inline-flex;
margin-bottom: 0px;
flex-grow: 1;
order: 2;
}
div.reminderContent.is-collapsed input[name="name"] {
display: inline-flex;
flex-grow: 1;
}
div.reminderContent.is-collapsed button.hide-box {
display: inline-flex;
}
div.reminderContent.is-collapsed button.hide-box i {
transform: rotate(90deg);
}
/* END */
/* dashboard styles */
button.change-color {
position: absolute;
left: calc(-1rem - 40px);
}
.media-content {
overflow-x: visible;
}
div.discord-embed {
position: relative;
}
div.reminderContent { div.reminderContent {
padding: 2px; padding: 2px;
background-color: #f5f5f5; background-color: #f5f5f5;
@ -340,36 +403,6 @@ textarea, input {
flex-wrap: wrap; flex-wrap: wrap;
} }
.icon-toggle {
color: #fff;
opacity: 0.2;
}
.preview-toggle {
color: #fcb620;
opacity: 0.2;
}
a.level-item.preview-toggle:hover {
color: #fcb620;
}
.preview-toggle.is-active {
opacity: 1;
}
a.level-item.icon-toggle:hover {
color: inherit;
}
a.level-item:hover {
color: rgb(55, 127, 242)
}
.icon-toggle.is-active {
opacity: 1;
}
.channel-select { .channel-select {
font-size: 1.125rem; font-size: 1.125rem;
margin-bottom: 4px; margin-bottom: 4px;

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 channels;
let roles; let roles;
const remindersLoadedEvent = new Event("remindersLoaded");
function colorToInt(r, g, b) { function colorToInt(r, g, b) {
return (r << 16) + (g << 8) + b; return (r << 16) + (g << 8) + b;
} }
@ -44,24 +42,17 @@ function switch_pane(selector) {
function update_select(sel) { function update_select(sel) {
if (sel.selectedOptions[0].dataset["webhookAvatar"]) { if (sel.selectedOptions[0].dataset["webhookAvatar"]) {
sel sel.closest("div.reminderContent").querySelector("img.discord-avatar").src =
.closest("div.reminderContent")
.querySelector("img.discord-avatar").src =
sel.selectedOptions[0].dataset["webhookAvatar"]; sel.selectedOptions[0].dataset["webhookAvatar"];
} else { } else {
sel sel.closest("div.reminderContent").querySelector("img.discord-avatar").src = "";
.closest("div.reminderContent")
.querySelector("img.discord-avatar").src = "";
} }
if (sel.selectedOptions[0].dataset["webhookName"]) { if (sel.selectedOptions[0].dataset["webhookName"]) {
sel sel.closest("div.reminderContent").querySelector("input.discord-username").value =
.closest("div.reminderContent")
.querySelector("input.discord-username").value =
sel.selectedOptions[0].dataset["webhookName"]; sel.selectedOptions[0].dataset["webhookName"];
} else { } else {
sel sel.closest("div.reminderContent").querySelector("input.discord-username").value =
.closest("div.reminderContent") "";
.querySelector("input.discord-username").value = "";
} }
} }
@ -84,145 +75,106 @@ function fetch_roles(guild_id) {
} }
async function fetch_reminders(guild_id) { async function fetch_reminders(guild_id) {
// fetch dm reminders instead const $reminderBox = document.querySelector("div#guildReminders");
if (guild_id === undefined) {
const $reminderBox = document.querySelector("div#personalReminders");
// reset div contents // reset div contents
$reminderBox.innerHTML = ""; $reminderBox.innerHTML = "";
// fetch reminders // fetch reminders
await fetch("dashboard/api/user/reminders") await fetch(`dashboard/api/guild/${guild_id}/reminders`)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
if (data.error) { if (data.error) {
show_error(data.error); show_error(data.error);
} else { } else {
const $template = document.querySelector( const $template = document.querySelector("template#guildReminder");
"template#personalReminder"
);
for (let reminder of data) { for (let reminder of data) {
let newFrame = $template.content.cloneNode(true); let newFrame = $template.content.cloneNode(true);
for (let prop in reminder) { newFrame.querySelector(".reminderContent").dataset.uid =
if ( reminder["uid"];
reminder.hasOwnProperty(prop) &&
reminder[prop] !== null
) {
let $input = newFrame.querySelector(
`*[name="${prop}"]`
);
let $image = newFrame.querySelector(
`img.${prop}`
);
if ($input !== null) { // populate channels
$input.value = reminder[prop]; set_channels(newFrame.querySelector("select.channel-selector"));
} else if ($image !== null) {
$image.src = reminder[prop]; // 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 let $enableBtn = newFrame.querySelector(".disable-enable");
$reminderBox.innerHTML = ""; $enableBtn.textContent = reminder["enabled"] ? "Disable" : "Enable";
$enableBtn.dataset.action = reminder["enabled"]
? "disable"
: "enable";
// fetch reminders let timeInput = newFrame.querySelector('input[name="time"]');
await fetch(`dashboard/api/guild/${guild_id}/reminders`) let localTime = luxon.DateTime.fromISO(reminder["utc_time"]).setZone(
.then((response) => response.json()) timezone
.then((data) => {
if (data.error) {
show_error(data.error);
} else {
console.log(data);
const $template = document.querySelector(
"template#guildReminder"
); );
timeInput.value = localTime.toFormat("yyyy-LL-dd'T'HH:mm:ss");
for (let reminder of data) { $reminderBox.appendChild(newFrame);
let newFrame = $template.content.cloneNode(true);
newFrame.querySelector(".reminderContent").dataset.uid = reminder.node = $reminderBox.lastElementChild;
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);
}
} }
});
}
document.dispatchEvent(remindersLoadedEvent); const remindersLoadedEvent = new CustomEvent("remindersLoaded", {
detail: data,
});
document.dispatchEvent(remindersLoadedEvent);
}
});
register_interval_hide(); 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) { function show_error(error) {
document document.getElementById("errors").querySelector("span.error-message").textContent =
.getElementById("errors") error;
.querySelector("span.error-message").textContent = error;
document.getElementById("errors").classList.add("is-active"); document.getElementById("errors").classList.add("is-active");
window.setTimeout(() => { window.setTimeout(() => {
@ -235,9 +187,7 @@ function update_times() {
element.textContent = timezone; element.textContent = timezone;
}); });
document.querySelectorAll("span.set-time").forEach((element) => { document.querySelectorAll("span.set-time").forEach((element) => {
element.textContent = luxon.DateTime.now() element.textContent = luxon.DateTime.now().setZone(timezone).toFormat("HH:mm");
.setZone(timezone)
.toFormat("HH:mm");
}); });
document.querySelectorAll("span.browser-timezone").forEach((element) => { document.querySelectorAll("span.browser-timezone").forEach((element) => {
element.textContent = browserTimezone; element.textContent = browserTimezone;
@ -249,9 +199,7 @@ function update_times() {
element.textContent = botTimezone; element.textContent = botTimezone;
}); });
document.querySelectorAll("span.bot-time").forEach((element) => { document.querySelectorAll("span.bot-time").forEach((element) => {
element.textContent = luxon.DateTime.now() element.textContent = luxon.DateTime.now().setZone(botTimezone).toFormat("HH:mm");
.setZone(botTimezone)
.toFormat("HH:mm");
}); });
} }
@ -263,12 +211,10 @@ document.getElementById("set-bot-timezone").addEventListener("click", () => {
timezone = botTimezone; timezone = botTimezone;
update_times(); update_times();
}); });
document document.getElementById("set-browser-timezone").addEventListener("click", () => {
.getElementById("set-browser-timezone") timezone = browserTimezone;
.addEventListener("click", () => { update_times();
timezone = browserTimezone; });
update_times();
});
document.getElementById("update-bot-timezone").addEventListener("click", () => { document.getElementById("update-bot-timezone").addEventListener("click", () => {
timezone = browserTimezone; timezone = browserTimezone;
fetch("/dashboard/api/user", { fetch("/dashboard/api/user", {
@ -302,21 +248,7 @@ colorPicker.on("color:change", function (color) {
$colorPickerInput.value = color.hexString; $colorPickerInput.value = color.hexString;
}); });
document.querySelectorAll(".discord-embed").forEach((element) => { document.querySelectorAll(".change-color").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) => {
element.addEventListener("click", (e) => { element.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
@ -329,20 +261,16 @@ document.querySelectorAll(".set-color").forEach((element) => {
}); });
}); });
$colorPickerModal $colorPickerModal.querySelector("button.is-success").addEventListener("click", () => {
.querySelector("button.is-success") $discordFrame.style.borderLeftColor = colorPicker.color.rgbString;
.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) => { document.querySelectorAll("a.show-modal").forEach((element) => {
element.addEventListener("click", (e) => { element.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
document document.getElementById(element.dataset["modal"]).classList.toggle("is-active");
.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") fetch("/dashboard/api/user")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
if (data.error) { if (data.error) {
show_error(data.error); show_error(data.error);
} else { } else {
document document.querySelectorAll("a.switch-pane").forEach((element) => {
.querySelectorAll("a.switch-pane") element.innerHTML = element.innerHTML.replace(
.forEach((element) => { "%username%",
element.innerHTML = element.innerHTML.replace( data.name
"%username%", );
data.name
);
element.addEventListener("click", (e) => { element.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
switch_pane(element.dataset["pane"]); switch_pane(element.dataset["pane"]);
element.classList.add("is-active"); element.classList.add("is-active");
document document.querySelectorAll("p.pageTitle").forEach((el) => {
.querySelectorAll("p.pageTitle") el.textContent = "Your Reminders";
.forEach((el) => {
el.textContent = "Your Reminders";
});
}); });
}); });
});
if (data.timezone !== null) { if (data.timezone !== null) {
botTimezone = data.timezone; botTimezone = data.timezone;
@ -405,78 +334,67 @@ document.addEventListener("DOMContentLoaded", () => {
const $template = document.getElementById("guildListEntry"); const $template = document.getElementById("guildListEntry");
for (let guild of data) { for (let guild of data) {
document document.querySelectorAll(".guildList").forEach((element) => {
.querySelectorAll(".guildList") const $clone = $template.content.cloneNode(true);
.forEach((element) => { const $anchor = $clone.querySelector("a");
const $clone = $template.content.cloneNode(true);
const $anchor = $clone.querySelector("a");
$anchor.innerHTML = $clone $anchor.innerHTML = $clone
.querySelector("a") .querySelector("a")
.innerHTML.replace("%guildname%", guild.name); .innerHTML.replace("%guildname%", guild.name);
$anchor.dataset["guild"] = guild.id; $anchor.dataset["guild"] = guild.id;
$anchor.dataset["name"] = guild.name; $anchor.dataset["name"] = guild.name;
$anchor.addEventListener("click", async (e) => { $anchor.addEventListener("click", async (e) => {
e.preventDefault(); 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( await fetch(
`/dashboard/api/guild/${$anchor.dataset["guild"]}/channels` `/dashboard/api/guild/${$anchor.dataset["guild"]}/channels`
) )
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
if (data.error) { if (data.error) {
if ( if (data.error === "Bot not in guild") {
data.error === switch_pane("guild-error");
"Bot not in guild"
) {
switch_pane("guild-error");
} else {
show_error(data.error);
}
} else { } else {
channels = data; show_error(data.error);
document
.querySelectorAll(
"select.channel-selector"
)
.forEach(set_channels);
} }
}); } else {
channels = data;
fetch_reminders($anchor.dataset["guild"]); document
.querySelectorAll("select.channel-selector")
.forEach(set_channels);
}
});
document fetch_reminders($anchor.dataset["guild"]);
.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"); 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"); let $createReminder = document.querySelector("#reminderCreator");
$createReminder $createReminder.querySelector("button#createReminder").addEventListener("click", () => {
.querySelector("button#createReminder") // create reminder object
.addEventListener("click", () => { let seconds =
// create reminder object parseInt($createReminder.querySelector('input[name="interval_seconds"]').value) ||
let seconds = null;
parseInt( let months =
$createReminder.querySelector('input[name="interval_seconds"]') parseInt($createReminder.querySelector('input[name="interval_months"]').value) ||
.value null;
) || null;
let months =
parseInt(
$createReminder.querySelector('input[name="interval_months"]')
.value
) || null;
let rgb_color = window.getComputedStyle( let rgb_color = window.getComputedStyle(
$createReminder.querySelector("div.discord-embed") $createReminder.querySelector("div.discord-embed")
).borderLeftColor; ).borderLeftColor;
let rgb = rgb_color.match(/\d+/g); let rgb = rgb_color.match(/\d+/g);
let color = colorToInt( let color = colorToInt(parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2]));
parseInt(rgb[0]),
parseInt(rgb[1]),
parseInt(rgb[2])
);
let utc_time = luxon.DateTime.fromISO( let utc_time = luxon.DateTime.fromISO(
$createReminder.querySelector('input[name="time"]').value $createReminder.querySelector('input[name="time"]').value
).setZone("UTC"); ).setZone("UTC");
let reminder = { let reminder = {
avatar: $createReminder.querySelector("img.discord-avatar").src, avatar: $createReminder.querySelector("img.discord-avatar").src,
channel: $createReminder.querySelector("select.channel-selector") channel: $createReminder.querySelector("select.channel-selector").value,
.value, content: $createReminder.querySelector("textarea#messageContent").value,
content: $createReminder.querySelector("textarea#messageContent") embed_author_url: $createReminder.querySelector("img.embed_author_url").src,
.value, embed_author: $createReminder.querySelector("textarea#embedAuthor").value,
embed_author_url: $createReminder.querySelector( embed_color: color,
"img.embed_author_url" embed_description: $createReminder.querySelector("textarea#embedDescription")
).src, .value,
embed_author: $createReminder.querySelector("textarea#embedAuthor") embed_footer: $createReminder.querySelector("textarea#embedFooter").value,
.value, embed_footer_url: $createReminder.querySelector("img.embed_footer_url").src,
embed_color: color, embed_image_url: $createReminder.querySelector("img.embed_image_url").src,
embed_description: $createReminder.querySelector( embed_thumbnail_url: $createReminder.querySelector("img.embed_thumbnail_url").src,
"textarea#embedDescription" embed_title: $createReminder.querySelector("textarea#embedTitle").value,
).value, enabled: true,
embed_footer: $createReminder.querySelector("textarea#embedFooter") expires: null,
.value, interval_seconds: seconds,
embed_footer_url: $createReminder.querySelector( interval_months: months,
"img.embed_footer_url" name: $createReminder.querySelector('input[name="name"]').value,
).src, pin: $createReminder.querySelector('input[name="pin"]').checked,
embed_image_url: $createReminder.querySelector( restartable: false,
"img.embed_image_url" tts: $createReminder.querySelector('input[name="tts"]').checked,
).src, username: $createReminder.querySelector("input#reminderUsername").value,
embed_thumbnail_url: $createReminder.querySelector( utc_time: utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
"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 // send to server
let guild = document.querySelector(".guildList a.is-active").dataset[ let guild = document.querySelector(".guildList a.is-active").dataset["guild"];
"guild"
];
fetch(`/dashboard/api/guild/${guild}/reminders`, { fetch(`/dashboard/api/guild/${guild}/reminders`, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify(reminder), body: JSON.stringify(reminder),
}) })
.then((response) => response.json()) .then((response) => response.json())
.then((data) => console.log(data)); .then((data) => console.log(data));
// process response // process response
// reset inputs // reset inputs
}); });
document.querySelectorAll("textarea.autoresize").forEach((element) => { document.querySelectorAll("textarea.autoresize").forEach((element) => {
element.addEventListener("input", () => { 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() { function register_interval_hide() {
let $showInterval = document.querySelectorAll("a.intervalLabel"); let $showInterval = document.querySelectorAll("a.intervalLabel");
@ -679,9 +558,7 @@ fileInput.forEach((element) => {
function check_embed_fields() { function check_embed_fields() {
document.querySelectorAll(".discord-field-title").forEach((element) => { document.querySelectorAll(".discord-field-title").forEach((element) => {
const $template = document.querySelector("template#embedFieldTemplate"); const $template = document.querySelector("template#embedFieldTemplate");
const $complement = element.parentElement.querySelector( const $complement = element.parentElement.querySelector(".discord-field-value");
".discord-field-value"
);
// when the user clicks out of the field title and if the field title/value are empty, remove the field // when the user clicks out of the field title and if the field title/value are empty, remove the field
element.addEventListener("blur", () => { element.addEventListener("blur", () => {
@ -732,15 +609,18 @@ function check_embed_fields() {
document.addEventListener("DOMNodeInserted", () => { document.addEventListener("DOMNodeInserted", () => {
document.querySelectorAll("div.mobile-sidebar a").forEach((element) => { document.querySelectorAll("div.mobile-sidebar a").forEach((element) => {
element.addEventListener("click", (e) => { element.addEventListener("click", (e) => {
document document.getElementById("mobileSidebar").classList.remove("is-active");
.getElementById("mobileSidebar")
.classList.remove("is-active");
document.querySelectorAll(".navbar-burger").forEach((el) => { document.querySelectorAll(".navbar-burger").forEach((el) => {
el.classList.remove("is-active"); 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(); check_embed_fields();
resize_textareas(); resize_textareas();
}); });

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

@ -12,9 +12,27 @@ function sort_by(cond) {
.forEach((node) => guildReminders.appendChild(node)); .forEach((node) => guildReminders.appendChild(node));
// go through and add channel categories // 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 { } else {
// remove any channel tags if previous ordering was by channel
guildReminders.querySelectorAll("div.channel-tag").forEach((el) => {
el.remove();
});
if (cond === "time") { if (cond === "time") {
[...guildReminders.children] [...guildReminders.children]
.sort((a, b) => { .sort((a, b) => {
@ -41,8 +59,10 @@ function sort_by(cond) {
} }
} }
document.querySelector("#orderBy").addEventListener("change", (element) => { const selector = document.querySelector("#orderBy");
sort_by(element.value);
selector.addEventListener("change", () => {
sort_by(selector.value);
}); });
document.addEventListener("remindersLoaded", () => { document.addEventListener("remindersLoaded", () => {

4
web/templates/dashboard.html.tera
View File

@ -54,14 +54,14 @@
</div> </div>
</nav> </nav>
<div id="loader" class="is-hidden hero is-fullheight" style="position: fixed; background-color: white; opacity: 0.8; width: 100vw; z-index: 999;"> <div id="loader" class="is-hidden hero is-fullheight" style="position: fixed; background-color: rgba(255, 255, 255, 0.8); width: 100vw; z-index: 999;">
<div class="hero-body"> <div class="hero-body">
<div class="container has-text-centered"> <div class="container has-text-centered">
<p class="title" style="font-size: 6rem; color: #8fb677"> <p class="title" style="font-size: 6rem; color: #8fb677">
<i class="fas fa-cog fa-spin"></i> <i class="fas fa-cog fa-spin"></i>
</p> </p>
<p class="subtitle"> <p class="subtitle">
Bear with... <strong>Loading...</strong>
</p> </p>
</div> </div>
</div> </div>

363
web/templates/reminder_dashboard/guild_reminder.html.tera
View File

@ -1,215 +1,226 @@
<div class="columns reminderContent"> <div class="columns reminderContent {% if creating %}creator{% endif %}">
<div class="column discord-frame"> <div class="column discord-frame">
<div class=""> <article class="media">
<article class="media"> <figure class="media-left">
<figure class="media-left"> <p class="image is-32x32 customizable">
<p class="image is-32x32 customizable"> <a>
<a> <img class="is-rounded discord-avatar" src="">
<img class="is-rounded discord-avatar" src=""> </a>
</a> </p>
</p> </figure>
</figure> <div class="media-content">
<div class="media-content"> <div class="content">
<div class="content"> <div class="discord-message-header">
<div class="discord-message-header"> <label class="is-sr-only" for="reminderUsername">Username Override</label>
<label class="is-sr-only" for="reminderUsername">Username Override</label> <input class="discord-username message-input" placeholder="Username Override"
<input class="discord-username message-input" placeholder="Username Override" maxlength="32" id="reminderUsername" name="username">
maxlength="32" id="reminderUsername" name="username"> </div>
</div> <label class="is-sr-only" for="messageContent">Message</label>
<label class="is-sr-only" for="messageContent">Message</label> <textarea class="message-input autoresize discord-content"
<textarea class="message-input autoresize discord-content" placeholder="Message Content..."
placeholder="Message Content..." maxlength="2000" id="messageContent" name="content" rows="1"></textarea>
maxlength="2000" id="messageContent" name="content" rows="1"></textarea>
<div class="discord-embed"> <div class="discord-embed">
<div class="embed-body"> <div class="embed-body">
<div class="a"> <button class="change-color button is-rounded is-small">
<div class="embed-author-box"> <i class="fas fa-eye-dropper"></i>
<div class="a"> </button>
<p class="image is-24x24 customizable"> <div class="a">
<a> <div class="embed-author-box">
<img class="is-rounded embed_author_url" src=""> <div class="a">
</a> <p class="image is-24x24 customizable">
</p> <a>
</div> <img class="is-rounded embed_author_url" src="">
</a>
<div class="b"> </p>
<label class="is-sr-only" for="embedAuthor">Embed Author</label>
<textarea
class="discord-embed-author message-input autoresize"
placeholder="Embed Author..." rows="1" maxlength="256"
id="embedAuthor" name="embed_author"></textarea>
</div>
</div> </div>
<label class="is-sr-only" for="embedTitle">Embed Title</label> <div class="b">
<textarea class="discord-title message-input autoresize" <label class="is-sr-only" for="embedAuthor">Embed Author</label>
placeholder="Embed Title..." <textarea
maxlength="256" id="embedTitle" rows="1" class="discord-embed-author message-input autoresize"
name="embed_title"></textarea> placeholder="Embed Author..." rows="1" maxlength="256"
<br> id="embedAuthor" name="embed_author"></textarea>
<label class="is-sr-only" for="embedDescription">Embed Description</label>
<textarea class="discord-description message-input autoresize "
placeholder="Embed Description..."
maxlength="4096" id="embedDescription" name="embed_description"
rows="1"></textarea>
<br>
<div class="embed-multifield-box">
<div class="embed-field-box">
<label class="is-sr-only" for="embedFieldTitle">Field Title</label>
<textarea
class="discord-field-title field-input message-input autoresize "
placeholder="Field Title..." rows="1"
maxlength="256" id="embedFieldTitle"
name="embed_field_title[]"></textarea>
<label class="is-sr-only" for="embedFieldValue">Field Value</label>
<textarea
class="discord-field-value field-input message-input autoresize "
placeholder="Field Value..."
maxlength="1024" id="embedFieldValue" name="embed_field_value[]"
rows="1"></textarea>
</div>
</div> </div>
</div> </div>
<div class="b"> <label class="is-sr-only" for="embedTitle">Embed Title</label>
<p class="image thumbnail customizable"> <textarea class="discord-title message-input autoresize"
<a> placeholder="Embed Title..."
<img class="embed_thumbnail_url" src="" alt="Square thumbnail embedded image"> maxlength="256" id="embedTitle" rows="1"
</a> name="embed_title"></textarea>
</p> <br>
<label class="is-sr-only" for="embedDescription">Embed Description</label>
<textarea class="discord-description message-input autoresize "
placeholder="Embed Description..."
maxlength="4096" id="embedDescription" name="embed_description"
rows="1"></textarea>
<br>
<div class="embed-multifield-box">
<div class="embed-field-box">
<label class="is-sr-only" for="embedFieldTitle">Field Title</label>
<textarea
class="discord-field-title field-input message-input autoresize "
placeholder="Field Title..." rows="1"
maxlength="256" id="embedFieldTitle"
name="embed_field_title[]"></textarea>
<label class="is-sr-only" for="embedFieldValue">Field Value</label>
<textarea
class="discord-field-value field-input message-input autoresize "
placeholder="Field Value..."
maxlength="1024" id="embedFieldValue" name="embed_field_value[]"
rows="1"></textarea>
</div>
</div> </div>
</div> </div>
<p class="image is-400x300 customizable"> <div class="b">
<p class="image thumbnail customizable">
<a>
<img class="embed_thumbnail_url" src="" alt="Square thumbnail embedded image">
</a>
</p>
</div>
</div>
<p class="image is-400x300 customizable">
<a>
<img class="embed_image_url" src="" alt="Large embedded image">
</a>
</p>
<div class="embed-footer-box">
<p class="image is-20x20 customizable">
<a> <a>
<img class="embed_image_url" src="" alt="Large embedded image"> <img class="is-rounded embed_footer_url" src="" alt="Footer profile-like image">
</a> </a>
</p> </p>
<div class="embed-footer-box"> <label class="is-sr-only" for="embedFooter">Embed Footer text</label>
<p class="image is-20x20 customizable"> <textarea class="discord-embed-footer message-input autoresize "
<a> placeholder="Embed Footer..."
<img class="is-rounded embed_footer_url" src="" alt="Footer profile-like image"> maxlength="2048" id="embedFooter" name="embed_footer" rows="1"></textarea>
</a>
</p>
<label class="is-sr-only" for="embedFooter">Embed Footer text</label>
<textarea class="discord-embed-footer message-input autoresize "
placeholder="Embed Footer..."
maxlength="2048" id="embedFooter" name="embed_footer" rows="1"></textarea>
</div>
</div> </div>
</div> </div>
</div> </div>
</article> </div>
</div> </article>
</div> </div>
<div class="column"> <div class="column settings">
<div class="field"> <div class="columns is-mobile">
<div class="control"> <div class="column">
<label class="label sr-only">Reminder Name</label> <div class="field">
<input class="input" type="text" name="name" placeholder="Reminder Name"> <div class="control">
<label class="label sr-only">Reminder Name</label>
<input class="input" type="text" name="name" placeholder="Reminder Name">
</div>
</div>
</div>
<div class="column is-narrow">
<button class="button is-rounded hide-box">
<i class="fas fa-chevron-down"></i>
</button>
</div> </div>
</div> </div>
<div class="field"> <div class="field channel-field">
<label class="label">Channel</label> <div class="collapses">
<div class="control"> <label class="label" for="channelOption">Channel</label>
</div>
<div class="control has-icons-left">
<div class="select"> <div class="select">
<select id="channelOption" name="channel" class="channel-selector"> <select id="channelOption" name="channel" class="channel-selector">
</select> </select>
</div> </div>
</div> <div class="icon is-small is-left">
</div> <i class="fas fa-hashtag"></i>
<div class="field">
<label class="label">Time</label>
<div class="control">
<input class="input" type="datetime-local" step="1" name="time">
</div>
</div>
<div class="field">
<a class="intervalLabel"><label class="label">Interval <i class="fas fa-chevron-down"></i></label></a>
<div class="control intervalSelector">
<div class="columns">
<div class="column">
<input class="input" type="number" name="interval_months" placeholder="Months">
</div>
<div class="column">
<input class="input" type="number" name="interval_days" placeholder="Days">
</div>
<div class="column">
<input class="input" type="number" name="interval_hours" placeholder="Hours">
</div>
<div class="column">
<input class="input" type="number" name="interval_minutes" placeholder="Minutes">
</div>
<div class="column">
<input class="input" type="number" name="interval_seconds" placeholder="Seconds">
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="columns"> <div class="collapses">
<div class="column has-text-centered"> <div class="field">
<div style="display: inline-block;"> <label class="label">Time</label>
<label class="label">Enable TTS <input type="checkbox" name="tts"></label> <div class="control">
<input class="input" type="datetime-local" step="1" name="time">
</div> </div>
</div> </div>
<div class="column has-text-centered">
<div style="display: inline-block;"> <div class="field">
<label class="label">Pin Message <input type="checkbox" name="pin"></label> <a class="intervalLabel"><label class="label">Interval <i class="fas fa-chevron-down"></i></label></a>
<div class="control intervalSelector">
<div class="columns">
<div class="column">
<input class="input" type="number" name="interval_months" placeholder="Months">
</div>
<div class="column">
<input class="input" type="number" name="interval_days" placeholder="Days">
</div>
<div class="column">
<input class="input" type="number" name="interval_hours" placeholder="Hours">
</div>
<div class="column">
<input class="input" type="number" name="interval_minutes" placeholder="Minutes">
</div>
<div class="column">
<input class="input" type="number" name="interval_seconds" placeholder="Seconds">
</div>
</div>
</div> </div>
</div> </div>
<div class="column has-text-centered">
<div class="file is-boxed"> <div class="columns">
<label class="file-label"> <div class="column has-text-centered">
<input class="file-input" type="file"> <div style="display: inline-block;">
<span class="file-cta"> <label class="label">Enable TTS <input type="checkbox" name="tts"></label>
<span class="file-label"> </div>
Add Attachment </div>
<div class="column has-text-centered">
<div style="display: inline-block;">
<label class="label">Pin Message <input type="checkbox" name="pin"></label>
</div>
</div>
<div class="column has-text-centered">
<div class="file is-boxed">
<label class="file-label">
<input class="file-input" type="file">
<span class="file-cta">
<span class="file-label">
Add Attachment
</span>
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
</span> </span>
<span class="file-icon"> </label>
<i class="fas fa-upload"></i> </div>
</span>
</span>
</label>
</div> </div>
</div> </div>
<span style="width: 12px;"></span>
{% if creating %}
<button class="button is-outlined">
Load Template
</button>
<button class="button is-success is-outlined" id="createTemplate">
Create Template
</button>
<button class="button is-success" id="createReminder">
Create Reminder
</button>
{% else %}
<button class="button is-primary" disabled>
Saved!
</button>
<button class="button is-warning disable-enable">
Disable
</button>
<button class="button is-danger">
Delete
</button>
{% endif %}
</div> </div>
<a class="set-color">
<p>
Set Embed Color <span class="icon is-small"><i class="far fa-eye-dropper"></i></span>
</p>
</a>
<span style="width: 12px;"></span>
{% if creating %}
<button class="button is-outlined">
Load Template
</button>
<button class="button is-success is-outlined" id="createTemplate">
Create Template
</button>
<button class="button is-success" id="createReminder">
Create Reminder
</button>
{% else %}
<button class="button is-primary" disabled>
Saved!
</button>
<button class="button is-warning disable-enable">
Disable
</button>
<button class="button is-danger">
Delete
</button>
{% endif %}
</div> </div>
</div> </div>

47
web/templates/reminder_dashboard/reminder_dashboard.html.tera
View File

@ -1,25 +1,45 @@
<div style="margin: 0 12px 12px 12px;"> <div style="margin: 0 12px 12px 12px;">
<div class="create-reminder"> <div class="create-reminder">
<button class="button is-rounded is-light" id="showReminderCreator"> <strong>Create Reminder</strong>
<strong>Create Reminder <span class="icon left-pad"><i class="fas fa-chevron-down"></i></span></strong>
</button>
<div id="reminderCreator"> <div id="reminderCreator">
{% set creating = true %} {% set creating = true %}
{% include "reminder_dashboard/guild_reminder" %} {% include "reminder_dashboard/guild_reminder" %}
{% set creating = false %} {% set creating = false %}
</div> </div>
<br>
<div class="field" style="margin-top: 22px;"> <div class="field">
<div class="control has-icons-left"> <div class="columns">
<div class="select is-small"> <div class="column">
<select id="orderBy"> <strong>Reminders</strong>
<option value="time" selected>Time</option>
<option value="name">Name</option>
<option value="channel">Channel</option>
</select>
</div> </div>
<div class="icon is-small is-left"> <div class="column is-narrow">
<i class="fas fa-sort-amount-down"></i> <div class="control has-icons-left">
<div class="select is-small">
<select id="orderBy">
<option value="time" selected>Time</option>
<option value="name">Name</option>
<option value="channel">Channel</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-sort-amount-down"></i>
</div>
</div>
</div>
<div class="column is-narrow">
<div class="control has-icons-left">
<div class="select is-small">
<select id="expandAll">
<option value="" selected>Expand/Collapse...</option>
<option value="expand">Expand All</option>
<option value="collapse">Collapse All</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-expand-arrows"></i>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -31,3 +51,4 @@
</div> </div>
<script src="/static/js/sort.js"></script> <script src="/static/js/sort.js"></script>
<script src="/static/js/expand.js"></script>