load filter algorithms from api via options

apps/static/js/api.js

@@ -122,6 +122,10 @@ async function editFilter(id, formData) {
     return await ajaxRequest(`/api/filter/${id}/`, "PUT", formData);
 }
 
+async function getFilterOptions() {
+    return await ajaxRequest("/api/filter/", "OPTIONS")
+}
+
 
 // Tracked Content
 

apps/static/js/home/filters.js

@@ -189,11 +189,11 @@ async function loadFilters(guildId, page=1, pageSize=null) {
     }
 }
 
-$(document).ready(function() {
-    loadMatchingAlgorithms();
+$(document).ready(async function() {
+    await loadMatchingAlgorithms();
 });
 
-function loadMatchingAlgorithms() {
+async function loadMatchingAlgorithms() {
     // Disable input while options are loading
     $("#filterAlgorithm").prop("disabled", true);
 
@@ -206,25 +206,22 @@ function loadMatchingAlgorithms() {
     // Clear select2 input
     $("#filterAlgorithm").val("").change();
 
-    algorithms = [
-        {id: "", name: "None"},
-        {id: 1, name: "Any Words"},
-        {id: 2, name: "All Words"},
-        {id: 3, name: "Exact Match"},
-        {id: 4, name: "Regular Expression"},
-        {id: 5, name: "Fuzzy Match"},
-    ]
-
-    algorithms.forEach(algorithm => {
-        $("#filterAlgorithm").append($("<option>", {
-            text: algorithm.name,
-            value: algorithm.id
-        }));
-    });
-
-
-    // Re-enable the input
-    $("#filterAlgorithm").prop("disabled", false);
+    try {
+        options = await getFilterOptions();
+        options.actions.POST.matching_algorithm.choices.forEach(algorithm => {
+            $("#filterAlgorithm").append($("<option>", {
+                text: algorithm.display_name,
+                value: algorithm.value > 0 ? algorithm.value : ""  // empty string for 'None' option at 0
+            }));                                                   // (helps with validation)
+        });
+    }
+    catch (error) {
+        console.error(error);
+    }
+    finally {
+        // Re-enable the input
+        $("#filterAlgorithm").prop("disabled", false);
+    }
 };
 
 $(document).on("selectedServerChange", async function() {

apps/templates/home/includes/filtermodal.html

@@ -4,7 +4,7 @@
         <div class="modal-content rounded-1">
             <form id="filterForm" class="mb-0" novalidate>
                 <div class="modal-header">
-                    <h5 class="modal-title">
+                    <h5 class="modal-title ms-2">
                         <span class="form-create">Add</span>
                         <span class="form-edit">Edit</span>
                         Filter
@@ -13,13 +13,13 @@
                 <div class="modal-body p-4">
                     <input type="hidden" id="filterId" name="filterId">
                     <div class="row">
-                        <div class="col-lg-6 pe-lg-4">
+                        <div class="col-12">
                             <div class="mb-4">
                                 <label for="filterName" class="form-label">Name</label>
                                 <input type="text" id="filterName" name="filterName" class="form-control rounded-1" tabindex="0">
                             </div>
                         </div>
-                        <div class="col-lg-6 ps-lg-4">
+                        <div class="col-12">
                             <div class="mb-4">
                                 <label for="filterAlgorithm" class="form-label">Matching Algorithm</label>
                                 <select name="filterAlgorithm" id="filterAlgorithm" class="select-2" data-dropdownparent="#filterFormModal" tabindex="1"></select>

apps/templates/home/includes/servermodal.html

@@ -4,7 +4,7 @@
         <div class="modal-content rounded-1">
             <form id="serverForm" class="mb-0" novalidate>
                 <div class="modal-header">
-                    <h5 class="modal-title">
+                    <h5 class="modal-title ms-2">
                         Add Server
                     </h5>
                 </div>