From d946ef1dcac1fe8eb6f2e88fc1dda294d8171b9b Mon Sep 17 00:00:00 2001 From: jude Date: Sun, 3 Apr 2022 21:53:28 +0100 Subject: [PATCH] process intervals. inlining fields --- migration/04-reminder_templates.sql | 2 +- src/event_handlers.rs | 8 +- web/static/css/style.css | 12 ++ web/static/js/interval.js | 25 +++- web/static/js/main.js | 132 ++++++++++-------- web/templates/dashboard.html.tera | 21 +-- .../guild_reminder.html.tera | 13 +- 7 files changed, 124 insertions(+), 89 deletions(-) diff --git a/migration/04-reminder_templates.sql b/migration/04-reminder_templates.sql index e6a4208..987ad59 100644 --- a/migration/04-reminder_templates.sql +++ b/migration/04-reminder_templates.sql @@ -27,5 +27,5 @@ CREATE TABLE reminder_template ( PRIMARY KEY (id), - FOREIGN KEY (`guild_id`) REFERENCES channels (`id`) ON DELETE CASCADE, + FOREIGN KEY (`guild_id`) REFERENCES channels (`id`) ON DELETE CASCADE ); diff --git a/src/event_handlers.rs b/src/event_handlers.rs index f1a786f..17e2908 100644 --- a/src/event_handlers.rs +++ b/src/event_handlers.rs @@ -17,7 +17,11 @@ pub async fn listener( poise::Event::CacheReady { .. } => { info!("Cache Ready! Preparing extra processes"); - if !data.is_loop_running.load(Ordering::Relaxed) { + if data + .is_loop_running + .compare_exchange(false, true, Ordering::Relaxed, Ordering::Relaxed) + .is_ok() + { let kill_tx = data.broadcast.clone(); let kill_recv = data.broadcast.subscribe(); @@ -49,8 +53,6 @@ pub async fn listener( } else { warn!("Not running web") } - - data.is_loop_running.swap(true, Ordering::Relaxed); } } poise::Event::ChannelDelete { channel } => { diff --git a/web/static/css/style.css b/web/static/css/style.css index 1ece04c..9600be5 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -206,6 +206,18 @@ div.dashboard-frame { margin-bottom: 0 !important; } +.embed-field-box[data-inlined="0"] .inline-btn > i { + transform: rotate(90deg); +} + +.embed-field-box[data-inlined="0"] { + min-width: 100%; +} + +.embed-field-box[data-inlined="1"] { + min-width: auto; +} + .menu a { color: #fff; } diff --git a/web/static/js/interval.js b/web/static/js/interval.js index e56c8fc..6245980 100644 --- a/web/static/js/interval.js +++ b/web/static/js/interval.js @@ -1,4 +1,23 @@ -function update_input(element) { +function get_interval(element) { + let months = element.querySelector('input[name="interval_months"]').value; + let days = element.querySelector('input[name="interval_days"]').value; + let hours = element.querySelector('input[name="interval_hours"]').value; + let minutes = element.querySelector('input[name="interval_minutes"]').value; + let seconds = element.querySelector('input[name="interval_seconds"]').value; + + console.log(minutes); + + return { + months: parseInt(months) || null, + seconds: + (parseInt(days) || 0) * 86400 + + (parseInt(hours) || 0) * 3600 + + (parseInt(minutes) || 0) * 60 + + (parseInt(seconds) || 0) || null, + }; +} + +function update_interval(element) { let months = element.querySelector('input[name="interval_months"]'); let days = element.querySelector('input[name="interval_days"]'); let hours = element.querySelector('input[name="interval_hours"]'); @@ -39,7 +58,7 @@ let $intervalGroup = document.querySelector(".interval-group"); document.querySelector(".interval-group").addEventListener( "blur", (ev) => { - if (ev.target.nodeName !== "BUTTON") update_input($intervalGroup); + if (ev.target.nodeName !== "BUTTON") update_interval($intervalGroup); }, true ); @@ -55,7 +74,7 @@ document.addEventListener("remindersLoaded", (event) => { let $intervalGroup = reminder.node.querySelector(".interval-group"); $intervalGroup.addEventListener("blur", (ev) => { - if (ev.target.nodeName !== "BUTTON") update_input($intervalGroup); + if (ev.target.nodeName !== "BUTTON") update_interval($intervalGroup); }); $intervalGroup.querySelector("button.clear").addEventListener("click", () => { diff --git a/web/static/js/main.js b/web/static/js/main.js index c7d14ef..0da0c54 100644 --- a/web/static/js/main.js +++ b/web/static/js/main.js @@ -161,6 +161,8 @@ function render_reminder(reminder, frame) { } } + if (reminder["interval_seconds"] !== null) update_interval(frame); + let $enableBtn = frame.querySelector(".disable-enable"); $enableBtn.dataset.action = reminder["enabled"] ? "disable" : "enable"; @@ -252,12 +254,7 @@ document.addEventListener("remindersLoaded", (event) => { "fas fa-spinner fa-spin", ]; - let seconds = - parseInt(node.querySelector('input[name="interval_seconds"]').value) || - null; - let months = - parseInt(node.querySelector('input[name="interval_months"]').value) || - null; + let interval = get_interval(node); let rgb_color = window.getComputedStyle( node.querySelector("div.discord-embed") @@ -302,8 +299,8 @@ document.addEventListener("remindersLoaded", (event) => { embed_title: node.querySelector('textarea[name="embed_title"]').value, embed_fields: fields, expires: null, - interval_seconds: seconds, - interval_months: months, + interval_seconds: interval.seconds, + interval_months: interval.months, name: node.querySelector('input[name="name"]').value, pin: node.querySelector('input[name="pin"]').checked, tts: node.querySelector('input[name="tts"]').checked, @@ -406,28 +403,7 @@ document.addEventListener("DOMContentLoaded", () => { if (data.error) { show_error(data.error); } else { - document.querySelectorAll("a.switch-pane").forEach((element) => { - element.textContent = element.textContent.replace( - "%username%", - data.name - ); - - element.addEventListener("click", (e) => { - e.preventDefault(); - - switch_pane(element.dataset["pane"]); - - element.classList.add("is-active"); - - document.querySelectorAll("p.pageTitle").forEach((el) => { - el.textContent = "Your Reminders"; - }); - }); - }); - - if (data.timezone !== null) { - botTimezone = data.timezone; - } + if (data.timezone !== null) botTimezone = data.timezone; update_times(); } @@ -512,13 +488,7 @@ let $createBtn = $createReminder.querySelector("button#createReminder"); $createBtn.addEventListener("click", async () => { $createBtn.querySelector("span.icon > i").classList = ["fas fa-spinner fa-spin"]; - // 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 interval = get_interval($createReminder); let rgb_color = window.getComputedStyle( $createReminder.querySelector("div.discord-embed") @@ -536,6 +506,17 @@ $createBtn.addEventListener("click", async () => { return; } + let fields = [ + ...$createReminder.querySelectorAll( + "div.embed-multifield-box div.embed-field-box" + ), + ].map((el) => { + return { + title: el.querySelector("textarea#embedFieldTitle").value, + value: el.querySelector("textarea#embedFieldValue").value, + }; + }); + let attachment = null; let attachment_name = null; @@ -575,11 +556,11 @@ $createBtn.addEventListener("click", async () => { $createReminder.querySelector("img.embed_thumbnail_url").src ), embed_title: $createReminder.querySelector("textarea#embedTitle").value, - embed_fields: [], + embed_fields: fields, enabled: true, expires: null, - interval_seconds: seconds, - interval_months: months, + interval_seconds: interval.seconds, + interval_months: interval.months, name: $createReminder.querySelector('input[name="name"]').value, pin: $createReminder.querySelector('input[name="pin"]').checked, restartable: false, @@ -701,54 +682,81 @@ document.addEventListener("remindersLoaded", () => { window.getComputedStyle($discordFrame).borderLeftColor; }); }); + + document.querySelectorAll(".embed-field-box button.inline-btn").forEach((el) => { + el.addEventListener("click", (ev) => { + let inlined = ev.target.closest(".embed-field-box").dataset["inlined"]; + ev.target.closest(".embed-field-box").dataset["inlined"] = + inlined === "1" ? "0" : "1"; + }); + }); }); function check_embed_fields() { - document.querySelectorAll(".discord-field-title").forEach((element) => { + document.querySelectorAll(".embed-field-box").forEach((element) => { const $template = document.querySelector("template#embedFieldTemplate"); - const $complement = element.parentElement.querySelector(".discord-field-value"); + const $titleInput = element.querySelector(".discord-field-title"); + const $valueInput = element.querySelector(".discord-field-value"); // when the user clicks out of the field title and if the field title/value are empty, remove the field - element.addEventListener("blur", () => { + $titleInput.addEventListener("blur", () => { if ( - element.value === "" && - $complement.value === "" && - element.parentElement.nextElementSibling !== null + $titleInput.value === "" && + $valueInput.value === "" && + element.nextElementSibling !== null ) { - element.parentElement.remove(); + element.remove(); } }); - $complement.addEventListener("blur", () => { + $valueInput.addEventListener("blur", () => { if ( - element.value === "" && - $complement.value === "" && - element.parentElement.nextElementSibling !== null + $titleInput.value === "" && + $valueInput.value === "" && + element.nextElementSibling !== null ) { - element.parentElement.remove(); + element.remove(); } }); // when the user inputs into the end field, create a new field after it - element.addEventListener("input", () => { + $titleInput.addEventListener("input", () => { if ( - element.value !== "" && - $complement.value !== "" && - element.parentElement.nextElementSibling === null + $titleInput.value !== "" && + $valueInput.value !== "" && + element.nextElementSibling === null ) { const $clone = $template.content.cloneNode(true); - element.parentElement.parentElement.append($clone); + $clone + .querySelector(".embed-field-box button.inline-btn") + .addEventListener("click", (ev) => { + let inlined = + ev.target.closest(".embed-field-box").dataset["inlined"]; + ev.target.closest(".embed-field-box").dataset["inlined"] = + inlined == "1" ? "0" : "1"; + }); + + element.parentElement.append($clone); } }); - $complement.addEventListener("input", () => { + $valueInput.addEventListener("input", () => { if ( - element.value !== "" && - $complement.value !== "" && - element.parentElement.nextElementSibling === null + $titleInput.value !== "" && + $valueInput.value !== "" && + element.nextElementSibling === null ) { const $clone = $template.content.cloneNode(true); - element.parentElement.parentElement.append($clone); + $clone + .querySelector(".embed-field-box button.inline-btn") + .addEventListener("click", (ev) => { + let inlined = + ev.target.closest(".embed-field-box").dataset["inlined"]; + ev.target.closest(".embed-field-box").dataset["inlined"] = + inlined == "1" ? "0" : "1"; + }); + + element.parentElement.append($clone); } }); }); diff --git a/web/templates/dashboard.html.tera b/web/templates/dashboard.html.tera index 2b12a4e..93b5926 100644 --- a/web/templates/dashboard.html.tera +++ b/web/templates/dashboard.html.tera @@ -176,16 +176,6 @@