From 93208f135dbecadf7c6112e9be39598eeb4a9976 Mon Sep 17 00:00:00 2001
From: Pascal <pascal@debian.pascallim>
Date: Mon, 20 Jan 2025 16:13:47 +0100
Subject: [PATCH] switch_tab_ok

---
 public/style/chat.css  |  1 +
 src/pages/chat/chat.ts | 54 +++++++++++++++++++++++++++++++++---------
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/public/style/chat.css b/public/style/chat.css
index 78cb564..1c6a8c7 100755
--- a/public/style/chat.css
+++ b/public/style/chat.css
@@ -312,6 +312,7 @@ body {
 .tabs {
     display: flex;
     margin: 20px 0px;
+    gap: 10px;
 }
 
 .tabs button {
diff --git a/src/pages/chat/chat.ts b/src/pages/chat/chat.ts
index 2622772..939b396 100755
--- a/src/pages/chat/chat.ts
+++ b/src/pages/chat/chat.ts
@@ -641,10 +641,39 @@ class ChatElement extends HTMLElement {
         return null;
     }
 
+    private switchTab(tabType: string, tabs: NodeListOf<Element>) {
+        // Mettre à jour les classes des onglets
+        tabs.forEach(tab => {
+            tab.classList.toggle('active', tab.getAttribute('data-tab') === tabType);
+        });
+
+        // Supprimer le contenu existant sauf les onglets
+        const groupList = this.shadowRoot?.querySelector('#group-list');
+        if (!groupList) return;
+
+        const children = Array.from(groupList.children);
+        children.forEach(child => {
+            if (!child.classList.contains('tabs')) {
+                groupList.removeChild(child);
+            }
+        });
+
+        // Charger le contenu approprié
+        switch (tabType) {
+            case 'processes':
+                this.loadAllProcesses();
+                break;
+            case 'members':
+                this.loadAllMembers();
+                break;
+            default:
+                console.error('Unknown tab type:', tabType);
+        }
+    }
+
     //Load all processes
     private async loadAllProcesses() {
         console.log('🎯 Loading all processes');
-        const processes: any[] = [];
         const dbRequest = indexedDB.open('4nk');
         
         return new Promise((resolve, reject) => {
@@ -673,11 +702,6 @@ class ChatElement extends HTMLElement {
                     
                     groupList.innerHTML = '';
 
-                    /*<div class="tabs">
-                        <button class="tab active" data-tab="processes">Processus</button>
-                        <button class="tab" data-tab="members">Membres</button>
-                    </div>*/
-
                     const tabContent = document.createElement('div');
                     tabContent.className = 'tabs';
                     tabContent.innerHTML = `
@@ -686,6 +710,17 @@ class ChatElement extends HTMLElement {
                     `;
                     groupList.appendChild(tabContent);
 
+                    // Ajouter les event listeners
+                    const tabs = tabContent.querySelectorAll('.tab');
+                    tabs.forEach(tab => {
+                        tab.addEventListener('click', () => {
+                            const tabType = tab.getAttribute('data-tab');
+                            if (tabType) {
+                                this.switchTab(tabType, tabs);
+                            }
+                        });
+                    });
+
                     for (const process of processResult) {
                         //console.log('🎯 Processing process:', process);
                         const li = document.createElement('li');
@@ -1138,14 +1173,11 @@ class ChatElement extends HTMLElement {
         }
     }
 
+    
+
 }
 
 customElements.define('chat-element', ChatElement);
 export { ChatElement };
 
-/*TODO 
-- Faire un onglet Process/Membres
-- Connexion au relay - voir le uncheck, avoir la liste des membres
-- Adress et ProcessId
-*/