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

basic table - learning how

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-01-30 11:01:20 +00:00
parent 1a0b4af712
commit cc2e19e166
3 changed files with 310 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -17,8 +17,10 @@
"license": "ISC",
"description": "",
"dependencies": {
"@preline/datatable": "^2.5.2",
"canvas": "^3.1.0",
"connect-flash": "^0.1.1",
"datatables.net-dt": "^2.2.1",
"discord.js": "^14.17.3",
"dotenv": "^16.4.7",
"ejs": "^3.1.10",
@ -32,6 +34,7 @@
"tsconfig-paths": "^4.2.0"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.10",
"@types/connect-flash": "^0.0.40",
"@types/ejs": "^3.1.5",
"@types/express": "^5.0.0",

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

@ -2,6 +2,305 @@
<%- include("guildHeader") -%>
<div class="p-4">
Subscriptions
</div>
<!-- Table Section -->
<div class="max-w-full w-[100rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto overflow-hidden">
<!-- Card -->
<div class="flex flex-col">
<div class="-m-1.5 "> <!-- overflow-x-auto -->
<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">
<!-- Header -->
<div class="px-6 py-4 gap-3 flex flex-nowrap justify-between items-center border-b 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>
<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-lg 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">
<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>
</div>
</div>
<!-- End Input -->
<div class="sm:col-span-2 md:grow">
<div class="flex justify-end gap-x-2">
<div class="hs-dropdown [--placement:bottom-right] relative inline-block" data-hs-dropdown-auto-close="inside">
<button id="hs-as-table-table-filter-dropdown" type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md 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" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M7 12h10"/><path d="M10 18h4"/></svg>
Filter
<span class="ps-2 text-xs font-semibold text-blue-600 border-s border-gray-200 dark:border-neutral-700 dark:text-blue-500">
1
</span>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-gray-200 min-w-48 z-10 bg-white shadow-md rounded-md mt-2 dark:divide-neutral-700 dark:bg-neutral-800 dark:border dark:border-neutral-700" role="menu" aria-orientation="vertical" aria-labelledby="hs-as-table-table-filter-dropdown">
<div class="divide-y divide-gray-200 dark:divide-neutral-700">
<label for="hs-as-filters-dropdown-all" class="flex py-2.5 px-3">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-all" checked>
<span class="ms-3 text-sm text-gray-800 dark:text-neutral-200">All</span>
</label>
<label for="hs-as-filters-dropdown-published" class="flex py-2.5 px-3">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-published">
<span class="ms-3 text-sm text-gray-800 dark:text-neutral-200">Enabled</span>
</label>
<label for="hs-as-filters-dropdown-pending" class="flex py-2.5 px-3">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-pending">
<span class="ms-3 text-sm text-gray-800 dark:text-neutral-200">Disabled</span>
</label>
</div>
</div>
</div>
<a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md 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" href="#">
<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>
<span>
Add
<span class="hidden sm:inline">subscription</span>
</span>
</a>
</div>
</div>
</div>
<!-- End Header -->
<div class="min-w-full overflow-x-auto">
<!-- Table -->
<table class="min-w-full divide-y divide-gray-200 dark:divide-neutral-700">
<thead class="bg-gray-50 dark:bg-neutral-800">
<tr>
<th scope="col" class="ps-6 py-3 text-start">
<label for="hs-at-with-checkboxes-main" class="flex ml-[1px]">
<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-main">
<span class="sr-only">Checkbox</span>
</label>
</th>
<th scope="col" class="px-6 py-3 text-start">
<div class="flex items-center gap-x-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
Name
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-start">
<div class="flex items-center gap-x-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
URL
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-start">
<div class="flex items-center gap-x-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
Channels
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-start">
<div class="flex items-center gap-x-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
Filters
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-start">
<div class="flex items-center gap-x-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
Style
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-start">
<div class="flex items-center gap-x-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200 text-nowrap">
Created at
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-start">
<div class="flex items-center gap-x-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
Status
</span>
</div>
</th>
</tr>
</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">
<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 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 -->
</div>
<!-- Footer -->
<div class="px-6 py-4 gap-3 flex justify-between items-center border-t border-gray-200 dark:border-neutral-700">
<div class="inline-flex items-center gap-x-2">
<p class="text-sm text-gray-600 dark:text-neutral-400">
Showing:
</p>
<div class="max-w-sm space-y-3">
<select class="py-2 px-3 pe-9 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected>9</option>
<option>20</option>
</select>
</div>
<p class="text-sm text-gray-600 dark:text-neutral-400">
of 20
</p>
</div>
<div>
<div class="inline-flex gap-x-2">
<button type="button" 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">
<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="m15 18-6-6 6-6"/></svg>
Prev
</button>
<button type="button" 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">
Next
<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="m9 18 6-6-6-6"/></svg>
</button>
</div>
</div>
</div>
<!-- End Footer -->
</div>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Table Section -->

6
tailwind.config.js
View File

@ -8,6 +8,10 @@ module.exports = {
theme: {
extend: {},
},
plugins: [require('preline/plugin')],
plugins: [
require('@tailwindcss/forms'),
require('preline/plugin')
],
}