diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css index 30bcad2..e3aeeae 100644 --- a/src/client/public/css/tailwind.css +++ b/src/client/public/css/tailwind.css @@ -1119,10 +1119,6 @@ select { height: 100%; } -.h-px { - height: 1px; -} - .h-screen { height: 100vh; } @@ -1131,6 +1127,10 @@ select { max-height: 100%; } +.min-h-\[400px\] { + min-height: 400px; +} + .\!w-2\.5 { width: 0.625rem !important; } @@ -1151,10 +1151,6 @@ select { width: 15rem; } -.w-72 { - width: 18rem; -} - .w-\[260px\] { width: 260px; } @@ -1179,10 +1175,6 @@ select { min-width: 15rem; } -.min-w-72 { - min-width: 18rem; -} - .min-w-full { min-width: 100%; } @@ -1294,6 +1286,10 @@ select { gap: 0.25rem; } +.gap-2 { + gap: 0.5rem; +} + .gap-3 { gap: 0.75rem; } @@ -1543,11 +1539,6 @@ select { background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } -.bg-yellow-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)); -} - .bg-opacity-50 { --tw-bg-opacity: 0.5; } @@ -1877,11 +1868,6 @@ select { color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } -.text-yellow-800 { - --tw-text-opacity: 1; - color: rgb(133 77 14 / var(--tw-text-opacity, 1)); -} - .opacity-0 { opacity: 0; } @@ -2860,10 +2846,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te background-color: rgb(20 184 166 / 0.1); } -.dark\:bg-yellow-500\/10:where(.dark, .dark *) { - background-color: rgb(234 179 8 / 0.1); -} - .dark\:bg-opacity-80:where(.dark, .dark *) { --tw-bg-opacity: 0.8; } @@ -2934,11 +2916,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te color: rgb(255 255 255 / 0.6); } -.dark\:text-yellow-500:where(.dark, .dark *) { - --tw-text-opacity: 1; - color: rgb(234 179 8 / var(--tw-text-opacity, 1)); -} - .dark\:placeholder-neutral-500:where(.dark, .dark *)::-moz-placeholder { --tw-placeholder-opacity: 1; color: rgb(115 115 115 / var(--tw-placeholder-opacity, 1)); diff --git a/src/client/public/js/guild/subscriptions.js b/src/client/public/js/guild/subscriptions.js index fcea348..e97cc80 100644 --- a/src/client/public/js/guild/subscriptions.js +++ b/src/client/public/js/guild/subscriptions.js @@ -1,18 +1,212 @@ -// Filter by status -(function () { - const radioButtons = document.querySelectorAll('input[type="radio"][name="filter"]'); - const { dataTable } = new HSDataTable('#table'); - - dataTable.search.fixed('status', function (searchStr, data, index) { - const status = data[2].trim().toLowerCase(); // Adjust index based on your dataset +// // Filter by status +// (function () { +// const radioButtons = document.querySelectorAll('input[type="radio"][name="filter"]'); +// const { dataTable } = new HSDataTable('#table'); + +// dataTable.search.fixed('status', function (searchStr, data, index) { +// const status = data[2].trim().toLowerCase(); // Adjust index based on your dataset - if (radioButtons[0].checked && status === 'active') return true; - if (radioButtons[1].checked && status === 'inactive') return true; - return false; - }); +// if (radioButtons[0].checked && status === 'active') return true; +// if (radioButtons[1].checked && status === 'inactive') return true; +// return false; +// }); - radioButtons.forEach(radio => { - radio.addEventListener('change', () => dataTable.draw()); - }); -})(); +// radioButtons.forEach(radio => { +// radio.addEventListener('change', () => dataTable.draw()); +// }); +// })(); + +// const { dataTable } = HSDataTable.getInstance("#table"); + +// dataTable.on("draw.dt", () => { +// console.log("Table redrawn") +// }); + + +const defineTable = () => { + new HSDataTable("#table", { + ajax: { + url: `/guild/${guild}/subscriptions/api`, + dataSrc: "data" + }, + serverSide: true, + processing: true, + selecting: true, + rowSelectingOptions: { + selectAllSelector: "#selectAllBox" + }, + language: { + zeroRecords: ` +
+
+ +
+

+ No results found +

+

+ Create a subscription and it will appear here. +

+ +
+ + +
+
+ ` + }, + rowCallback: (row, data, index) => { + $(row).addClass("bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800"); + }, + columnDefs: [ + { + // Row select checkbox + targets: 0, + orderable: false, + searchable: false, + render: (data, type, row) => { + return ` + +
+ +
+ + `; + } + }, + { + // Name + targets: 1, + data: "name", + orderable: true, + searchable: true, + render: (data, type, row) => { + return ` + + + ${row.name} + + + `; + } + }, + { + // Url + targets: 2, + data: "url", + orderable: true, + searchable: true, + render: (data, type, row) => { + return ` + + + ${row.url} + + + `; + } + }, + { + // Channels + target: 3, + data: "channels", + orderable: false, + searchable: false, + render: (data, type, row) => { + return ` + + `; + } + }, + { + // Filters + target: 4, + data: "filters", + orderable: false, + searchable: false, + render: (data, type, row) => { + return ` + + `; + } + }, + { + // Style + target: 5, + style: "style", + orderable: false, + searchable: false, + render: (data, type, row) => { + return ` + + `; + } + }, + { + // Created At + target: 6, + data: "created_at", + orderable: true, + searchable: true, + render: (data, type, row) => { + // 30th, Jan 2025 + return ` + +
+ + ${row.created_at} + +
+ + `; + } + } + , + { + // Status + target: 7, + data: "active", + orderable: true, + searchable: true, + render: (data, type, row) => { + if (!row.active) { + return ` +
+ + + + + Inactive + +
+ `; + } + return ` +
+ + + + + Active + +
+ `; + } + } + ] + }) +} + + +$(window).ready(() => { + setTimeout(defineTable, 100); +}); \ No newline at end of file diff --git a/src/client/views/guild/subscriptions.ejs b/src/client/views/guild/subscriptions.ejs index 640c362..0c342f8 100644 --- a/src/client/views/guild/subscriptions.ejs +++ b/src/client/views/guild/subscriptions.ejs @@ -5,12 +5,7 @@
-
+
@@ -18,9 +13,9 @@