4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify process display to simple text messages

Browse Source 
**Motivations :**
- User wants simple text messages, one per line, not complex UI
- Simplify the process display to basic text format

**Modifications :**
- Changed from complex HTML cards to simple text messages
- Each process displayed as one line of text with basic info
- Messages joined with newlines and displayed in monospace font
- Removed complex styling and containers

**Pages affectées :**
- src/pages/home/home.ts
This commit is contained in:
NicolasCantu 2025-10-23 21:17:31 +02:00
parent a9f3ff8037
commit 60ab17bb26
1 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/home/home.ts
View File

@ -590,7 +590,7 @@ async function handleMainPairing(): Promise<void> {
} catch (error) { } catch (error) {
console.error('Pairing failed:', error); console.error('Pairing failed:', error);
if (mainStatus) { if (mainStatus) {
mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Authentication failed</span>'; mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Authentication failed</span>';
} }
@ -602,28 +602,27 @@ async function displayExistingProcesses(): Promise<void> {
try { try {
const service = await Services.getInstance(); const service = await Services.getInstance();
const processes = await service.getProcesses(); const processes = await service.getProcesses();
const container = getCorrectDOM('login-4nk-component') as HTMLElement; const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const mainStatus = container.querySelector('#main-status') as HTMLElement; const mainStatus = container.querySelector('#main-status') as HTMLElement;
if (!mainStatus) { if (!mainStatus) {
console.warn('Main status element not found'); console.warn('Main status element not found');
return; return;
} }
const processCount = Object.keys(processes).length; const processCount = Object.keys(processes).length;
console.log(`📊 Found ${processCount} existing processes`); console.log(`📊 Found ${processCount} existing processes`);
if (processCount === 0) { if (processCount === 0) {
if (mainStatus) { if (mainStatus) {
mainStatus.innerHTML = '<span style="color: var(--info-color)">📋 No existing processes found</span>'; mainStatus.innerHTML = '<span style="color: var(--info-color)">📋 No existing processes found</span>';
} }
return; return;
} }
// Create a list of processes to display // Create simple text messages for each process
let processesHtml = `<div style="text-align: left; max-height: 200px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px; background: #f8f9fa;"> let messages = [];
<h4 style="margin: 0 0 10px 0; color: var(--primary-color);">📋 Existing Processes (${processCount})</h4>`;
for (const [processId, process] of Object.entries(processes)) { for (const [processId, process] of Object.entries(processes)) {
const processInfo = { const processInfo = {
@ -633,21 +632,15 @@ async function displayExistingProcesses(): Promise<void> {
lastUpdate: process.last_update || 'Unknown' lastUpdate: process.last_update || 'Unknown'
}; };
processesHtml += ` messages.push(`📋 Process ${processInfo.id} - States: ${processInfo.states}, Members: ${processInfo.members}, Updated: ${processInfo.lastUpdate}`);
<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>'; const messagesText = messages.join('\n');
if (mainStatus) { if (mainStatus) {
mainStatus.innerHTML = processesHtml; mainStatus.innerHTML = `<pre style="white-space: pre-wrap; font-family: monospace; font-size: 12px; text-align: left;">${messagesText}</pre>`;
} }
} catch (error) { } catch (error) {
console.error('❌ Error displaying processes:', error); console.error('❌ Error displaying processes:', error);
const container = getCorrectDOM('login-4nk-component') as HTMLElement; const container = getCorrectDOM('login-4nk-component') as HTMLElement;