From 5b68c15659a3abb6a4be0aec29ae083ab17ea9de Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Tue, 18 Jun 2024 00:27:12 +0100
Subject: [PATCH] Mutators front-end

---
 apps/static/js/api.js                      |   6 ++
 apps/static/js/home/content.js             |   5 +-
 apps/static/js/home/subscriptions.js       | 110 ++++++++++++++-------
 apps/templates/home/includes/submodal.html |  16 ++-
 4 files changed, 90 insertions(+), 47 deletions(-)

diff --git a/apps/static/js/api.js b/apps/static/js/api.js
index 9b294d1..f658592 100644
--- a/apps/static/js/api.js
+++ b/apps/static/js/api.js
@@ -137,3 +137,9 @@ async function deleteTrackedContent(guid) {
     const encodedGuid = encodeURIComponent(guid);
     return await ajaxRequest(`/api/tracked-content/${encodedGuid}/`, "DELETE");
 }
+
+// Mutators
+
+async function getMutators() {
+    return await ajaxRequest("/api/article-mutator/?page_size=25", "GET");
+}
\ No newline at end of file
diff --git a/apps/static/js/home/content.js b/apps/static/js/home/content.js
index d2c68f3..17a01eb 100644
--- a/apps/static/js/home/content.js
+++ b/apps/static/js/home/content.js
@@ -29,6 +29,7 @@ function initContentTable() {
                     return '<input type="checkbox" class="form-check-input table-select-row" />'
                 }
             },
+            { data: "id", visible: false },
             { title: "GUID", data: "guid", visible: false },
             {
                 title: "Name",
@@ -72,8 +73,8 @@ $("#deleteSelectedContentBtn").on("click", async function() {
 
     var rows = contentTable.rows(".selected").data();
     $.each(rows, async function() {
-        await deleteTrackedContent(this.guid);
-        showToast("danger", "Deleted Tracked Content", "It can now appear be sent again. Content GUID: " + this.guid);
+        await deleteTrackedContent(this.id);
+        showToast("danger", "Deleted Tracked Content", "It can now appear be sent again. Content ID: " + this.id);
     });
 
     setTimeout(async () => {
diff --git a/apps/static/js/home/subscriptions.js b/apps/static/js/home/subscriptions.js
index ca14dd6..5af1b9e 100644
--- a/apps/static/js/home/subscriptions.js
+++ b/apps/static/js/home/subscriptions.js
@@ -149,7 +149,7 @@ async function showEditSubModal(subId) {
         $("#subFormModal .form-edit").hide();
         $("#subChannels").val("").change();
         $("#subFilters").val("").change();
-        $("#subUwu").prop("checked", false);
+        $("#subMutators").val("").change();
         $("#subActive").prop("checked", true);
         $("#subImagePreview img").attr("src", "").hide();
         $("#subImagePreview small").show();
@@ -162,11 +162,13 @@ async function showEditSubModal(subId) {
         $("#subName").val(subscription.name);
         $("#subUrl").val(subscription.url);
         $("#subExtraNotes").val(subscription.extra_notes);
-        $("#subUwu").prop("checked", subscription.uwuify);
         $("#subActive").prop("checked", subscription.active);
         $("#subFormModal .form-create").hide();
         $("#subFormModal .form-edit").show();
 
+        $("#subMutators").val("").change();
+        $("#subMutators").val(subscription.mutators.map(mutator => mutator.id)).change();
+
         const channels = await getSubChannels(subscription.id);
         $("#subChannels").val("").change();
         $("#subChannels").val(channels.results.map(channel => channel.channel_id)).change();
@@ -190,11 +192,10 @@ $("#subForm").on("submit", async function(event) {
         uwuify = $("#subUwu").prop("checked");
         subChannels = $("#subChannels option:selected").toArray().map(channel => channel.value);
         subFilters = $("#subFilters option:selected").toArray().map(filter => parseInt(filter.value));
-        active = $("#subActive").prop("checked");
+        subMutators = $("#subMutators option:selected").toArray().map(mutator => parseInt(mutator.value));
+        active = true;
 
-    // alert(JSON.stringify(subFilters, null, 4));
-
-    var subPrimaryKey = await saveSubscription(id, name, url, guildId, extraNotes, uwuify, subFilters, active);
+    var subPrimaryKey = await saveSubscription(id, name, url, guildId, extraNotes, uwuify, subFilters, subMutators, active);
 
     await deleteSubChannels(subPrimaryKey);
     subChannels.forEach(async channelId => {
@@ -208,7 +209,7 @@ $("#subForm").on("submit", async function(event) {
     $("#subFormModal").modal("hide");
 });
 
-async function saveSubscription(id, name, url, guildId, extraNotes, uwuify, filters, active, handleErrorMsg=true) {
+async function saveSubscription(id, name, url, guildId, extraNotes, uwuify, filters, mutators, active, handleErrorMsg=true) {
     var formData = new FormData();
     formData.append("name", name);
     formData.append("url", url);
@@ -216,6 +217,7 @@ async function saveSubscription(id, name, url, guildId, extraNotes, uwuify, filt
     formData.append("extra_notes", extraNotes);
     formData.append("uwuify", uwuify)
     filters.forEach(filter => formData.append("filters", filter));
+    mutators.forEach(mutator => formData.append("mutators", mutator));
     formData.append("active", active);
 
     var response;
@@ -353,6 +355,7 @@ $(document).on("selectedServerChange", async function() {
     await loadSubscriptions(activeServer.guild_id);
     await loadChannelOptions(activeServer.guild_id);
     await loadFilterOptions(activeServer.guild_id);
+    await loadMutatorOptions();
 })
 
 // Dev button (to be removed)
@@ -483,39 +486,74 @@ async function loadChannelOptions(guildId) {
     }
 }
 
+async function loadMutatorOptions() {
+
+    // Disable input while options are loading
+    $("#subMutators").prop("disabled", true);
+
+    // Delete existing options
+    $("#subMutators option").each(function() {
+        if ($(this).val())
+            $(this).remove();
+    });
+
+    // Clear select2 input
+    $("#subMutators").val("").change();
+
+    try {
+        const mutators = await getMutators();
+        console.log(JSON.stringify(mutators));
+
+        mutators.results.forEach(filter => {
+            $("#subMutators").append($("<option>", {
+                text: filter.name,
+                value: filter.id
+            }));
+        });
+    }
+    catch(error) {
+        console.error(error);
+        showToast("danger", "Error loading sub mutators", error, 18000);       
+    }
+    finally {
+        // Re-enable the input
+        $("#subMutators").prop("disabled", false);
+    }
+}
+
 async function loadFilterOptions(guildId) {
 
-        // Disable input while options are loading
-        $("#subFilters").prop("disabled", true);
+    // Disable input while options are loading
+    $("#subFilters").prop("disabled", true);
 
-        // Delete existing options
-        $("#subFilters option").each(function() {
-            if ($(this).val())
-                $(this).remove();
+    // Delete existing options
+    $("#subFilters option").each(function() {
+        if ($(this).val())
+            $(this).remove();
+    });
+
+    // Clear select2 input
+    $("#subFilters").val("").change();
+
+    try {
+        const filters = await getFilters(guildId);
+        console.log(JSON.stringify(filters));
+
+        filters.results.forEach(filter => {
+            $("#subFilters").append($("<option>", {
+                text: filter.name,
+                value: filter.id
+            }));
         });
-    
-        // Clear select2 input
-        $("#subFilters").val("").change();
-    
-        try {
-            const filters = await getFilters(guildId);
-            console.log(JSON.stringify(filters));
-
-            filters.results.forEach(filter => {
-                $("#subFilters").append($("<option>", {
-                    text: filter.name,
-                    value: filter.id
-                }));
-            });
-        }
-        catch(error) {
-            console.error(error);
-            showToast("danger", "Error loading sub filters", error, 18000);       
-        }
-        finally {
-            // Re-enable the input
-            $("#subFilters").prop("disabled", false);
-        }
+    }
+    catch(error) {
+        console.error(error);
+        showToast("danger", "Error loading sub filters", error, 18000);       
+    }
+    finally {
+        // Re-enable the input
+        $("#subFilters").prop("disabled", false);
+    }
 
 }
 
diff --git a/apps/templates/home/includes/submodal.html b/apps/templates/home/includes/submodal.html
index 90dc07f..4df70d2 100644
--- a/apps/templates/home/includes/submodal.html
+++ b/apps/templates/home/includes/submodal.html
@@ -39,20 +39,18 @@
                                 <select name="subFilters" id="subFilters" class="select-2" multiple data-dropdownparent="#subFormModal" tabindex="4"></select>
                                 <div class="form-text">Filters to apply to this subscription's content.</div>
                             </div>
-                            <div class="form-switch mb-4 ps-0">
+                            <div>
+                                <label for="subMutators" class="form-label">Article Mutators</label>
+                                <select name="subMutators" id="subMutators" class="select-2" multiple data-dropdownparent="#subFormModal" tabindex="6"></select>
+                                <div class="form-text">Apply mutators to subscription articles.</div>
+                            </div>
+                            <!-- <div class="form-switch mb-4 ps-0">
                                 <label for="subActive" class="form-check-label mb-2">Active</label>
                                 <br>
                                 <input type="checkbox" id="subActive" name="subActive" class="form-check-input ms-0 mt-0" tabindex="6">
                                 <br>
                                 <div class="form-text">Inactive subscriptions wont be processed.</div>
-                            </div>
-                            <div class="form-switch ps-0">
-                                <label for="subUwu" class="form-check-label mb-2">Uwu</label>
-                                <br>
-                                <input type="checkbox" id="subUwu" name="subUwu" class="form-check-input ms-0 mt-0" tabindex="6">
-                                <br>
-                                <div class="form-text">Uwu?</div>
-                            </div>
+                            </div> -->
                         </div>
                     </div>
                 </div>