From 8ef9c9d9ddd8f6772739e5fcf66e5701281d7ca8 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Sun, 29 Sep 2024 19:06:55 +0100
Subject: [PATCH] style form & table layout

---
 apps/home/static/home/js/tabs/styles.js       | 150 ++++++++++++++++--
 .../home/templates/home/modals/editStyle.html |  98 ++++++++++++
 2 files changed, 235 insertions(+), 13 deletions(-)
 create mode 100644 apps/home/templates/home/modals/editStyle.html

diff --git a/apps/home/static/home/js/tabs/styles.js b/apps/home/static/home/js/tabs/styles.js
index be64ca8..2ca5d97 100644
--- a/apps/home/static/home/js/tabs/styles.js
+++ b/apps/home/static/home/js/tabs/styles.js
@@ -1,4 +1,5 @@
 const styleTableId = "#styleTable";
+const styleModalId = "#styleFormModal";
 
 
 // region Init Module
@@ -9,31 +10,65 @@ function initMessageStylesModule() {
         [
             {
                 title: "Name",
-                data: "name"
+                data: "name",
+                render: function(data) {
+                    const name = sanitise(data);
+                    return `<button type="button" class="btn btn-link text-start text-decoration-none edit-modal">${name}</button>`;
+                }
             },
             {
-                title: "Is Embed?",
-                data: "is_embed"
+                title: "Is Embed",
+                data: "is_embed",
+                className: "text-center",
+                render: function(data) {
+                    const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
+                    return `<i class="bi ${iconClass}"></i>`;
+                }
             },
             {
-                title: "Is Hyperlinked?",
-                data: "is_hyperlinked"
+                title: "Is Hyperlinked",
+                data: "is_hyperlinked",
+                className: "text-center",
+                render: function(data) {
+                    const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
+                    return `<i class="bi ${iconClass}"></i>`;
+                }
             },
             {
-                title: "Show Author?",
-                data: "show_author"
+                title: "Show Author",
+                data: "show_author",
+                className: "text-center",
+                render: function(data) {
+                    const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
+                    return `<i class="bi ${iconClass}"></i>`;
+                }
             },
             {
-                title: "Show Timestamp?",
-                data: "show_timestamp"
+                title: "Show Timestamp",
+                data: "show_timestamp",
+                className: "text-center",
+                render: function(data) {
+                    const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
+                    return `<i class="bi ${iconClass}"></i>`;
+                }
             },
             {
-                title: "Show Images?",
-                data: "show_images"
+                title: "Show Images",
+                data: "show_images",
+                className: "text-center",
+                render: function(data) {
+                    const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
+                    return `<i class="bi ${iconClass}"></i>`;
+                }
             },
             {
-                title: "Fetch Images?",
-                data: "fetch_images"
+                title: "Fetch Images",
+                data: "fetch_images",
+                className: "text-center",
+                render: function(data) {
+                    const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
+                    return `<i class="bi ${iconClass}"></i>`;
+                }
             },
             {
                 title: "Title Mutator",
@@ -66,3 +101,92 @@ async function loadMessageStyleData() {
     setTableFilter(styleTableId, "server", selectedServer.id);
     await loadTableData(styleTableId, "/api/message-styles/", "GET");
 }
+
+
+// region New/Edit Modal
+
+$(styleTableId).closest(".js-tableBody").siblings(".js-tableFilters").on("click", ".table-new-btn", async function() {
+    await openStyleModal(-1);
+});
+
+$(styleTableId).on("click", ".edit-modal", async function() {
+    let id = $(styleTableId).DataTable().row($(this).closest("tr")).data().id;
+    await openStyleModal(id);
+});
+
+async function openStyleModal(id) {
+    $modal = $(styleModalId);
+
+    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 (type === "datetime-local") {
+                $(this).val(getCurrentDateTime());
+            }
+            else {
+                $(this).val(defaultVal).change();
+            }
+        });
+    }
+    else {
+        $modal.find(".form-create").hide();
+        $modal.find(".form-edit").show();
+
+        const data = await ajaxRequest(`/api/message-styles/${id}/`, "GET");
+
+        $modal.find("[data-field]").each(function() {
+            const key = $(this).attr("data-field");
+            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).change();
+            }
+        });
+    }
+
+    $modal.modal("show");
+}
+
+
+// region Load Mutator Options
+
+$(document).ready(async function() {
+    await loadMutatorOptions();
+});
+
+async function loadMutatorOptions() {
+    let $inputs = $(styleModalId).find('[data-field="title_mutator"], [data-field="description_mutator"]');
+
+    $inputs.val("").change();
+    $inputs.prop("disabled", true);
+
+    $inputs.find("option").each(function() {
+        if ($(this).val()) {
+            $(this).remove();
+        }
+    });
+
+    const data = await ajaxRequest("/api/message-mutators/?page_size=25", "GET");
+    data.results.forEach(mutator => {
+        $inputs.append($(
+            "<option>",
+            {text: mutator.name, value: mutator.id}
+        ));
+    });
+
+    $inputs.prop("disabled", false);
+}
diff --git a/apps/home/templates/home/modals/editStyle.html b/apps/home/templates/home/modals/editStyle.html
new file mode 100644
index 0000000..0ec1ac8
--- /dev/null
+++ b/apps/home/templates/home/modals/editStyle.html
@@ -0,0 +1,98 @@
+<div id="styleFormModal" class="modal modal-lg fade" data-bs-backdrop="static" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content rounded-1">
+            <form id="styleForm" class="mb-0" novalidate>
+                <div class="modal-header border-bottom-0">
+                    <h5 class="modal-title ms-2">
+                        <span class="form-create">Add</span>
+                        <span class="form-edit">Edit</span>
+                        Message Style
+                    </h5>
+                </div>
+                <div class="modal-body p-4">
+                    <div class="row">
+                        <div class="col-lg-6 pe-lg-4">
+                            <div class="mb-4">
+                                <label for="styleName" class="form-label">Name</label>
+                                <input type="text" name="styleName" id="styleName" class="form-control rounded-1" data-field="name" tabindex="1">
+                                <div class="form-text">Human-readable name for this entry.</div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 ps-lg-4"></div>
+                        <div class="col-lg-6 pe-lg-4">
+                            <div class="form-check form-switch mb-4">
+                                <label for="styleIsEmbed" class="form-check-label">Use an Embed</label>
+                                <input type="checkbox" name="styleIsEmbed" id="styleIsEmbed" class="form-check-input" data-field="is_embed" tabindex="2">
+                                <div class="form-text">Display in an Embed, instead of plain text.</div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 ps-lg-4">
+                            <div class="form-check form-switch mb-4">
+                                <label for="styleIsHyperlinked" class="form-check-label">Hyperlink the Title</label>
+                                <input type="checkbox" name="styleIsHyperlinked" id="styleIsHyperlinked" class="form-check-input" data-field="is_hyperlinked" tabindex="3">
+                                <div class="form-text">Click the title to go to the url.</div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 pe-lg-4">
+                            <div class="form-check form-switch mb-4">
+                                <label for="styleShowAuthor" class="form-check-label">Show the Author</label>
+                                <input type="checkbox" name="styleShowAuthor" id="styleShowAuthor" class="form-check-input" data-field="show_author" tabindex="4">
+                                <div class="form-text">Show the content author if possible.</div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 ps-lg-4">
+                            <div class="form-check form-switch mb-4">
+                                <label for="styleShowTimestamp" class="form-check-label">Show the Publish Date</label>
+                                <input type="checkbox" name="styleShowTimestamp" id="styleShowTimestamp" class="form-check-input" data-field="show_timestamp" tabindex="5">
+                                <div class="form-text">Show when the content was published.</div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 pe-lg-4">
+                            <div class="form-check form-switch mb-4">
+                                <label for="styleShowImages" class="form-check-label">Show any Images</label>
+                                <input type="checkbox" name="styleShowImages" id="styleShowImages" class="form-check-input" data-field="show_images" tabindex="6">
+                                <div class="form-text">Show any found images.</div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 ps-lg-4">
+                            <div class="form-check form-switch mb-4">
+                                <label for="styleFetchImages" class="form-check-label">Fetch missing Images</label>
+                                <input type="checkbox" name="styleFetchImages" id="styleFetchImages" class="form-check-input" data-field="fetch_images" tabindex="7">
+                                <div class="form-text">If images aren't found, try to fetch them.</div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 pe-lg-4">
+                            <div class="mb-4 mb-lg-0">
+                                <label for="styleTitleMutator" class="form-label">Title Mutator</label>
+                                <select name="styleTitleMutator" id="styleTitleMutator" class="select-2" data-dropdownparent="#styleFormModal" data-field="title_mutator" tabindex="8">
+                                    <option value="">-----</option>
+                                </select>
+                                <div class="form-text">Modify the title in fun ways.</div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 ps-lg-4">
+                            <div class="">
+                                <label for="styleDescriptionMutator" class="form-label">Description Mutator</label>
+                                <select name="styleDescriptionMutator" id="styleDescriptionMutator" class="select-2" data-dropdownparent="#styleFormModal" data-field="description_mutator" tabindex="9">
+                                    <option value="">-----</option>
+                                </select>
+                                <div class="form-text">Modify the description in fun ways.</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer px-4 border-top-0">
+                    <button type="button" id="deleteEditSub" class="btn btn-danger rounded-1 me-auto ms-0 form-edit" tabindex="10">
+                        <i class="bi bi-trash3"></i>
+                    </button>
+                    <button type="submit" class="btn btn-primary rounded-1 me-0 px-4" tabindex="11">
+                        <i class="bi bi-floppy"></i>
+                    </button>
+                    <button type="button" class="btn btn-secondary rounded-1 me-0 ms-3" data-bs-dismiss="modal" tabindex="12">
+                        <i class="bi bi-arrow-return-right"></i>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
\ No newline at end of file