add datatables (not finished)

2025-01-30 13:03:10 +00:00 · 2025-01-30 13:03:10 +00:00 · 4577bb72b9
commit 4577bb72b9
parent 501c15207b
7 changed files with 197 additions and 12 deletions
--- a/package.json
+++ b/package.json
@ -27,6 +27,7 @@
    "ejs-mate": "^4.0.0",
    "express": "^4.21.2",
    "express-session": "^1.18.1",
+    "jquery": "^3.7.1",
    "ncp": "^2.0.0",
    "passport": "^0.7.0",
    "passport-discord": "^0.1.4",
--- a/src/app.ts
+++ b/src/app.ts
@ -24,9 +24,13 @@ app.engine("ejs", engine);
 app.set("views", "./src/client/views");
 app.set("view engine", "ejs");

+// Public files, including 3rd party resources (foreign)
 app.use("/static", express.static("./src/client/public"));
-app.use("/static/preline.js", express.static("./node_modules/preline/dist/preline.js"));
+app.use("/static/foreign/preline.js", express.static("./node_modules/preline/dist/preline.js"));
+app.use("/static/foreign/jquery.js", express.static("./node_modules/jquery/dist/jquery.min.js"));
+app.use("/static/foreign/dataTables.js", express.static("./node_modules/datatables.net-dt/js/dataTables.dataTables.min.js"));

+// User authentication & sessions
 app.use(session({
    secret: "unsecure-development-secret",
    resave: true,
--- a/src/client/public/css/main.css
+++ b/src/client/public/css/main.css
@ -13,6 +13,15 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
    src: url("/static/fonts/inter-variablefont.ttf");
 }

+/* Datatables */
+
+.dt-layout-row:has(.dt-search),
+.dt-layout-row:has(.dt-length),
+.dt-layout-row:has(.dt-paging) {
+  display: none !important;
+}
+
+/* End Datatables */

 /* Sidebar Components */

--- a/src/client/public/css/tailwind.css
+++ b/src/client/public/css/tailwind.css
@ -1528,6 +1528,11 @@ select {
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
 }

+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
 .bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
@ -1842,11 +1847,21 @@ select {
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
 }

+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+
 .text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
 }

+.text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
+}
+
 .text-teal-800 {
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
@ -1973,6 +1988,16 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
  src: url("/static/fonts/inter-variablefont.ttf");
 }

+/* Datatables */
+
+.dt-layout-row:has(.dt-search),
+.dt-layout-row:has(.dt-length),
+.dt-layout-row:has(.dt-paging) {
+  display: none !important;
+}
+
+/* End Datatables */
+
 /* Sidebar Components */

 .mobile-sidebar-header {
@ -2753,6 +2778,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
  border-width: 1px;
 }

+.dark\:border-none:where(.dark, .dark *) {
+  border-style: none;
+}
+
 .dark\:\!border-neutral-700:where(.dark, .dark *) {
  --tw-border-opacity: 1 !important;
  border-color: rgb(64 64 64 / var(--tw-border-opacity, 1)) !important;
@ -2793,6 +2822,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
 }

+.dark\:bg-red-500\/10:where(.dark, .dark *) {
+  background-color: rgb(239 68 68 / 0.1);
+}
+
 .dark\:bg-teal-500\/10:where(.dark, .dark *) {
  background-color: rgb(20 184 166 / 0.1);
 }
@ -2848,6 +2881,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }

+.dark\:text-red-500:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-teal-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1));
--- a/src/client/public/js/main.js
+++ b/src/client/public/js/main.js
@ -0,0 +1,9 @@
+window.addEventListener('load', () => {
+    const inputs = document.querySelectorAll('.dt-container thead input');
+  
+    inputs.forEach((input) => {
+        input.addEventListener('keydown', function (evt) {
+            if ((evt.metaKey || evt.ctrlKey) && evt.key === 'a') this.select();
+        });
+    });
+});
--- a/src/client/views/guild/subscriptions.ejs
+++ b/src/client/views/guild/subscriptions.ejs
@ -15,7 +15,7 @@
                        <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">
+                                <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">
                                <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>
@ -26,7 +26,15 @@
                        <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">
+                                <a 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-red-500 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
+                                    <span>
+                                        <span class="hidden sm:inline">Delete</span>
+                                        <span>(2)</span>
+                                    </span>
+                                </a>
+
+                                <div class="hs-dropdown [--placement:bottom-right] relative inline-block h-full" 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
@ -37,15 +45,15 @@
                                    <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>
+                                                <input type="radio" name="filter" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 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">
+                                                <input type="radio" name="filter" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 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">
+                                                <input type="radio" name="filter" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 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>
@ -133,10 +141,123 @@
                                        </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">
+                                        <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-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">
@ -263,11 +384,11 @@
                    <!-- 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">
+                            <p class="hidden sm:block 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">
+                                <select class="py-2 px-3 pe-9 block w-full border-gray-200 rounded-md 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>
@ -276,19 +397,19 @@
                                    <option>20</option>
                                </select>
                            </div>
-                            <p class="text-sm text-gray-600 dark:text-neutral-400">
+                            <p class="hidden sm:block 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">
+                                <button 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">
                                    <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">
+                                <button 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">
                                    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>
--- a/src/client/views/layout.ejs
+++ b/src/client/views/layout.ejs
@ -16,6 +16,9 @@
        </div>
        <!-- End Content -->

-        <script src="/static/preline.js"></script>
+        <script src="/static/foreign/preline.js"></script>
+        <script src="/static/foreign/jquery.js"></script>
+        <script src="/static/foreign/dataTables.js"></script>
+        <script src="/static/js/main.js"></script>
    </body>
 </html>