368 lines
15 KiB
TypeScript
368 lines
15 KiB
TypeScript
// file: crates/ksp-app-wallet-desk/frontend/ts/main.ts
|
|
// version: 4
|
|
|
|
import "bootstrap";
|
|
import DataTable from "datatables.net-bs5";
|
|
import "datatables.net-select-bs5";
|
|
import ResizeObserver from "resize-observer-polyfill";
|
|
import "simplebar";
|
|
import { getCurrentWindow } from "@tauri-apps/api/window";
|
|
import type { RuntimeStatusDto } from "./bindings/ksp_app_wallet_desk/dto_common/RuntimeStatusDto.ts";
|
|
import type { LockedWalletDto } from "./bindings/ksp_app_wallet_desk/wallet_inventory/LockedWalletDto.ts";
|
|
import type { WalletInventoryEntryDto } from "./bindings/ksp_app_wallet_desk/wallet_inventory/WalletInventoryEntryDto.ts";
|
|
import type { WalletSelectionRequestDto } from "./bindings/ksp_app_wallet_desk/wallet_inventory/WalletSelectionRequestDto.ts";
|
|
import { frontendDebug, frontendInfo, frontendTrace, frontendWarn, installFrontendConsoleBridge } from "./frontend_log";
|
|
import { invokeKsp } from "./invoke";
|
|
import "../sass/main.scss";
|
|
|
|
(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
|
|
installFrontendConsoleBridge("main");
|
|
|
|
type ViewId = "dashboard" | "wallets" | "create-import" | "details" | "security" | "diagnostics";
|
|
|
|
const viewTitles: Record<ViewId, string> = {
|
|
dashboard: "Dashboard",
|
|
wallets: "Wallets",
|
|
"create-import": "Create / Import",
|
|
details: "Details",
|
|
security: "Security",
|
|
diagnostics: "Diagnostics",
|
|
};
|
|
|
|
function isViewId(value: string): value is ViewId {
|
|
return value in viewTitles;
|
|
}
|
|
|
|
function activateView(viewId: ViewId, source: "startup" | "user"): void {
|
|
if (source === "user") {
|
|
frontendDebug("main", "Wallet Desk navigation activated", { viewId });
|
|
}
|
|
const title = viewTitles[viewId];
|
|
const headerTitle = document.querySelector<HTMLElement>("#headerViewTitle");
|
|
const viewTitle = document.querySelector<HTMLElement>("#viewTitle");
|
|
if (headerTitle) {
|
|
headerTitle.textContent = title;
|
|
}
|
|
if (viewTitle) {
|
|
viewTitle.textContent = title;
|
|
}
|
|
document.title = `Wallet Desk — ${title}`;
|
|
document.querySelectorAll<HTMLButtonElement>("[data-view]").forEach(button => {
|
|
const active = button.dataset.view === viewId;
|
|
button.classList.toggle("active", active);
|
|
button.setAttribute("aria-current", active ? "page" : "false");
|
|
});
|
|
document.querySelectorAll<HTMLElement>("[data-view-panel]").forEach(panel => {
|
|
panel.hidden = panel.dataset.viewPanel !== viewId;
|
|
});
|
|
frontendTrace("main", "Wallet Desk view DOM updated", { viewId, source });
|
|
}
|
|
|
|
function bindFrontendInteractions(): void {
|
|
document.addEventListener(
|
|
"click",
|
|
event => {
|
|
const source = event.target;
|
|
if (!(source instanceof Element)) {
|
|
return;
|
|
}
|
|
const control = source.closest<HTMLElement>('button, a, input, select, textarea, [role="button"], [role="tab"], [data-view], [data-shell-action]');
|
|
if (!control) {
|
|
return;
|
|
}
|
|
frontendTrace("main", "Frontend control clicked", {
|
|
controlId: control.id || null,
|
|
controlType: control instanceof HTMLButtonElement ? control.type : null,
|
|
disabled: control instanceof HTMLButtonElement ? control.disabled : control.getAttribute("aria-disabled") === "true",
|
|
role: control.getAttribute("role"),
|
|
shellAction: control.dataset.shellAction ?? null,
|
|
tagName: control.tagName.toLowerCase(),
|
|
viewId: control.dataset.view ?? null,
|
|
});
|
|
},
|
|
true,
|
|
);
|
|
frontendTrace("main", "Frontend control interaction logger installed");
|
|
}
|
|
|
|
function bindNavigation(): void {
|
|
document.querySelectorAll<HTMLButtonElement>("[data-view]").forEach(button => {
|
|
button.addEventListener("click", () => {
|
|
const requestedView = button.dataset.view;
|
|
frontendTrace("main", "Wallet Desk navigation clicked", { requestedView: requestedView ?? null });
|
|
if (requestedView && isViewId(requestedView)) {
|
|
activateView(requestedView, "user");
|
|
}
|
|
});
|
|
});
|
|
frontendTrace("main", "Wallet Desk navigation handlers installed");
|
|
}
|
|
|
|
function appendIconText(cell: HTMLTableCellElement, iconClass: string, text: string): void {
|
|
const icon = document.createElement("i");
|
|
icon.className = `fa-solid ${iconClass} me-2`;
|
|
icon.setAttribute("aria-hidden", "true");
|
|
const label = document.createElement("span");
|
|
label.textContent = text;
|
|
cell.append(icon, label);
|
|
}
|
|
|
|
function renderWalletInventoryRow(entry: WalletInventoryEntryDto): HTMLTableRowElement {
|
|
const row = document.createElement("tr");
|
|
row.dataset.walletId = entry.walletId;
|
|
row.dataset.walletSelectable = entry.inspectionStatus === "valid" ? "true" : "false";
|
|
row.dataset.inspectionStatus = entry.inspectionStatus;
|
|
const state = document.createElement("td");
|
|
if (entry.state === "locked") {
|
|
appendIconText(state, "fa-lock", "Locked");
|
|
} else {
|
|
appendIconText(state, "fa-triangle-exclamation", "Erreur");
|
|
}
|
|
const filename = document.createElement("td");
|
|
filename.textContent = entry.filename;
|
|
const format = document.createElement("td");
|
|
format.textContent = entry.formatVersion === null ? "—" : entry.formatVersion.toString();
|
|
const view = document.createElement("td");
|
|
view.textContent = entry.viewEnabled === null ? "—" : entry.viewEnabled ? "enabled" : "disabled";
|
|
const inspection = document.createElement("td");
|
|
if (entry.inspectionStatus === "valid") {
|
|
inspection.textContent = "Valide";
|
|
} else if (entry.diagnostic) {
|
|
inspection.textContent = `Invalide — ${entry.diagnostic.domain}.${entry.diagnostic.code}`;
|
|
inspection.title = entry.diagnostic.message;
|
|
} else {
|
|
inspection.textContent = "Invalide";
|
|
}
|
|
row.append(state, filename, format, view, inspection);
|
|
return row;
|
|
}
|
|
|
|
function initializeWalletTable(): void {
|
|
if (DataTable.isDataTable("#walletInventoryTable")) {
|
|
new DataTable("#walletInventoryTable").destroy();
|
|
}
|
|
new DataTable("#walletInventoryTable", {
|
|
order: [[1, "asc"]],
|
|
pageLength: 10,
|
|
select: {
|
|
selector: "tbody tr[data-wallet-selectable='true'] td",
|
|
style: "single",
|
|
},
|
|
language: {
|
|
emptyTable: "Aucun wallet .kspwallet disponible.",
|
|
search: "Filtrer :",
|
|
zeroRecords: "Aucun wallet correspondant.",
|
|
},
|
|
});
|
|
frontendDebug("main", "Wallet inventory DataTable initialized", { phase: "pre.004-wallet-inventory" });
|
|
}
|
|
|
|
function renderWalletInventory(entries: WalletInventoryEntryDto[]): void {
|
|
if (DataTable.isDataTable("#walletInventoryTable")) {
|
|
new DataTable("#walletInventoryTable").destroy();
|
|
}
|
|
const body = document.querySelector<HTMLTableSectionElement>("#walletInventoryBody");
|
|
if (body) {
|
|
body.replaceChildren(...entries.map(entry => renderWalletInventoryRow(entry)));
|
|
}
|
|
initializeWalletTable();
|
|
const invalidCount = entries.filter(entry => entry.inspectionStatus === "invalid").length;
|
|
frontendDebug("main", "Wallet inventory rendered", { entryCount: entries.length, invalidCount });
|
|
}
|
|
|
|
function clearSelectedWallet(): void {
|
|
const icon = document.querySelector<HTMLElement>("#currentWalletIcon");
|
|
const filename = document.querySelector<HTMLElement>("#currentWalletFilename");
|
|
const state = document.querySelector<HTMLElement>("#currentWalletState");
|
|
const format = document.querySelector<HTMLElement>("#currentWalletFormat");
|
|
const view = document.querySelector<HTMLElement>("#currentWalletView");
|
|
if (icon) {
|
|
icon.className = "fa-solid fa-lock fa-2x mb-3 text-body-secondary";
|
|
}
|
|
if (filename) {
|
|
filename.textContent = "Aucun wallet sélectionné.";
|
|
}
|
|
if (state) {
|
|
state.textContent = "—";
|
|
}
|
|
if (format) {
|
|
format.textContent = "—";
|
|
}
|
|
if (view) {
|
|
view.textContent = "—";
|
|
}
|
|
}
|
|
|
|
function renderSelectedWallet(wallet: LockedWalletDto): void {
|
|
const icon = document.querySelector<HTMLElement>("#currentWalletIcon");
|
|
const filename = document.querySelector<HTMLElement>("#currentWalletFilename");
|
|
const state = document.querySelector<HTMLElement>("#currentWalletState");
|
|
const format = document.querySelector<HTMLElement>("#currentWalletFormat");
|
|
const view = document.querySelector<HTMLElement>("#currentWalletView");
|
|
if (icon) {
|
|
icon.className = "fa-solid fa-lock fa-2x mb-3";
|
|
}
|
|
if (filename) {
|
|
filename.textContent = wallet.filename;
|
|
}
|
|
if (state) {
|
|
state.textContent = "Locked";
|
|
}
|
|
if (format) {
|
|
format.textContent = wallet.formatVersion.toString();
|
|
}
|
|
if (view) {
|
|
view.textContent = wallet.viewEnabled ? "enabled" : "disabled";
|
|
}
|
|
frontendDebug("main", "Locked Wallet selection rendered", { walletId: wallet.walletId, formatVersion: wallet.formatVersion, viewEnabled: wallet.viewEnabled });
|
|
}
|
|
|
|
async function selectWallet(walletId: string): Promise<void> {
|
|
const request: WalletSelectionRequestDto = { walletId };
|
|
try {
|
|
const wallet = await invokeKsp<LockedWalletDto>("main", "select_wallet", { request });
|
|
renderSelectedWallet(wallet);
|
|
} catch {
|
|
clearSelectedWallet();
|
|
frontendWarn("main", "Locked Wallet selection failed", { walletId });
|
|
}
|
|
}
|
|
|
|
function bindWalletTableSelection(): void {
|
|
const table = document.querySelector<HTMLTableElement>("#walletInventoryTable");
|
|
if (!table) {
|
|
return;
|
|
}
|
|
table.addEventListener("click", event => {
|
|
const source = event.target;
|
|
if (!(source instanceof Element)) {
|
|
return;
|
|
}
|
|
const row = source.closest<HTMLTableRowElement>("tbody tr[data-wallet-id]");
|
|
if (!row) {
|
|
return;
|
|
}
|
|
const walletId = row.dataset.walletId;
|
|
if (!walletId) {
|
|
return;
|
|
}
|
|
if (row.dataset.walletSelectable !== "true") {
|
|
frontendDebug("main", "Invalid Wallet inventory row selection ignored", { walletId });
|
|
return;
|
|
}
|
|
frontendTrace("main", "Wallet inventory row selected", { walletId });
|
|
void selectWallet(walletId);
|
|
});
|
|
frontendTrace("main", "Wallet inventory row selection handler installed");
|
|
}
|
|
|
|
async function loadWalletInventory(command: "list_wallets" | "refresh_wallets"): Promise<void> {
|
|
frontendDebug("main", "Wallet inventory load requested", { command });
|
|
const entries = await invokeKsp<WalletInventoryEntryDto[]>("main", command);
|
|
clearSelectedWallet();
|
|
renderWalletInventory(entries);
|
|
}
|
|
|
|
function renderRuntimeStatus(status: RuntimeStatusDto): void {
|
|
const version = document.querySelector<HTMLElement>("#runtimeVersion");
|
|
const compositeProfile = document.querySelector<HTMLElement>("#runtimeCompositeProfile");
|
|
const loggingProfile = document.querySelector<HTMLElement>("#runtimeLoggingProfile");
|
|
const walletProfile = document.querySelector<HTMLElement>("#runtimeWalletProfile");
|
|
const fallback = document.querySelector<HTMLElement>("#runtimeLoggingFallback");
|
|
const documents = document.querySelector<HTMLElement>("#runtimeConfigDocuments");
|
|
const walletsRoot = document.querySelector<HTMLElement>("#runtimeWalletsDirectory");
|
|
const walletsSubdirectory = document.querySelector<HTMLElement>("#runtimeWalletsSubdirectory");
|
|
const effectiveWalletsDirectory = document.querySelector<HTMLElement>("#runtimeEffectiveWalletsDirectory");
|
|
const walletDirectoryCreated = document.querySelector<HTMLElement>("#runtimeWalletDirectoryCreated");
|
|
const phase = document.querySelector<HTMLElement>("#runtimeShellPhase");
|
|
const shellStatus = document.querySelector<HTMLElement>("#shellStatus");
|
|
if (version) {
|
|
version.textContent = status.applicationVersion;
|
|
}
|
|
if (compositeProfile) {
|
|
compositeProfile.textContent = status.activeCompositeProfile;
|
|
}
|
|
if (loggingProfile) {
|
|
loggingProfile.textContent = status.activeLoggingProfile ?? "fallback transitoire";
|
|
}
|
|
if (walletProfile) {
|
|
walletProfile.textContent = status.activeWalletProfile;
|
|
}
|
|
if (fallback) {
|
|
fallback.textContent = status.fallbackLoggingActive ? "oui" : "non";
|
|
}
|
|
if (documents) {
|
|
documents.textContent = status.configDocumentCount.toString();
|
|
}
|
|
if (walletsRoot) {
|
|
walletsRoot.textContent = status.walletsDirectory;
|
|
}
|
|
if (walletsSubdirectory) {
|
|
walletsSubdirectory.textContent = status.walletsSubdirectory ?? "— (racine globale)";
|
|
}
|
|
if (effectiveWalletsDirectory) {
|
|
effectiveWalletsDirectory.textContent = status.effectiveWalletsDirectory;
|
|
}
|
|
if (walletDirectoryCreated) {
|
|
walletDirectoryCreated.textContent = status.effectiveWalletsDirectoryCreatedOnStartup ? "oui" : "non, déjà présent";
|
|
}
|
|
if (phase) {
|
|
phase.textContent = status.shellPhase;
|
|
}
|
|
if (shellStatus) {
|
|
shellStatus.textContent = "Config résolue ; inventaire Wallet prêt.";
|
|
}
|
|
frontendTrace("main", "Wallet Desk runtime status rendered", {
|
|
compositeProfile: status.activeCompositeProfile,
|
|
fallbackLoggingActive: status.fallbackLoggingActive,
|
|
shellPhase: status.shellPhase,
|
|
walletDirectoryCreatedOnStartup: status.effectiveWalletsDirectoryCreatedOnStartup,
|
|
walletProfile: status.activeWalletProfile,
|
|
});
|
|
}
|
|
|
|
async function loadRuntimeStatus(): Promise<void> {
|
|
const status = await invokeKsp<RuntimeStatusDto>("main", "get_runtime_status");
|
|
renderRuntimeStatus(status);
|
|
}
|
|
|
|
function bindShellActions(): void {
|
|
document.querySelectorAll<HTMLButtonElement>("[data-shell-action]").forEach(button => {
|
|
button.addEventListener("click", () => {
|
|
const action = button.dataset.shellAction ?? "unknown";
|
|
frontendDebug("main", "Wallet Desk shell action clicked", { action, enabled: !button.disabled });
|
|
if (action === "refresh-wallets" && !button.disabled) {
|
|
void loadWalletInventory("refresh_wallets").catch(() => {
|
|
frontendWarn("main", "Wallet inventory refresh failed");
|
|
});
|
|
}
|
|
});
|
|
});
|
|
frontendTrace("main", "Wallet Desk shell action handlers installed");
|
|
}
|
|
|
|
async function initializeMain(): Promise<void> {
|
|
const windowLabel = getCurrentWindow().label;
|
|
frontendInfo("main", "Wallet Desk main frontend loaded", { windowLabel });
|
|
bindFrontendInteractions();
|
|
bindNavigation();
|
|
bindWalletTableSelection();
|
|
bindShellActions();
|
|
activateView("dashboard", "startup");
|
|
try {
|
|
await loadRuntimeStatus();
|
|
await loadWalletInventory("list_wallets");
|
|
} catch {
|
|
renderWalletInventory([]);
|
|
const shellStatus = document.querySelector<HTMLElement>("#shellStatus");
|
|
if (shellStatus) {
|
|
shellStatus.textContent = "Le statut runtime ou l'inventaire Wallet n'a pas pu être chargé.";
|
|
}
|
|
frontendWarn("main", "Wallet Desk startup data load failed");
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
void initializeMain();
|
|
});
|