process intervals. inlining fields

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
 );

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 } => {

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;
 }

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", () => {

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 =
+            let interval = get_interval(node);
-                parseInt(node.querySelector('input[name="interval_seconds"]').value) ||
-                null;
-            let months =
-                parseInt(node.querySelector('input[name="interval_months"]').value) ||
-                null;
 
             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_seconds: interval.seconds,
-                interval_months: months,
+                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) => {
+                if (data.timezone !== null) botTimezone = data.timezone;
-                    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;
-                }
 
                 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 interval = get_interval($createReminder);
-    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")
@@ -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_seconds: interval.seconds,
-        interval_months: months,
+        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 === "" &&
+                $titleInput.value === "" &&
-                $complement.value === "" &&
+                $valueInput.value === "" &&
-                element.parentElement.nextElementSibling !== null
+                element.nextElementSibling !== null
             ) {
-                element.parentElement.remove();
+                element.remove();
             }
         });
 
-        $complement.addEventListener("blur", () => {
+        $valueInput.addEventListener("blur", () => {
             if (
-                element.value === "" &&
+                $titleInput.value === "" &&
-                $complement.value === "" &&
+                $valueInput.value === "" &&
-                element.parentElement.nextElementSibling !== null
+                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 !== "" &&
+                $titleInput.value !== "" &&
-                $complement.value !== "" &&
+                $valueInput.value !== "" &&
-                element.parentElement.nextElementSibling === null
+                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 !== "" &&
+                $titleInput.value !== "" &&
-                $complement.value !== "" &&
+                $valueInput.value !== "" &&
-                element.parentElement.nextElementSibling === null
+                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);
             }
         });
     });

web/templates/dashboard.html.tera

@@ -176,16 +176,6 @@
             </g>
         </svg>
         <aside class="menu" style="display: flex; flex-direction: column; flex-grow: 1;">
-            <p class="menu-label">
-                Personal
-            </p>
-            <ul class="menu-list">
-                <li>
-                    <a class="switch-pane" data-pane="personal">
-                        <span class="icon"><i class="fas fa-map-pin"></i></span> @%username%
-                    </a>
-                </li>
-            </ul>
             <p class="menu-label">
                 Servers
             </p>
@@ -290,11 +280,14 @@
 </div>
 
 <template id="embedFieldTemplate">
-    <div class="embed-field-box">
+    <div data-inlined="1" class="embed-field-box">
         <label class="is-sr-only" for="embedFieldTitle">Field Title</label>
+        <div style="display: flex;">
             <textarea class="discord-field-title field-input message-input autoresize"
                       placeholder="Field Title..." rows="1"
                       maxlength="256" id="embedFieldTitle" name="embed_field_title[]"></textarea>
+            <button class="button is-small inline-btn" style="height: 100%; padding: 5px;"><i class="fas fa-arrows-h"></i></button>
+        </div>
 
         <label class="is-sr-only" for="embedFieldValue">Field Value</label>
         <textarea

web/templates/reminder_dashboard/guild_reminder.html.tera

@@ -58,13 +58,14 @@
                                 <br>
 
                                 <div class="embed-multifield-box">
-                                    <div class="embed-field-box">
+                                    <div data-inlined="1" class="embed-field-box">
                                         <label class="is-sr-only" for="embedFieldTitle">Field Title</label>
-                                        <textarea
+                                        <div style="display: flex;">
-                                                class="discord-field-title field-input message-input autoresize "
+                                            <textarea class="discord-field-title field-input message-input autoresize"
                                                       placeholder="Field Title..." rows="1"
-                                                maxlength="256" id="embedFieldTitle"
+                                                      maxlength="256" id="embedFieldTitle" name="embed_field_title[]"></textarea>
-                                                name="embed_field_title[]"></textarea>
+                                            <button class="button is-small inline-btn" style="height: 100%; padding: 5px;"><i class="fas fa-arrows-h"></i></button>
+                                        </div>
 
                                         <label class="is-sr-only" for="embedFieldValue">Field Value</label>
                                         <textarea