Files
khadhroony-bobobot/kb_app/frontend/demo_http.html
2026-04-22 19:04:22 +02:00

166 lines
9.8 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- file: kb_app/frontend/demo_http.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo Http</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="demoHttpStatusBadge" class="badge text-bg-secondary">Ready</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 Http</h1>
<p class="text-body-secondary mb-0">
Fenêtre de test manuelle pour les requêtes HTTP Solana via le pool dendpoints configurés.
</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">Requête</h2>
<div class="mb-3">
<label for="demoHttpRoleSelect" class="form-label">Role</label>
<select id="demoHttpRoleSelect" class="form-select">
<option value="http_queries">http_queries</option>
<option value="http_transactions">http_transactions</option>
<option value="http_heavy">http_heavy</option>
<option value="http_fallback">http_fallback</option>
</select>
<div class="form-text">
Le rôle détermine quel endpoint HTTP du pool sera sélectionné.
</div>
</div>
<div class="mb-3">
<label for="demoHttpMethodSelect" class="form-label">Méthode</label>
<select id="demoHttpMethodSelect" class="form-select">
<option value="getHealth">getHealth</option>
<option value="getVersion">getVersion</option>
<option value="getSlot">getSlot</option>
<option value="getBlockHeight">getBlockHeight</option>
<option value="getLatestBlockhash">getLatestBlockhash</option>
<option value="getBalance">getBalance</option>
<option value="getAccountInfo">getAccountInfo</option>
<option value="getProgramAccounts">getProgramAccounts</option>
<option value="getSignaturesForAddress">getSignaturesForAddress</option>
<option value="getTransaction">getTransaction</option>
<option value="sendTransaction">sendTransaction</option>
</select>
</div>
<div id="demoHttpFirstArgGroup" class="mb-3">
<label for="demoHttpFirstArgInput" id="demoHttpFirstArgLabel" class="form-label">First arg</label>
<input id="demoHttpFirstArgInput" type="text" class="form-control" spellcheck="false" />
<div id="demoHttpFirstArgHelp" class="form-text">
Adresse, program id, signature ou transaction encodée selon la méthode.
</div>
</div>
<div id="demoHttpConfigGroup" class="mb-3">
<label for="demoHttpConfigTextarea" class="form-label">Config JSON</label>
<textarea id="demoHttpConfigTextarea" class="form-control font-monospace" rows="8" spellcheck="false"></textarea>
<div id="demoHttpConfigHelp" class="form-text">
Configuration JSON optionnelle.
</div>
</div>
<div class="d-flex flex-wrap gap-2 mb-3">
<button id="demoHttpExecuteButton" type="button" class="btn btn-primary">Execute</button>
<button id="demoHttpRefreshPoolButton" type="button" class="btn btn-outline-primary">Refresh pool</button>
<button id="demoHttpCopyResponseButton" type="button" class="btn btn-outline-secondary">Copy response</button>
<button id="demoHttpClearLogButton" type="button" class="btn btn-outline-secondary">Clear log</button>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" id="demoHttpPrettyToggle" checked />
<label class="form-check-label" for="demoHttpPrettyToggle">Pretty JSON</label>
</div>
<div class="small text-body-secondary">
<div><strong>Endpoint:</strong> <span id="demoHttpLastEndpointText">-</span></div>
<div><strong>Provider:</strong> <span id="demoHttpLastProviderText">-</span></div>
<div><strong>Method class:</strong> <span id="demoHttpLastMethodClassText">-</span></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xxl-8">
<div class="card shadow-sm border-0 mb-4">
<div class="card-body">
<h2 class="h5 mb-3">Pool HTTP</h2>
<div class="table-responsive">
<table class="table table-sm align-middle mb-0">
<thead>
<tr>
<th>Endpoint</th>
<th>Status</th>
<th>Paused</th>
<th>Conc.</th>
</tr>
</thead>
<tbody id="demoHttpPoolTableBody"></tbody>
</table>
</div>
</div>
</div>
<div class="card shadow-sm border-0 mb-4">
<div class="card-body">
<h2 class="h5 mb-3">Latest response</h2>
<textarea id="demoHttpResponseTextarea" class="form-control font-monospace" rows="12" readonly spellcheck="false"></textarea>
</div>
</div>
<div class="card shadow-sm border-0">
<div class="card-body">
<h2 class="h5 mb-3">Logs</h2>
<textarea id="demoHttpLogTextarea" class="form-control font-monospace" rows="14" 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 Http
</div>
</div>
</div>
</footer>
<script type="module" src="ts/demo_http.ts" defer></script>
</body>
</html>