form progress

src/client/public/js/guild/filters.js

@@ -1,22 +1,4 @@
 
-const formatTimestamp = timestamp => {
-    let d;
-    if (typeof timestamp === "string") {
-        d = new Date(timestamp.replace(" ", "T"));
-    }
-    else {
-        d = new Date(timestamp);
-    }
-
-    const now = new Date();
-
-    // If younger than a year, show time
-    // otherwise show the year
-    return now - d < 31536000000
-        ? `${d.getDate()} ${d.toLocaleString("en-GB", { month: "short" })}, ${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`
-        : `${d.getDate()} ${d.toLocaleString("en-GB", { month: "short" })} ${d.getFullYear()}`;
-}
-
 const emptyTableHtml = `
     <div class="max-w-md w-full min-h-[400px] flex flex-col justify-center mx-auto px-6 py-4">
         <div class="flex justify-center items-center size-[46px] bg-gray-100 rounded-lg dark:bg-neutral-800">

src/client/public/js/guild/subscriptions.js

@@ -1,22 +1,4 @@
 
-const formatTimestamp = timestamp => {
-    let d;
-    if (typeof timestamp === "string") {
-        d = new Date(timestamp.replace(" ", "T"));
-    }
-    else {
-        d = new Date(timestamp);
-    }
-
-    const now = new Date();
-
-    // If younger than a year, show time
-    // otherwise show the year
-    return now - d < 31536000000
-        ? `${d.getDate()} ${d.toLocaleString("en-GB", { month: "short" })}, ${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`
-        : `${d.getDate()} ${d.toLocaleString("en-GB", { month: "short" })} ${d.getFullYear()}`;
-}
-
 //#region Table
 
 const emptyTableHtml = `
@@ -106,12 +88,12 @@ const defineTable = () => {
                 data: "name",
                 orderable: true,
                 searchable: true,
-                render: data => {
+                render: (data, _type, row) => {
                     return `
                         <td class="size-px whitespace-nowrap align-top">
-                            <a href="#" class="block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap">
+                            <span class="openSubModal-js block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap cursor-pointer" data-id="${row.id}">
                                 ${data}
-                            </a>
+                            </span>
                         </td>
                     `;
                 }
@@ -307,21 +289,43 @@ $("input[name='filterActive']").on("change", () => {
     table.dataTable.draw();
 });
 
-const openSubForm = () => {
+const openSubForm = async id => {
     $("#subForm").removeClass("submitted");
 
-    // Clear the form values
+    // Always clear the selects to avoid bugs
-    $("#formName").val("");
-    $("#formUrl").val("");
-    $("#formPublishedThreshold").val(new Date().toISOString().slice(0, 16));
-
     HSSelect.getInstance("#formStyle", true).element.setValue([]);
     HSSelect.getInstance("#formChannels", true).element.setValue([]);
     HSSelect.getInstance("#formFilters", true).element.setValue([]);
     $("#formChannelsInput").css("width", "");
     $("#formFiltersInput").css("width", "");
 
-    $("#formActive").prop("checked", true);
+    // New Subscription: Clear the form values
+    if (id === -1) {
+        $("#formName").val("");
+        $("#formUrl").val("");
+        $("#formPublishedThreshold").val(new Date().toISOString().slice(0, 16));
+        $("#formActive").prop("checked", true);
+    }
+    // Existing subscription: Load the values
+    else {
+        const data = await $.ajax({
+            url: `/guild/${guildId}/subscriptions/api?id=${id}`,
+            method: "get",
+        });
+
+        $("#formName").val(data.name);
+        $("#formUrl").val(data.url);
+        $("#formPublishedThreshold").val(new Date(data.created_at));
+    
+        HSSelect.getInstance("#formStyle", true).element.setValue([]);
+        HSSelect.getInstance("#formChannels", true).element.setValue(data.channels);
+        HSSelect.getInstance("#formFilters", true).element.setValue([]);
+        // $("#formChannelsInput").css("width", "");
+        // $("#formFiltersInput").css("width", "");
+    
+        $("#formActive").prop("checked", data.active);
+    }
+
 
     HSOverlay.open($("#subModal").get(0));
 }
@@ -331,7 +335,9 @@ const closeSubForm = () => {
     HSOverlay.close($("#subModal").get(0));
 }
 
-$(document).on("click", ".openSubModal-js", openSubForm);
+$(document).on("click", ".openSubModal-js", event => {
+    openSubForm($(event.target).data("id") || -1);
+});
 
 const submitForm = async event => {
     event.preventDefault();

src/client/public/js/main.js

@@ -6,4 +6,22 @@ window.addEventListener('load', () => {
             if ((evt.metaKey || evt.ctrlKey) && evt.key === 'a') this.select();
         });
     });
-});
+});
+
+const formatTimestamp = timestamp => {
+    let d;
+    if (typeof timestamp === "string") {
+        d = new Date(timestamp.replace(" ", "T"));
+    }
+    else {
+        d = new Date(timestamp);
+    }
+
+    const now = new Date();
+
+    // If younger than a year, show time
+    // otherwise show the year
+    return now - d < 31536000000
+        ? `${d.getDate()} ${d.toLocaleString("en-GB", { month: "short" })}, ${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`
+        : `${d.getDate()} ${d.toLocaleString("en-GB", { month: "short" })} ${d.getFullYear()}`;
+}

src/server/controllers/guild/sub.api.controller.ts

@@ -69,7 +69,10 @@ export const get = async (request: Request, response: Response) => {
             return;
         }
 
-        data.channels = JSON.parse(data.channels);
+        // Parse empty channel arrays
+        data.channels = data.channels === "[null]"
+            ? []
+            : JSON.parse(data.channels);
 
         response.json(data);
     }