interval field client processing

web/static/js/interval.js

@@ -0,0 +1,69 @@
+function update_input(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"]');
+    let minutes = element.querySelector('input[name="interval_minutes"]');
+    let seconds = element.querySelector('input[name="interval_seconds"]');
+
+    months.value = months.value.padStart(1, "0");
+    days.value = days.value.padStart(1, "0");
+    hours.value = hours.value.padStart(2, "0");
+    minutes.value = minutes.value.padStart(2, "0");
+    seconds.value = seconds.value.padStart(2, "0");
+
+    if (seconds.value >= 60) {
+        let quotient = Math.floor(seconds.value / 60);
+        let remainder = seconds.value % 60;
+
+        seconds.value = String(remainder).padStart(2, "0");
+        minutes.value = String(Number(minutes.value) + Number(quotient)).padStart(2, "0");
+    }
+    if (minutes.value >= 60) {
+        let quotient = Math.floor(minutes.value / 60);
+        let remainder = minutes.value % 60;
+
+        minutes.value = String(remainder).padStart(2, "0");
+        hours.value = String(Number(hours.value) + Number(quotient)).padStart(2, "0");
+    }
+    if (hours.value >= 24) {
+        let quotient = Math.floor(hours.value / 24);
+        let remainder = hours.value % 24;
+
+        hours.value = String(remainder).padStart(2, "0");
+        days.value = Number(days.value) + Number(quotient);
+    }
+}
+
+let $intervalGroup = document.querySelector(".interval-group");
+
+document.querySelector(".interval-group").addEventListener(
+    "blur",
+    (ev) => {
+        if (ev.target.nodeName !== "BUTTON") update_input($intervalGroup);
+    },
+    true
+);
+
+$intervalGroup.querySelector("button.clear").addEventListener("click", () => {
+    document
+        .querySelector(".interval-group")
+        .querySelectorAll("input")
+        .forEach((el) => {
+            el.value = "";
+        });
+});
+
+document.addEventListener("remindersLoaded", (event) => {
+    for (reminder of event.detail) {
+        update_input(reminder.node.querySelector(".interval-group input"));
+
+        reminder.node.querySelector("button.clear").addEventListener("click", () => {
+            reminder.node
+                .querySelector(".interval-group")
+                .querySelectorAll("input")
+                .forEach((el) => {
+                    el.value = "";
+                });
+        });
+    }
+});

web/templates/base.html.tera

@@ -66,7 +66,7 @@
                 <div class="navbar-item">
                     <a class="button is-rounded is-light" href="/dashboard">
                         <p>
-                            Dashboard <span class="icon"><i class="fas fa-chevron-right"></i></span>
+                            <span>Dashboard</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
                         </p>
                     </a>
                 </div>
@@ -114,7 +114,7 @@
                 <div class="hero-foot has-text-centered">
                     <a class="button is-size-4 is-rounded is-success" href="https://invite.reminder-bot.com">
                         <p class="is-size-4">
-                            Add to your Server <span class="icon"><i class="fas fa-chevron-right"></i></span>
+                            <span>Add to your Server</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
                         </p>
                     </a>
                 </div>
@@ -122,7 +122,7 @@
                 <div class="hero-foot has-text-centered">
                     <a class="button is-size-4 is-rounded is-primary" href="https://discord.jellywx.com">
                         <p class="is-size-4">
-                            Join Discord <span class="icon"><i class="fas fa-chevron-right"></i></span>
+                            <span>Join Discord</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
                         </p>
                     </a>
                 </div>

web/templates/dashboard.html.tera

@@ -321,6 +321,7 @@
     {% include "reminder_dashboard/personal_reminder" %}
 </template>
 
+<script src="/static/js/interval.js"></script>
 <script src="/static/js/timezone.js"></script>
 <script src="/static/js/main.js"></script>
 

web/templates/reminder_dashboard/guild_reminder.html.tera

@@ -159,7 +159,7 @@
                             <input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
                             <input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
                         </div>
-                        <button><span class="icon"><i class="fas fa-trash"></i></span></button>
+                        <button class="clear"><span class="icon"><i class="fas fa-trash"></i></span></button>
                     </div>
                 </div>
             </div>