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

component_ok

Browse Source
This commit is contained in:
Pascal 2024-12-18 13:57:49 +01:00 committed by Sosthene
parent 5e1b22d302
commit 6652354b33
11 changed files with 3897 additions and 3772 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
public/style/account.css
View File

@ -595,10 +595,11 @@ body {
.container { .container {
display: flex; display: flex;
flex: 1; flex: 1;
height: calc(100% - 4vh); height: 90vh;
margin-top: 4vh; margin-top: 9vh;
margin-left: -1%; margin-left: -1%;
text-align: left; text-align: left;
width: 209vh;
} }
/* Liste des information sur l'account */ /* Liste des information sur l'account */
@ -612,6 +613,8 @@ body {
overflow-y: auto; overflow-y: auto;
border-right: 2px solid #2c3e50; border-right: 2px solid #2c3e50;
flex-shrink: 0; flex-shrink: 0;
padding-right: 10px;
height: 91vh;
} }
.parameter-list ul { .parameter-list ul {
@ -640,9 +643,10 @@ body {
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 10px; margin: 0px;
margin-top: 20px; margin-top: 20px;
margin-left: 0%; margin-left: 1%;
margin-bottom: -7px;
} }
/* En-tête du parametre */ /* En-tête du parametre */
@ -1317,3 +1321,46 @@ body {
.banner-image.clickable:hover { .banner-image.clickable:hover {
opacity: 0.8; opacity: 0.8;
} }
.parameter-list-ul.profile {
position: relative;
overflow: hidden;
max-height: 200px;
margin-bottom: 20px;
}
.profile-preview {
position: relative;
width: 100%;
height: 100%;
}
.preview-banner {
position: relative;
width: 100%;
height: 120px;
overflow: hidden;
}
.preview-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.preview-info {
position: relative;
display: flex;
align-items: center;
padding: 10px;
gap: 10px;
background: rgba(0, 0, 0, 0.3);
}
.preview-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid white;
}

12
public/style/chat.css
View File

@ -145,10 +145,11 @@ body {
.container { .container {
display: flex; display: flex;
flex: 1; flex: 1;
height: calc(100% - 4vh); height: 90vh;
margin-top: 4vh; margin-top: 9vh;
margin-left: -1%; margin-left: -1%;
text-align: left; text-align: left;
width: 209vh;
} }
@ -164,8 +165,8 @@ body {
border-right: 2px solid #2c3e50; border-right: 2px solid #2c3e50;
flex-shrink: 0; flex-shrink: 0;
padding-right: 10px; padding-right: 10px;
height: 91vh;
} }
.group-list ul { .group-list ul {
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
@ -198,9 +199,10 @@ body {
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 10px; margin: 0px;
margin-top: 20px; margin-top: 20px;
margin-left: 0%; margin-left: 1%;
margin-bottom: -7px;
} }
/* En-tête du chat */ /* En-tête du chat */

13
public/style/signature.css
View File

@ -18,6 +18,8 @@ body {
flex-direction: column; flex-direction: column;
} }
/* 4NK NAVBAR */ /* 4NK NAVBAR */
.brand-logo { .brand-logo {
@ -144,10 +146,11 @@ body {
.container { .container {
display: flex; display: flex;
flex: 1; flex: 1;
height: calc(100% - 4vh); height: 90vh;
margin-top: 4vh; margin-top: 9vh;
margin-left: -1%; margin-left: -1%;
text-align: left; text-align: left;
width: 209vh;
} }
@ -163,6 +166,7 @@ body {
border-right: 2px solid #2c3e50; border-right: 2px solid #2c3e50;
flex-shrink: 0; flex-shrink: 0;
padding-right: 10px; padding-right: 10px;
height: 91vh;
} }
.group-list ul { .group-list ul {
@ -198,9 +202,10 @@ body {
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 10px; margin: 0px;
margin-top: 20px; margin-top: 20px;
margin-left: 0%; margin-left: 1%;
margin-bottom: -7px;
} }
/* En-tête du chat */ /* En-tête du chat */

12
src/components/profile-header/profile-header.html
View File

@ -1,12 +0,0 @@
<div class="avatar-section">
<img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" />
<div class="banner-content">
<div class="avatar-container">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" onclick="window.openAvatarPopup()" />
</div>
<div class="user-info">
<span class="user-name">John</span>
<span class="user-lastname">Doe</span>
</div>
</div>
</div>

95
src/pages/account/account.html
View File

@ -1,99 +1,10 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Account</title> <title>Account</title>
<link rel="stylesheet" href="../../public/style/account.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head> </head>
<body> <body>
<!-- Header Container --> <account-component></account-component>
<div id="header-container"></div> <script type="module" src="./account.ts"></script>
<!-- Profile Popup -->
<div id="avatar-popup" class="popup">
<div class="popup-content">
<span class="close-popup">&times;</span>
<h2>Profile</h2>
<!-- Banner Preview Section -->
<div class="banner-preview">
<div class="banner-image-container">
<img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" id="popup-banner-img" />
<div class="banner-content">
<div class="avatar-container">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img" />
</div>
<div class="user-info">
<span class="editable" id="popup-name"></span>
<span class="editable" id="popup-lastname"></span>
</div>
</div>
</div>
<div class="banner-controls">
<label for="banner-upload" class="banner-upload-label button-style">
Change Banner Image
<input type="file" id="banner-upload" accept="image/*" style="display: none" />
</label>
</div>
</div>
<!-- Avatar Upload Section -->
<div class="popup-avatar">
<label for="avatar-upload" class="avatar-upload-label">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img" />
<div class="avatar-overlay">
<span>Change Avatar</span>
</div>
</label>
<input type="file" id="avatar-upload" accept="image/*" style="display: none" />
</div>
<!-- User Info Section -->
<div class="popup-info">
<p><strong>Name:</strong> <span class="editable" id="popup-name"></span></p>
<p><strong>Last Name:</strong> <span class="editable" id="popup-lastname"></span></p>
<p><strong>Address:</strong> 🏠 🌍 🗽🎊😩-🎊😑🎄😩</p>
</div>
<!-- Buttons Container -->
<div class="popup-buttons">
<button class="delete-account-btn" onclick="confirmDeleteAccount()">Delete Account</button>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container">
<!-- Parameter List -->
<div class="parameter-list">
<ul class="parameter-list-ul" onclick="window.showPairing()">
Pairing 🔗
</ul>
<ul class="parameter-list-ul" onclick="window.showWallet()">
Wallet 👛
</ul>
<ul class="parameter-list-ul" onclick="window.showProcess()">
Process ⚙️
</ul>
<ul class="parameter-list-ul" onclick="window.showData()">
Data 💾
</ul>
</div>
<!-- Parameter Area -->
<div class="parameter-area">
<div class="content-container">
<div id="pairing-content"></div>
<div id="wallet-content"></div>
<div id="process-content"></div>
<div id="data-content"></div>
</div>
</div>
</div>
<!-- Scripts -->
<script type="module" src="./account.ts?ts"></script>
</body> </body>
</html> </html>

491
src/pages/account/account.ts
View File

@ -44,6 +44,7 @@ import { STORAGE_KEYS, defaultRows, mockProcessRows, mockNotifications, notifica
import { Row, WalletRow, DataRow, Notification, Contract, NotificationMessage } from '../../mocks/mock-account/interfacesAccountMock'; import { Row, WalletRow, DataRow, Notification, Contract, NotificationMessage } from '../../mocks/mock-account/interfacesAccountMock';
import { addressToEmoji } from '../../utils/sp-address.utils'; import { addressToEmoji } from '../../utils/sp-address.utils';
import { getCorrectDOM } from '../../utils/document.utils'; import { getCorrectDOM } from '../../utils/document.utils';
import accountStyle from '../../../public/style/account.css?inline';
let isAddingRow = false; let isAddingRow = false;
let currentRow: HTMLTableRowElement | null = null; let currentRow: HTMLTableRowElement | null = null;
@ -68,6 +69,7 @@ export function showAlert(message: string): void {
}, 3000); }, 3000);
} }
class AccountElement extends HTMLElement { class AccountElement extends HTMLElement {
private dom: Node; private dom: Node;
@ -76,6 +78,117 @@ class AccountElement extends HTMLElement {
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.dom = getCorrectDOM('account-element'); this.dom = getCorrectDOM('account-element');
// Ajouter Font Awesome
const fontAwesome = document.createElement('link');
fontAwesome.rel = 'stylesheet';
fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';
this.shadowRoot!.appendChild(fontAwesome);
const style = document.createElement('style');
style.textContent = accountStyle;
this.shadowRoot!.appendChild(style);
this.shadowRoot!.innerHTML = `
<style>
${accountStyle}
</style>
<!-- Profile Popup -->
<div id="avatar-popup" class="popup">
<div class="popup-content">
<span class="close-popup">&times;</span>
<h2>Profile</h2>
</div>
</div>
<!-- Main Content -->
<div class="container">
<!-- Parameter List -->
<div class="parameter-list">
<ul class="parameter-list-ul profile">
<!-- Profile Preview (visible par défaut) -->
<div class="profile-preview" onclick="window.openAvatarPopup()">
<div class="preview-banner">
<img src="https://via.placeholder.com/800x200" alt="Banner" class="preview-banner-img">
</div>
<div class="preview-info">
<img src="https://via.placeholder.com/150" alt="Avatar" class="preview-avatar">
<div class="preview-text user-info">
<span class="preview-name" id="popup-name">Profile</span>
<span class="preview-lastname" id="popup-lastname"></span>
</div>
</div>
</div>
<!-- Profile Content (masqué par défaut) -->
<div class="profile-content" style="display: none;">
<!-- Banner Preview Section -->
<div class="banner-preview">
<div class="banner-image-container">
<img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" id="popup-banner-img">
<div class="banner-content">
<div class="avatar-container">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img">
</div>
<div class="user-info">
<span class="editable" id="popup-name"></span>
<span class="editable" id="popup-lastname"></span>
</div>
</div>
</div>
<div class="banner-controls">
<label for="banner-upload" class="banner-upload-label button-style">
Change Banner Image
<input type="file" id="banner-upload" accept="image/*" style="display: none;">
</label>
</div>
</div>
<!-- Avatar Upload Section -->
<div class="popup-avatar">
<label for="avatar-upload" class="avatar-upload-label">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img">
<div class="avatar-overlay">
<span>Change Avatar</span>
</div>
</label>
<input type="file" id="avatar-upload" accept="image/*" style="display: none;">
</div>
<!-- User Info Section -->
<div class="popup-info">
<p><strong>Name:</strong> <span class="editable" id="popup-name"></span></p>
<p><strong>Last Name:</strong> <span class="editable" id="popup-lastname"></span></p>
<p><strong>Address:</strong> 🏠 🌍 🗽🎊😩-🎊😑🎄😩</p>
</div>
<!-- Buttons Container -->
<div class="popup-buttons">
<button class="delete-account-btn" onclick="window.confirmDeleteAccount()">Delete Account</button>
</div>
</div>
</ul>
<ul class="parameter-list-ul" onclick="window.showPairing()">Pairing 🔗</ul>
<ul class="parameter-list-ul" onclick="window.showWallet()">Wallet 👛</ul>
<ul class="parameter-list-ul" onclick="window.showProcess()">Process ⚙️</ul>
<ul class="parameter-list-ul" onclick="window.showData()">Data 💾</ul>
</div>
<!-- Parameter Area -->
<div class="parameter-area">
<div class="content-container">
<div id="pairing-content"></div>
<div id="wallet-content"></div>
<div id="process-content"></div>
<div id="data-content"></div>
</div>
</div>
</div>
`;
window.showPairing = () => this.showPairing(); window.showPairing = () => this.showPairing();
window.showWallet = () => this.showWallet(); window.showWallet = () => this.showWallet();
window.showProcess = () => this.showProcess(); window.showProcess = () => this.showProcess();
@ -109,6 +222,35 @@ class AccountElement extends HTMLElement {
} }
} }
connectedCallback() {
this.initializeEventListeners();
this.loadSavedBanner();
this.loadUserInfo();
const savedAvatar = localStorage.getItem('userAvatar');
const savedBanner = localStorage.getItem('userBanner');
const savedName = localStorage.getItem('userName');
const savedLastName = localStorage.getItem('userLastName');
if (savedAvatar) {
const navAvatar = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement;
if (navAvatar) navAvatar.src = savedAvatar;
}
if (savedBanner) {
const navBanner = this.shadowRoot?.querySelector('.banner-image') as HTMLImageElement;
if (navBanner) navBanner.src = savedBanner;
}
if (savedName) {
this.updateNavbarName(savedName);
}
if (savedLastName) {
this.updateNavbarLastName(savedLastName);
}
}
// Fonctions de gestion des comptes et de l'interface utilisateur // Fonctions de gestion des comptes et de l'interface utilisateur
private confirmDeleteAccount(): void { private confirmDeleteAccount(): void {
const modal = document.createElement('div'); const modal = document.createElement('div');
@ -122,7 +264,7 @@ class AccountElement extends HTMLElement {
</div> </div>
`; `;
document.body.appendChild(modal); this.shadowRoot?.appendChild(modal);
modal.style.display = 'block'; modal.style.display = 'block';
const cancelBtn = modal.querySelector('.cancel-btn'); const cancelBtn = modal.querySelector('.cancel-btn');
@ -144,7 +286,7 @@ class AccountElement extends HTMLElement {
} }
private updateNavbarBanner(imageUrl: string): void { private updateNavbarBanner(imageUrl: string): void {
const navbarSection = document.querySelector('.nav-wrapper .avatar-section'); const navbarSection = this.shadowRoot?.querySelector('.nav-wrapper .avatar-section');
if (!navbarSection) return; if (!navbarSection) return;
let bannerImg = navbarSection.querySelector<HTMLImageElement>('.banner-image'); let bannerImg = navbarSection.querySelector<HTMLImageElement>('.banner-image');
@ -165,7 +307,7 @@ class AccountElement extends HTMLElement {
private loadSavedBanner(): void { private loadSavedBanner(): void {
const savedBanner = localStorage.getItem('userBanner'); const savedBanner = localStorage.getItem('userBanner');
if (savedBanner) { if (savedBanner) {
const bannerImg = document.getElementById('popup-banner-img') as HTMLImageElement; const bannerImg = this.shadowRoot?.getElementById('popup-banner-img') as HTMLImageElement;
if (bannerImg) { if (bannerImg) {
bannerImg.src = savedBanner; bannerImg.src = savedBanner;
} }
@ -173,43 +315,47 @@ class AccountElement extends HTMLElement {
} }
} }
private closeNotificationPopup(event: Event): void { private closeNotificationPopup(event: Event): void {
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
const isOverlay = target.classList.contains('notification-popup-overlay'); const isOverlay = target.classList.contains('notification-popup-overlay');
const isCloseButton = target.classList.contains('close-popup'); const isCloseButton = target.classList.contains('close-popup');
if (!isOverlay && !isCloseButton) return; if (!isOverlay && !isCloseButton) return;
const popup = document.querySelector('.notification-popup-overlay'); const popup = this.shadowRoot?.querySelector('.notification-popup-overlay');
if (popup) popup.remove(); if (popup) popup.remove();
} }
private markAsRead(processName: string, messageId: number, element: HTMLElement): void { private markAsRead(processName: string, messageId: number, element: HTMLElement): void {
const process = mockProcessRows.find((p) => p.process === processName); const process = mockProcessRows.find(p => p.process === processName);
if (!process) return; if (!process) return;
const message = process.notification.messages.find((m) => m.id === messageId); const message = process.notification.messages.find(m => m.id === messageId);
if (!message || message.read) return; if (!message || message.read) return;
message.read = true; message.read = true;
element.classList.remove('unread'); element.classList.remove('unread');
element.classList.add('read'); element.classList.add('read');
const statusIcon = element.querySelector('.notification-status i');
const statusIcon = element.querySelector('.notification-status');
if (statusIcon) { if (statusIcon) {
statusIcon.classList.remove('fa-circle'); statusIcon.innerHTML = `
statusIcon.classList.add('fa-check'); <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="green">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
</svg>`;
} }
const notifCount = this.calculateNotifications(process.notification.messages); const notifCount = this.calculateNotifications(process.notification.messages);
const countElement = document.querySelector(`.notification-count[data-process="${processName}"]`); const countElement = this.shadowRoot?.querySelector(`.notification-count[data-process="${processName}"]`);
if (countElement) { if (countElement) {
countElement.textContent = `${notifCount.unread}/${notifCount.total}`; countElement.textContent = `${notifCount.unread}/${notifCount.total}`;
const bellContainer = countElement.closest('.notification-container'); const bellContainer = countElement.closest('.notification-container');
const bell = bellContainer?.querySelector('.fa-bell'); const bell = bellContainer?.querySelector('svg'); // Changé de .fa-bell à svg
if (bell && bellContainer && notifCount.unread === 0) { if (bell && bellContainer && notifCount.unread === 0) {
bellContainer.classList.remove('has-unread'); bellContainer.classList.remove('has-unread');
(bell as HTMLElement).style.color = '#666'; (bell as SVGElement).style.fill = '#666'; // Utiliser fill au lieu de color pour SVG
} }
} }
} }
@ -217,7 +363,7 @@ class AccountElement extends HTMLElement {
// Fonctions de gestion des données et de l'interface // Fonctions de gestion des données et de l'interface
private calculateNotifications(messages: NotificationMessage[]): { unread: number; total: number } { private calculateNotifications(messages: NotificationMessage[]): { unread: number; total: number } {
const total = messages.length; const total = messages.length;
const unread = messages.filter((msg) => !msg.read).length; const unread = messages.filter(msg => !msg.read).length;
return { unread, total }; return { unread, total };
} }
@ -232,6 +378,11 @@ class AccountElement extends HTMLElement {
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',
confirmButtonColor: '#C89666', confirmButtonColor: '#C89666',
cancelButtonColor: '#6c757d', cancelButtonColor: '#6c757d',
// Ajouter des styles personnalisés
customClass: {
container: 'recovery-popup-container',
popup: 'recovery-popup'
}
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
const recoveryWords = this.generateRecoveryWords(); const recoveryWords = this.generateRecoveryWords();
@ -241,16 +392,12 @@ class AccountElement extends HTMLElement {
title: 'Your Recovery Words', title: 'Your Recovery Words',
html: ` html: `
<div class="recovery-words-container"> <div class="recovery-words-container">
${recoveryWords ${recoveryWords.map((word, index) => `
.map(
(word, index) => `
<div class="recovery-word"> <div class="recovery-word">
<span class="word-number">${index + 1}.</span> <span class="word-number">${index + 1}.</span>
<span class="word">${word}</span> <span class="word">${word}</span>
</div> </div>
`, `).join('')}
)
.join('')}
</div> </div>
<div class="recovery-warning"> <div class="recovery-warning">
Please write these words down carefully. They will be needed to recover your account. Please write these words down carefully. They will be needed to recover your account.
@ -261,12 +408,16 @@ class AccountElement extends HTMLElement {
confirmButtonColor: '#C89666', confirmButtonColor: '#C89666',
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
customClass: {
container: 'recovery-popup-container',
popup: 'recovery-popup'
}
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
// Stocker l'état du bouton dans le localStorage // Stocker l'état du bouton dans le localStorage
localStorage.setItem('recoveryExported', 'true'); localStorage.setItem('recoveryExported', 'true');
const exportRecoveryBtn = document.querySelector('.recovery-btn') as HTMLButtonElement; const exportRecoveryBtn = this.shadowRoot?.querySelector('.recovery-btn') as HTMLButtonElement;
if (exportRecoveryBtn) { if (exportRecoveryBtn) {
exportRecoveryBtn.disabled = true; exportRecoveryBtn.disabled = true;
exportRecoveryBtn.style.opacity = '0.5'; exportRecoveryBtn.style.opacity = '0.5';
@ -279,7 +430,10 @@ class AccountElement extends HTMLElement {
} }
private generateRecoveryWords(): string[] { private generateRecoveryWords(): string[] {
const wordsList = ['apple', 'banana', 'orange', 'grape', 'kiwi', 'mango', 'peach', 'plum', 'lemon', 'lime', 'cherry', 'melon', 'pear', 'fig', 'date', 'berry']; const wordsList = [
'apple', 'banana', 'orange', 'grape', 'kiwi', 'mango', 'peach', 'plum',
'lemon', 'lime', 'cherry', 'melon', 'pear', 'fig', 'date', 'berry'
];
const recoveryWords: string[] = []; const recoveryWords: string[] = [];
while (recoveryWords.length < 4) { while (recoveryWords.length < 4) {
const randomWord = wordsList[Math.floor(Math.random() * wordsList.length)]; const randomWord = wordsList[Math.floor(Math.random() * wordsList.length)];
@ -306,14 +460,14 @@ class AccountElement extends HTMLElement {
const a = document.createElement('a'); const a = document.createElement('a');
a.href = url; a.href = url;
a.download = 'user_data.json'; a.download = 'user_data.json';
document.body.appendChild(a); this.shadowRoot?.appendChild(a);
a.click(); a.click();
document.body.removeChild(a); this.shadowRoot?.removeChild(a);
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
} }
private updateActionButtons(): void { private updateActionButtons(): void {
const buttonContainer = document.querySelector('.button-container'); const buttonContainer = this.shadowRoot?.querySelector('.button-container');
if (!buttonContainer) return; if (!buttonContainer) return;
buttonContainer.innerHTML = ` buttonContainer.innerHTML = `
@ -351,7 +505,7 @@ class AccountElement extends HTMLElement {
if (isAddingRow) return; if (isAddingRow) return;
isAddingRow = true; isAddingRow = true;
const table = document.querySelector<HTMLTableElement>('#pairing-table tbody'); const table = this.shadowRoot?.querySelector<HTMLTableElement>('#pairing-table tbody');
if (!table) return; if (!table) return;
currentRow = table.insertRow(); currentRow = table.insertRow();
@ -390,35 +544,35 @@ class AccountElement extends HTMLElement {
// Fonctions de mise à jour de l'interface // Fonctions de mise à jour de l'interface
private updateTableContent(rows: Row[]): void { private updateTableContent(rows: Row[]): void {
const tbody = document.querySelector('#pairing-table tbody'); const tbody = this.shadowRoot?.querySelector('#pairing-table tbody');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = rows tbody.innerHTML = rows.map(row => `
.map(
(row) => `
<tr> <tr>
<td>${row.column1}</td> <td>${row.column1}</td>
<td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td> <td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td>
<td>${row.column3}</td> <td>${row.column3}</td>
<td> <td>
<button class="delete-button" onclick="window.deleteRow(this)"> <button class="delete-button" onclick="window.deleteRow(this)">
<i class="fas fa-trash" style="color: red;"></i> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="red">
<path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/>
</svg>
</button> </button>
</td> </td>
</tr> </tr>
`, `).join('');
)
.join('');
} }
private confirmRow(): void { private confirmRow(): void {
if (!currentRow) return; if (!currentRow) return;
const inputs = currentRow.getElementsByTagName('input'); const inputs = currentRow.getElementsByTagName('input');
const values: string[] = Array.from(inputs).map((input) => input.value.trim()); const values: string[] = Array.from(inputs).map(input => input.value.trim());
// Vérification des champs vides // Vérification des champs vides
if (values.some((value) => value === '')) { if (values.some(value => value === '')) {
showAlert('Please fill in all fields'); showAlert('Please fill in all fields');
return; return;
} }
@ -432,7 +586,7 @@ class AccountElement extends HTMLElement {
const newRow: Row = { const newRow: Row = {
column1: values[0], column1: values[0],
column2: values[1], column2: values[1],
column3: values[2], column3: values[2]
}; };
const storageKey = STORAGE_KEYS[currentMode]; const storageKey = STORAGE_KEYS[currentMode];
@ -458,7 +612,7 @@ class AccountElement extends HTMLElement {
} }
private resetButtonContainer(): void { private resetButtonContainer(): void {
const buttonContainer = document.querySelector('.button-container'); const buttonContainer = this.shadowRoot?.querySelector('.button-container');
if (!buttonContainer) return; if (!buttonContainer) return;
buttonContainer.innerHTML = ` buttonContainer.innerHTML = `
@ -556,8 +710,8 @@ class AccountElement extends HTMLElement {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e: ProgressEvent<FileReader>) => { reader.onload = (e: ProgressEvent<FileReader>) => {
const result = e.target?.result as string; const result = e.target?.result as string;
const popupAvatar = document.getElementById('popup-avatar-img') as HTMLImageElement; const popupAvatar = this.shadowRoot?.getElementById('popup-avatar-img') as HTMLImageElement;
const navAvatar = document.querySelector('.nav-wrapper .avatar') as HTMLImageElement; const navAvatar = this.shadowRoot?.querySelector('.nav-wrapper .avatar') as HTMLImageElement;
if (popupAvatar) popupAvatar.src = result; if (popupAvatar) popupAvatar.src = result;
if (navAvatar) navAvatar.src = result; if (navAvatar) navAvatar.src = result;
@ -568,15 +722,16 @@ class AccountElement extends HTMLElement {
} }
} }
private showProcess(): void { private showProcess(): void {
//console.log("showProcess called"); //console.log("showProcess called");
currentMode = 'process'; currentMode = 'process';
this.hideAllContent(); this.hideAllContent();
const headerTitle = document.getElementById('header-title'); const headerTitle = this.shadowRoot?.getElementById('header-title');
if (headerTitle) headerTitle.textContent = 'Process'; if (headerTitle) headerTitle.textContent = 'Process';
const processContent = document.getElementById('process-content'); const processContent = this.shadowRoot?.getElementById('process-content');
if (processContent) { if (processContent) {
processContent.style.display = 'block'; processContent.style.display = 'block';
processContent.innerHTML = ` processContent.innerHTML = `
@ -595,59 +750,62 @@ class AccountElement extends HTMLElement {
</div> </div>
`; `;
// Utiliser mockProcessRows au lieu du localStorage
this.updateProcessTableContent(mockProcessRows); this.updateProcessTableContent(mockProcessRows);
} }
} }
// Fonction utilitaire pour mettre à jour le contenu du tableau Process // Fonction utilitaire pour mettre à jour le contenu du tableau Process
private updateProcessTableContent(rows: any[]): void { private updateProcessTableContent(rows: any[]): void {
const tbody = document.querySelector('#process-table tbody'); const tbody = this.shadowRoot?.querySelector('#process-table tbody');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = rows tbody.innerHTML = rows.map(row => `
.map(
(row) => `
<tr> <tr>
<td>${row.process}</td> <td>${row.process}</td>
<td>${row.role}</td> <td>${row.role}</td>
<td> <td>
<div class="notification-container" onclick="window.showProcessNotifications('${row.process}')"> <div class="notification-container" onclick="window.showProcessNotifications('${row.process}')">
<i class="fas fa-bell"></i> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
<path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/>
</svg>
<span class="notification-count" data-process="${row.process}"> <span class="notification-count" data-process="${row.process}">
${row.notification?.messages?.filter((m: any) => !m.read).length || 0}/${row.notification?.messages?.length || 0} ${row.notification?.messages?.filter((m: any) => !m.read).length || 0}/${row.notification?.messages?.length || 0}
</span> </span>
</div> </div>
</td> </td>
</tr> </tr>
`, `).join('');
)
.join('');
} }
private showProcessNotifications(processName: string): void { private showProcessNotifications(processName: string): void {
const process = mockProcessRows.find((p) => p.process === processName); const process = mockProcessRows.find(p => p.process === processName);
if (!process) return; if (!process) return;
const modal = document.createElement('div'); const modal = document.createElement('div');
modal.className = 'notifications-modal'; modal.className = 'notifications-modal';
let notificationsList = process.notification.messages let notificationsList = process.notification.messages.map(msg => `
.map(
(msg) => `
<div class="notification-item ${msg.read ? 'read' : 'unread'}" <div class="notification-item ${msg.read ? 'read' : 'unread'}"
onclick="window.markAsRead('${processName}', ${msg.id}, this)"> onclick="window.markAsRead('${processName}', ${msg.id}, this)">
<div class="notification-status"> <div class="notification-status">
<i class="fas ${msg.read ? 'fa-check' : 'fa-circle'}"></i> ${msg.read ?
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="green">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
</svg>` :
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16" fill="black">
<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>
</svg>`
}
</div> </div>
<div class="notification-content"> <div class="notification-content">
<span>${msg.message}</span> <span>${msg.message}</span>
<small>${msg.date}</small> <small>${msg.date}</small>
</div> </div>
</div> </div>
`, `).join('');
)
.join('');
if (process.notification.messages.length === 0) { if (process.notification.messages.length === 0) {
notificationsList = '<p>No notifications</p>'; notificationsList = '<p>No notifications</p>';
@ -663,10 +821,10 @@ class AccountElement extends HTMLElement {
</div> </div>
`; `;
document.body.appendChild(modal); this.shadowRoot?.appendChild(modal);
// Mettre à jour le compteur de notifications // Mettre à jour le compteur de notifications
const countElement = document.querySelector(`.notification-count[data-process="${processName}"]`); const countElement = this.shadowRoot?.querySelector(`.notification-count[data-process="${processName}"]`);
if (countElement) { if (countElement) {
const notifCount = this.calculateNotifications(process.notification.messages); const notifCount = this.calculateNotifications(process.notification.messages);
countElement.textContent = `${notifCount.unread}/${notifCount.total}`; countElement.textContent = `${notifCount.unread}/${notifCount.total}`;
@ -679,11 +837,13 @@ class AccountElement extends HTMLElement {
}); });
} }
private handleLogout(): void { private handleLogout(): void {
localStorage.clear(); localStorage.clear();
window.location.href = '../login/login.html'; window.location.href = '../login/login.html';
} }
// Fonctions de gestion des contrats // Fonctions de gestion des contrats
private showContractPopup(contractId: string) { private showContractPopup(contractId: string) {
// Empêcher la navigation par défaut // Empêcher la navigation par défaut
@ -707,7 +867,7 @@ class AccountElement extends HTMLElement {
<p><strong>Parties:</strong> ${contract.parties.join(', ')}</p> <p><strong>Parties:</strong> ${contract.parties.join(', ')}</p>
<p><strong>Terms:</strong></p> <p><strong>Terms:</strong></p>
<ul> <ul>
${contract.terms.map((term) => `<li>${term}</li>`).join('')} ${contract.terms.map(term => `<li>${term}</li>`).join('')}
</ul> </ul>
<p><strong>Content:</strong> ${contract.content}</p> <p><strong>Content:</strong> ${contract.content}</p>
</div> </div>
@ -715,7 +875,7 @@ class AccountElement extends HTMLElement {
`; `;
// Ajouter la popup au body // Ajouter la popup au body
document.body.appendChild(popup); this.shadowRoot?.appendChild(popup);
// Gérer la fermeture // Gérer la fermeture
const closeBtn = popup.querySelector('.close-contract-popup'); const closeBtn = popup.querySelector('.close-contract-popup');
@ -729,11 +889,12 @@ class AccountElement extends HTMLElement {
// Ajouter à l'objet window // Ajouter à l'objet window
// Fonction utilitaire pour cacher tous les contenus // Fonction utilitaire pour cacher tous les contenus
private hideAllContent(): void { private hideAllContent(): void {
const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content']; const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content'];
contents.forEach((id) => { contents.forEach(id => {
const element = document.getElementById(id); const element = this.shadowRoot?.getElementById(id);
if (element) { if (element) {
element.style.display = 'none'; element.style.display = 'none';
} }
@ -742,6 +903,7 @@ class AccountElement extends HTMLElement {
// Fonctions d'affichage des sections // Fonctions d'affichage des sections
private showPairing(): void { private showPairing(): void {
isAddingRow = false; isAddingRow = false;
currentRow = null; currentRow = null;
@ -750,13 +912,14 @@ class AccountElement extends HTMLElement {
this.hideAllContent(); this.hideAllContent();
// Mettre à jour le titre // Mettre à jour le titre
const headerElement = document.getElementById('parameter-header'); const headerElement = this.shadowRoot?.getElementById('parameter-header');
if (headerElement) { if (headerElement) {
headerElement.textContent = 'Pairing'; headerElement.textContent = 'Pairing';
} }
// Afficher le contenu de pairing // Afficher le contenu de pairing
const pairingContent = document.getElementById('pairing-content'); const pairingContent = this.shadowRoot?.getElementById('pairing-content');
if (pairingContent) { if (pairingContent) {
pairingContent.style.display = 'block'; pairingContent.style.display = 'block';
@ -794,10 +957,10 @@ class AccountElement extends HTMLElement {
this.hideAllContent(); this.hideAllContent();
// Mettre à jour le titre // Mettre à jour le titre
const headerTitle = document.getElementById('header-title'); const headerTitle = this.shadowRoot?.getElementById('header-title');
if (headerTitle) headerTitle.textContent = 'Wallet'; if (headerTitle) headerTitle.textContent = 'Wallet';
const walletContent = document.getElementById('wallet-content'); const walletContent = this.shadowRoot?.getElementById('wallet-content');
if (!walletContent) return; if (!walletContent) return;
walletContent.style.display = 'block'; walletContent.style.display = 'block';
walletContent.innerHTML = ` walletContent.innerHTML = `
@ -823,21 +986,18 @@ class AccountElement extends HTMLElement {
this.updateWalletTableContent(rows); this.updateWalletTableContent(rows);
} }
private updateWalletTableContent(rows: WalletRow[]): void { private updateWalletTableContent(rows: WalletRow[]): void {
const tbody = document.querySelector('#wallet-table tbody'); const tbody = this.shadowRoot?.querySelector('#wallet-table tbody');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = rows tbody.innerHTML = rows.map(row => `
.map(
(row) => `
<tr> <tr>
<td>${row.column1}</td> <td>${row.column1}</td>
<td>${row.column2}</td> <td>${row.column2}</td>
<td class="device-name" onclick="editDeviceName(this)">${row.column3}</td> <td class="device-name" onclick="editDeviceName(this)">${row.column3}</td>
</tr> </tr>
`, `).join('');
)
.join('');
} }
private showData(): void { private showData(): void {
@ -845,10 +1005,10 @@ class AccountElement extends HTMLElement {
currentMode = 'data'; currentMode = 'data';
this.hideAllContent(); this.hideAllContent();
const headerTitle = document.getElementById('header-title'); const headerTitle = this.shadowRoot?.getElementById('header-title');
if (headerTitle) headerTitle.textContent = 'Data'; if (headerTitle) headerTitle.textContent = 'Data';
const dataContent = document.getElementById('data-content'); const dataContent = this.shadowRoot?.getElementById('data-content');
if (dataContent) { if (dataContent) {
dataContent.style.display = 'block'; dataContent.style.display = 'block';
dataContent.innerHTML = ` dataContent.innerHTML = `
@ -880,13 +1040,13 @@ class AccountElement extends HTMLElement {
if (isAddingRow) return; if (isAddingRow) return;
isAddingRow = true; isAddingRow = true;
const table = document.getElementById('wallet-table')?.getElementsByTagName('tbody')[0]; const table = this.shadowRoot?.getElementById('wallet-table')?.getElementsByTagName('tbody')[0];
if (!table) return; if (!table) return;
currentRow = table.insertRow(); currentRow = table.insertRow();
const placeholders = ['Label', 'Wallet', 'Type']; const placeholders = ['Label', 'Wallet', 'Type'];
placeholders.forEach((placeholder) => { placeholders.forEach(placeholder => {
const cell = currentRow!.insertCell(); const cell = currentRow!.insertCell();
const input = document.createElement('input'); const input = document.createElement('input');
input.type = 'text'; input.type = 'text';
@ -896,7 +1056,7 @@ class AccountElement extends HTMLElement {
}); });
// Remplacer le bouton "Add a line" par les boutons de confirmation/annulation // Remplacer le bouton "Add a line" par les boutons de confirmation/annulation
const buttonContainer = document.querySelector('#wallet-content .button-container'); const buttonContainer = this.shadowRoot?.querySelector('#wallet-content .button-container');
if (!buttonContainer) return; if (!buttonContainer) return;
buttonContainer.innerHTML = ` buttonContainer.innerHTML = `
@ -913,13 +1073,13 @@ class AccountElement extends HTMLElement {
if (!currentRow) return; if (!currentRow) return;
const inputs = Array.from(currentRow.getElementsByTagName('input')); const inputs = Array.from(currentRow.getElementsByTagName('input'));
const allFieldsFilled = inputs.every((input) => input.value.trim() !== ''); const allFieldsFilled = inputs.every(input => input.value.trim() !== '');
if (allFieldsFilled) { if (allFieldsFilled) {
const newRow: WalletRow = { const newRow: WalletRow = {
column1: inputs[0].value.trim(), column1: inputs[0].value.trim(),
column2: inputs[1].value.trim(), column2: inputs[1].value.trim(),
column3: inputs[2].value.trim(), column3: inputs[2].value.trim()
}; };
const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]'); const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]');
@ -942,21 +1102,21 @@ class AccountElement extends HTMLElement {
currentRow = null; currentRow = null;
// Réinitialiser le conteneur de boutons avec le bouton "Add a line" // Réinitialiser le conteneur de boutons avec le bouton "Add a line"
const buttonContainer = document.querySelector('#wallet-content .button-container'); const buttonContainer = this.shadowRoot?.querySelector('#wallet-content .button-container');
if (!buttonContainer) return; if (!buttonContainer) return;
buttonContainer.innerHTML = ` buttonContainer.innerHTML = `
<button class="add-row-button button-style" onclick="window.addWalletRow()">Add a line</button> <button class="add-row-button button-style" onclick="window.addWalletRow()">Add a line</button>
`; `;
} }
private updateDataTableContent(rows: DataRow[]): void { private updateDataTableContent(rows: DataRow[]): void {
const tbody = document.querySelector('#data-table tbody'); const tbody = this.shadowRoot?.querySelector('#data-table tbody');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = rows tbody.innerHTML = rows.map(row => `
.map(
(row) => `
<tr> <tr>
<td>${row.column1}</td> <td>${row.column1}</td>
<td>${row.column2}</td> <td>${row.column2}</td>
@ -967,17 +1127,15 @@ class AccountElement extends HTMLElement {
<a href="#" onclick="showContractPopup('${row.column6}')">${row.column6}</a> <a href="#" onclick="showContractPopup('${row.column6}')">${row.column6}</a>
</td> </td>
</tr> </tr>
`, `).join('');
)
.join('');
} }
// Fonctions de gestion de l'avatar et de la bannière // Fonctions de gestion de l'avatar et de la bannière
private openAvatarPopup(): void { private openAvatarPopup(): void {
const popup = document.getElementById('avatar-popup'); const popup = this.shadowRoot?.getElementById('avatar-popup');
if (!popup) return; if (!popup) return;
// Récupérer les valeurs stockées // Récuprer les valeurs stockées
const savedName = localStorage.getItem('userName'); const savedName = localStorage.getItem('userName');
const savedLastName = localStorage.getItem('userLastName'); const savedLastName = localStorage.getItem('userLastName');
const savedAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150'; const savedAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150';
@ -1045,7 +1203,6 @@ class AccountElement extends HTMLElement {
}); });
} }
// Après avoir créé le popup, vérifier si recovery a déjà été exporté
const recoveryExported = localStorage.getItem('recoveryExported') === 'true'; const recoveryExported = localStorage.getItem('recoveryExported') === 'true';
if (recoveryExported) { if (recoveryExported) {
const exportRecoveryBtn = popup.querySelector('.recovery-btn') as HTMLButtonElement; const exportRecoveryBtn = popup.querySelector('.recovery-btn') as HTMLButtonElement;
@ -1075,13 +1232,12 @@ class AccountElement extends HTMLElement {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e: ProgressEvent<FileReader>) => { reader.onload = (e: ProgressEvent<FileReader>) => {
const result = e.target?.result as string; const result = e.target?.result as string;
const popupAvatar = popup.querySelector('#popup-avatar-img') as HTMLImageElement; // Mise à jour de l'avatar dans la preview et le popup
const navAvatar = document.querySelector('.nav-wrapper .avatar') as HTMLImageElement; const popupAvatar = this.shadowRoot?.getElementById('popup-avatar-img') as HTMLImageElement;
const headerAvatar = document.querySelector('header-element')?.shadowRoot?.querySelector('.avatar') as HTMLImageElement; const previewAvatar = this.shadowRoot?.querySelector('.preview-avatar') as HTMLImageElement;
if (popupAvatar) popupAvatar.src = result; if (popupAvatar) popupAvatar.src = result;
if (navAvatar) navAvatar.src = result; if (previewAvatar) previewAvatar.src = result;
if (headerAvatar) headerAvatar.src = result;
localStorage.setItem('userAvatar', result); localStorage.setItem('userAvatar', result);
}; };
@ -1099,13 +1255,12 @@ class AccountElement extends HTMLElement {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e: ProgressEvent<FileReader>) => { reader.onload = (e: ProgressEvent<FileReader>) => {
const result = e.target?.result as string; const result = e.target?.result as string;
const popupBanner = popup.querySelector('#popup-banner-img') as HTMLImageElement; // Mise à jour de la bannière dans la preview et le popup
const navBanner = document.querySelector('.nav-wrapper .banner-image') as HTMLImageElement; const popupBanner = this.shadowRoot?.getElementById('popup-banner-img') as HTMLImageElement;
const headerBanner = document.querySelector('header-element')?.shadowRoot?.querySelector('.banner-image') as HTMLImageElement; const previewBanner = this.shadowRoot?.querySelector('.preview-banner-img') as HTMLImageElement;
if (popupBanner) popupBanner.src = result; if (popupBanner) popupBanner.src = result;
if (navBanner) navBanner.src = result; if (previewBanner) previewBanner.src = result;
if (headerBanner) headerBanner.src = result;
localStorage.setItem('userBanner', result); localStorage.setItem('userBanner', result);
}; };
@ -1122,39 +1277,32 @@ class AccountElement extends HTMLElement {
nameInput.addEventListener('input', () => { nameInput.addEventListener('input', () => {
const newName = nameInput.value; const newName = nameInput.value;
localStorage.setItem('userName', newName); localStorage.setItem('userName', newName);
// Mise à jour du nom dans la preview
const headerName = document.querySelector('header-element')?.shadowRoot?.querySelector('.user-name'); const previewName = this.shadowRoot?.querySelector('.preview-name');
const navName = document.querySelector('.nav-wrapper .user-name'); if (previewName) previewName.textContent = newName;
if (headerName) headerName.textContent = newName;
if (navName) navName.textContent = newName;
}); });
} }
if (lastNameInput) { if (lastNameInput) {
lastNameInput.addEventListener('input', () => { lastNameInput.addEventListener('input', () => {
const newLastName = lastNameInput.value; const newLastName = lastNameInput.value;
console.log('Nom de famille mis à jour :', newLastName);
localStorage.setItem('userLastName', newLastName); localStorage.setItem('userLastName', newLastName);
// Mise à jour du nom de famille dans la preview
const headerLastName = document.querySelector('header-element')?.shadowRoot?.querySelector('.user-lastname'); const previewLastName = this.shadowRoot?.querySelector('.preview-lastname');
const navLastName = document.querySelector('.nav-wrapper .user-lastname'); if (previewLastName) previewLastName.textContent = newLastName;
if (headerLastName) headerLastName.textContent = newLastName;
if (navLastName) navLastName.textContent = newLastName;
}); });
} }
} }
private closeAvatarPopup(): void { private closeAvatarPopup(): void {
const popup = document.querySelector('.avatar-popup'); const popup = this.shadowRoot?.querySelector('.avatar-popup');
if (popup) popup.remove(); if (popup) popup.remove();
} }
private loadAvatar(): void { private loadAvatar(): void {
const savedAvatar = localStorage.getItem('userAvatar'); const savedAvatar = localStorage.getItem('userAvatar');
if (savedAvatar) { if (savedAvatar) {
const avatarImg = document.querySelector('.avatar') as HTMLImageElement; const avatarImg = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement;
if (avatarImg) { if (avatarImg) {
avatarImg.src = savedAvatar; avatarImg.src = savedAvatar;
} }
@ -1164,49 +1312,91 @@ class AccountElement extends HTMLElement {
private loadUserInfo(): void { private loadUserInfo(): void {
const savedName = localStorage.getItem('userName'); const savedName = localStorage.getItem('userName');
const savedLastName = localStorage.getItem('userLastName'); const savedLastName = localStorage.getItem('userLastName');
const savedAvatar = localStorage.getItem('userAvatar');
const savedBanner = localStorage.getItem('userBanner');
console.log('Nom récupéré :', savedName); // Mise à jour du nom dans la preview
console.log('Nom de famille récupéré :', savedLastName);
if (savedName) { if (savedName) {
const nameDisplay = document.querySelector('.user-name'); const previewName = this.shadowRoot?.querySelector('.preview-name');
if (nameDisplay) { if (previewName) {
nameDisplay.textContent = savedName; previewName.textContent = savedName;
} }
} }
// Mise à jour du nom de famille dans la preview
if (savedLastName) { if (savedLastName) {
const lastNameDisplay = document.querySelector('.user-lastname'); const previewLastName = this.shadowRoot?.querySelector('.preview-lastname');
if (lastNameDisplay) { if (previewLastName) {
lastNameDisplay.textContent = savedLastName; previewLastName.textContent = savedLastName;
} }
} }
this.loadAvatar(); // Mise à jour de l'avatar dans la preview
this.loadSavedBanner(); if (savedAvatar) {
const previewAvatar = this.shadowRoot?.querySelector('.preview-avatar') as HTMLImageElement;
if (previewAvatar) {
previewAvatar.src = savedAvatar;
}
}
// Mise à jour de la bannière dans la preview
if (savedBanner) {
const previewBanner = this.shadowRoot?.querySelector('.preview-banner-img') as HTMLImageElement;
if (previewBanner) {
previewBanner.src = savedBanner;
}
}
} }
private updateNavbarName(name: string): void { private updateNavbarName(name: string): void {
const nameElement = document.querySelector('.nav-wrapper .user-name'); const nameElement = this.shadowRoot?.querySelector('.nav-wrapper .user-name');
if (nameElement) { if (nameElement) {
nameElement.textContent = name; nameElement.textContent = name;
} }
} }
private updateNavbarLastName(lastName: string): void { private updateNavbarLastName(lastName: string): void {
const lastNameElement = document.querySelector('.nav-wrapper .user-lastname'); const lastNameElement = this.shadowRoot?.querySelector('.nav-wrapper .user-lastname');
if (lastNameElement) { if (lastNameElement) {
lastNameElement.textContent = lastName; lastNameElement.textContent = lastName;
} }
} }
private updateProfilePreview(data: {
avatar?: string,
banner?: string,
name?: string,
lastName?: string
}): void {
if (data.avatar) {
const previewAvatar = this.shadowRoot?.querySelector('.preview-avatar') as HTMLImageElement;
if (previewAvatar) previewAvatar.src = data.avatar;
}
if (data.banner) {
const previewBanner = this.shadowRoot?.querySelector('.preview-banner-img') as HTMLImageElement;
if (previewBanner) previewBanner.src = data.banner;
}
if (data.name) {
const previewName = this.shadowRoot?.querySelector('.preview-name');
if (previewName) previewName.textContent = data.name;
}
if (data.lastName) {
const previewLastName = this.shadowRoot?.querySelector('.preview-lastname');
if (previewLastName) previewLastName.textContent = data.lastName;
}
}
private initializeEventListeners() { private initializeEventListeners() {
document.addEventListener('DOMContentLoaded', () => { this.shadowRoot?.addEventListener('DOMContentLoaded', () => {
this.showPairing(); this.showPairing();
}); });
const editableFields = document.querySelectorAll<HTMLElement>('.editable'); const editableFields = this.shadowRoot?.querySelectorAll<HTMLElement>('.editable');
editableFields.forEach((field) => { if (editableFields) {
editableFields.forEach(field => {
field.addEventListener('click', () => { field.addEventListener('click', () => {
if (!field.classList.contains('editing')) { if (!field.classList.contains('editing')) {
const currentValue = field.textContent || ''; const currentValue = field.textContent || '';
@ -1222,38 +1412,11 @@ class AccountElement extends HTMLElement {
} }
}); });
}); });
}
const avatarInput = document.getElementById('avatar-upload') as HTMLInputElement; const avatarInput = this.shadowRoot?.getElementById('avatar-upload') as HTMLInputElement;
if (avatarInput) { if (avatarInput) {
avatarInput.addEventListener('change', this.handleAvatarUpload); avatarInput.addEventListener('change', this.handleAvatarUpload.bind(this));
}
}
connectedCallback() {
this.initializeEventListeners();
this.loadSavedBanner();
this.loadUserInfo();
const savedAvatar = localStorage.getItem('userAvatar');
const savedBanner = localStorage.getItem('userBanner');
const savedName = localStorage.getItem('userName');
const savedLastName = localStorage.getItem('userLastName');
if (savedAvatar) {
const navAvatar = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement;
if (navAvatar) navAvatar.src = savedAvatar;
}
if (savedBanner) {
const navBanner = this.shadowRoot?.querySelector('.banner-image') as HTMLImageElement;
if (navBanner) navBanner.src = savedBanner;
}
if (savedName) {
this.updateNavbarName(savedName);
}
if (savedLastName) {
this.updateNavbarLastName(savedLastName);
} }
} }
} }

47
src/pages/chat/chat.html
View File

@ -1,48 +1,13 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <title>Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Messagerie</title>
<link rel="stylesheet" href="../../public/style/chat.css" />
</head> </head>
<body> <body>
<!-- Main content--> <chat-component></chat-component>
<div class="container"> <script type="module" src="./chat.ts"></script>
<!-- List of groups -->
<div class="group-list">
<ul id="group-list">
<!-- Groups will be added here dynamically -->
</ul>
</div>
<!-- Chat area -->
<div class="chat-area">
<div class="chat-header" id="chat-header">
<!-- Chat title -->
</div>
<div class="messages" id="messages">
<!-- Messages -->
</div>
<!-- Input area -->
<div class="input-area">
<label for="file-input" class="attachment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z"
/>
</svg>
</label>
<input type="file" id="file-input" style="display: none" />
<textarea id="message-input" rows="3" placeholder="Type your message..."></textarea>
<button id="send-button">Send</button>
</div>
</div>
</div>
<script type="module" src="./chat.ts?ts"></script>
</body> </body>
</html> </html>

167
src/pages/chat/chat.ts
View File

@ -9,11 +9,16 @@ declare global {
import { groupsMock } from '../../mocks/mock-signature/groupsMock'; import { groupsMock } from '../../mocks/mock-signature/groupsMock';
import { messagesMock as initialMessagesMock, messagesMock } from '../../mocks/mock-signature/messagesMock'; import { messagesMock as initialMessagesMock, messagesMock } from '../../mocks/mock-signature/messagesMock';
import { membersMock } from '../../mocks/mock-signature/membersMocks'; import { membersMock } from '../../mocks/mock-signature/membersMocks';
import { Message, DocumentSignature } from '../../models/signature.models'; import {
Message,
DocumentSignature,
} from '../../models/signature.models';
import { messageStore } from '../../utils/messageMock'; import { messageStore } from '../../utils/messageMock';
import { Member } from '../../interface/memberInterface'; import { Member } from '../../interface/memberInterface';
import { Group } from '../../interface/groupInterface'; import { Group } from '../../interface/groupInterface';
import { getCorrectDOM } from '../../utils/document.utils'; import { getCorrectDOM } from '../../utils/document.utils';
import chatStyle from '../../../public/style/chat.css?inline';
let currentUser: Member = membersMock[0]; let currentUser: Member = membersMock[0];
@ -40,24 +45,64 @@ class ChatElement extends HTMLElement {
private notificationBoard = document.getElementById('notification-board'); private notificationBoard = document.getElementById('notification-board');
private notificationBell = document.getElementById('notification-bell'); private notificationBell = document.getElementById('notification-bell');
private selectedSignatories: DocumentSignature[] = []; private selectedSignatories: DocumentSignature[] = [];
private allMembers = membersMock.map((member) => ({ private allMembers = membersMock.map(member => ({
id: member.id, id: member.id,
name: member.name, name: member.name,
roleName: 'Default Role', roleName: 'Default Role'
})); }));
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.messagesMock = messageStore.getMessages();
this.dom = getCorrectDOM('signature-element'); this.dom = getCorrectDOM('signature-element');
this.shadowRoot!.innerHTML = `
<style>
${chatStyle}
</style>
<div class="container">
<!-- List of groups -->
<div class="group-list">
<ul id="group-list">
</ul>
</div>
<!-- Chat area -->
<div class="chat-area">
<div class="chat-header" id="chat-header">
<!-- Chat title -->
</div>
<div class="messages" id="messages">
<!-- Messages -->
</div>
<!-- Input area -->
<div class="input-area">
<label for="file-input" class="attachment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z"/>
</svg>
</label>
<input type="file" id="file-input" style="display: none;" />
<textarea id="message-input" rows="3" placeholder="Type your message..."></textarea>
<button id="send-button">Send</button>
</div>
</div>
</div>
`;
window.toggleUserList = this.toggleUserList.bind(this); window.toggleUserList = this.toggleUserList.bind(this);
window.switchUser = this.switchUser.bind(this); window.switchUser = this.switchUser.bind(this);
window.loadMemberChat = this.loadMemberChat.bind(this); window.loadMemberChat = this.loadMemberChat.bind(this);
// Initialiser les événements de notification // Initialiser les événements de notification
document.addEventListener('click', (event: Event): void => { document.addEventListener('click', (event: Event): void => {
if (this.notificationBoard && this.notificationBoard.style.display === 'block' && !this.notificationBoard.contains(event.target as Node) && this.notificationBell && !this.notificationBell.contains(event.target as Node)) { if (this.notificationBoard && this.notificationBoard.style.display === 'block' &&
!this.notificationBoard.contains(event.target as Node) &&
this.notificationBell && !this.notificationBell.contains(event.target as Node)) {
this.notificationBoard.style.display = 'none'; this.notificationBoard.style.display = 'none';
} }
}); });
@ -67,16 +112,17 @@ class ChatElement extends HTMLElement {
private initMessageEvents() { private initMessageEvents() {
// Pour le bouton Send // Pour le bouton Send
const sendButton = document.getElementById('send-button'); const sendButton = this.shadowRoot?.querySelector('#send-button');
if (sendButton) { if (sendButton) {
sendButton.addEventListener('click', () => this.sendMessage()); sendButton.addEventListener('click', () => this.sendMessage());
} }
// Pour la touche Entrée // Pour la touche Entrée
const messageInput = document.getElementById('message-input'); const messageInput = this.shadowRoot?.querySelector('#message-input');
if (messageInput) { if (messageInput) {
messageInput.addEventListener('keypress', (event: KeyboardEvent) => { messageInput.addEventListener('keypress', (event: Event) => {
if (event.key === 'Enter' && !event.shiftKey) { const keyEvent = event as KeyboardEvent; // Cast en KeyboardEvent
if (keyEvent.key === 'Enter' && !keyEvent.shiftKey) {
event.preventDefault(); event.preventDefault();
this.sendMessage(); this.sendMessage();
} }
@ -85,7 +131,7 @@ class ChatElement extends HTMLElement {
} }
private initFileUpload() { private initFileUpload() {
const fileInput = document.getElementById('file-input') as HTMLInputElement; const fileInput = this.shadowRoot?.querySelector('#file-input') as HTMLInputElement;
if (fileInput) { if (fileInput) {
fileInput.addEventListener('change', (event: Event) => { fileInput.addEventListener('change', (event: Event) => {
const target = event.target as HTMLInputElement; const target = event.target as HTMLInputElement;
@ -135,13 +181,14 @@ class ChatElement extends HTMLElement {
(this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none'; (this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none';
} }
// Add notification // Add notification
private addNotification(memberId: string, message: Message) { private addNotification(memberId: string, message: Message) {
// Creating a new notification // Creating a new notification
const notification = { const notification = {
memberId, memberId,
text: `New message from Member ${memberId}: ${message.text}`, text: `New message from Member ${memberId}: ${message.text}`,
time: message.time, time: message.time
}; };
// Added notification to list and interface // Added notification to list and interface
@ -152,7 +199,7 @@ class ChatElement extends HTMLElement {
// Send a messsage // Send a messsage
private sendMessage() { private sendMessage() {
const messageInput = document.getElementById('message-input') as HTMLInputElement; const messageInput = this.shadowRoot?.querySelector('#message-input') as HTMLInputElement;
if (!messageInput) return; if (!messageInput) return;
const messageText = messageInput.value.trim(); const messageText = messageInput.value.trim();
@ -162,10 +209,10 @@ class ChatElement extends HTMLElement {
const newMessage: Message = { const newMessage: Message = {
id: Date.now(), id: Date.now(),
sender: '4NK', sender: "4NK",
text: messageText, text: messageText,
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'text' as const, type: 'text' as const
}; };
// Add and display the message immediately // Add and display the message immediately
messageStore.addMessage(this.selectedMemberId, newMessage); messageStore.addMessage(this.selectedMemberId, newMessage);
@ -188,32 +235,33 @@ class ChatElement extends HTMLElement {
} }
// Scroll down the conversation after loading messages // Scroll down the conversation after loading messages
private scrollToBottom(container: HTMLElement) { private scrollToBottom(container: Element) {
container.scrollTop = container.scrollHeight; (container as HTMLElement).scrollTop = (container as HTMLElement).scrollHeight;
} }
// Load the list of members // Load the list of members
private loadMemberChat(memberId: string | number) { private loadMemberChat(memberId: string | number) {
this.selectedMemberId = String(memberId); this.selectedMemberId = String(memberId);
const memberMessages = this.messagesMock.find((m) => String(m.memberId) === String(memberId)); const memberMessages = this.messagesMock.find(m => String(m.memberId) === String(memberId));
// Find the process and the role of the member // Find the process and the role of the member
let memberInfo = { processName: '', roleName: '', memberName: '' }; let memberInfo = { processName: '', roleName: '', memberName: '' };
groupsMock.forEach((process) => { groupsMock.forEach(process => {
process.roles.forEach((role) => { process.roles.forEach(role => {
const member = role.members.find((m) => String(m.id) === String(memberId)); const member = role.members.find(m => String(m.id) === String(memberId));
if (member) { if (member) {
memberInfo = { memberInfo = {
processName: process.name, processName: process.name,
roleName: role.name, roleName: role.name,
memberName: member.name, memberName: member.name
}; };
} }
}); });
}); });
const chatHeader = document.getElementById('chat-header'); const chatHeader = this.shadowRoot?.querySelector('#chat-header');
const messagesContainer = document.getElementById('messages'); const messagesContainer = this.shadowRoot?.querySelector('#messages');
if (!chatHeader || !messagesContainer) return; if (!chatHeader || !messagesContainer) return;
@ -232,7 +280,7 @@ class ChatElement extends HTMLElement {
messageContent.classList.add('user'); messageContent.classList.add('user');
} else { } else {
messageContent.innerHTML = `<strong>${message.sender}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`; messageContent.innerHTML = `<strong>${message.sender}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`;
if (message.sender === '4NK') { if (message.sender === "4NK") {
messageContent.classList.add('user'); messageContent.classList.add('user');
} }
} }
@ -242,10 +290,11 @@ class ChatElement extends HTMLElement {
}); });
} }
this.scrollToBottom(messagesContainer); this.scrollToBottom(messagesContainer);
} }
private toggleMembers(role: { members: { id: string | number; name: string }[] }, roleElement: HTMLElement) { private toggleMembers(role: { members: { id: string | number; name: string; }[] }, roleElement: HTMLElement) {
let memberList = roleElement.querySelector('.member-list'); let memberList = roleElement.querySelector('.member-list');
if (memberList) { if (memberList) {
(memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none'; (memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none';
@ -255,7 +304,7 @@ class ChatElement extends HTMLElement {
memberList = document.createElement('ul'); memberList = document.createElement('ul');
memberList.className = 'member-list'; memberList.className = 'member-list';
role.members.forEach((member) => { role.members.forEach(member => {
const memberItem = document.createElement('li'); const memberItem = document.createElement('li');
memberItem.textContent = member.name; memberItem.textContent = member.name;
@ -270,6 +319,7 @@ class ChatElement extends HTMLElement {
roleElement.appendChild(memberList); roleElement.appendChild(memberList);
} }
// Toggle the list of Roles // Toggle the list of Roles
private toggleRoles(group: Group, groupElement: HTMLElement) { private toggleRoles(group: Group, groupElement: HTMLElement) {
console.log('=== toggleRoles START ==='); console.log('=== toggleRoles START ===');
@ -281,7 +331,7 @@ class ChatElement extends HTMLElement {
if (roleList) { if (roleList) {
const roleItems = roleList.querySelectorAll('.role-item'); const roleItems = roleList.querySelectorAll('.role-item');
roleItems.forEach((roleItem) => { roleItems.forEach(roleItem => {
console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet
let container = roleItem.querySelector('.role-item-container'); let container = roleItem.querySelector('.role-item-container');
@ -314,12 +364,9 @@ class ChatElement extends HTMLElement {
folderButton.addEventListener('click', (event) => { folderButton.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
console.log('Clicked role name:', roleName); console.log('Clicked role name:', roleName);
console.log( console.log('Available roles:', group.roles.map(r => r.name));
'Available roles:',
group.roles.map((r) => r.name),
);
const role = group.roles.find((r) => r.name === roleName); const role = group.roles.find(r => r.name === roleName);
if (role) { if (role) {
console.log('Found role:', role); console.log('Found role:', role);
} else { } else {
@ -332,15 +379,17 @@ class ChatElement extends HTMLElement {
} }
}); });
(roleList as HTMLElement).style.display = (roleList as HTMLElement).style.display === 'none' ? 'block' : 'none'; (roleList as HTMLElement).style.display =
(roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
} }
} }
private loadGroupList(): void { private loadGroupList(): void {
const groupList = document.getElementById('group-list'); const groupList = this.shadowRoot?.querySelector('#group-list');
if (!groupList) return; if (!groupList) return;
groupsMock.forEach((group) => { groupsMock.forEach(group => {
const li = document.createElement('li'); const li = document.createElement('li');
li.className = 'group-list-item'; li.className = 'group-list-item';
@ -369,7 +418,7 @@ class ChatElement extends HTMLElement {
roleList.style.display = 'none'; roleList.style.display = 'none';
// Add roles for this process // Add roles for this process
group.roles.forEach((role) => { group.roles.forEach(role => {
const roleItem = document.createElement('li'); const roleItem = document.createElement('li');
roleItem.className = 'role-item'; roleItem.className = 'role-item';
roleItem.textContent = role.name; roleItem.textContent = role.name;
@ -385,15 +434,14 @@ class ChatElement extends HTMLElement {
}); });
} }
// Function to manage the list of users // Function to manage the list of users
private toggleUserList() { private toggleUserList() {
const userList = getCorrectDOM('userList'); const userList = getCorrectDOM('userList');
if (!userList) return; if (!userList) return;
if (!(userList as HTMLElement).classList.contains('show')) { if (!(userList as HTMLElement).classList.contains('show')) {
(userList as HTMLElement).innerHTML = membersMock (userList as HTMLElement).innerHTML = membersMock.map(member => `
.map(
(member) => `
<div class="user-list-item" onclick="switchUser('${member.id}')"> <div class="user-list-item" onclick="switchUser('${member.id}')">
<span class="user-avatar">${member.avatar}</span> <span class="user-avatar">${member.avatar}</span>
<div> <div>
@ -401,15 +449,13 @@ class ChatElement extends HTMLElement {
<span class="user-email">${member.email}</span> <span class="user-email">${member.email}</span>
</div> </div>
</div> </div>
`, `).join('');
)
.join('');
} }
(userList as HTMLElement).classList.toggle('show'); (userList as HTMLElement).classList.toggle('show');
} }
private switchUser(userId: string | number) { private switchUser(userId: string | number) {
const user = membersMock.find((member) => member.id === userId); const user = membersMock.find(member => member.id === userId);
if (!user) return; if (!user) return;
currentUser = user; currentUser = user;
this.updateCurrentUserDisplay(); this.updateCurrentUserDisplay();
@ -434,9 +480,9 @@ class ChatElement extends HTMLElement {
return { return {
id: Date.now(), id: Date.now(),
sender: senderName, sender: senderName,
text: 'OK...', text: "OK...",
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'text' as const, type: 'text' as const
}; };
} }
@ -452,11 +498,11 @@ class ChatElement extends HTMLElement {
if (this.selectedMemberId) { if (this.selectedMemberId) {
messageStore.addMessage(this.selectedMemberId, { messageStore.addMessage(this.selectedMemberId, {
id: Date.now(), id: Date.now(),
sender: '4NK', sender: "4NK",
fileName: fileName, fileName: fileName,
fileData: fileData, fileData: fileData,
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'file', type: 'file'
}); });
console.log('Message added to store'); console.log('Message added to store');
@ -468,7 +514,8 @@ class ChatElement extends HTMLElement {
} }
private initializeEventListeners() { private initializeEventListeners() {
document.addEventListener('DOMContentLoaded', (): void => {}); document.addEventListener('DOMContentLoaded', (): void => {
});
// Gestionnaire d'événements pour le chat // Gestionnaire d'événements pour le chat
const sendBtn = this.shadowRoot?.querySelector('#send-button'); const sendBtn = this.shadowRoot?.querySelector('#send-button');
@ -498,30 +545,20 @@ class ChatElement extends HTMLElement {
} }
} }
connectedCallback() {
if (this.shadowRoot) {
this.shadowRoot.innerHTML = `
<div class="container">
<div class="group-list">
<ul id="group-list"></ul>
</div>
<div class="chat-area">
<!-- ... reste du HTML de signature.html ... -->
</div>
</div>
`;
}
this.messagesMock = messageStore.getMessages();
if (this.messagesMock.length === 0) { connectedCallback() {
messageStore.setMessages(initialMessagesMock);
this.messagesMock = messageStore.getMessages();
}
this.updateCurrentUserDisplay(); this.updateCurrentUserDisplay();
this.initializeEventListeners(); this.initializeEventListeners();
this.loadGroupList(); this.loadGroupList();
// Si un membre est sélectionné par défaut, charger ses messages
if (this.selectedMemberId) {
this.loadMemberChat(this.selectedMemberId);
}
} }
} }
customElements.define('chat-element', ChatElement); customElements.define('chat-element', ChatElement);
export { ChatElement }; export { ChatElement };

15
src/pages/signature/signature-component.ts
View File

@ -1,21 +1,21 @@
import { SignatureElement } from './signature'; import { SignatureElement } from './signature';
import signatureCss from '../../../public/style/signature.css?raw'; import signatureCss from '../../../public/style/signature.css?raw'
import Services from '../../services/service.js'; import Services from '../../services/service.js'
class SignatureComponent extends HTMLElement { class SignatureComponent extends HTMLElement {
_callback: any; _callback: any
signatureElement: SignatureElement | null = null; signatureElement: SignatureElement | null = null;
constructor() { constructor() {
super(); super();
console.log('INIT'); console.log('INIT')
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null; this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null;
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACKs'); console.log('CALLBACKs')
this.render(); this.render();
this.fetchData(); this.fetchData();
@ -28,7 +28,7 @@ class SignatureComponent extends HTMLElement {
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) { if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
const data = await (window as any).myService?.getProcesses(); const data = await (window as any).myService?.getProcesses();
} else { } else {
const service = await Services.getInstance(); const service = await Services.getInstance()
const data = await service.getProcesses(); const data = await service.getProcesses();
} }
} }
@ -47,7 +47,6 @@ class SignatureComponent extends HTMLElement {
render() { render() {
if(this.shadowRoot) { if(this.shadowRoot) {
// Créer l'élément signature-element
const signatureElement = document.createElement('signature-element'); const signatureElement = document.createElement('signature-element');
this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`; this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`;
this.shadowRoot.appendChild(signatureElement); this.shadowRoot.appendChild(signatureElement);
@ -55,5 +54,5 @@ class SignatureComponent extends HTMLElement {
} }
} }
export { SignatureComponent }; export { SignatureComponent }
customElements.define('signature-component', SignatureComponent); customElements.define('signature-component', SignatureComponent);

44
src/pages/signature/signature.html
View File

@ -1,46 +1,12 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Signatures</title> <title>Signatures</title>
<link rel="stylesheet" href="../../../public/style/signature.css" />
</head> </head>
<body> <body>
<!-- Main content--> <signature-component></signature-component>
<div class="container"> <script type="module" src="./signature.ts"></script>
<!-- List of groups -->
<div class="group-list">
<ul id="group-list"></ul>
</div>
<!-- Chat area -->
<div class="chat-area">
<div class="chat-header" id="chat-header">
<!-- Chat title -->
</div>
<div class="messages" id="messages">
<!-- Messages -->
</div>
<!-- Input area -->
<div class="input-area">
<label for="file-input" class="attachment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z"
/>
</svg>
</label>
<input type="file" id="file-input" style="display: none" />
<textarea id="message-input" rows="3" placeholder="Type your message..."></textarea>
<button id="send-button">Send</button>
</div>
</div>
</div>
<script type="module" src="./signature.ts?ts"></script>
</body> </body>
</html> </html>

580
src/pages/signature/signature.ts
View File

File diff suppressed because it is too large Load Diff