229 lines
9.7 KiB
TypeScript
229 lines
9.7 KiB
TypeScript
// file: crates/ksp-app-store-desk/frontend/ts/main.ts
|
|
// version: 3
|
|
|
|
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 type { StoreRuntimeStatusDto } from "./bindings/ksp_app_store_desk/dto_common/StoreRuntimeStatusDto.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 setText(elementId: string, value: string): void {
|
|
const element = document.querySelector<HTMLElement>(`#${elementId}`);
|
|
if (element) {
|
|
element.textContent = value;
|
|
}
|
|
}
|
|
|
|
function renderDiagnostic(elementId: string, diagnostic: { domain: string; code: string; message: string } | null): void {
|
|
const element = document.querySelector<HTMLElement>(`#${elementId}`);
|
|
if (!element) {
|
|
return;
|
|
}
|
|
element.hidden = diagnostic === null;
|
|
element.textContent = diagnostic ? `${diagnostic.domain}/${diagnostic.code}: ${diagnostic.message}` : "";
|
|
}
|
|
|
|
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 RAW n'est chargée dans la tranche pre.006.",
|
|
},
|
|
};
|
|
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 {
|
|
setText("appVersionBadge", status.applicationVersion);
|
|
setText("runtimeVersion", status.applicationVersion);
|
|
setText("runtimeShellPhase", status.shellPhase);
|
|
setText("runtimeConfigDocuments", status.configDocumentCount.toString());
|
|
setText("runtimeLoggingProfile", status.activeLoggingProfile ?? "fallback");
|
|
setText("runtimeLoggingFallback", status.fallbackLoggingActive ? "oui" : "non");
|
|
renderDiagnostic("runtimeDiagnostic", status.startupDiagnostic);
|
|
frontendTrace("main", "Store Desk shell status rendered", {
|
|
fallbackLoggingActive: status.fallbackLoggingActive,
|
|
shellPhase: status.shellPhase,
|
|
});
|
|
}
|
|
|
|
function renderStoreRuntimeStatus(status: StoreRuntimeStatusDto): void {
|
|
const target = status.backendKind && status.network ? `${status.backendKind} / ${status.network}` : status.network ?? status.backendKind ?? "indisponible";
|
|
const migration = status.migrationVersionDecimal === null ? `inconnue · ${status.pendingMigrationCount} pending` : `v${status.migrationVersionDecimal} · ${status.pendingMigrationCount} pending`;
|
|
const pool = `${status.poolAvailable}/${status.poolSize}/${status.poolCapacity} · wait ${status.poolWaiting}`;
|
|
const profile = status.profileId ?? "indisponible";
|
|
|
|
setText("overviewStoreProfile", profile);
|
|
setText("overviewStoreTarget", target);
|
|
setText("overviewStoreHealth", status.healthState);
|
|
setText("overviewStorePool", pool);
|
|
setText("overviewStoreMigration", migration);
|
|
renderDiagnostic("overviewStoreDiagnostic", status.diagnostic);
|
|
|
|
setText("runtimeStoreProfile", profile);
|
|
setText("runtimeStoreTarget", target);
|
|
setText("runtimeStoreHealth", status.healthState);
|
|
setText("runtimeStoreMigration", migration);
|
|
setText("runtimeStorePool", pool);
|
|
renderDiagnostic("runtimeStoreDiagnostic", status.diagnostic);
|
|
|
|
frontendTrace("main", "Store Desk Store runtime status rendered", {
|
|
healthState: status.healthState,
|
|
pendingMigrationCount: status.pendingMigrationCount,
|
|
poolCapacity: status.poolCapacity,
|
|
poolSize: status.poolSize,
|
|
storeOpen: status.storeOpen,
|
|
});
|
|
}
|
|
|
|
async function refreshStoreRuntime(): Promise<void> {
|
|
frontendDebug("main", "Store Desk Store runtime refresh started");
|
|
try {
|
|
const status = await invokeKsp<StoreRuntimeStatusDto>("main", "store_runtime_status");
|
|
renderStoreRuntimeStatus(status);
|
|
frontendDebug("main", "Store Desk Store runtime refresh completed", { healthState: status.healthState, storeOpen: status.storeOpen });
|
|
} catch {
|
|
frontendError("main", "Store Desk Store runtime refresh failed");
|
|
}
|
|
}
|
|
|
|
async function refreshDiagnostics(): Promise<void> {
|
|
frontendDebug("main", "Store Desk diagnostics refresh started");
|
|
try {
|
|
const status = await invokeKsp<ShellStatusDto>("main", "get_shell_status");
|
|
renderShellStatus(status);
|
|
await refreshStoreRuntime();
|
|
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 refreshOverview = document.querySelector<HTMLButtonElement>("#refreshOverview");
|
|
refreshOverview?.addEventListener("click", () => {
|
|
frontendDebug("main", "Store Desk Overview refresh button clicked");
|
|
void refreshStoreRuntime();
|
|
});
|
|
const refreshButton = document.querySelector<HTMLButtonElement>("#refreshDiagnostics");
|
|
refreshButton?.addEventListener("click", () => {
|
|
frontendDebug("main", "Store Desk diagnostics refresh button clicked");
|
|
void refreshDiagnostics();
|
|
});
|
|
document.addEventListener("click", event => {
|
|
const eventTarget = event.target;
|
|
if (!(eventTarget instanceof Element)) {
|
|
return;
|
|
}
|
|
const control = eventTarget.closest<HTMLElement>("button, [role='tab'], [data-bs-toggle='tab']");
|
|
if (!control) {
|
|
return;
|
|
}
|
|
if (control instanceof HTMLButtonElement && (control.dataset.view || control.id === "refreshDiagnostics" || control.id === "refreshOverview")) {
|
|
return;
|
|
}
|
|
const controlId = control.id || control.getAttribute("data-bs-target") || control.getAttribute("aria-controls") || "anonymous";
|
|
if (control.matches("[role='tab'], [data-bs-toggle='tab']")) {
|
|
frontendDebug("main", "Store Desk tab control clicked", { controlId });
|
|
return;
|
|
}
|
|
frontendDebug("main", "Store Desk generic button clicked", { buttonId: controlId });
|
|
});
|
|
document.addEventListener("shown.bs.tab", event => {
|
|
const target = event.target;
|
|
const tabId = target instanceof HTMLElement ? target.id || target.getAttribute("data-bs-target") || target.textContent?.trim() || "anonymous" : "unknown";
|
|
frontendDebug("main", "Store Desk tab activated", { tabId });
|
|
});
|
|
document.addEventListener("change", event => {
|
|
const target = event.target;
|
|
if (!(target instanceof HTMLInputElement || target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement)) {
|
|
return;
|
|
}
|
|
frontendDebug("main", "Store Desk interactive control changed", {
|
|
controlId: target.id || target.getAttribute("name") || "anonymous",
|
|
controlType: target instanceof HTMLSelectElement ? "select" : target.type || "text",
|
|
});
|
|
});
|
|
frontendTrace("main", "Store Desk frontend interactions installed", { buttons: true, controls: true, tabs: true });
|
|
}
|
|
|
|
async function initializeMain(): Promise<void> {
|
|
frontendInfo("main", "Store Desk main frontend loaded");
|
|
initializeEmptyTables();
|
|
installInteractions();
|
|
activateView("overview");
|
|
await refreshDiagnostics();
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
void initializeMain();
|
|
});
|