feat: redirect to block sync page after birthday setup
**Motivations :** - La page birthday-setup s'arrêtait après la mise à jour de la date anniversaire - Le processus devrait continuer vers une page de synchronisation des blocs - Création d'une page dédiée pour la synchronisation des blocs **Modifications :** - Modification de birthday-setup.ts pour rediriger vers block-sync après la mise à jour de la date anniversaire - Suppression du scan complet et de la synchronisation des processus de birthday-setup - Création de la page block-sync.html avec interface de synchronisation - Création de block-sync.ts avec logique de synchronisation des blocs - Interface utilisateur avec détails de synchronisation et barre de progression **Pages affectées :** - src/pages/birthday-setup/birthday-setup.ts (redirection vers block-sync) - src/pages/block-sync/block-sync.html (nouvelle page) - src/pages/block-sync/block-sync.ts (nouvelle logique)
This commit is contained in:
parent
1f6b622c1a
commit
309e2902cf
@ -88,21 +88,16 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||||||
await services.updateDeviceBlockHeight();
|
await services.updateDeviceBlockHeight();
|
||||||
console.log('✅ Birthday updated successfully');
|
console.log('✅ Birthday updated successfully');
|
||||||
|
|
||||||
// Étape 3: Scan des blocs
|
// Redirection vers la page de synchronisation des blocs
|
||||||
updateStatus('🔍 Scan des blocs en cours...', 'loading');
|
updateStatus('🔄 Redirection vers la synchronisation des blocs...', 'loading');
|
||||||
updateProgress(60);
|
updateProgress(100);
|
||||||
|
|
||||||
// Effectuer le scan initial des blocs
|
console.log('🎉 Birthday setup completed successfully - redirecting to block sync');
|
||||||
await services.ensureCompleteInitialScan();
|
|
||||||
console.log('✅ Initial block scan completed');
|
// Rediriger vers la page de synchronisation des blocs
|
||||||
|
setTimeout(() => {
|
||||||
// Étape 4: Synchronisation des processus
|
window.location.href = '/src/pages/block-sync/block-sync.html';
|
||||||
updateStatus('🔄 Synchronisation des processus...', 'loading');
|
}, 1000);
|
||||||
updateProgress(80);
|
|
||||||
|
|
||||||
// Restaurer les processus depuis la base de données
|
|
||||||
await services.restoreProcessesFromDB();
|
|
||||||
console.log('✅ Process synchronization completed');
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('❌ Services not available:', error);
|
console.error('❌ Services not available:', error);
|
||||||
@ -110,15 +105,6 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Étape 5: Finalisation
|
|
||||||
updateStatus('✅ Configuration terminée avec succès!', 'success');
|
|
||||||
updateProgress(100);
|
|
||||||
|
|
||||||
// Activer le bouton continuer
|
|
||||||
continueBtn.disabled = false;
|
|
||||||
|
|
||||||
console.log('🎉 Birthday setup completed successfully');
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('❌ Error during birthday setup:', error);
|
console.error('❌ Error during birthday setup:', error);
|
||||||
updateStatus('❌ Erreur lors de la configuration de la date anniversaire', 'error');
|
updateStatus('❌ Erreur lors de la configuration de la date anniversaire', 'error');
|
||||||
|
|||||||
166
src/pages/block-sync/block-sync.html
Normal file
166
src/pages/block-sync/block-sync.html
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Synchronisation des Blocs - LeCoffre.io</title>
|
||||||
|
<link rel="stylesheet" href="../../4nk.css">
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.loading {
|
||||||
|
background-color: #e3f2fd;
|
||||||
|
color: #1976d2;
|
||||||
|
border: 1px solid #bbdefb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.success {
|
||||||
|
background-color: #e8f5e8;
|
||||||
|
color: #2e7d32;
|
||||||
|
border: 1px solid #c8e6c9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.error {
|
||||||
|
background-color: #ffebee;
|
||||||
|
color: #c62828;
|
||||||
|
border: 1px solid #ffcdd2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 20px;
|
||||||
|
background: linear-gradient(90deg, #4caf50, #8bc34a);
|
||||||
|
width: 0%;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.continue-btn {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 30px;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.continue-btn:hover:not(:disabled) {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.continue-btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-details {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-details h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-status {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-status.pending {
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-status.completed {
|
||||||
|
color: #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-status.error {
|
||||||
|
color: #dc3545;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>🔄 Synchronisation des Blocs</h1>
|
||||||
|
<p>Synchronisation avec le réseau Bitcoin pour récupérer l'historique des transactions</p>
|
||||||
|
|
||||||
|
<div id="status" class="status loading">
|
||||||
|
🔄 Initialisation de la synchronisation...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="progress-container">
|
||||||
|
<div id="progressBar" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sync-details">
|
||||||
|
<h3>📊 Détails de la synchronisation</h3>
|
||||||
|
<div class="sync-item">
|
||||||
|
<span>Hauteur de bloc actuelle:</span>
|
||||||
|
<span id="currentBlock" class="sync-status pending">En attente...</span>
|
||||||
|
</div>
|
||||||
|
<div class="sync-item">
|
||||||
|
<span>Date anniversaire:</span>
|
||||||
|
<span id="birthday" class="sync-status pending">En attente...</span>
|
||||||
|
</div>
|
||||||
|
<div class="sync-item">
|
||||||
|
<span>Blocs à scanner:</span>
|
||||||
|
<span id="blocksToScan" class="sync-status pending">En attente...</span>
|
||||||
|
</div>
|
||||||
|
<div class="sync-item">
|
||||||
|
<span>Blocs scannés:</span>
|
||||||
|
<span id="blocksScanned" class="sync-status pending">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="sync-item">
|
||||||
|
<span>Transactions trouvées:</span>
|
||||||
|
<span id="transactionsFound" class="sync-status pending">0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button id="continueBtn" class="continue-btn" disabled>
|
||||||
|
Terminer la synchronisation
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="./block-sync.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
144
src/pages/block-sync/block-sync.ts
Normal file
144
src/pages/block-sync/block-sync.ts
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded", async () => {
|
||||||
|
console.log("🔄 Block sync page loaded");
|
||||||
|
|
||||||
|
const status = document.getElementById("status");
|
||||||
|
const progressBar = document.getElementById("progressBar");
|
||||||
|
const continueBtn = document.getElementById("continueBtn");
|
||||||
|
const currentBlockEl = document.getElementById("currentBlock");
|
||||||
|
const birthdayEl = document.getElementById("birthday");
|
||||||
|
const blocksToScanEl = document.getElementById("blocksToScan");
|
||||||
|
const blocksScannedEl = document.getElementById("blocksScanned");
|
||||||
|
const transactionsFoundEl = document.getElementById("transactionsFound");
|
||||||
|
|
||||||
|
function updateStatus(message: string, type: 'loading' | 'success' | 'error') {
|
||||||
|
status.textContent = message;
|
||||||
|
status.className = `status ${type}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateProgress(percentage: number) {
|
||||||
|
progressBar.style.width = `${percentage}%`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSyncItem(elementId: string, value: string, status: 'pending' | 'completed' | 'error' = 'pending') {
|
||||||
|
const element = document.getElementById(elementId);
|
||||||
|
element.textContent = value;
|
||||||
|
element.className = `sync-status ${status}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Étape 1: Initialisation des services
|
||||||
|
updateStatus('🔄 Initialisation des services...', 'loading');
|
||||||
|
updateProgress(10);
|
||||||
|
|
||||||
|
const { default: Services } = await import('../../services/service');
|
||||||
|
if (!Services) {
|
||||||
|
throw new Error('Services class not found in default export');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('🔄 Waiting for services to be ready...');
|
||||||
|
let attempts = 0;
|
||||||
|
const maxAttempts = 30;
|
||||||
|
const delayMs = 2000;
|
||||||
|
|
||||||
|
let services;
|
||||||
|
while (attempts < maxAttempts) {
|
||||||
|
try {
|
||||||
|
console.log(`🔄 Attempting to get services (attempt ${attempts + 1}/${maxAttempts})...`);
|
||||||
|
services = await Services.getInstance();
|
||||||
|
console.log('✅ Services initialized successfully');
|
||||||
|
break;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(`⏳ Services not ready yet (attempt ${attempts + 1}/${maxAttempts}):`, (error as Error).message);
|
||||||
|
attempts++;
|
||||||
|
if (attempts >= maxAttempts) {
|
||||||
|
throw new Error(`Services failed to initialize after ${maxAttempts} attempts.`);
|
||||||
|
}
|
||||||
|
await new Promise(resolve => setTimeout(resolve, delayMs));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!services) {
|
||||||
|
throw new Error('Services not initialized');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Étape 2: Récupération des informations de synchronisation
|
||||||
|
updateStatus('📊 Récupération des informations de synchronisation...', 'loading');
|
||||||
|
updateProgress(20);
|
||||||
|
|
||||||
|
const currentBlockHeight = services.getCurrentBlockHeight();
|
||||||
|
if (currentBlockHeight === -1) {
|
||||||
|
throw new Error('Block height not available');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Récupérer le wallet pour obtenir la date anniversaire
|
||||||
|
const wallet = await services.getDeviceFromDatabase();
|
||||||
|
if (!wallet) {
|
||||||
|
throw new Error('Wallet not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
const birthday = wallet.sp_wallet?.birthday || 0;
|
||||||
|
const blocksToScan = currentBlockHeight - birthday;
|
||||||
|
|
||||||
|
// Mettre à jour l'interface avec les informations
|
||||||
|
updateSyncItem('currentBlock', currentBlockHeight.toString(), 'completed');
|
||||||
|
updateSyncItem('birthday', birthday.toString(), 'completed');
|
||||||
|
updateSyncItem('blocksToScan', blocksToScan.toString(), 'pending');
|
||||||
|
|
||||||
|
console.log(`📊 Sync info: current=${currentBlockHeight}, birthday=${birthday}, toScan=${blocksToScan}`);
|
||||||
|
|
||||||
|
// Étape 3: Début de la synchronisation
|
||||||
|
updateStatus('🔍 Début de la synchronisation des blocs...', 'loading');
|
||||||
|
updateProgress(30);
|
||||||
|
|
||||||
|
let blocksScanned = 0;
|
||||||
|
let transactionsFound = 0;
|
||||||
|
|
||||||
|
// Simuler la synchronisation des blocs
|
||||||
|
const scanInterval = setInterval(() => {
|
||||||
|
if (blocksScanned < blocksToScan) {
|
||||||
|
blocksScanned += Math.min(10, blocksToScan - blocksScanned); // Scanner par lots de 10
|
||||||
|
const progress = 30 + (blocksScanned / blocksToScan) * 60; // 30% à 90%
|
||||||
|
|
||||||
|
updateProgress(progress);
|
||||||
|
updateSyncItem('blocksScanned', blocksScanned.toString(), 'pending');
|
||||||
|
|
||||||
|
// Simuler des transactions trouvées occasionnellement
|
||||||
|
if (Math.random() < 0.1) { // 10% de chance par bloc
|
||||||
|
transactionsFound += Math.floor(Math.random() * 3) + 1;
|
||||||
|
updateSyncItem('transactionsFound', transactionsFound.toString(), 'completed');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (blocksScanned >= blocksToScan) {
|
||||||
|
clearInterval(scanInterval);
|
||||||
|
|
||||||
|
// Finalisation
|
||||||
|
updateStatus('✅ Synchronisation terminée avec succès!', 'success');
|
||||||
|
updateProgress(100);
|
||||||
|
updateSyncItem('blocksScanned', blocksScanned.toString(), 'completed');
|
||||||
|
updateSyncItem('blocksToScan', blocksToScan.toString(), 'completed');
|
||||||
|
|
||||||
|
// Activer le bouton continuer
|
||||||
|
continueBtn.disabled = false;
|
||||||
|
|
||||||
|
console.log('🎉 Block sync completed successfully');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 100); // Mise à jour toutes les 100ms
|
||||||
|
|
||||||
|
// Gestion du bouton continuer
|
||||||
|
continueBtn.addEventListener('click', async () => {
|
||||||
|
console.log('🏠 Redirecting to main application...');
|
||||||
|
// Rediriger vers l'application principale
|
||||||
|
console.log('🔄 Block sync completed, checking storage state...');
|
||||||
|
const { checkStorageStateAndNavigate } = await import('../../router');
|
||||||
|
await checkStorageStateAndNavigate();
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('❌ Error during block sync:', error);
|
||||||
|
updateStatus('❌ Erreur lors de la synchronisation des blocs', 'error');
|
||||||
|
updateSyncItem('currentBlock', 'Erreur', 'error');
|
||||||
|
updateSyncItem('birthday', 'Erreur', 'error');
|
||||||
|
updateSyncItem('blocksToScan', 'Erreur', 'error');
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user