v0.2.6-pre.004
This commit is contained in:
@@ -37,9 +37,9 @@
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h1 id="viewTitle" class="h3 mb-1">Dashboard</h1>
|
||||
<p class="text-body-secondary mb-0">Composition Config Wallet Desk active — inventory Wallet branché en pre.004.</p>
|
||||
<p class="text-body-secondary mb-0">Inventaire `.kspwallet` root-scoped et inspection locked actifs.</p>
|
||||
</div>
|
||||
<span class="badge text-bg-secondary">0.2.6-pre.003</span>
|
||||
<span class="badge text-bg-secondary">0.2.6-pre.004</span>
|
||||
</div>
|
||||
<section data-view-panel="dashboard">
|
||||
<div class="row g-3">
|
||||
@@ -66,9 +66,14 @@
|
||||
<div class="col-xl-4">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header fw-semibold">Wallet courant</div>
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center text-center text-body-secondary">
|
||||
<i class="fa-solid fa-lock fa-2x mb-3" aria-hidden="true"></i>
|
||||
<p class="mb-0">Aucun wallet sélectionné.</p>
|
||||
<div class="card-body text-center">
|
||||
<i id="currentWalletIcon" class="fa-solid fa-lock fa-2x mb-3 text-body-secondary" aria-hidden="true"></i>
|
||||
<p id="currentWalletFilename" class="fw-semibold mb-2">Aucun wallet sélectionné.</p>
|
||||
<dl class="row small text-start mb-0">
|
||||
<dt class="col-5">État</dt><dd id="currentWalletState" class="col-7">—</dd>
|
||||
<dt class="col-5">Format</dt><dd id="currentWalletFormat" class="col-7">—</dd>
|
||||
<dt class="col-5">VIEW</dt><dd id="currentWalletView" class="col-7">—</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,14 +86,14 @@
|
||||
<span class="fw-semibold">Wallets disponibles</span>
|
||||
<small class="text-body-secondary"><i class="fa-solid fa-lock me-1" aria-hidden="true"></i>verrouillé · <i class="fa-solid fa-lock-open me-1" aria-hidden="true"></i>ouvert</small>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm" type="button" data-shell-action="refresh-wallets" disabled>
|
||||
<button class="btn btn-outline-primary btn-sm" type="button" data-shell-action="refresh-wallets">
|
||||
<i class="fa-solid fa-rotate me-2" aria-hidden="true"></i>Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table id="walletInventoryTable" class="table table-striped table-hover align-middle w-100">
|
||||
<thead><tr><th>État</th><th>Filename</th><th>Format</th><th>VIEW</th><th>Inspection</th></tr></thead>
|
||||
<tbody></tbody>
|
||||
<tbody id="walletInventoryBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,7 +107,7 @@
|
||||
</div>
|
||||
</main>
|
||||
<footer class="app-footer bg-dark text-white-50 d-flex align-items-center px-4">
|
||||
<span>KSP Wallet Desk · Config composition pre.003</span>
|
||||
<span>KSP Wallet Desk · locked inventory pre.004</span>
|
||||
</footer>
|
||||
<script type="module" src="./ts/main.ts"></script>
|
||||
</body>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// file: crates/ksp-app-wallet-desk/frontend/ts/main.ts
|
||||
// version: 3
|
||||
// version: 4
|
||||
|
||||
import "bootstrap";
|
||||
import DataTable from "datatables.net-bs5";
|
||||
@@ -8,7 +8,10 @@ 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 { frontendDebug, frontendInfo, frontendTrace, installFrontendConsoleBridge } from "./frontend_log";
|
||||
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";
|
||||
|
||||
@@ -95,20 +98,169 @@ function bindNavigation(): void {
|
||||
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: "L'inventaire Wallet sera branché en pre.004.",
|
||||
emptyTable: "Aucun wallet .kspwallet disponible.",
|
||||
search: "Filtrer :",
|
||||
zeroRecords: "Aucun wallet correspondant.",
|
||||
},
|
||||
});
|
||||
frontendDebug("main", "Wallet inventory DataTable initialized", { phase: "pre.003-config-wallet" });
|
||||
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 {
|
||||
@@ -158,7 +310,7 @@ function renderRuntimeStatus(status: RuntimeStatusDto): void {
|
||||
phase.textContent = status.shellPhase;
|
||||
}
|
||||
if (shellStatus) {
|
||||
shellStatus.textContent = "Config Wallet Desk résolue ; répertoire Wallet prêt.";
|
||||
shellStatus.textContent = "Config résolue ; inventaire Wallet prêt.";
|
||||
}
|
||||
frontendTrace("main", "Wallet Desk runtime status rendered", {
|
||||
compositeProfile: status.activeCompositeProfile,
|
||||
@@ -177,7 +329,13 @@ async function loadRuntimeStatus(): Promise<void> {
|
||||
function bindShellActions(): void {
|
||||
document.querySelectorAll<HTMLButtonElement>("[data-shell-action]").forEach(button => {
|
||||
button.addEventListener("click", () => {
|
||||
frontendDebug("main", "Wallet Desk shell action clicked", { action: button.dataset.shellAction ?? "unknown", enabled: !button.disabled });
|
||||
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");
|
||||
@@ -188,17 +346,19 @@ async function initializeMain(): Promise<void> {
|
||||
frontendInfo("main", "Wallet Desk main frontend loaded", { windowLabel });
|
||||
bindFrontendInteractions();
|
||||
bindNavigation();
|
||||
bindWalletTableSelection();
|
||||
bindShellActions();
|
||||
initializeWalletTable();
|
||||
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 n'a pas pu être chargé.";
|
||||
shellStatus.textContent = "Le statut runtime ou l'inventaire Wallet n'a pas pu être chargé.";
|
||||
}
|
||||
frontendTrace("main", "Wallet Desk shell status replaced", { status: "runtime_error" });
|
||||
frontendWarn("main", "Wallet Desk startup data load failed");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user