corbz/pyrss-ng
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

datatable code for subscriptions

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-02-02 21:48:01 +00:00
parent 7ce25d324d
commit 1319d147a5
4 changed files with 246 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/client/public/css/tailwind.css
View File

@ -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));

224
src/client/public/js/guild/subscriptions.js
View File

@ -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: `
<div class="max-w-md w-full min-h-[400px] flex flex-col justify-center mx-auto px-6 py-4">
<div class="flex justify-center items-center size-[46px] bg-gray-100 rounded-lg dark:bg-neutral-800">
<svg class="shrink-0 size-6 text-gray-600 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
</div>
<h2 class="mt-5 font-semibold text-gray-800 dark:text-white">
No results found
</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
Create a subscription and it will appear here.
</p>
<div class="mt-5 flex flex-col sm:flex-row gap-2">
<button type="button" class="openSubModal-js py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
Create a subscription
</button>
<button type="button" onclick="alert('not implemented');" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
Use a Template
</button>
</div>
</div>
`
},
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 `
<td class="size-px whitespace-nowrap">
<div class="ps-6 py-3">
<label for="rowSelect${row.id}-js" class="flex">
<input type="checkbox" id="rowSelect${row.id}-js" class="shrink-0 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" data-hs-datatable-row-selecting-individual="">
<span class="sr-only">Checkbox</span>
</label>
</div>
</td>
`;
}
},
{
// Name
targets: 1,
data: "name",
orderable: true,
searchable: true,
render: (data, type, row) => {
return `
<td class="size-px whitespace-nowrap align-top">
<a href="#" class="block p-6 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap">
${row.name}
</a>
</td>
`;
}
},
{
// Url
targets: 2,
data: "url",
orderable: true,
searchable: true,
render: (data, type, row) => {
return `
<td class="size-px whitespace-nowrap align-top">
<a href="${row.url}" class="block p-6 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap">
${row.url}
</a>
</td>
`;
}
},
{
// 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 `
<td class="size-px whitespace-nowrap align-top">
<div class="p-6">
<span class="text-sm text-gray-500 dark:text-neutral-500 text-nowrap">
${row.created_at}
</span>
</div>
</td>
`;
}
}
,
{
// Status
target: 7,
data: "active",
orderable: true,
searchable: true,
render: (data, type, row) => {
if (!row.active) {
return `
<div class="p-6">
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
Inactive
</span>
</div>
`;
}
return `
<div class="p-6">
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
Active
</span>
</div>
`;
}
}
]
})
}
$(window).ready(() => {
setTimeout(defineTable, 100);
});

324
src/client/views/guild/subscriptions.ejs
View File

@ -5,12 +5,7 @@
<!-- Table Section -->
<div id="table" class="max-w-full overflow-hidden p-4 sm:p-6"> <!-- px-4 py-10 sm:px-6 lg:px-8 lg:py-14 -->
<!-- Card -->
<div class="flex flex-col" data-hs-datatable='{
"selecting": true,
"rowSelectingOptions": {
"selectAllSelector": "#selectAllBox"
}
}'>
<div class="flex flex-col">
<div class="-m-1.5">
<div class="max-w-full p-1.5 min-w-full inline-block align-middle">
<div class="bg-white border border-gray-200 rounded-md shadow-sm overflow-hidden dark:bg-neutral-900 dark:border-neutral-700">
@ -18,9 +13,9 @@
<div class="px-6 py-4 gap-3 flex flex-nowrap justify-between items-center border-gray-200 dark:border-neutral-700">
<!-- Input -->
<div class="hidden sm:block sm:col-span-1">
<label for="hs-as-table-product-review-search" class="sr-only">Search</label>
<label for="search" class="sr-only">Search</label>
<div class="relative">
<input type="text" id="hs-as-table-product-review-search" name="hs-as-table-product-review-search" class="py-2 px-3 ps-11 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600" placeholder="Search">
<input type="text" id="search" name="search" class="py-2 px-3 ps-11 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600" placeholder="Search" data-hs-datatable-search="">
<div class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-4">
<svg class="shrink-0 size-4 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</div>
@ -88,9 +83,9 @@
<input type="checkbox" id="selectAllBox" class="shrink-0 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
<span class="sr-only">Checkbox</span>
</label>
</th>
</th>
<th scope="col" class="px-6 py-3 text-start">
<th scope="col" data-dt-column="name" class="px-6 py-3 text-start">
<div class="flex justify-between items-center gap-x-2 cursor-pointer">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
Name
@ -115,38 +110,38 @@
</th>
<th scope="col" class="px-6 py-3 text-start">
<div class="flex justify-between items-center gap-x-2 cursor-pointer">
<div class="flex justify-between items-center gap-x-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
Channels
</span>
<svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
<path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
</svg>
</svg> -->
</div>
</th>
<th scope="col" class="px-6 py-3 text-start">
<div class="flex justify-between items-center gap-x-2 cursor-pointer">
<div class="flex justify-between items-center gap-x-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
Filters
</span>
<svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
<path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
</svg>
</svg> -->
</div>
</th>
<th scope="col" class="px-6 py-3 text-start">
<div class="flex justify-between items-center gap-x-2 cursor-pointer">
<div class="flex justify-between items-center gap-x-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
Style
</span>
<svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
<path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
</svg>
</svg> -->
</div>
</th>
@ -178,293 +173,6 @@
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-neutral-700">
<tr class="bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<td class="size-px whitespace-nowrap">
<div class="ps-6 py-3">
<label for="hs-at-with-checkboxes-1" class="flex">
<input type="checkbox" class="shrink-0 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-at-with-checkboxes-1" data-hs-datatable-row-selecting-individual="">
<span class="sr-only">Checkbox</span>
</label>
</div>
</td>
<td class="size-px whitespace-nowrap align-top">
<a href="#" class="block p-6 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500">
BBC News · Top Stories
</a>
</td>
<td class="size-px whitespace-nowrap align-top">
<a href="#" class="block p-6 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500">
https://bbci.co.uk/feeds/news/rss.xml
</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td class="size-px whitespace-nowrap align-top">
<div class="p-6">
<span class="text-sm text-gray-500 dark:text-neutral-500">
30th, Jan 2025
</span>
</div>
</td>
<td class="size-px whitespace-nowrap align-top">
<div class="p-6">
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
Active
</span>
</div>
</td>
</tr>
<tr class="bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<td class="size-px whitespace-nowrap">
<div class="ps-6 py-3">
<label for="hs-at-with-checkboxes-2" class="flex">
<input type="checkbox" class="shrink-0 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-at-with-checkboxes-2" data-hs-datatable-row-selecting-individual="">
<span class="sr-only">Checkbox</span>
</label>
</div>
</td>
<td class="size-px whitespace-nowrap align-top">
<a href="#" class="block p-6 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500">
Sky News
</a>
</td>
<td class="size-px whitespace-nowrap align-top">
<a href="#" class="block p-6 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500">
https://sky.co.uk/feeds/news/rss.xml
</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td class="size-px whitespace-nowrap align-top">
<div class="p-6">
<span class="text-sm text-gray-500 dark:text-neutral-500">
30th, Jan 2025
</span>
</div>
</td>
<td class="size-px whitespace-nowrap align-top">
<div class="p-6">
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
Inactive
</span>
</div>
</td>
</tr>
<tr class="bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<td class="size-px whitespace-nowrap">
<div class="ps-6 py-3">
<label for="hs-at-with-checkboxes-3" class="flex">
<input type="checkbox" class="shrink-0 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-at-with-checkboxes-3" data-hs-datatable-row-selecting-individual="">
<span class="sr-only">Checkbox</span>
</label>
</div>
</td>
<td class="size-px whitespace-nowrap align-top">
<a href="#" class="block p-6 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500">
Fox News
</a>
</td>
<td class="size-px whitespace-nowrap align-top">
<a href="#" class="block p-6 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500">
https://fox.com/feeds/news/rss.xml
</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td class="size-px whitespace-nowrap align-top">
<div class="p-6">
<span class="text-sm text-gray-500 dark:text-neutral-500">
30th, Jan 2025
</span>
</div>
</td>
<td class="size-px whitespace-nowrap align-top">
<div class="p-6">
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
Active
</span>
</div>
</td>
</tr>
<tr class="bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<td class="size-px whitespace-nowrap">
<div class="ps-6 py-3">
<label for="hs-at-with-checkboxes-1" class="flex">
<input type="checkbox" class="shrink-0 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-at-with-checkboxes-1" data-hs-datatable-row-selecting-individual="">
<span class="sr-only">Checkbox</span>
</label>
</div>
</td>
<td class="size-px whitespace-nowrap align-top">
<a href="#" class="block p-6 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500">
News Agency 40
</a>
</td>
<td class="size-px whitespace-nowrap align-top">
<a href="#" class="block p-6 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500">
https://news.co.uk/feeds/news/rss.xml
</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td class="size-px whitespace-nowrap align-top">
<div class="p-6">
<span class="text-sm text-gray-500 dark:text-neutral-500">
30th, Jan 2025
</span>
</div>
</td>
<td class="size-px whitespace-nowrap align-top">
<div class="p-6">
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full dark:bg-yellow-500/10 dark:text-yellow-500">
<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
</svg>
Warning
</span>
</div>
</td>
</tr>
<!-- <tr class="bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<td class="size-px whitespace-nowrap align-top">
<a class="block p-6" href="#">
<div class="flex items-center gap-x-4">
<img class="shrink-0 size-[38px] rounded-lg" src="https://images.unsplash.com/photo-1572307480813-ceb0e59d8325?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
<div>
<span class="block text-sm font-semibold text-gray-800 dark:text-neutral-200">Brown Hat</span>
</div>
</div>
</a>
</td>
<td class="size-px whitespace-nowrap align-top">
<a class="block p-6" href="#">
<div class="flex items-center gap-x-3">
<img class="inline-block size-[38px] rounded-full" src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Product Image">
<div class="grow">
<span class="block text-sm font-semibold text-gray-800 dark:text-neutral-200">Christina Bersh</span>
<span class="block text-sm text-gray-500 dark:text-neutral-500">christina@site.com</span>
</div>
</div>
</a>
</td>
<td class="h-px w-72 min-w-72 align-top">
<a class="block p-6" href="#">
<div class="flex gap-x-1 mb-2">
<svg class="shrink-0 size-3 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg class="shrink-0 size-3 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg class="shrink-0 size-3 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg class="shrink-0 size-3 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg class="shrink-0 size-3 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
</div>
<span class="block text-sm font-semibold text-gray-800 dark:text-neutral-200">I just love it!</span>
<span class="block text-sm text-gray-500 dark:text-neutral-500">I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a mens" hat.</span>
</a>
</td>
<td class="size-px whitespace-nowrap align-top">
<a class="block p-6" href="#">
<span class="text-sm text-gray-600 dark:text-neutral-400">10 Jan 2022</span>
</a>
</td>
<td class="size-px whitespace-nowrap align-top">
<a class="block p-6" href="#">
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
Published
</span>
</a>
</td>
</tr> -->
</tbody>
</table>
<!-- End Table -->
@ -515,4 +223,6 @@
</div>
<!-- End Table Section -->
<% block("scripts").append('<script src="/static/js/guild/subscriptions.js"></script>'); %>
<script>var guild = "<%- guild %>"</script>
<% block("scripts").append('<script defer src="/static/js/guild/subscriptions.js"></script>'); %>

18
src/server/controllers/guild/sub.api.controller.ts
View File

@ -1,14 +1,20 @@
import { Request, Response } from "express";
import { Subscription } from "@db/models/subs.model";
import { db } from "@db/db";
import { buildDatatableQuery } from "@utils/datatable";
export const get = async (request: Request, response: Response) => {
try {
const subscriptions = await db<Subscription>("subscriptions")
.select("*")
.where({ guild_id: request.params.guildId });
const { query, recordsTotal, recordsFiltered } = await buildDatatableQuery(
request as any,
"subscriptions"
);
response.json(subscriptions);
const data = await query.where({ guild_id: request.params.guildId });
response.json({
data,
recordsTotal,
recordsFiltered
});
}
catch (error) {
console.error(error);