trying to figure out preline implementation

esbuild.mjs

@@ -17,7 +17,7 @@ build({
     target: ["es6"],
     format: "iife",
     loader: {".ts": "ts"},
-    sourcemap: !isProdEnv,
+    sourcemap: false, // !isProdEnv,
     minify: isProdEnv,
     keepNames: !isProdEnv
 }).catch(() => process.exit(1));

package.json

@@ -30,6 +30,7 @@
     "@types/ejs": "^3.1.5",
     "@types/express": "^5.0.1",
     "@types/jquery": "^3.5.32",
+    "@types/lodash": "^4.17.16",
     "@types/node": "^22.14.1",
     "@zerollup/ts-transform-paths": "^1.7.18",
     "autoprefixer": "^10.4.21",
@@ -49,6 +50,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
     "@preline/datatable": "^3.0.0",
+    "@preline/datepicker": "^3.0.1",
     "@preline/dropdown": "^3.0.1",
     "@preline/overlay": "^3.0.0",
     "@preline/select": "^3.0.0",
@@ -59,10 +61,13 @@
     "datatables.net-select-dt": "^3.0.0",
     "discord.js": "^14.18.0",
     "dotenv": "^16.5.0",
+    "dropzone": "^6.0.0-beta.2",
     "ejs": "^3.1.10",
     "ejs-mate": "^4.0.0",
     "express": "^5.1.0",
     "jquery": "^3.7.1",
+    "lodash": "^4.17.21",
+    "nouislider": "^15.8.1",
     "preline": "^3.0.1",
     "sqlite3": "^5.1.7",
     "tsconfig-paths": "^4.2.0",

src/client/src/ts/guild/feeds.ts

@@ -1,5 +1,4 @@
 import $ from "jquery";
-import "datatables.net-select-dt";
 import HSDropdown from "@preline/dropdown";
 import HSOverlay, { IOverlayOptions } from "@preline/overlay";
 import HSSelect, { ISelectOptions } from "@preline/select";
@@ -8,17 +7,15 @@ import DataTable, { Api, ConfigColumnDefs, AjaxSettings } from "datatables.net-d
 import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
 import { formatTimestamp, verifyChannels } from "../../../src/ts/main";
 import prisma from "../../../../../generated/prisma";
+import HSDatepicker, { ICustomDatepickerOptions } from "@preline/datepicker";
 
 declare let guildId: string;
 declare let channels: Array<any>;
 
+
 // #region DataTable
 //
 
-// Fix dependency bugs with preline
-(window as any).DataTable = DataTable;
-(window as any).$hsDataTableCollection = [];
-
 const emptyTableHtml: string = `
     <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">
@@ -320,7 +317,6 @@ $("#deleteRowsBtn").on("click", async () => {
 // #region Page Size Select
 // https://preline.co/plugins/html/advanced-select.html
 
-(window as any).$hsSelectCollection = [];
 (window as any)["FloatingUIDOM"] = {
     computePosition: computePosition,
     autoUpdate: autoUpdate,
@@ -572,6 +568,25 @@ const styleSelect = new HSSelect(
     styleSelectOptions
 );
 
+const publishedThresholdOptions: ICustomDatepickerOptions = {
+    type: "default",
+    dateMax: "2050-00-00",
+    mode: "default",
+    layouts: {
+
+    },
+    inputModeOptions: { itemsSeparator: " / " },
+    templates: {
+        arrowPrev: '<button data-vc-arrow="prev"><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"></path></svg></button>',
+        arrowNext: '<button data-vc-arrow="next"><svg class="shrink-0 size-4" 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"></path></svg></button>'
+    }
+};
+
+// const publishedThresholdInput = new HSDatepicker(
+//     $("#formPublishedThreshold").get(0),
+//     publishedThresholdOptions
+// );
+
 $("#editForm").on("submit", async event => {
     event.preventDefault();
 

src/client/src/ts/main.ts

@@ -1,6 +1,23 @@
 import { Channel } from "discord.js";
 import prisma from "../../../../generated/prisma";
 
+import $ from "jquery";
+import _ from "lodash";
+import noUiSlider from "nouislider";
+import "datatables.net";
+import "dropzone/dist/dropzone-min.js";
+import * as VanillaCalendarPro from "vanilla-calendar-pro";
+
+import "../types/client.d.ts";
+
+// Preline requirements
+window._ = _;
+window.$ = $;
+window.jQuery = $;
+window.DataTable = $.fn.dataTable;
+window.noUiSlider = noUiSlider;
+window.VanillaCalendarPro = VanillaCalendarPro;
+
 // Preline: necessary for header events.
 window.addEventListener("load", () => {
     const inputs = document.querySelectorAll('.dt-container thead input');

src/client/src/types/client.d.ts

@@ -0,0 +1,15 @@
+import type { IStaticMethods } from "preline/dist";
+
+interface Window {
+  // Optional third-party libraries
+  _: any;
+  $: typeof import("jquery");
+  jQuery: typeof import("jquery");
+  DataTable: any;
+  Dropzone: any;
+  VanillaCalendarPro: any;
+  noUiSlider: any;
+
+  // Preline UI
+  HSStaticMethods: IStaticMethods;
+}

src/client/tsconfig.json

@@ -3,11 +3,16 @@
         "target": "ES5",
         "outDir": "./public/generated/js",
         "rootDir": "./src/ts",
+        "baseUrl": ".",
         "sourceMap": false,
         "esModuleInterop": true,
-        "noImplicitAny": true
+        "noImplicitAny": true,
+        "typeRoots": [
+            "./src/types"
+        ]
     },
     "include": [
-        "./src/ts/**/*"
+        "./src/ts/**/*",
+        "./src/types"
     ]
 }

src/client/views/guild/feeds.ejs

@@ -211,7 +211,14 @@
                     </p>
                 </div>
                 <div>
-                    placeholder for publish threshold
+                    <label for="formPublishedThreshold" class="text-input-label">Published Threshold</label>
+                    <input id="formPublishedThreshold" name="published_threshold" required>
+                    <p class="text-input-help block peer-invalid:group-[.submitted]:hidden">
+                        placeholder helper text.
+                    </p>
+                    <p class="mt-2 text-sm text-red-500 hidden peer-invalid:group-[.submitted]:block">
+                        Please enter a date.
+                    </p>
                 </div>
                 <div>
                     <label for="formActive" class="flex gap-4">

src/server/controllers/guild/api/feed.controller.ts

@@ -24,7 +24,15 @@ export const get = async (request: Request, response: Response) => {
 
 export const post = async (request: Request, response: Response) => {
     const guildId = request.params.guildId;
-    const { name, url, active, channels, filters, message_style } = request.body;
+    const {
+        name,
+        url,
+        active,
+        channels,
+        filters,
+        message_style,
+        published_threshold
+    } = request.body;
 
     logger.debug("Post Feed", request.body);
 
@@ -54,7 +62,8 @@ export const post = async (request: Request, response: Response) => {
                 active: active === "on",
                 channels: { create: formattedChannels },
                 filters: { connect: formattedFilters },
-                message_style_id: message_style === "" ? null : Number(message_style)
+                message_style_id: message_style === "" ? null : Number(message_style),
+                published_threshold: published_threshold
              }
         });
     }
@@ -71,7 +80,16 @@ export const post = async (request: Request, response: Response) => {
 
 export const patch = async (request: Request, response: Response) => {
     const guildId = request.params.guildId;
-    const { id, name, url, active, channels, filters, message_style } = request.body;
+    const {
+        id,
+        name,
+        url,
+        active,
+        channels,
+        filters,
+        message_style,
+        published_threshold
+    } = request.body;
 
     logger.info("Patch Feed", request.body);
 
@@ -111,7 +129,8 @@ export const patch = async (request: Request, response: Response) => {
                 message_style_id:
                     message_style === ""
                         ? null
-                        : Number(message_style)
+                        : Number(message_style),
+                published_threshold: published_threshold
              }
         });
     }

src/types/client.d.ts

@@ -1,10 +0,0 @@
-import { Channel } from "discord.js";
-
-declare global {
-    interface Window {
-        guildId: string;
-        channels: Channel[];
-    }
-}
-
-export {};