From 4577bb72b919e32d940aa02cc68e3f046f30fe95 Mon Sep 17 00:00:00 2001 From: Corban-Lee Jones Date: Thu, 30 Jan 2025 13:03:10 +0000 Subject: [PATCH] add datatables (not finished) --- package.json | 1 + src/app.ts | 6 +- src/client/public/css/main.css | 9 ++ src/client/public/css/tailwind.css | 38 ++++++ src/client/public/js/main.js | 9 ++ src/client/views/guild/subscriptions.ejs | 141 +++++++++++++++++++++-- src/client/views/layout.ejs | 5 +- 7 files changed, 197 insertions(+), 12 deletions(-) create mode 100644 src/client/public/js/main.js diff --git a/package.json b/package.json index 14eb628..ab9532c 100644 --- 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", diff --git a/src/app.ts b/src/app.ts index b338356..8b78ed6 100644 --- 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, diff --git a/src/client/public/css/main.css b/src/client/public/css/main.css index 90c251b..446b61f 100644 --- 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 */ diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css index ab4cb13..8c6455a 100644 --- 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)); diff --git a/src/client/public/js/main.js b/src/client/public/js/main.js new file mode 100644 index 0000000..d842175 --- /dev/null +++ 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(); + }); + }); +}); \ No newline at end of file diff --git a/src/client/views/guild/subscriptions.ejs b/src/client/views/guild/subscriptions.ejs index 9c649d5..6313ed2 100644 --- a/src/client/views/guild/subscriptions.ejs +++ b/src/client/views/guild/subscriptions.ejs @@ -15,7 +15,7 @@