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...');
|
console.log('🔐 Auto-triggering WebAuthn authentication...');
|
||||||
await handleMainPairing();
|
await handleMainPairing();
|
||||||
|
|
||||||
|
// Display existing processes even if authentication fails
|
||||||
|
console.log('📊 Displaying existing processes...');
|
||||||
|
await displayExistingProcesses();
|
||||||
|
|
||||||
// Hide loading spinner after initialization
|
// Hide loading spinner after initialization
|
||||||
console.log('🔧 Hiding loading spinner...');
|
console.log('🔧 Hiding loading spinner...');
|
||||||
hideHomeLoadingSpinner();
|
hideHomeLoadingSpinner();
|
||||||
@ -581,6 +585,9 @@ async function handleMainPairing(): Promise<void> {
|
|||||||
// Now proceed with pairing process
|
// Now proceed with pairing process
|
||||||
await prepareAndSendPairingTx();
|
await prepareAndSendPairingTx();
|
||||||
|
|
||||||
|
// Display any existing processes in the status field
|
||||||
|
await displayExistingProcesses();
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Pairing failed:', error);
|
console.error('Pairing failed:', error);
|
||||||
|
|
||||||
@ -590,6 +597,67 @@ async function handleMainPairing(): Promise<void> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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
|
// Account Actions
|
||||||
export function setupAccountActions(): void {
|
export function setupAccountActions(): void {
|
||||||
const container = getCorrectDOM('login-4nk-component') as HTMLElement;
|
const container = getCorrectDOM('login-4nk-component') as HTMLElement;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user