tables with rewrite

apps/api/serializers.py

@@ -160,11 +160,18 @@ class MessageStyleSerializer(DynamicModelSerializer):
         )
 
 
+class UniqueContentRuleSerializer(DynamicModelSerializer):
+    class Meta:
+        model = UniqueContentRule
+        fields = ("id", "name", "value")
+
+
 class SubscriptionSerializer(DynamicModelSerializer):
     filters = serializers.PrimaryKeyRelatedField(
         queryset=ContentFilter.objects.all(),
         many=True
     )
+    #  unique_rules = UniqueContentRuleSerializer(many=True)  # TODO: solve? causes issues with submission.
 
     class Meta:
         model = Subscription
@@ -178,7 +185,8 @@ class SubscriptionSerializer(DynamicModelSerializer):
             "extra_notes",
             "active",
             "filters",
-            "message_style"
+            "message_style",
+            "unique_rules"
         )
 
     def validate(self, data):
@@ -216,9 +224,3 @@ class ContentSerializer(DynamicModelSerializer):
             "item_title",
             "item_content_hash"
         )
-
-
-class UniqueContentRuleSerializer(DynamicModelSerializer):
-    class Meta:
-        model = UniqueContentRule
-        fields = ("id", "name", "value")

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

@@ -2,7 +2,9 @@ $(document).ready(async function() {
     // await initSubscriptionTable();
     // await initFiltersTable();
     // await initContentTable();
-    
+
+    initSubscriptionsModule();
+
     await loadServers();
     $("#subscriptionsTab").click();
 });

apps/home/static/home/js/tables.js

@@ -0,0 +1,49 @@
+
+function initializeDataTable(tableId, apiUrl, columns) {
+    $(tableId).DataTable({
+        info: false,
+        paging: false,
+        ordering: false,
+        searching: false,
+        autoWidth: false,
+        order: [],
+        select: {
+            style: "multi+shift",
+            selector: 'th:first-child input[type="checkbox"]'
+        },
+        columnDefs: [
+            { orderable: false, targets: "no-sort" },
+            { 
+                targets: 0,
+                checkboxes: { selectRow: true }
+            },
+        ],
+        columns: [
+            {
+                // Select row checkbox column
+                title: '<input type="checkbox" class="form-check-input table-select-all" />',
+                data: null,
+                orderable: false,
+                className: "text-center col-switch-width",
+                render: function() {
+                    return '<input type="checkbox" class="form-check-input table-select-row" />'
+                }
+            },
+            { data: "id", visible: false },
+            ...columns
+        ]
+    });
+}
+
+function wipeTable(tableId) {
+    $(`${tableId} thead .table-select-all`).prop("checked", false).prop("indeterminate", false);
+    $(tableId).DataTable().clear().draw(false)
+}
+
+function populateTable(tableId, data) {
+    $(tableId).DataTable().rows.add(data.results).draw(false);
+}
+
+async function loadData(tableId, loadFunc) {
+    
+}

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

@@ -0,0 +1,110 @@
+
+const subTableId = "#subTable";
+
+// #region Init Module
+
+function initSubscriptionsModule() {
+    initializeDataTable(
+        "#subTable",
+        null,
+        [
+            {
+                title: "Name",
+                data: "name",
+                className: "text-truncate",
+                render: function(data, type, row) {
+                    const name = sanitise(data);
+                    return `<button type="button" class="btn btn-link text-start text-decoration-none">${name}</button>`;
+                }
+            },
+            {
+                title: "URL",
+                data: "url",
+                className: "text-truncate",
+                render: function(data, type) {
+                    const url = sanitise(data);
+                    return `<a href="${url}" class="btn btn-link text-start text-decoration-none" target="_blank">${url}</a>`;
+                }
+            },
+            {
+                title: "Rules",
+                data: "unique_rules",
+                className: "text-center text-nowrap",
+                render: function(data, type) {
+                    let badges = $("<div>");
+                    data.forEach(function(rule, idx) {
+                        let badge = $(`<span class="badge text-bg-secondary">${rule.name}</span>`)
+                        if (idx > 0) { badge.addClass("ms-2") }
+                        badges.append(badge);
+                    });
+
+                    return badges.html();
+                }
+            },
+            {
+                title: "Created At",
+                data: "created_at",
+                render: function(data, type) {
+                    let dateTime = new Date(data);
+                    return $(`
+                        <span data-bs-trigger="hover focus"
+                            data-bs-html="true"
+                            data-bs-custom-class="text-center"
+                            data-bs-toggle="popover"
+                            data-bs-content="${formatStringDate(dateTime, "%a, %D %B, %Y<br>%H:%M:%S")}">
+                            ${formatStringDate(dateTime, "%D, %b %Y")}
+                        </span>
+                    `).popover()[0];
+                }
+            },
+            {
+                title: "Notes",
+                data: "extra_notes",
+                orderable: false,
+                className: "text-center",
+                render: function(data, type) {
+                    if (!data) { return "" }
+                    const extraNotes = sanitise(data);
+                    return $(`
+                        <i class="bi bi-chat-left-text"
+                            data-bs-trigger="hover focus"
+                            data-bs-toggle="popover"
+                            data-bs-title="Extra Notes"
+                            data-bs-content="${extraNotes}">
+                        </i>
+                    `).popover()[0];
+                }
+            },
+            { 
+                title: "Active",
+                data: "active",
+                orderable: false,
+                className: "text-center form-switch",
+                render: function(data, type) {
+                    return `<input type="checkbox" class="sub-toggle-active form-check-input ms-0" ${data ? "checked" : ""} />`
+                }
+            }
+        ]
+    );
+}
+
+// #endregion
+
+// #region Load Data
+
+$(document).on("selectedServerChange", async function() {
+    await loadSubscriptionData();
+});
+
+async function loadSubscriptionData() {
+    if (!selectedServer) {
+        return;
+    }
+
+    let data = await getSubscriptions(selectedServer.id);
+    wipeTable(subTableId);
+    populateTable(subTableId, data);
+}
+
+// #endregion
+

apps/home/templates/home/index.html

@@ -37,12 +37,12 @@
             <ul class="d-flex flex-lg-row flex-column list-unstyled text-center flex-nowrap mb-0 px-lg-4 px-2 align-items-center text-body-secondary">
                 <li>
                     <a href="https://gitea.cor.bz/corbz/PYRSS-Website" class="text-reset" target="_blank">
-                        <i class="bi bi-git fs-5"></i>
+                        <i class="bi bi-git fs-6"></i>
                     </a>
                 </li>
                 <li class="ms-lg-4 ms-0">
                     <a href="https://gitea.cor.bz/corbz/PYRSS-Website/wiki" class="text-reset" target="_blank">
-                        <i class="bi bi-question-lg fs-5"></i>
+                        <i class="bi bi-question-lg fs-6"></i>
                     </a>
                 </li>
                 <li class="ms-3 d-none d-lg-inline">
@@ -181,6 +181,7 @@
 </script>
 <script src="{% static 'js/api.js' %}"></script>
 <script src="{% static 'home/js/index.js' %}"></script>
+<script src="{% static 'home/js/tables.js' %}"></script>
 <script src="{% static 'home/js/servers.js' %}"></script>
 <script src="{% static 'home/js/tabs/subs.js' %}"></script>
 <script src="{% static 'home/js/tabs/filters.js' %}"></script>

static/js/api.js

@@ -180,13 +180,13 @@ async function getServers() {
 
 // #region Subscriptions
 
-async function getSubscriptions(filters, sort) {
+async function getSubscriptions(serverId, filters, sort) {
     let querystring = makeQuerystring(filters, sort);
-    return await ajaxRequest(`/api/subscriptions/${querystring}`, "GET");
+    return await ajaxRequest(`/api/servers/${serverId}/subscriptions/${querystring}`, "GET");
 }
 
 async function getSubscription(serverId, subId) {
-    return await ajaxRequest(`/api/${serverId}/subscriptions/${subId}/`, "GET");
+    return await ajaxRequest(`/api/servers/${serverId}/subscriptions/${subId}/`, "GET");
 }
 
 async function newSubscription(serverId, formData) {