Add TypeScript declaration file for swapy module

Author: Jared-Gross

package-lock.json

@@ -56,13 +56,14 @@
     "dependencies": {
         "@toast-ui/editor": "^3.2.2",
         "beercss": "^3.12.13",
+        "easy-qrcode": "^0.1.0",
         "firebase": "^12.6.0",
         "flatpickr": "^4.6.13",
         "fuse.js": "^7.1.0",
         "idb": "^8.0.3",
-        "easy-qrcode": "^0.1.0",
         "material-dynamic-colors": "^1.1.2",
-        "material-file-icons": "^2.4.0"
+        "material-file-icons": "^2.4.0",
+        "swapy": "^1.0.5"
     },
     "devDependencies": {
         "@types/firebase": "^3.2.3",
@@ -81,4 +82,4 @@
         "webpack-dev-server": "^5.2.2",
         "workbox-webpack-plugin": "^7.3.0"
     }
-}
+}

package.json

@@ -0,0 +1,59 @@
+import { IWorksheet } from "@models/worksheet";
+
+const WORKSHEET_API_ENDPOINT = "https://hbnitv.net/api/kuriki/worksheets";
+
+export interface WorksheetRecord {
+    data: IWorksheet;
+    outcomes: string[];
+}
+
+export interface WorksheetSingleResponse {
+    status: string;
+    data: WorksheetRecord;
+}
+
+export interface WorksheetAllResponse {
+    status: string;
+    data: Record<number, WorksheetRecord>;
+}
+
+export class WorksheetsAPI {
+    static async getAll(): Promise<WorksheetAllResponse> {
+        const res = await fetch(WORKSHEET_API_ENDPOINT);
+        if (!res.ok) throw new Error(`WorksheetAPI GET all failed: ${res.statusText}`);
+        return res.json();
+    }
+
+    static async getById(id: number): Promise<WorksheetSingleResponse> {
+        const res = await fetch(`${WORKSHEET_API_ENDPOINT}?id=${id}`);
+        if (!res.ok) throw new Error(`WorksheetAPI GET by ID failed: ${res.statusText}`);
+        return res.json();
+    }
+
+    static async getByOutcome(outcomeId: string): Promise<WorksheetAllResponse> {
+        const res = await fetch(`${WORKSHEET_API_ENDPOINT}?outcomeId=${encodeURIComponent(outcomeId)}`);
+        if (!res.ok) throw new Error(`WorksheetAPI GET by outcomeId failed: ${res.statusText}`);
+        return res.json();
+    }
+
+    static async post(idKey: number, data: IWorksheet, outcomes: string[]) {
+        const payload = { idKey, data, outcomes };
+
+        const res = await fetch(WORKSHEET_API_ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+        });
+
+        if (!res.ok) throw new Error(`WorksheetAPI POST failed: ${res.statusText}`);
+        return res.json();
+    }
+
+    static async delete(idKey: number) {
+        const url = `${WORKSHEET_API_ENDPOINT}?id=${idKey}`;
+        const res = await fetch(url, { method: "DELETE" });
+
+        if (!res.ok) throw new Error(`WorksheetAPI DELETE failed: ${res.statusText}`);
+        return res.json();
+    }
+}

src/api/worksheets-api.ts

@@ -0,0 +1,26 @@
+export interface ISwapySlot {
+    id: string;
+    element: HTMLElement;
+}
+
+export interface ISwapyItem {
+    id: string;
+    element: HTMLElement;
+}
+
+
+export class SwapyItem implements ISwapyItem {
+    id: string;
+    element: HTMLElement;
+
+    constructor(id: string, content: HTMLElement) {
+        this.id = id;
+
+        const el = document.createElement("div");
+
+        el.setAttribute("data-swapy-item", `item-${id}`);
+        el.appendChild(content);
+
+        this.element = el;
+    }
+}

src/components/swapy/swapy-item.ts

@@ -0,0 +1,52 @@
+import { createSwapy } from "swapy";
+import { SwapySlot } from "@components/swapy/swapy-slot";
+import { SwapyItem } from "@components/swapy/swapy-item";
+
+export class SwapyManager {
+    private static instance: SwapyManager | null = null;
+
+    private container: HTMLElement;
+    private swapy: any;
+
+    private constructor(container: HTMLElement) {
+        this.container = container;
+
+        this.swapy = createSwapy(this.container, {
+            animation: "spring",
+            swapMode: "hover",
+            autoScrollOnDrag: true,
+        });
+    }
+
+    static init(container: HTMLElement) {
+        if (!SwapyManager.instance) {
+            SwapyManager.instance = new SwapyManager(container);
+        }
+        return SwapyManager.instance;
+    }
+
+    static get() {
+        if (!SwapyManager.instance) {
+            throw new Error("SwapyManager not initialized yet.");
+        }
+        return SwapyManager.instance;
+    }
+
+    createSlotWithItem(id: string, content: HTMLElement) {
+        const item = new SwapyItem(id, content);
+        const slot = new SwapySlot(id, item);
+
+        this.container.appendChild(slot.element);
+        this.update();
+
+        return { slot, item };
+    }
+
+    update() {
+        queueMicrotask(() => {
+            if (this.swapy && !this.swapy.isDragging) {
+                this.swapy.update();
+            }
+        });
+    }
+}

src/components/swapy/swapy-manager.ts

@@ -0,0 +1,23 @@
+import { ISwapySlot, SwapyItem } from "@components/swapy/swapy-item";
+
+export class SwapySlot implements ISwapySlot {
+    id: string;
+    element: HTMLElement;
+
+    constructor(id: string, item: SwapyItem) {
+        this.id = id;
+
+        const slot = document.createElement("div");
+        slot.classList.add("slot")
+        slot.setAttribute("data-swapy-slot", `slot-${id}`);
+
+        slot.appendChild(item.element);
+
+        this.element = slot;
+    }
+
+    setItem(item: SwapyItem) {
+        this.element.innerHTML = "";
+        this.element.appendChild(item.element);
+    }
+}