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:
parent
06df2ff6c1
commit
a9f3ff8037
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user