Files
khadhroony-bot3/kb-app-demo-desktop/frontend/demo_backfill.html
2026-07-25 19:59:48 +02:00

188 lines
15 KiB
HTML

<!-- file: kb-app-demo-desktop/frontend/demo_backfill.html -->
<!-- version: 2 -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Khadhroony Bot3 - Backfill 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="main.html">
<img alt="Logo" src="imgs/logo.png" class="app-logo" />
<span class="ps-2 fs-4 fw-bold text-primary font-logo">Backfill HTTP</span>
</a>
<div class="ms-auto d-flex align-items-center gap-2">
<span id="backfillStatusBadge" class="badge text-bg-secondary">Initialisation</span>
<button id="cancelBackfillButton" class="btn btn-sm btn-outline-danger" type="button" disabled>Arrêter</button>
</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="card shadow-sm border-0 mb-4">
<div class="card-body">
<h1 class="h3 card-title">Backfill transactionnel canonique</h1>
<p class="text-body-secondary mb-0">Les signatures sont découvertes avec <code>getSignaturesForAddress</code>, hydratées avec <code>getTransaction</code>, puis stockées dans les tables canoniques et d'observation. Une seule campagne peut fonctionner à la fois.</p>
</div>
</div>
<div class="accordion shadow-sm" id="backfillAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="sharedSettingsHeading">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#sharedSettingsCollapse" aria-expanded="true" aria-controls="sharedSettingsCollapse">Paramètres communs</button>
</h2>
<div id="sharedSettingsCollapse" class="accordion-collapse collapse show" aria-labelledby="sharedSettingsHeading" data-bs-parent="#backfillAccordion">
<div class="accordion-body">
<div class="row g-3">
<div class="col-12 col-md-6">
<label class="form-label" for="backfillRoleSelect">Rôle HTTP</label>
<select id="backfillRoleSelect" class="form-select"></select>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="backfillCommitmentSelect">Commitment</label>
<select id="backfillCommitmentSelect" class="form-select">
<option value="confirmed">confirmed</option>
<option value="finalized">finalized</option>
</select>
</div>
<div class="col-6 col-lg-3">
<label class="form-label" for="backfillPageSizeInput">Taille de page</label>
<input id="backfillPageSizeInput" class="form-control" type="number" min="1" max="1000" />
</div>
<div class="col-6 col-lg-3">
<label class="form-label" for="backfillMaxPagesInput">Pages maximales</label>
<input id="backfillMaxPagesInput" class="form-control" type="number" min="1" />
</div>
<div class="col-6 col-lg-3">
<label class="form-label" for="backfillConcurrencyInput">Concurrence</label>
<input id="backfillConcurrencyInput" class="form-control" type="number" min="1" />
</div>
<div class="col-6 col-lg-3">
<label class="form-label" for="backfillRetriesInput">Retries</label>
<input id="backfillRetriesInput" class="form-control" type="number" min="0" />
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="signatureBackfillHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#signatureBackfillCollapse" aria-expanded="false" aria-controls="signatureBackfillCollapse">Ensemble de signatures</button>
</h2>
<div id="signatureBackfillCollapse" class="accordion-collapse collapse" aria-labelledby="signatureBackfillHeading" data-bs-parent="#backfillAccordion">
<div class="accordion-body">
<label class="form-label" for="explicitSignaturesTextarea">Signatures, une par ligne</label>
<textarea id="explicitSignaturesTextarea" class="form-control font-monospace mb-3" rows="10" placeholder="5abc...&#10;4def..."></textarea>
<button class="btn btn-primary backfill-start-button" type="button" data-backfill-mode="explicit_signatures">Lancer le backfill</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="programBackfillHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#programBackfillCollapse" aria-expanded="false" aria-controls="programBackfillCollapse">Programme Solana</button>
</h2>
<div id="programBackfillCollapse" class="accordion-collapse collapse" aria-labelledby="programBackfillHeading" data-bs-parent="#backfillAccordion">
<div class="accordion-body">
<div class="row g-3 mb-3">
<div class="col-12"><label class="form-label" for="programAddressInput">Program ID</label><input id="programAddressInput" class="form-control font-monospace" /></div>
<div class="col-12"><label class="form-label" for="programAnchorInput">Signature d'ancrage</label><input id="programAnchorInput" class="form-control font-monospace" />
<div class="form-text">Optionnelle pour « Avant, plus anciennes » : vide, la recherche commence aux transactions les plus récentes. Obligatoire pour « Après, plus récentes ».</div>
</div>
<div class="col-6"><label class="form-label" for="programDirectionSelect">Direction</label><select id="programDirectionSelect" class="form-select">
<option value="before">Avant, plus anciennes</option>
<option value="after">Après, plus récentes</option>
</select></div>
<div class="col-6"><label class="form-label" for="programLimitInput">Nombre de signatures</label><input id="programLimitInput" class="form-control" type="number" min="1" value="100" /></div>
</div>
<button class="btn btn-primary backfill-start-button" type="button" data-backfill-mode="program">Lancer le backfill programme</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="tokenBackfillHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tokenBackfillCollapse" aria-expanded="false" aria-controls="tokenBackfillCollapse">Token</button>
</h2>
<div id="tokenBackfillCollapse" class="accordion-collapse collapse" aria-labelledby="tokenBackfillHeading" data-bs-parent="#backfillAccordion">
<div class="accordion-body">
<div class="row g-3 mb-3">
<div class="col-12"><label class="form-label" for="tokenAddressInput">Mint du token</label><input id="tokenAddressInput" class="form-control font-monospace" /></div>
<div class="col-12"><label class="form-label" for="tokenAnchorInput">Signature d'ancrage</label><input id="tokenAnchorInput" class="form-control font-monospace" />
<div class="form-text">Optionnelle pour « Avant, plus anciennes » : vide, la recherche commence aux transactions les plus récentes. Obligatoire pour « Après, plus récentes ».</div>
</div>
<div class="col-6"><label class="form-label" for="tokenDirectionSelect">Direction</label><select id="tokenDirectionSelect" class="form-select">
<option value="before">Avant, plus anciennes</option>
<option value="after">Après, plus récentes</option>
</select></div>
<div class="col-6"><label class="form-label" for="tokenLimitInput">Nombre de signatures</label><input id="tokenLimitInput" class="form-control" type="number" min="1" value="100" /></div>
</div>
<button class="btn btn-primary backfill-start-button" type="button" data-backfill-mode="token">Lancer le backfill token</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="poolBackfillHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#poolBackfillCollapse" aria-expanded="false" aria-controls="poolBackfillCollapse">Pool</button>
</h2>
<div id="poolBackfillCollapse" class="accordion-collapse collapse" aria-labelledby="poolBackfillHeading" data-bs-parent="#backfillAccordion">
<div class="accordion-body">
<div class="row g-3 mb-3">
<div class="col-12"><label class="form-label" for="poolAddressInput">Adresse du pool</label><input id="poolAddressInput" class="form-control font-monospace" /></div>
<div class="col-12"><label class="form-label" for="poolAnchorInput">Signature d'ancrage</label><input id="poolAnchorInput" class="form-control font-monospace" />
<div class="form-text">Optionnelle pour « Avant, plus anciennes » : vide, la recherche commence aux transactions les plus récentes. Obligatoire pour « Après, plus récentes ».</div>
</div>
<div class="col-6"><label class="form-label" for="poolDirectionSelect">Direction</label><select id="poolDirectionSelect" class="form-select">
<option value="before">Avant, plus anciennes</option>
<option value="after">Après, plus récentes</option>
</select></div>
<div class="col-6"><label class="form-label" for="poolLimitInput">Nombre de signatures</label><input id="poolLimitInput" class="form-control" type="number" min="1" value="100" /></div>
</div>
<button class="btn btn-primary backfill-start-button" type="button" data-backfill-mode="pool">Lancer le backfill pool</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="backfillLogHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#backfillLogCollapse" aria-expanded="false" aria-controls="backfillLogCollapse">Journal et résultat</button>
</h2>
<div id="backfillLogCollapse" class="accordion-collapse collapse" aria-labelledby="backfillLogHeading" data-bs-parent="#backfillAccordion">
<div class="accordion-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<h3 class="h6 mb-0">Journal</h3><button id="clearBackfillLogButton" class="btn btn-sm btn-outline-secondary" type="button">Effacer</button>
</div>
<textarea id="backfillLogOutput" class="form-control font-monospace mb-3" rows="15" readonly>Aucune campagne exécutée.</textarea>
<h3 class="h6">Résumé JSON</h3>
<textarea id="backfillSummaryOutput" class="form-control font-monospace" rows="16" readonly>Aucun résultat.</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 text-center text-small my-1 my-md-0">&copy; 2026 SASEDEV</div>
</div>
</div>
</footer>
<script type="module" src="ts/demo_backfill.ts" defer></script>
</body>
</html>