From 69493e59ed8085282a2dbfc954c2d1e682fd5b43 Mon Sep 17 00:00:00 2001 From: Pascal Date: Tue, 3 Dec 2024 16:27:23 +0100 Subject: [PATCH] web_component_ok --- src/components/header/header.ts | 6 +- src/pages/account/account-component.ts | 10 +- src/pages/account/account.ts | 227 ++----------------------- 3 files changed, 21 insertions(+), 222 deletions(-) diff --git a/src/components/header/header.ts b/src/components/header/header.ts index 74cb190..d04c9b0 100755 --- a/src/components/header/header.ts +++ b/src/components/header/header.ts @@ -101,14 +101,14 @@ async function fetchNotifications() { async function loadUserProfile() { // Charger les données du profil depuis le localStorage - const userName = localStorage.getItem('userName') || 'John'; - const userLastName = localStorage.getItem('userLastName') || 'Doe'; + const userName = localStorage.getItem('userName'); + const userLastName = localStorage.getItem('userLastName'); const userAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150'; const userBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200'; // Mettre à jour les éléments du DOM const nameElement = document.querySelector('.user-name'); - const lastNameElement = document.querySelector('.user-last-name'); + const lastNameElement = document.querySelector('.user-lastname'); const avatarElement = document.querySelector('.avatar'); const bannerElement = document.querySelector('.banner-image'); diff --git a/src/pages/account/account-component.ts b/src/pages/account/account-component.ts index 31c0413..b550af1 100644 --- a/src/pages/account/account-component.ts +++ b/src/pages/account/account-component.ts @@ -46,11 +46,15 @@ class AccountComponent extends HTMLElement { } render() { - if(this.shadowRoot) { - // Créer l'élément chat-element + if(this.shadowRoot && !this.shadowRoot.querySelector('account-element')) { + const style = document.createElement('style'); + style.textContent = accountCss; + const accountElement = document.createElement('account-element'); - this.shadowRoot.innerHTML = ``; + + this.shadowRoot.appendChild(style); this.shadowRoot.appendChild(accountElement); + } } } diff --git a/src/pages/account/account.ts b/src/pages/account/account.ts index 0a5c6fd..75ca422 100755 --- a/src/pages/account/account.ts +++ b/src/pages/account/account.ts @@ -1,6 +1,5 @@ declare global { interface Window { - localStorage: Storage; initAccount: () => void; showContractPopup: (contractId: string) => void; showPairing: () => void; @@ -543,7 +542,7 @@ private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void const rows: Row[] = JSON.parse(localStorage.getItem(storageKey) || '[]'); if (rows[index]) { - rows[index].column3 = newValue; + rows[index].column2 = newValue; localStorage.setItem(storageKey, JSON.stringify(rows)); } @@ -952,32 +951,6 @@ private cancelWalletRow(): void { } -// Fonctions de sauvegarde -private saveDataRowToLocalStorage(row: DataRow): void { - const rows: DataRow[] = JSON.parse(localStorage.getItem(STORAGE_KEYS.data) || '[]'); - rows.push(row); - localStorage.setItem(STORAGE_KEYS.data, JSON.stringify(rows)); -} - -private saveDeviceName(cell: HTMLTableCellElement, newValue: string): void { - const row = cell.closest('tr'); - if (!row) return; - - const index = Array.from(row.parentElement?.children || []).indexOf(row); - const rows: Row[] = JSON.parse(localStorage.getItem(STORAGE_KEYS[currentMode]) || '[]'); - - if (rows[index]) { - rows[index].column3 = newValue; - localStorage.setItem(STORAGE_KEYS[currentMode], JSON.stringify(rows)); - } -} - -private saveRowToLocalStorage(row: Row): void { - const rows: Row[] = JSON.parse(localStorage.getItem(STORAGE_KEYS[currentMode]) || '[]'); - rows.push(row); - localStorage.setItem(STORAGE_KEYS[currentMode], JSON.stringify(rows)); -} - private updateDataTableContent(rows: DataRow[]): void { const tbody = document.querySelector('#data-table tbody'); if (!tbody) return; @@ -1002,8 +975,8 @@ private openAvatarPopup(): void { if (!popup) return; // Récupérer les valeurs stockées - const savedName = localStorage.getItem('userName') || 'Luke'; - const savedLastName = localStorage.getItem('userLastName') || 'Doe'; + const savedName = localStorage.getItem('userName'); + const savedLastName = localStorage.getItem('userLastName'); const savedAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150'; const savedBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200'; const savedAddress = localStorage.getItem('userAddress') || '🏠 🌍 🗽🎊😩-🎊😑😩'; @@ -1158,6 +1131,7 @@ private setupEventListeners(popup: HTMLElement): void { if (lastNameInput) { lastNameInput.addEventListener('input', () => { const newLastName = lastNameInput.value; + console.log('Nom de famille mis à jour :', newLastName); localStorage.setItem('userLastName', newLastName); const headerLastName = document.querySelector('header-element')?.shadowRoot?.querySelector('.user-lastname'); @@ -1174,17 +1148,6 @@ private closeAvatarPopup(): void { if (popup) popup.remove(); } -private saveUserInfo(): void { - const nameInput = document.querySelector('#user-name-input'); - if (nameInput) { - localStorage.setItem('userName', nameInput.value); - } -} - -private saveAvatarToLocalStorage(dataUrl: string): void { - localStorage.setItem('userAvatar', dataUrl); -} - private loadAvatar(): void { const savedAvatar = localStorage.getItem('userAvatar'); if (savedAvatar) { @@ -1199,6 +1162,9 @@ private loadUserInfo(): void { const savedName = localStorage.getItem('userName'); const savedLastName = localStorage.getItem('userLastName'); + console.log('Nom récupéré :', savedName); + console.log('Nom de famille récupéré :', savedLastName); + if (savedName) { const nameDisplay = document.querySelector('.user-name'); if (nameDisplay) { @@ -1218,178 +1184,6 @@ private loadUserInfo(): void { } -private addressToEmoji(address: string): string { - // Utiliser l'adresse pour générer un hash déterministe - let hash = 0; - for (let i = 0; i < address.length; i++) { - hash = ((hash << 5) - hash) + address.charCodeAt(i); - hash = hash & hash; - } - - // Utiliser le hash pour sélectionner les emojis - const emojis = this.generateEmojiList(); - const selectedEmojis: string[] = []; - - // Sélectionner 4 emojis basés sur le hash de l'adresse - for (let i = 0; i < 4; i++) { - const index = Math.abs(hash + i) % emojis.length; - selectedEmojis.push(emojis[index]); - } - - return selectedEmojis.join(''); -} - -private isValidRole(role: string): boolean { - const validRoles = ['admin', 'user', 'guest', 'manager']; - return validRoles.includes(role.toLowerCase()); -} - -// Fonction pour annuler l'ajout d'une ligne -private cancelAddRow(): void { - if (!currentRow) return; - currentRow.remove(); - isAddingRow = false; - currentRow = null; - - const buttonContainer = document.querySelector('.button-container'); - if (buttonContainer) { - buttonContainer.innerHTML = ` - - `; - } -} - -// Fonction pour sauvegarder le nom -private saveName(cell: HTMLElement, input: HTMLInputElement): void { - const newValue = input.value.trim(); - const originalValue = cell.getAttribute('data-original-value'); - - // Si vide, revenir à la valeur originale - if (newValue === '') { - cell.textContent = originalValue; - return; - } - - // Mettre à jour l'affichage - cell.textContent = newValue; - - // Mettre à jour le localStorage - const storageKey = STORAGE_KEYS.data; - const rows = JSON.parse(localStorage.getItem(storageKey) || '[]'); - - const updatedRows = rows.map((row: any) => { - if (row.column1 === originalValue) { - return { ...row, column1: newValue }; - } - return row; - }); - - localStorage.setItem(storageKey, JSON.stringify(updatedRows)); -} - -// Fonction pour mettre à jour le localStorage après suppression -private updateLocalStorageAfterDelete(index: number): void { - const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS[currentMode]) || '[]'); - rows.splice(index, 1); - localStorage.setItem(STORAGE_KEYS[currentMode], JSON.stringify(rows)); -} - -// Fonction pour désactiver les boutons de suppression -private disableDeleteButtons(disabled: boolean): void { - const deleteButtons = document.querySelectorAll('.delete-button'); - deleteButtons.forEach(button => { - button.disabled = disabled; - button.style.opacity = disabled ? '0.5' : '1'; - button.style.cursor = disabled ? 'not-allowed' : 'pointer'; - }); -} - -// Fonction pour mettre jour le contenu de la bannière -private updateBannerContent(): void { - const bannerImg = document.getElementById('popup-banner-img') as HTMLImageElement; - const bannerUpload = document.getElementById('banner-upload') as HTMLInputElement; - - if (bannerUpload && bannerImg) { - bannerUpload.addEventListener('change', (e: Event) => { - const file = (e.target as HTMLInputElement).files?.[0]; - if (file) { - const reader = new FileReader(); - reader.onload = (e: ProgressEvent) => { - const result = e.target?.result as string; - bannerImg.src = result; - this.saveBannerToLocalStorage(result); - this.updateNavbarBanner(result); - }; - reader.readAsDataURL(file); - } - }); - } -} - -// Fonction pour générer la liste d'emojis -private generateEmojiList(): string[] { - const emojis = ['😀', '😃', '😄', '😁', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉']; - const result: string[] = []; - - while (result.length < 4) { - const emoji = emojis[Math.floor(Math.random() * emojis.length)]; - if (!result.includes(emoji)) { - result.push(emoji); - } - } - - return result; -} - -// Fonction pour afficher les notifications -private showNotifications(processName: string): void { - const process = mockProcessRows.find(p => p.process === processName); - if (!process) return; - - const popupHTML = ` -
-
- × -

${processName} Notifications

-
- ${process.notification.messages.map(msg => ` -
-
- ${msg.read ? - '✓' : - '●' - } -
-
-
${msg.message}
-
${msg.date}
-
-
- `).join('')} -
-
-
- `; - - document.body.insertAdjacentHTML('beforeend', popupHTML); - - // Event listeners - const modal = document.querySelector('.notifications-modal'); - const closeBtn = document.querySelector('.close-button'); - - if (modal && closeBtn) { - modal.addEventListener('click', (e) => { - if (e.target === modal) { - modal.remove(); - } - }); - - closeBtn.addEventListener('click', () => { - modal.remove(); - }); - } -} - private updateNavbarName(name: string): void { const nameElement = document.querySelector('.nav-wrapper .user-name'); if (nameElement) { @@ -1398,7 +1192,7 @@ private showNotifications(processName: string): void { } private updateNavbarLastName(lastName: string): void { - const lastNameElement = document.querySelector('.user-lastname'); + const lastNameElement = document.querySelector('.nav-wrapper .user-lastname'); if (lastNameElement) { lastNameElement.textContent = lastName; } @@ -1438,12 +1232,13 @@ private showNotifications(processName: string): void { connectedCallback() { this.initializeEventListeners(); this.loadSavedBanner(); + this.loadUserInfo(); const savedAvatar = localStorage.getItem('userAvatar'); const savedBanner = localStorage.getItem('userBanner'); - const savedName = localStorage.getItem('userName') || 'Luke'; - const savedLastName = localStorage.getItem('userLastName') || 'Doe'; + const savedName = localStorage.getItem('userName'); + const savedLastName = localStorage.getItem('userLastName'); if (savedAvatar) { const navAvatar = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement;