load style options & model fields

apps/home/static/home/js/tabs/subs.js

@@ -1,11 +1,13 @@
 
 const subTableId = "#subTable";
+const subModalId = "#subFormModal";
+
 
 // region Init Module
 
 function initSubscriptionsModule() {
     initializeDataTable(
-        "#subTable",
+        subTableId,
         [
             {
                 title: "Name",
@@ -132,11 +134,26 @@ $(subTableId).on("click", ".edit-modal", async function() {
 })
 
 async function openSubModal(id) {
-    $modal = $("#subFormModal");
+    $modal = $(subModalId);
 
     if (parseInt(id) === -1) {
         $modal.find(".form-create").show();
         $modal.find(".form-edit").hide();
+
+        $modal.find("[data-field]").each(function() {
+            const type = $(this).attr("type");
+            const defaultVal = $(this).attr("data-default") || "";
+
+            if (type === "checkbox") {
+                $(this).prop("checked", defaultVal === "true");
+            }
+            else if ($(this).is("select")) {
+                $(this).val(defaultVal).change();
+            }
+            else {
+                $(this).val(defaultVal);
+            }
+        });
     }
     else {
         $modal.find(".form-create").hide();
@@ -145,18 +162,53 @@ async function openSubModal(id) {
         let data = await ajaxRequest(`/api/subscriptions/${id}/`, "GET");
 
         $modal.find("[data-field]").each(function() {
-            let key = $(this).attr("data-field");
+            const key = $(this).attr("data-field");
-            let value = data[key];
+            const value = data[key];
 
             if (typeof value === "boolean") {
                 $(this).prop("checked", value);
             }
+            else if (isISODateTimeString(value)) {
+                $(this).val(value.split('+')[0].substring(0, 16));
+            }
             else {
                 $(this).val(value);
             }
-
         });
     }
 
     $modal.modal("show");
 }
+
+// region Load Modal Options
+
+$(document).on("selectedServerChange", async function() {
+    await loadMessageStyleOptions();
+});
+
+async function loadMessageStyleOptions() {
+    let = $input = $(subModalId).find('[data-field="message_style"]');
+
+    // Disable and clear input
+    $input.val("").change();
+    $input.prop("disabled", true);
+
+    // Delete existing options
+    $input.find("option").each(function() {
+        if ($(this).val()) {
+            $(this).remove();
+        }
+    });
+
+    // Load new values
+    const data = await ajaxRequest(`/api/message-styles/?server=${selectedServer.id}`, "GET");
+    data.results.forEach(style => {
+        $input.append($(
+            "<option>",
+            {text: style.name, value: style.id}
+        ));
+    });
+
+    // Re-enable input
+    $input.prop("disabled", false);
+}

apps/home/templates/home/modals/editSub.html

@@ -30,6 +30,7 @@
                             <div class="mb-4">
                                 <label for="" class="form-label">Message Style</label>
                                 <select name="" id="" class="select-2" data-dropdownparent="#subFormModal" data-field="message_style" tabindex="3">
+                                    <option value="">Select an option</option>
                                 </select>
                                 <div class="form-text">Appearance of delivered content.</div>
                             </div>
@@ -37,7 +38,7 @@
                         <div class="col-lg-6 ps-lg-4">
                             <div class="mb-4">
                                 <label for="subPubThreshold" class="form-label">Publish Threshold</label>
-                                <input type="datetime-local" name="subPubThreshold" id="subPubThreshold" class="form-control rounded-1" required data-field="published_threshold" tabindex="4">
+                                <input type="datetime-local" name="subPubThreshold" id="subPubThreshold" class="form-control rounded-1" required data-field="publish_threshold" tabindex="4">
                                 <div class="form-text">Age limit of processed content.</div>
                             </div>
                         </div>
@@ -65,7 +66,7 @@
                         <div class="col-lg-6 ps-lg-4">
                             <div class="form-check form-switch">
                                 <label for="subActive" class="form-check-label">Enabled</label>
-                                <input type="checkbox" id="subActive" name="subActive" class="form-check-input" data-field="active" tabindex="8">
+                                <input type="checkbox" id="subActive" name="subActive" class="form-check-input" data-field="active" tabindex="8" data-default="true">
                                 <div class="form-text d-none">Disabled Subscriptions are ignored.</div>
                             </div>
                         </div>