diff --git a/.prettierrc.toml b/.prettierrc.toml index 3d14781..943b086 100644 --- a/.prettierrc.toml +++ b/.prettierrc.toml @@ -1 +1,2 @@ +printWidth = 90 tabWidth = 4 diff --git a/web/src/routes/dashboard/guild.rs b/web/src/routes/dashboard/guild.rs index cb4556b..b2c5243 100644 --- a/web/src/routes/dashboard/guild.rs +++ b/web/src/routes/dashboard/guild.rs @@ -362,7 +362,49 @@ pub async fn edit_reminder( .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//reminders", data = "")] diff --git a/web/static/css/style.css b/web/static/css/style.css index b235076..20f898a 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -2,6 +2,69 @@ 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 { padding: 2px; background-color: #f5f5f5; @@ -340,36 +403,6 @@ textarea, input { 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 { font-size: 1.125rem; margin-bottom: 4px; diff --git a/web/static/js/expand.js b/web/static/js/expand.js new file mode 100644 index 0000000..c74a72d --- /dev/null +++ b/web/static/js/expand.js @@ -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 = ""; +}); diff --git a/web/static/js/main.js b/web/static/js/main.js index 5dc4b61..164208e 100644 --- a/web/static/js/main.js +++ b/web/static/js/main.js @@ -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(); }); diff --git a/web/static/js/sort.js b/web/static/js/sort.js index 17b468c..3797d39 100644 --- a/web/static/js/sort.js +++ b/web/static/js/sort.js @@ -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", () => { diff --git a/web/templates/dashboard.html.tera b/web/templates/dashboard.html.tera index 73a6ccc..820313a 100644 --- a/web/templates/dashboard.html.tera +++ b/web/templates/dashboard.html.tera @@ -54,14 +54,14 @@ -