This commit is contained in:
2026-04-21 18:46:52 +02:00
parent dcee5c9447
commit e754cb63bf
14 changed files with 1691 additions and 200 deletions

View File

@@ -0,0 +1,157 @@
<!-- file: kb_app/frontend/demo_ws.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo Ws Subscribe</title>
<link rel="stylesheet" href="sass/main.scss" />
</head>
<body class="bg-body-tertiary">
<header class="app-header">
<nav class="navbar navbar-expand-lg h-100 py-0 bg-light text-dark">
<div class="container my-0">
<a class="navbar-brand d-flex align-items-center" href="/">
<img alt="Logo" src="imgs/logo.png" class="app-logo" />
<span class="ps-2 fs-4 fw-bold text-primary font-logo">Khadhroony-BoBoBot</span>
</a>
<div class="ms-auto">
<span id="demoWsStatusBadge" class="badge text-bg-secondary">Disconnected</span>
</div>
</div>
</nav>
</header>
<main class="app-main">
<div class="osb-scrollable pt-1 pb-4" data-simplebar>
<div class="container py-4">
<div class="row g-4">
<div class="col-12">
<div class="card shadow-sm border-0">
<div class="card-body">
<h1 class="h4 mb-3">Demo Ws Subscribe</h1>
<p class="text-body-secondary mb-0">
Fenêtre de test complète pour les souscriptions WebSocket Solana en mode raw ou typed.
</p>
</div>
</div>
</div>
<div class="col-12 col-xxl-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body">
<h2 class="h5 mb-3">Connexion</h2>
<div class="mb-3">
<label for="demoWsEndpointSelect" class="form-label">Endpoint</label>
<select id="demoWsEndpointSelect" class="form-select"></select>
</div>
<div class="d-flex flex-wrap gap-2 mb-3">
<button id="demoWsConnectButton" type="button" class="btn btn-success">Connect</button>
<button id="demoWsDisconnectButton" type="button" class="btn btn-danger">Disconnect</button>
</div>
<div class="small text-body-secondary">
<div><strong>State:</strong> <span id="demoWsStateText">Disconnected</span></div>
<div><strong>Endpoint:</strong> <span id="demoWsEndpointText">-</span></div>
</div>
<hr />
<h2 class="h5 mb-3">Souscription</h2>
<div class="mb-3">
<label for="demoWsMethodSelect" class="form-label">Méthode</label>
<select id="demoWsMethodSelect" class="form-select">
<option value="account">account</option>
<option value="block">block</option>
<option value="logs">logs</option>
<option value="program">program</option>
<option value="root">root</option>
<option value="signature">signature</option>
<option value="slot" selected>slot</option>
<option value="slotsUpdates">slotsUpdates</option>
<option value="vote">vote</option>
</select>
</div>
<div class="mb-3">
<label for="demoWsModeSelect" class="form-label">Mode</label>
<select id="demoWsModeSelect" class="form-select">
<option value="typed" selected>typed</option>
<option value="raw">raw</option>
</select>
</div>
<div id="demoWsTargetGroup" class="mb-3">
<label for="demoWsTargetInput" id="demoWsTargetLabel" class="form-label">Target</label>
<input id="demoWsTargetInput" type="text" class="form-control" spellcheck="false" />
</div>
<div id="demoWsFilterGroup" class="mb-3">
<label for="demoWsFilterTextarea" class="form-label">Filter JSON</label>
<textarea
id="demoWsFilterTextarea"
class="form-control font-monospace"
rows="5"
spellcheck="false"
></textarea>
</div>
<div id="demoWsConfigGroup" class="mb-3">
<label for="demoWsConfigTextarea" class="form-label">Config JSON</label>
<textarea
id="demoWsConfigTextarea"
class="form-control font-monospace"
rows="6"
spellcheck="false"
></textarea>
</div>
<div class="d-flex flex-wrap gap-2 mb-3">
<button id="demoWsSubscribeButton" type="button" class="btn btn-primary">Subscribe</button>
<button id="demoWsUnsubscribeButton" type="button" class="btn btn-warning">Unsubscribe current</button>
<button id="demoWsClearLogButton" type="button" class="btn btn-outline-secondary">Clear log</button>
</div>
<div class="small text-body-secondary">
<div><strong>Current subscription:</strong> <span id="demoWsSubscriptionText">-</span></div>
<div><strong>Request:</strong> <span id="demoWsRequestText">-</span></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xxl-8">
<div class="card shadow-sm border-0 h-100">
<div class="card-body">
<h2 class="h5 mb-3">Logs</h2>
<textarea
id="demoWsLogTextarea"
class="form-control font-monospace"
rows="28"
readonly
spellcheck="false"
></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="app-footer bg-dark text-light">
<div class="container h-100 d-flex align-items-center">
<div class="row flex-grow-1 align-items-center">
<div class="col-12 col-md-6 text-center text-small my-1 my-md-0">
&copy; 2026 SASEDEV — Demo Ws
</div>
</div>
</div>
</footer>
<script type="module" src="ts/demo_ws.ts" defer></script>
</body>
</html>

View File

@@ -15,6 +15,12 @@
<img alt="Logo" src="imgs/logo.png" class="app-logo" />
<span class="ps-2 fs-4 fw-bold text-primary font-logo">Khadhroony-BoBoBot</span>
</a>
<div class="ms-auto d-flex align-items-center gap-2">
<button id="openDemoWsButton" type="button" class="btn btn-outline-primary">
Demo Ws
</button>
</div>
</div>
</nav>
</header>
@@ -31,30 +37,25 @@
<div class="col-12 col-xl-8">
<div class="card shadow-sm border-0 h-100">
<div class="card-body text-start">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-3">
<div>
<h3 class="h5 card-title mb-1">WebSocket transport</h3>
<p class="text-body-secondary mb-0">
Démarre ou arrête tous les endpoints WebSocket activés dans <code>config.json</code>.
</p>
</div>
<div class="d-flex align-items-center gap-2">
<span id="wsStatusBadge" class="badge text-bg-secondary">Disconnected</span>
<button id="wsConnectButton" class="btn btn-success" type="button">Start</button>
<button id="wsDisconnectButton" class="btn btn-danger" type="button" disabled>Stop</button>
</div>
<h3 class="h5 card-title mb-3">Desktop shell</h3>
<p class="text-body-secondary mb-3">
La fenêtre principale reste volontairement légère.
Les tests WebSocket manuels sont disponibles dans la fenêtre dédiée
<strong>Demo Ws</strong>.
</p>
<div class="d-flex flex-wrap gap-2">
<button id="openDemoWsButtonSecondary" type="button" class="btn btn-primary">
Ouvrir Demo Ws
</button>
</div>
<div class="mb-2">
<label for="wsLogTextarea" class="form-label fw-semibold">Transport log</label>
<textarea
id="wsLogTextarea"
class="form-control font-monospace"
rows="18"
readonly
spellcheck="false"
></textarea>
</div>
<hr />
<p class="mb-0 text-body-secondary">
Cette fenêtre sert de point dentrée applicatif. Les démonstrations de
souscriptions Solana live sont isolées dans la fenêtre de test dédiée.
</p>
</div>
</div>
</div>

View File

@@ -0,0 +1,477 @@
// file: kb_app/frontend/ts/demo_ws.ts
import * as bootstrap from "bootstrap";
import "simplebar";
import ResizeObserver from "resize-observer-polyfill";
import { invoke } from "@tauri-apps/api/core";
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
import { trace, takeoverConsole } from "@fltsci/tauri-plugin-tracing";
(window as Window & typeof globalThis & { bootstrap?: typeof bootstrap }).bootstrap = bootstrap;
(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
interface DemoWsEndpointSummary {
name: string;
resolvedUrl: string;
provider: string;
enabled: boolean;
roles: string[];
}
interface DemoWsStatusPayload {
connectionState: string;
endpointName: string | null;
endpointUrl: string | null;
currentSubscriptionId: number | null;
currentSubscribeMethod: string | null;
currentUnsubscribeMethod: string | null;
currentNotificationMethod: string | null;
}
interface DemoWsSubscribeRequest {
method: string;
mode: string;
target: string | null;
filterJson: string | null;
configJson: string | null;
}
function shortenLine(line: string, maxChars = 3000): string {
if (line.length <= maxChars) {
return line;
}
return `${line.slice(0, maxChars)} …[truncated ${line.length - maxChars} chars]`;
}
function appendLogLine(textarea: HTMLTextAreaElement, line: string): void {
const now = new Date();
const timestamp = now.toLocaleTimeString("fr-CH", { hour12: false });
const safeLine = shortenLine(line, 3000);
const existingLines = textarea.value === "" ? [] : textarea.value.split("\n");
existingLines.push(`[${timestamp}] ${safeLine}`);
const maxLines = 800;
const trimmedLines = existingLines.length > maxLines
? existingLines.slice(existingLines.length - maxLines)
: existingLines;
textarea.value = trimmedLines.join("\n");
textarea.scrollTop = textarea.scrollHeight;
}
function setStatusBadge(badge: HTMLSpanElement, state: string): void {
badge.textContent = state;
if (state === "Connected") {
badge.className = "badge text-bg-success";
return;
}
if (state === "Connecting" || state === "Disconnecting") {
badge.className = "badge text-bg-warning";
return;
}
badge.className = "badge text-bg-secondary";
}
function methodSupportsTypedMode(method: string): boolean {
return ["account", "block", "logs", "program", "signature"].includes(method);
}
function methodNeedsTarget(method: string): boolean {
return ["account", "program", "signature"].includes(method);
}
function methodNeedsFilter(method: string): boolean {
return ["block", "logs"].includes(method);
}
function methodNeedsConfig(method: string): boolean {
return ["account", "block", "logs", "program", "signature"].includes(method);
}
function targetLabelForMethod(method: string): string {
if (method === "account") return "Account pubkey";
if (method === "program") return "Program id";
if (method === "signature") return "Signature";
return "Target";
}
function methodPreset(method: string, mode: string): {
target: string;
filterJson: string;
configJson: string;
} {
if (method === "account") {
return {
target: "11111111111111111111111111111111",
filterJson: "",
configJson: mode === "typed"
? `{"encoding":"base64","commitment":"confirmed"}`
: `{"encoding":"base64","commitment":"confirmed"}`,
};
}
if (method === "block") {
return {
target: "",
filterJson: `{"mentionsAccountOrProgram":"11111111111111111111111111111111"}`,
configJson: mode === "typed"
? `{"commitment":"confirmed","encoding":"base64","transactionDetails":"signatures","showRewards":false,"maxSupportedTransactionVersion":0}`
: `{"commitment":"confirmed","encoding":"base64","transactionDetails":"signatures","showRewards":false,"maxSupportedTransactionVersion":0}`,
};
}
if (method === "logs") {
return {
target: "",
filterJson: `{"mentions":["11111111111111111111111111111111"]}`,
configJson: `{"commitment":"confirmed"}`,
};
}
if (method === "program") {
return {
target: "TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA",
filterJson: "",
configJson: mode === "typed"
? `{"encoding":"base64","commitment":"confirmed","filters":[]}`
: `{"encoding":"base64","commitment":"confirmed","filters":[]}`,
};
}
if (method === "signature") {
return {
target: "2EBVM6cB8vAAD93Ktr6Vd8p67XPbQzCJX47MpReuiCXJAtcjaxpvWpcg9Ege1Nr5Tk3a2GFrByT7WPBjdsTycY9b",
filterJson: "",
configJson: `{"commitment":"confirmed","enableReceivedNotification":true}`,
};
}
return {
target: "",
filterJson: "",
configJson: "",
};
}
function updateFormVisibility(
methodSelect: HTMLSelectElement,
modeSelect: HTMLSelectElement,
targetGroup: HTMLDivElement,
targetLabel: HTMLLabelElement,
targetInput: HTMLInputElement,
filterGroup: HTMLDivElement,
filterTextarea: HTMLTextAreaElement,
configGroup: HTMLDivElement,
configTextarea: HTMLTextAreaElement,
): void {
const method = methodSelect.value;
const supportsTypedMode = methodSupportsTypedMode(method);
modeSelect.disabled = !supportsTypedMode;
if (!supportsTypedMode) {
modeSelect.value = "typed";
}
targetGroup.style.display = methodNeedsTarget(method) ? "" : "none";
filterGroup.style.display = methodNeedsFilter(method) ? "" : "none";
configGroup.style.display = methodNeedsConfig(method) ? "" : "none";
targetLabel.textContent = targetLabelForMethod(method);
const preset = methodPreset(method, modeSelect.value);
targetInput.value = preset.target;
filterTextarea.value = preset.filterJson;
configTextarea.value = preset.configJson;
}
function applyStatusToUi(
status: DemoWsStatusPayload,
statusBadge: HTMLSpanElement,
stateText: HTMLSpanElement,
endpointText: HTMLSpanElement,
subscriptionText: HTMLSpanElement,
connectButton: HTMLButtonElement,
disconnectButton: HTMLButtonElement,
subscribeButton: HTMLButtonElement,
unsubscribeButton: HTMLButtonElement,
): void {
setStatusBadge(statusBadge, status.connectionState);
stateText.textContent = status.connectionState;
endpointText.textContent = status.endpointName && status.endpointUrl
? `${status.endpointName} (${status.endpointUrl})`
: "-";
if (status.currentSubscriptionId !== null) {
subscriptionText.textContent =
`${status.currentSubscribeMethod ?? "?"} / #${status.currentSubscriptionId} / ${status.currentNotificationMethod ?? "?"}`;
} else {
subscriptionText.textContent = "-";
}
const isConnected = status.connectionState === "Connected";
const isBusy = status.connectionState === "Connecting" || status.connectionState === "Disconnecting";
connectButton.disabled = isConnected || isBusy;
disconnectButton.disabled = !isConnected && status.connectionState !== "Disconnecting";
subscribeButton.disabled = !isConnected || isBusy;
unsubscribeButton.disabled = !isConnected || isBusy || status.currentSubscriptionId === null;
}
document.addEventListener("DOMContentLoaded", async () => {
void takeoverConsole();
const sidebarToggle = document.querySelector<HTMLButtonElement>('#sidebarToggle');
if (sidebarToggle) {
// restaurer létat depuis localStorage
if (localStorage.getItem('sidebar-toggle') === 'true') {
document.body.classList.add('sidenav-toggled');
}
sidebarToggle.addEventListener('click', (event) => {
event.preventDefault();
document.body.classList.toggle('sidenav-toggled');
localStorage.setItem('sidebar-toggle', document.body.classList.contains('sidenav-toggled') ? 'true' : 'false');
});
}
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
Array.from(tooltipTriggerList).map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
const toastElList = document.querySelectorAll('.toast');
Array.from(toastElList).map(toastEl => new bootstrap.Toast(toastEl));
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
Array.from(popoverTriggerList).map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
const gobackto = location.pathname + location.search;
document.querySelectorAll<HTMLAnchorElement>('a[data-setlang]').forEach((a) => {
const href = a.getAttribute("href");
if (!href) return; // pas de href => on ignore
const url = new URL(href, location.origin);
url.searchParams.set("gobackto", gobackto);
// conserve une URL relative (path + query)
a.setAttribute("href", url.pathname + "?" + url.searchParams.toString());
});
const endpointSelect = document.querySelector<HTMLSelectElement>("#demoWsEndpointSelect");
const methodSelect = document.querySelector<HTMLSelectElement>("#demoWsMethodSelect");
const modeSelect = document.querySelector<HTMLSelectElement>("#demoWsModeSelect");
const targetGroup = document.querySelector<HTMLDivElement>("#demoWsTargetGroup");
const targetLabel = document.querySelector<HTMLLabelElement>("#demoWsTargetLabel");
const targetInput = document.querySelector<HTMLInputElement>("#demoWsTargetInput");
const filterGroup = document.querySelector<HTMLDivElement>("#demoWsFilterGroup");
const filterTextarea = document.querySelector<HTMLTextAreaElement>("#demoWsFilterTextarea");
const configGroup = document.querySelector<HTMLDivElement>("#demoWsConfigGroup");
const configTextarea = document.querySelector<HTMLTextAreaElement>("#demoWsConfigTextarea");
const statusBadge = document.querySelector<HTMLSpanElement>("#demoWsStatusBadge");
const stateText = document.querySelector<HTMLSpanElement>("#demoWsStateText");
const endpointText = document.querySelector<HTMLSpanElement>("#demoWsEndpointText");
const subscriptionText = document.querySelector<HTMLSpanElement>("#demoWsSubscriptionText");
const requestText = document.querySelector<HTMLSpanElement>("#demoWsRequestText");
const connectButton = document.querySelector<HTMLButtonElement>("#demoWsConnectButton");
const disconnectButton = document.querySelector<HTMLButtonElement>("#demoWsDisconnectButton");
const subscribeButton = document.querySelector<HTMLButtonElement>("#demoWsSubscribeButton");
const unsubscribeButton = document.querySelector<HTMLButtonElement>("#demoWsUnsubscribeButton");
const clearLogButton = document.querySelector<HTMLButtonElement>("#demoWsClearLogButton");
const logTextarea = document.querySelector<HTMLTextAreaElement>("#demoWsLogTextarea");
if (
!endpointSelect || !methodSelect || !modeSelect || !targetGroup || !targetLabel || !targetInput ||
!filterGroup || !filterTextarea || !configGroup || !configTextarea || !statusBadge ||
!stateText || !endpointText || !subscriptionText || !requestText || !connectButton ||
!disconnectButton || !subscribeButton || !unsubscribeButton || !clearLogButton || !logTextarea
) {
trace("demo_ws UI controls not found");
return;
}
let unlistenLogEvent: UnlistenFn | null = null;
let unlistenStatusEvent: UnlistenFn | null = null;
try {
unlistenLogEvent = await listen<string>("demo-ws-log", (event) => {
appendLogLine(logTextarea, event.payload);
});
unlistenStatusEvent = await listen<DemoWsStatusPayload>("demo-ws-status", (event) => {
applyStatusToUi(
event.payload,
statusBadge,
stateText,
endpointText,
subscriptionText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
});
} catch (error) {
appendLogLine(logTextarea, `[ui] event listen error: ${String(error)}`);
}
try {
const endpoints = await invoke<DemoWsEndpointSummary[]>("demo_ws_list_endpoints");
endpointSelect.innerHTML = "";
for (const endpoint of endpoints) {
const option = document.createElement("option");
option.value = endpoint.name;
option.textContent = `${endpoint.name}${endpoint.provider}${endpoint.resolvedUrl}`;
option.disabled = !endpoint.enabled;
endpointSelect.appendChild(option);
}
} catch (error) {
appendLogLine(logTextarea, `[ui] endpoint list error: ${String(error)}`);
}
updateFormVisibility(
methodSelect,
modeSelect,
targetGroup,
targetLabel,
targetInput,
filterGroup,
filterTextarea,
configGroup,
configTextarea,
);
methodSelect.addEventListener("change", () => {
updateFormVisibility(
methodSelect,
modeSelect,
targetGroup,
targetLabel,
targetInput,
filterGroup,
filterTextarea,
configGroup,
configTextarea,
);
});
modeSelect.addEventListener("change", () => {
updateFormVisibility(
methodSelect,
modeSelect,
targetGroup,
targetLabel,
targetInput,
filterGroup,
filterTextarea,
configGroup,
configTextarea,
);
});
try {
const status = await invoke<DemoWsStatusPayload>("demo_ws_get_status");
applyStatusToUi(
status,
statusBadge,
stateText,
endpointText,
subscriptionText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
} catch (error) {
appendLogLine(logTextarea, `[ui] initial status error: ${String(error)}`);
}
appendLogLine(logTextarea, "[ui] demo_ws window loaded");
connectButton.addEventListener("click", async () => {
try {
const status = await invoke<DemoWsStatusPayload>("demo_ws_connect", {
endpointName: endpointSelect.value,
});
applyStatusToUi(
status,
statusBadge,
stateText,
endpointText,
subscriptionText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
} catch (error) {
appendLogLine(logTextarea, `[ui] connect error: ${String(error)}`);
}
});
disconnectButton.addEventListener("click", async () => {
try {
const status = await invoke<DemoWsStatusPayload>("demo_ws_disconnect");
applyStatusToUi(
status,
statusBadge,
stateText,
endpointText,
subscriptionText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
} catch (error) {
appendLogLine(logTextarea, `[ui] disconnect error: ${String(error)}`);
}
});
subscribeButton.addEventListener("click", async () => {
const request: DemoWsSubscribeRequest = {
method: methodSelect.value,
mode: modeSelect.value,
target: targetInput.value.trim() === "" ? null : targetInput.value.trim(),
filterJson: filterTextarea.value.trim() === "" ? null : filterTextarea.value.trim(),
configJson: configTextarea.value.trim() === "" ? null : configTextarea.value.trim(),
};
try {
const requestId = await invoke<number>("demo_ws_subscribe", { request });
requestText.textContent = `request_id=${requestId}`;
appendLogLine(logTextarea, `[ui] subscribe request sent: request_id=${requestId}`);
} catch (error) {
appendLogLine(logTextarea, `[ui] subscribe error: ${String(error)}`);
}
});
unsubscribeButton.addEventListener("click", async () => {
try {
const requestId = await invoke<number>("demo_ws_unsubscribe_current");
requestText.textContent = `unsubscribe_request_id=${requestId}`;
appendLogLine(logTextarea, `[ui] unsubscribe request sent: request_id=${requestId}`);
} catch (error) {
appendLogLine(logTextarea, `[ui] unsubscribe error: ${String(error)}`);
}
});
clearLogButton.addEventListener("click", () => {
logTextarea.value = "";
});
window.addEventListener("beforeunload", () => {
if (unlistenLogEvent) {
unlistenLogEvent();
}
if (unlistenStatusEvent) {
unlistenStatusEvent();
}
});
trace("demo_ws window loaded");
});

View File

@@ -4,51 +4,17 @@ import * as bootstrap from "bootstrap";
import "simplebar";
import ResizeObserver from "resize-observer-polyfill";
import { invoke } from "@tauri-apps/api/core";
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
//import { error } from "@fltsci/tauri-plugin-tracing";
//import { info } from "@fltsci/tauri-plugin-tracing";
import { trace, takeoverConsole } from "@fltsci/tauri-plugin-tracing";
(window as Window & typeof globalThis & { bootstrap?: typeof bootstrap }).bootstrap = bootstrap;
(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
function appendLogLine(textarea: HTMLTextAreaElement, line: string): void {
const now = new Date();
const timestamp = now.toLocaleTimeString("fr-CH", { hour12: false });
textarea.value += `[${timestamp}] ${line}\n`;
textarea.scrollTop = textarea.scrollHeight;
}
function setRunningState(
isRunning: boolean,
statusBadge: HTMLSpanElement,
connectButton: HTMLButtonElement,
disconnectButton: HTMLButtonElement,
): void {
if (isRunning) {
statusBadge.textContent = "Connected";
statusBadge.className = "badge text-bg-success";
connectButton.disabled = true;
disconnectButton.disabled = false;
return;
async function openDemoWsWindow(): Promise<void> {
try {
await invoke("open_demo_ws_window");
} catch (error) {
console.error("open_demo_ws_window failed:", error);
}
statusBadge.textContent = "Disconnected";
statusBadge.className = "badge text-bg-secondary";
connectButton.disabled = false;
disconnectButton.disabled = true;
}
function setBusyState(
label: string,
statusBadge: HTMLSpanElement,
connectButton: HTMLButtonElement,
disconnectButton: HTMLButtonElement,
): void {
statusBadge.textContent = label;
statusBadge.className = "badge text-bg-warning";
connectButton.disabled = true;
disconnectButton.disabled = true;
}
document.addEventListener("DOMContentLoaded", async () => {
void takeoverConsole();
@@ -86,60 +52,20 @@ document.addEventListener("DOMContentLoaded", async () => {
a.setAttribute("href", url.pathname + "?" + url.searchParams.toString());
});
const connectButton = document.querySelector<HTMLButtonElement>("#wsConnectButton");
const disconnectButton = document.querySelector<HTMLButtonElement>("#wsDisconnectButton");
const statusBadge = document.querySelector<HTMLSpanElement>("#wsStatusBadge");
const logTextarea = document.querySelector<HTMLTextAreaElement>("#wsLogTextarea");
const openDemoWsButton = document.querySelector<HTMLButtonElement>("#openDemoWsButton");
const openDemoWsButtonSecondary = document.querySelector<HTMLButtonElement>("#openDemoWsButtonSecondary");
if (!connectButton || !disconnectButton || !statusBadge || !logTextarea) {
trace("main UI controls not found");
return;
}
let unlistenLogEvent: UnlistenFn | null = null;
try {
unlistenLogEvent = await listen<string>("kb-log", (event) => {
appendLogLine(logTextarea, event.payload);
if (openDemoWsButton) {
openDemoWsButton.addEventListener("click", () => {
void openDemoWsWindow();
});
} catch (error) {
appendLogLine(logTextarea, `[ui] event listen error: ${String(error)}`);
}
setRunningState(false, statusBadge, connectButton, disconnectButton);
appendLogLine(logTextarea, "[ui] main window loaded");
connectButton.addEventListener("click", async () => {
setBusyState("Starting", statusBadge, connectButton, disconnectButton);
try {
const startedCount = await invoke<number>("start_ws_clients");
appendLogLine(logTextarea, `[ui] started ${startedCount} websocket client(s)`);
setRunningState(true, statusBadge, connectButton, disconnectButton);
} catch (error) {
appendLogLine(logTextarea, `[ui] start error: ${String(error)}`);
setRunningState(false, statusBadge, connectButton, disconnectButton);
}
});
disconnectButton.addEventListener("click", async () => {
setBusyState("Stopping", statusBadge, connectButton, disconnectButton);
try {
const stoppedCount = await invoke<number>("stop_ws_clients");
appendLogLine(logTextarea, `[ui] stopped ${stoppedCount} websocket client(s)`);
setRunningState(false, statusBadge, connectButton, disconnectButton);
} catch (error) {
appendLogLine(logTextarea, `[ui] stop error: ${String(error)}`);
setRunningState(true, statusBadge, connectButton, disconnectButton);
}
});
window.addEventListener("beforeunload", () => {
if (unlistenLogEvent) {
unlistenLogEvent();
}
});
if (openDemoWsButtonSecondary) {
openDemoWsButtonSecondary.addEventListener("click", () => {
void openDemoWsWindow();
});
}
trace("window loaded");