v0.3.8-pre.002

crates/ksp-app-store-desk/frontend/ts/main.ts

@@ -0,0 +1,152 @@
+// file: crates/ksp-app-store-desk/frontend/ts/main.ts
+// version: 1
+
+import DataTable from "datatables.net-bs5";
+import "datatables.net-bs5/css/dataTables.bootstrap5.css";
+import "bootstrap";
+import ResizeObserver from "resize-observer-polyfill";
+import "simplebar";
+import type { ShellStatusDto } from "./bindings/ksp_app_store_desk/dto_common/ShellStatusDto.ts";
+import { frontendDebug, frontendError, frontendInfo, frontendTrace, installFrontendConsoleBridge } from "./frontend_log";
+import { invokeKsp } from "./invoke";
+
+(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
+installFrontendConsoleBridge("main");
+
+type ViewId = "overview" | "transactions" | "accounts" | "diagnostics";
+
+const viewTitles: Record<ViewId, string> = {
+    overview: "Overview",
+    transactions: "RAW Transactions",
+    accounts: "RAW Accounts",
+    diagnostics: "Diagnostics",
+};
+
+interface EmptyDataTable {
+    columns: { adjust(): void };
+}
+
+let transactionTable: EmptyDataTable | null = null;
+let accountTable: EmptyDataTable | null = null;
+
+function isViewId(value: string | undefined): value is ViewId {
+    return value === "overview" || value === "transactions" || value === "accounts" || value === "diagnostics";
+}
+
+function activateView(viewId: ViewId): void {
+    document.querySelectorAll<HTMLElement>("[data-view-panel]").forEach(panel => {
+        panel.hidden = panel.dataset.viewPanel !== viewId;
+    });
+    document.querySelectorAll<HTMLButtonElement>("[data-view]").forEach(button => {
+        button.classList.toggle("active", button.dataset.view === viewId);
+    });
+    const title = document.querySelector<HTMLElement>("#headerViewTitle");
+    if (title) {
+        title.textContent = viewTitles[viewId];
+    }
+    document.title = `Store Desk — ${viewTitles[viewId]}`;
+    if (viewId === "transactions") {
+        transactionTable?.columns.adjust();
+    }
+    if (viewId === "accounts") {
+        accountTable?.columns.adjust();
+    }
+    frontendDebug("main", "Store Desk view activated", { viewId });
+}
+
+function initializeEmptyTables(): void {
+    const commonOptions = {
+        data: [],
+        paging: true,
+        serverSide: false,
+        pageLength: 25,
+        lengthMenu: [25, 50, 100],
+        searching: false,
+        ordering: false,
+        info: true,
+        scrollX: true,
+        autoWidth: false,
+        language: {
+            emptyTable: "Aucune donnée Store n'est chargée dans le scaffold pre.002.",
+        },
+    };
+    transactionTable = new DataTable("#rawTransactionsTable", commonOptions) as unknown as EmptyDataTable;
+    accountTable = new DataTable("#rawAccountsTable", commonOptions) as unknown as EmptyDataTable;
+    frontendTrace("main", "Store Desk empty DataTables skeletons initialized", { pagingOwner: "datatables", serverSide: false });
+}
+
+function renderShellStatus(status: ShellStatusDto): void {
+    const versionBadge = document.querySelector<HTMLElement>("#appVersionBadge");
+    if (versionBadge) {
+        versionBadge.textContent = status.applicationVersion;
+    }
+    const values: Record<string, string> = {
+        runtimeVersion: status.applicationVersion,
+        runtimeShellPhase: status.shellPhase,
+        runtimeConfigDocuments: status.configDocumentCount.toString(),
+        runtimeLoggingProfile: status.activeLoggingProfile ?? "fallback",
+        runtimeLoggingFallback: status.fallbackLoggingActive ? "oui" : "non",
+    };
+    for (const [elementId, value] of Object.entries(values)) {
+        const element = document.querySelector<HTMLElement>(`#${elementId}`);
+        if (element) {
+            element.textContent = value;
+        }
+    }
+    const diagnostic = document.querySelector<HTMLElement>("#runtimeDiagnostic");
+    if (diagnostic) {
+        diagnostic.hidden = status.startupDiagnostic === null;
+        diagnostic.textContent = status.startupDiagnostic ? `${status.startupDiagnostic.domain}/${status.startupDiagnostic.code}: ${status.startupDiagnostic.message}` : "";
+    }
+    frontendTrace("main", "Store Desk shell status rendered", {
+        fallbackLoggingActive: status.fallbackLoggingActive,
+        shellPhase: status.shellPhase,
+    });
+}
+
+async function refreshDiagnostics(): Promise<void> {
+    frontendDebug("main", "Store Desk diagnostics refresh started");
+    try {
+        const status = await invokeKsp<ShellStatusDto>("main", "get_shell_status");
+        renderShellStatus(status);
+        frontendDebug("main", "Store Desk diagnostics refresh completed");
+    } catch {
+        frontendError("main", "Store Desk diagnostics refresh failed");
+    }
+}
+
+function installInteractions(): void {
+    document.querySelectorAll<HTMLButtonElement>("[data-view]").forEach(button => {
+        button.addEventListener("click", () => {
+            const viewId = button.dataset.view;
+            frontendDebug("main", "Store Desk navigation button clicked", { viewId: viewId ?? "missing" });
+            if (isViewId(viewId)) {
+                activateView(viewId);
+            }
+        });
+    });
+    const refreshButton = document.querySelector<HTMLButtonElement>("#refreshDiagnostics");
+    refreshButton?.addEventListener("click", () => {
+        frontendDebug("main", "Store Desk diagnostics refresh button clicked");
+        void refreshDiagnostics();
+    });
+    document.querySelectorAll<HTMLButtonElement>("button").forEach(button => {
+        if (button.dataset.view || button.id === "refreshDiagnostics") {
+            return;
+        }
+        button.addEventListener("click", () => frontendDebug("main", "Store Desk generic button clicked", { buttonId: button.id || "anonymous" }));
+    });
+    frontendTrace("main", "Store Desk frontend interactions installed");
+}
+
+async function initializeMain(): Promise<void> {
+    frontendInfo("main", "Store Desk main frontend loaded");
+    initializeEmptyTables();
+    installInteractions();
+    activateView("overview");
+    await refreshDiagnostics();
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    void initializeMain();
+});