message styles table

apps/home/static/home/js/index.js

@@ -4,6 +4,7 @@ $(document).ready(async function() {
     // await initContentTable();
 
     initSubscriptionsModule();
+    initMessageStylesModule();
 
     await loadServers();
     $("#subscriptionsTab").click();
@@ -13,6 +14,9 @@ $(document).on("selectedServerChange", function() {
     $("#subscriptionsTab").click();
 });
 
+
+// region Hex Strings
+
 function genHexString(len=6) {
     let output = '';
     for (let i = 0; i < len; ++i) {
@@ -21,6 +25,14 @@ function genHexString(len=6) {
     return output;
 }
 
+
+// region DateTime
+
+function isISODateTimeString(value) {
+    const isoDatePattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d+([+-]\d{2}:\d{2}|Z)$/;
+    return typeof value === 'string' && isoDatePattern.test(value);
+}
+
 // my clone of python's datetime.strftime
 function formatStringDate(date, format) {
     const padZero = (num, len) => String(num).padStart(len, "0");
@@ -76,7 +88,8 @@ function formatStringDate(date, format) {
     return format.replace(/%[a-zA-Z%-]/g, match => formatters[match] ? formatters[match](date) : match);
 }
 
-// #region Colour Controls
+
+// region Colour Controls
 $(".colour-control-picker").on("change", function() {
     $(this).closest(".colour-control-group").find(".colour-control-text").val($(this).val());
 });
@@ -155,8 +168,11 @@ $(document).ready(function() {
     });
 });
 
+
+// region Confirm Modal
+
 async function confirmationModal(title, bodyText, style, acceptFunc, declineFunc) {
-    let $modal = $("#confirmationModal");
+    let $modal = $("#confirmModal");
 
     // Ensure valid style and apply it to the confirm button
     if (!["danger", "success", "warning", "info", "primary", "secondary"].includes(style)) {
@@ -191,6 +207,9 @@ function arrayToHtmlList(array, bold=false) {
     return $ul;
 }
 
+
+// region Log Error
+
 function logError(error) {
     if (error instanceof Error) {
         // Logs typical error properties like message and stack

apps/home/static/home/js/tabs/styles.js

@@ -0,0 +1,68 @@
+const styleTableId = "#styleTable";
+
+
+// region Init Module
+
+function initMessageStylesModule() {
+    initializeDataTable(
+        styleTableId,
+        [
+            {
+                title: "Name",
+                data: "name"
+            },
+            {
+                title: "Is Embed?",
+                data: "is_embed"
+            },
+            {
+                title: "Is Hyperlinked?",
+                data: "is_hyperlinked"
+            },
+            {
+                title: "Show Author?",
+                data: "show_author"
+            },
+            {
+                title: "Show Timestamp?",
+                data: "show_timestamp"
+            },
+            {
+                title: "Show Images?",
+                data: "show_images"
+            },
+            {
+                title: "Fetch Images?",
+                data: "fetch_images"
+            },
+            {
+                title: "Title Mutator",
+                data: "title_mutator"
+            },
+            {
+                title: "Description Mutator",
+                data: "description_mutator"
+            }
+        ]
+    );
+};
+
+
+// region Load Data
+
+$(document).on("selectedServerChange", async function() {
+    await loadMessageStyleData();
+});
+
+$(document).on("doDataLoad", async function() {
+    await loadMessageStyleData();
+});
+
+async function loadMessageStyleData() {
+    if (!selectedServer) {
+        return;
+    }
+
+    setTableFilter(styleTableId, "server", selectedServer.id);
+    await loadTableData(styleTableId, "/api/message-styles/", "GET");
+}

apps/home/templates/home/tabs/styles.html

@@ -1 +1,79 @@
-styles
+<div class="js-tableFilters row my-3 px-sm-3">
+    <div class="col-md-6 col-lg-5 col-xl-4 col-xxl-3">
+        <div class="input-group mb-lg-0 mb-3 rounded-1">
+            <span class="input-group-text">
+                <i class="bi bi-search"></i>
+            </span>
+            <input type="search" class="form-control search-filter" placeholder="Search">
+        </div>
+    </div>
+    <div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-search-buttons">
+        <div class="d-inline-block">
+            <button type="button" class="table-new-btn btn btn-primary rounded-1">
+                <i class="bi bi-plus-lg"></i>
+            </button>
+        </div>
+        <div class="d-inline-block">
+            <div class="dropdown table-sort-dropdown">
+                <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+                    <i class="bi bi-sort-alpha-up"></i>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                    <li><h6 class="dropdown-header">Sort By</h6></li>
+                </ul>
+            </div>
+        </div>
+        <div class="d-inline-block">
+            <div class="dropdown table-filter-dropdown">
+                <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+                    <i class="bi bi-funnel"></i>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                    <li><h6 class="dropdown-header">Filter By</h6></li>
+                </ul>
+            </div>
+        </div>
+        <div class="d-inline-block">
+            <button type="button" class="table-refresh-btn btn btn-outline-secondary rounded-1">
+                <i class="bi bi-arrow-clockwise"></i>
+            </button>
+        </div>
+        <div class="d-inline-block">
+            <button type="button" class="table-del-btn btn btn-danger rounded-1">
+                <i class="bi bi-trash3"></i>
+            </button>
+        </div>
+    </div>
+</div>
+<div class="js-tableBody table-responsive my-3 px-sm-3">
+    <table id="styleTable" class="table table-hover align-middle"></table>
+</div>
+<div class="js-tableControls row px-sm-3 mb-4">
+    <div class="col-lg-6">
+        <nav class="table-pagination mb-4 mb-lg-0">
+            <ul class="pagination mb-0">
+                <li class="page-item">
+                    <button type="button" class="page-link page-prev rounded-start-1">
+                        <i class="bi bi-chevron-left"></i>
+                    </button>
+                </li>
+                <li class="page-item">
+                    <button type="button" class="page-link page-next rounded-end-1">
+                        <i class="bi bi-chevron-right"></i>
+                    </button>
+                </li>  
+            </ul>
+        </nav>
+    </div>
+    <div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
+        <label for="styleTablePageSizer" class="form-label align-self-center mb-0 me-2">Show</label>
+        <select name="styleTablePageSizer" id="styleTablePageSizer" class="select-2 table-page-sizer">
+            <option value="10" selected>10&emsp;</option>
+            <option value="15">15&emsp;</option>
+            <option value="20">20&emsp;</option>
+            <option value="25">25&emsp;</option>
+        </select>
+        <span class="ms-2">of&nbsp;</span>
+        <span class="pageinfo-total text-nowrap">10</span>
+    </div>
+</div>