Display existing processes in status field

**Motivations :**
- User wants to see each retrieved process displayed as a message in the status field
- Need to show process information after authentication or initialization

**Modifications :**
- Added displayExistingProcesses() function to fetch and display processes
- Modified handleMainPairing() to call displayExistingProcesses() after authentication
- Modified initHomePage() to display processes even if authentication fails
- Each process shows: ID (truncated), states count, members count, last update
- Processes displayed in scrollable container with styled cards

**Pages affectées :**
- src/pages/home/home.ts
This commit is contained in:
NicolasCantu 2025-10-23 21:16:15 +02:00
parent 06df2ff6c1
commit a9f3ff8037

View File

@ -153,6 +153,10 @@ export async function initHomePage(): Promise<void> {
console.log('🔐 Auto-triggering WebAuthn authentication...');
await handleMainPairing();
// Display existing processes even if authentication fails
console.log('📊 Displaying existing processes...');
await displayExistingProcesses();
// Hide loading spinner after initialization
console.log('🔧 Hiding loading spinner...');
hideHomeLoadingSpinner();
@ -581,15 +585,79 @@ async function handleMainPairing(): Promise<void> {
// Now proceed with pairing process
await prepareAndSendPairingTx();
// Display any existing processes in the status field
await displayExistingProcesses();
} catch (error) {
console.error('Pairing failed:', error);
if (mainStatus) {
mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Authentication failed</span>';
}
}
}
// Display existing processes in the status field
async function displayExistingProcesses(): Promise<void> {
try {
const service = await Services.getInstance();
const processes = await service.getProcesses();
const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const mainStatus = container.querySelector('#main-status') as HTMLElement;
if (!mainStatus) {
console.warn('Main status element not found');
return;
}
const processCount = Object.keys(processes).length;
console.log(`📊 Found ${processCount} existing processes`);
if (processCount === 0) {
if (mainStatus) {
mainStatus.innerHTML = '<span style="color: var(--info-color)">📋 No existing processes found</span>';
}
return;
}
// Create a list of processes to display
let processesHtml = `<div style="text-align: left; max-height: 200px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px; background: #f8f9fa;">
<h4 style="margin: 0 0 10px 0; color: var(--primary-color);">📋 Existing Processes (${processCount})</h4>`;
for (const [processId, process] of Object.entries(processes)) {
const processInfo = {
id: processId.substring(0, 8) + '...',
states: process.states?.length || 0,
members: Object.keys(process.members || {}).length,
lastUpdate: process.last_update || 'Unknown'
};
processesHtml += `
<div style="margin: 8px 0; padding: 8px; background: white; border-radius: 4px; border-left: 3px solid var(--primary-color);">
<strong>Process:</strong> ${processInfo.id}<br>
<small style="color: #666;">
States: ${processInfo.states} | Members: ${processInfo.members} | Updated: ${processInfo.lastUpdate}
</small>
</div>`;
}
processesHtml += '</div>';
if (mainStatus) {
mainStatus.innerHTML = processesHtml;
}
} catch (error) {
console.error('❌ Error displaying processes:', error);
const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const mainStatus = container.querySelector('#main-status') as HTMLElement;
if (mainStatus) {
mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Error loading processes</span>';
}
}
}
// Account Actions
export function setupAccountActions(): void {
const container = getCorrectDOM('login-4nk-component') as HTMLElement;