component_ok
This commit is contained in:
Pascal
Sosthene
parent
5e1b22d302
commit
6652354b33
@ -595,10 +595,11 @@ body {
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: calc(100% - 4vh);
|
||||
margin-top: 4vh;
|
||||
height: 90vh;
|
||||
margin-top: 9vh;
|
||||
margin-left: -1%;
|
||||
text-align: left;
|
||||
width: 209vh;
|
||||
}
|
||||
|
||||
/* Liste des information sur l'account */
|
||||
@ -612,6 +613,8 @@ body {
|
||||
overflow-y: auto;
|
||||
border-right: 2px solid #2c3e50;
|
||||
flex-shrink: 0;
|
||||
padding-right: 10px;
|
||||
height: 91vh;
|
||||
}
|
||||
|
||||
.parameter-list ul {
|
||||
@ -640,9 +643,10 @@ body {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
margin: 10px;
|
||||
margin: 0px;
|
||||
margin-top: 20px;
|
||||
margin-left: 0%;
|
||||
margin-left: 1%;
|
||||
margin-bottom: -7px;
|
||||
}
|
||||
|
||||
/* En-tête du parametre */
|
||||
@ -1317,3 +1321,46 @@ body {
|
||||
.banner-image.clickable:hover {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -145,10 +145,11 @@ body {
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: calc(100% - 4vh);
|
||||
margin-top: 4vh;
|
||||
height: 90vh;
|
||||
margin-top: 9vh;
|
||||
margin-left: -1%;
|
||||
text-align: left;
|
||||
width: 209vh;
|
||||
}
|
||||
|
||||
|
||||
@ -164,8 +165,8 @@ body {
|
||||
border-right: 2px solid #2c3e50;
|
||||
flex-shrink: 0;
|
||||
padding-right: 10px;
|
||||
height: 91vh;
|
||||
}
|
||||
|
||||
.group-list ul {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
@ -198,9 +199,10 @@ body {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
margin: 10px;
|
||||
margin: 0px;
|
||||
margin-top: 20px;
|
||||
margin-left: 0%;
|
||||
margin-left: 1%;
|
||||
margin-bottom: -7px;
|
||||
}
|
||||
|
||||
/* En-tête du chat */
|
||||
|
||||
@ -18,6 +18,8 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 4NK NAVBAR */
|
||||
|
||||
.brand-logo {
|
||||
@ -144,10 +146,11 @@ body {
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: calc(100% - 4vh);
|
||||
margin-top: 4vh;
|
||||
height: 90vh;
|
||||
margin-top: 9vh;
|
||||
margin-left: -1%;
|
||||
text-align: left;
|
||||
width: 209vh;
|
||||
}
|
||||
|
||||
|
||||
@ -163,6 +166,7 @@ body {
|
||||
border-right: 2px solid #2c3e50;
|
||||
flex-shrink: 0;
|
||||
padding-right: 10px;
|
||||
height: 91vh;
|
||||
}
|
||||
|
||||
.group-list ul {
|
||||
@ -198,9 +202,10 @@ body {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
margin: 10px;
|
||||
margin: 0px;
|
||||
margin-top: 20px;
|
||||
margin-left: 0%;
|
||||
margin-left: 1%;
|
||||
margin-bottom: -7px;
|
||||
}
|
||||
|
||||
/* En-tête du chat */
|
||||
|
||||
@ -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>
|
||||
@ -1,99 +1,10 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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>
|
||||
<body>
|
||||
<!-- Header Container -->
|
||||
<div id="header-container"></div>
|
||||
|
||||
<!-- Profile Popup -->
|
||||
<div id="avatar-popup" class="popup">
|
||||
<div class="popup-content">
|
||||
<span class="close-popup">×</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>
|
||||
<account-component></account-component>
|
||||
<script type="module" src="./account.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -44,6 +44,7 @@ import { STORAGE_KEYS, defaultRows, mockProcessRows, mockNotifications, notifica
|
||||
import { Row, WalletRow, DataRow, Notification, Contract, NotificationMessage } from '../../mocks/mock-account/interfacesAccountMock';
|
||||
import { addressToEmoji } from '../../utils/sp-address.utils';
|
||||
import { getCorrectDOM } from '../../utils/document.utils';
|
||||
import accountStyle from '../../../public/style/account.css?inline';
|
||||
|
||||
let isAddingRow = false;
|
||||
let currentRow: HTMLTableRowElement | null = null;
|
||||
@ -68,6 +69,7 @@ export function showAlert(message: string): void {
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
|
||||
class AccountElement extends HTMLElement {
|
||||
private dom: Node;
|
||||
|
||||
@ -76,6 +78,117 @@ class AccountElement extends HTMLElement {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
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">×</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.showWallet = () => this.showWallet();
|
||||
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
|
||||
private confirmDeleteAccount(): void {
|
||||
const modal = document.createElement('div');
|
||||
@ -122,7 +264,7 @@ class AccountElement extends HTMLElement {
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
this.shadowRoot?.appendChild(modal);
|
||||
modal.style.display = 'block';
|
||||
|
||||
const cancelBtn = modal.querySelector('.cancel-btn');
|
||||
@ -144,7 +286,7 @@ class AccountElement extends HTMLElement {
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
let bannerImg = navbarSection.querySelector<HTMLImageElement>('.banner-image');
|
||||
@ -165,7 +307,7 @@ class AccountElement extends HTMLElement {
|
||||
private loadSavedBanner(): void {
|
||||
const savedBanner = localStorage.getItem('userBanner');
|
||||
if (savedBanner) {
|
||||
const bannerImg = document.getElementById('popup-banner-img') as HTMLImageElement;
|
||||
const bannerImg = this.shadowRoot?.getElementById('popup-banner-img') as HTMLImageElement;
|
||||
if (bannerImg) {
|
||||
bannerImg.src = savedBanner;
|
||||
}
|
||||
@ -173,43 +315,47 @@ class AccountElement extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private closeNotificationPopup(event: Event): void {
|
||||
const target = event.target as HTMLElement;
|
||||
const isOverlay = target.classList.contains('notification-popup-overlay');
|
||||
const isCloseButton = target.classList.contains('close-popup');
|
||||
if (!isOverlay && !isCloseButton) return;
|
||||
|
||||
const popup = document.querySelector('.notification-popup-overlay');
|
||||
const popup = this.shadowRoot?.querySelector('.notification-popup-overlay');
|
||||
if (popup) popup.remove();
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
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;
|
||||
|
||||
message.read = true;
|
||||
|
||||
element.classList.remove('unread');
|
||||
element.classList.add('read');
|
||||
const statusIcon = element.querySelector('.notification-status i');
|
||||
|
||||
const statusIcon = element.querySelector('.notification-status');
|
||||
if (statusIcon) {
|
||||
statusIcon.classList.remove('fa-circle');
|
||||
statusIcon.classList.add('fa-check');
|
||||
statusIcon.innerHTML = `
|
||||
<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 countElement = document.querySelector(`.notification-count[data-process="${processName}"]`);
|
||||
const countElement = this.shadowRoot?.querySelector(`.notification-count[data-process="${processName}"]`);
|
||||
if (countElement) {
|
||||
countElement.textContent = `${notifCount.unread}/${notifCount.total}`;
|
||||
|
||||
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) {
|
||||
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
|
||||
private calculateNotifications(messages: NotificationMessage[]): { unread: number; total: number } {
|
||||
const total = messages.length;
|
||||
const unread = messages.filter((msg) => !msg.read).length;
|
||||
const unread = messages.filter(msg => !msg.read).length;
|
||||
return { unread, total };
|
||||
}
|
||||
|
||||
@ -232,6 +378,11 @@ class AccountElement extends HTMLElement {
|
||||
cancelButtonText: 'Cancel',
|
||||
confirmButtonColor: '#C89666',
|
||||
cancelButtonColor: '#6c757d',
|
||||
// Ajouter des styles personnalisés
|
||||
customClass: {
|
||||
container: 'recovery-popup-container',
|
||||
popup: 'recovery-popup'
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
const recoveryWords = this.generateRecoveryWords();
|
||||
@ -241,16 +392,12 @@ class AccountElement extends HTMLElement {
|
||||
title: 'Your Recovery Words',
|
||||
html: `
|
||||
<div class="recovery-words-container">
|
||||
${recoveryWords
|
||||
.map(
|
||||
(word, index) => `
|
||||
${recoveryWords.map((word, index) => `
|
||||
<div class="recovery-word">
|
||||
<span class="word-number">${index + 1}.</span>
|
||||
<span class="word">${word}</span>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
`).join('')}
|
||||
</div>
|
||||
<div class="recovery-warning">
|
||||
Please write these words down carefully. They will be needed to recover your account.
|
||||
@ -261,12 +408,16 @@ class AccountElement extends HTMLElement {
|
||||
confirmButtonColor: '#C89666',
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
customClass: {
|
||||
container: 'recovery-popup-container',
|
||||
popup: 'recovery-popup'
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Stocker l'état du bouton dans le localStorage
|
||||
localStorage.setItem('recoveryExported', 'true');
|
||||
|
||||
const exportRecoveryBtn = document.querySelector('.recovery-btn') as HTMLButtonElement;
|
||||
const exportRecoveryBtn = this.shadowRoot?.querySelector('.recovery-btn') as HTMLButtonElement;
|
||||
if (exportRecoveryBtn) {
|
||||
exportRecoveryBtn.disabled = true;
|
||||
exportRecoveryBtn.style.opacity = '0.5';
|
||||
@ -279,7 +430,10 @@ class AccountElement extends HTMLElement {
|
||||
}
|
||||
|
||||
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[] = [];
|
||||
while (recoveryWords.length < 4) {
|
||||
const randomWord = wordsList[Math.floor(Math.random() * wordsList.length)];
|
||||
@ -306,14 +460,14 @@ class AccountElement extends HTMLElement {
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'user_data.json';
|
||||
document.body.appendChild(a);
|
||||
this.shadowRoot?.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
this.shadowRoot?.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
private updateActionButtons(): void {
|
||||
const buttonContainer = document.querySelector('.button-container');
|
||||
const buttonContainer = this.shadowRoot?.querySelector('.button-container');
|
||||
if (!buttonContainer) return;
|
||||
|
||||
buttonContainer.innerHTML = `
|
||||
@ -351,7 +505,7 @@ class AccountElement extends HTMLElement {
|
||||
if (isAddingRow) return;
|
||||
|
||||
isAddingRow = true;
|
||||
const table = document.querySelector<HTMLTableElement>('#pairing-table tbody');
|
||||
const table = this.shadowRoot?.querySelector<HTMLTableElement>('#pairing-table tbody');
|
||||
if (!table) return;
|
||||
|
||||
currentRow = table.insertRow();
|
||||
@ -390,35 +544,35 @@ class AccountElement extends HTMLElement {
|
||||
|
||||
// Fonctions de mise à jour de l'interface
|
||||
private updateTableContent(rows: Row[]): void {
|
||||
const tbody = document.querySelector('#pairing-table tbody');
|
||||
const tbody = this.shadowRoot?.querySelector('#pairing-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
<tr>
|
||||
<td>${row.column1}</td>
|
||||
<td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td>
|
||||
<td>${row.column3}</td>
|
||||
<td>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
`).join('');
|
||||
}
|
||||
|
||||
|
||||
|
||||
private confirmRow(): void {
|
||||
if (!currentRow) return;
|
||||
|
||||
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
|
||||
if (values.some((value) => value === '')) {
|
||||
if (values.some(value => value === '')) {
|
||||
showAlert('Please fill in all fields');
|
||||
return;
|
||||
}
|
||||
@ -432,7 +586,7 @@ class AccountElement extends HTMLElement {
|
||||
const newRow: Row = {
|
||||
column1: values[0],
|
||||
column2: values[1],
|
||||
column3: values[2],
|
||||
column3: values[2]
|
||||
};
|
||||
|
||||
const storageKey = STORAGE_KEYS[currentMode];
|
||||
@ -458,7 +612,7 @@ class AccountElement extends HTMLElement {
|
||||
}
|
||||
|
||||
private resetButtonContainer(): void {
|
||||
const buttonContainer = document.querySelector('.button-container');
|
||||
const buttonContainer = this.shadowRoot?.querySelector('.button-container');
|
||||
if (!buttonContainer) return;
|
||||
|
||||
buttonContainer.innerHTML = `
|
||||
@ -556,8 +710,8 @@ class AccountElement extends HTMLElement {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e: ProgressEvent<FileReader>) => {
|
||||
const result = e.target?.result as string;
|
||||
const popupAvatar = document.getElementById('popup-avatar-img') as HTMLImageElement;
|
||||
const navAvatar = document.querySelector('.nav-wrapper .avatar') as HTMLImageElement;
|
||||
const popupAvatar = this.shadowRoot?.getElementById('popup-avatar-img') as HTMLImageElement;
|
||||
const navAvatar = this.shadowRoot?.querySelector('.nav-wrapper .avatar') as HTMLImageElement;
|
||||
|
||||
if (popupAvatar) popupAvatar.src = result;
|
||||
if (navAvatar) navAvatar.src = result;
|
||||
@ -568,15 +722,16 @@ class AccountElement extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private showProcess(): void {
|
||||
//console.log("showProcess called");
|
||||
currentMode = 'process';
|
||||
this.hideAllContent();
|
||||
|
||||
const headerTitle = document.getElementById('header-title');
|
||||
const headerTitle = this.shadowRoot?.getElementById('header-title');
|
||||
if (headerTitle) headerTitle.textContent = 'Process';
|
||||
|
||||
const processContent = document.getElementById('process-content');
|
||||
const processContent = this.shadowRoot?.getElementById('process-content');
|
||||
if (processContent) {
|
||||
processContent.style.display = 'block';
|
||||
processContent.innerHTML = `
|
||||
@ -595,59 +750,62 @@ class AccountElement extends HTMLElement {
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Utiliser mockProcessRows au lieu du localStorage
|
||||
|
||||
this.updateProcessTableContent(mockProcessRows);
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction utilitaire pour mettre à jour le contenu du tableau Process
|
||||
private updateProcessTableContent(rows: any[]): void {
|
||||
const tbody = document.querySelector('#process-table tbody');
|
||||
const tbody = this.shadowRoot?.querySelector('#process-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
<tr>
|
||||
<td>${row.process}</td>
|
||||
<td>${row.role}</td>
|
||||
<td>
|
||||
<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}">
|
||||
${row.notification?.messages?.filter((m: any) => !m.read).length || 0}/${row.notification?.messages?.length || 0}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
`).join('');
|
||||
}
|
||||
|
||||
|
||||
|
||||
private showProcessNotifications(processName: string): void {
|
||||
const process = mockProcessRows.find((p) => p.process === processName);
|
||||
const process = mockProcessRows.find(p => p.process === processName);
|
||||
if (!process) return;
|
||||
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'notifications-modal';
|
||||
|
||||
let notificationsList = process.notification.messages
|
||||
.map(
|
||||
(msg) => `
|
||||
let notificationsList = process.notification.messages.map(msg => `
|
||||
<div class="notification-item ${msg.read ? 'read' : 'unread'}"
|
||||
onclick="window.markAsRead('${processName}', ${msg.id}, this)">
|
||||
<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 class="notification-content">
|
||||
<span>${msg.message}</span>
|
||||
<small>${msg.date}</small>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
`).join('');
|
||||
|
||||
if (process.notification.messages.length === 0) {
|
||||
notificationsList = '<p>No notifications</p>';
|
||||
@ -663,10 +821,10 @@ class AccountElement extends HTMLElement {
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
this.shadowRoot?.appendChild(modal);
|
||||
|
||||
// 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) {
|
||||
const notifCount = this.calculateNotifications(process.notification.messages);
|
||||
countElement.textContent = `${notifCount.unread}/${notifCount.total}`;
|
||||
@ -679,11 +837,13 @@ class AccountElement extends HTMLElement {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
private handleLogout(): void {
|
||||
localStorage.clear();
|
||||
window.location.href = '../login/login.html';
|
||||
}
|
||||
|
||||
|
||||
// Fonctions de gestion des contrats
|
||||
private showContractPopup(contractId: string) {
|
||||
// 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>Terms:</strong></p>
|
||||
<ul>
|
||||
${contract.terms.map((term) => `<li>${term}</li>`).join('')}
|
||||
${contract.terms.map(term => `<li>${term}</li>`).join('')}
|
||||
</ul>
|
||||
<p><strong>Content:</strong> ${contract.content}</p>
|
||||
</div>
|
||||
@ -715,7 +875,7 @@ class AccountElement extends HTMLElement {
|
||||
`;
|
||||
|
||||
// Ajouter la popup au body
|
||||
document.body.appendChild(popup);
|
||||
this.shadowRoot?.appendChild(popup);
|
||||
|
||||
// Gérer la fermeture
|
||||
const closeBtn = popup.querySelector('.close-contract-popup');
|
||||
@ -729,11 +889,12 @@ class AccountElement extends HTMLElement {
|
||||
|
||||
// Ajouter à l'objet window
|
||||
|
||||
|
||||
// Fonction utilitaire pour cacher tous les contenus
|
||||
private hideAllContent(): void {
|
||||
const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content'];
|
||||
contents.forEach((id) => {
|
||||
const element = document.getElementById(id);
|
||||
contents.forEach(id => {
|
||||
const element = this.shadowRoot?.getElementById(id);
|
||||
if (element) {
|
||||
element.style.display = 'none';
|
||||
}
|
||||
@ -742,6 +903,7 @@ class AccountElement extends HTMLElement {
|
||||
|
||||
// Fonctions d'affichage des sections
|
||||
private showPairing(): void {
|
||||
|
||||
isAddingRow = false;
|
||||
currentRow = null;
|
||||
|
||||
@ -750,13 +912,14 @@ class AccountElement extends HTMLElement {
|
||||
this.hideAllContent();
|
||||
|
||||
// Mettre à jour le titre
|
||||
const headerElement = document.getElementById('parameter-header');
|
||||
const headerElement = this.shadowRoot?.getElementById('parameter-header');
|
||||
if (headerElement) {
|
||||
headerElement.textContent = 'Pairing';
|
||||
}
|
||||
|
||||
|
||||
// Afficher le contenu de pairing
|
||||
const pairingContent = document.getElementById('pairing-content');
|
||||
const pairingContent = this.shadowRoot?.getElementById('pairing-content');
|
||||
|
||||
if (pairingContent) {
|
||||
pairingContent.style.display = 'block';
|
||||
@ -794,10 +957,10 @@ class AccountElement extends HTMLElement {
|
||||
this.hideAllContent();
|
||||
|
||||
// Mettre à jour le titre
|
||||
const headerTitle = document.getElementById('header-title');
|
||||
const headerTitle = this.shadowRoot?.getElementById('header-title');
|
||||
if (headerTitle) headerTitle.textContent = 'Wallet';
|
||||
|
||||
const walletContent = document.getElementById('wallet-content');
|
||||
const walletContent = this.shadowRoot?.getElementById('wallet-content');
|
||||
if (!walletContent) return;
|
||||
walletContent.style.display = 'block';
|
||||
walletContent.innerHTML = `
|
||||
@ -823,21 +986,18 @@ class AccountElement extends HTMLElement {
|
||||
this.updateWalletTableContent(rows);
|
||||
}
|
||||
|
||||
|
||||
private updateWalletTableContent(rows: WalletRow[]): void {
|
||||
const tbody = document.querySelector('#wallet-table tbody');
|
||||
const tbody = this.shadowRoot?.querySelector('#wallet-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
<tr>
|
||||
<td>${row.column1}</td>
|
||||
<td>${row.column2}</td>
|
||||
<td class="device-name" onclick="editDeviceName(this)">${row.column3}</td>
|
||||
</tr>
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
`).join('');
|
||||
}
|
||||
|
||||
private showData(): void {
|
||||
@ -845,10 +1005,10 @@ class AccountElement extends HTMLElement {
|
||||
currentMode = 'data';
|
||||
this.hideAllContent();
|
||||
|
||||
const headerTitle = document.getElementById('header-title');
|
||||
const headerTitle = this.shadowRoot?.getElementById('header-title');
|
||||
if (headerTitle) headerTitle.textContent = 'Data';
|
||||
|
||||
const dataContent = document.getElementById('data-content');
|
||||
const dataContent = this.shadowRoot?.getElementById('data-content');
|
||||
if (dataContent) {
|
||||
dataContent.style.display = 'block';
|
||||
dataContent.innerHTML = `
|
||||
@ -880,13 +1040,13 @@ class AccountElement extends HTMLElement {
|
||||
if (isAddingRow) return;
|
||||
isAddingRow = true;
|
||||
|
||||
const table = document.getElementById('wallet-table')?.getElementsByTagName('tbody')[0];
|
||||
const table = this.shadowRoot?.getElementById('wallet-table')?.getElementsByTagName('tbody')[0];
|
||||
if (!table) return;
|
||||
|
||||
currentRow = table.insertRow();
|
||||
const placeholders = ['Label', 'Wallet', 'Type'];
|
||||
|
||||
placeholders.forEach((placeholder) => {
|
||||
placeholders.forEach(placeholder => {
|
||||
const cell = currentRow!.insertCell();
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
@ -896,7 +1056,7 @@ class AccountElement extends HTMLElement {
|
||||
});
|
||||
|
||||
// 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;
|
||||
|
||||
buttonContainer.innerHTML = `
|
||||
@ -913,13 +1073,13 @@ class AccountElement extends HTMLElement {
|
||||
if (!currentRow) return;
|
||||
|
||||
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) {
|
||||
const newRow: WalletRow = {
|
||||
column1: inputs[0].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) || '[]');
|
||||
@ -942,21 +1102,21 @@ class AccountElement extends HTMLElement {
|
||||
currentRow = null;
|
||||
|
||||
// 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;
|
||||
|
||||
buttonContainer.innerHTML = `
|
||||
<button class="add-row-button button-style" onclick="window.addWalletRow()">Add a line</button>
|
||||
`;
|
||||
|
||||
|
||||
}
|
||||
|
||||
private updateDataTableContent(rows: DataRow[]): void {
|
||||
const tbody = document.querySelector('#data-table tbody');
|
||||
const tbody = this.shadowRoot?.querySelector('#data-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
<tr>
|
||||
<td>${row.column1}</td>
|
||||
<td>${row.column2}</td>
|
||||
@ -967,17 +1127,15 @@ class AccountElement extends HTMLElement {
|
||||
<a href="#" onclick="showContractPopup('${row.column6}')">${row.column6}</a>
|
||||
</td>
|
||||
</tr>
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Fonctions de gestion de l'avatar et de la bannière
|
||||
private openAvatarPopup(): void {
|
||||
const popup = document.getElementById('avatar-popup');
|
||||
const popup = this.shadowRoot?.getElementById('avatar-popup');
|
||||
if (!popup) return;
|
||||
|
||||
// Récupérer les valeurs stockées
|
||||
// Récuprer les valeurs stockées
|
||||
const savedName = localStorage.getItem('userName');
|
||||
const savedLastName = localStorage.getItem('userLastName');
|
||||
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';
|
||||
if (recoveryExported) {
|
||||
const exportRecoveryBtn = popup.querySelector('.recovery-btn') as HTMLButtonElement;
|
||||
@ -1075,13 +1232,12 @@ class AccountElement extends HTMLElement {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e: ProgressEvent<FileReader>) => {
|
||||
const result = e.target?.result as string;
|
||||
const popupAvatar = popup.querySelector('#popup-avatar-img') as HTMLImageElement;
|
||||
const navAvatar = document.querySelector('.nav-wrapper .avatar') as HTMLImageElement;
|
||||
const headerAvatar = document.querySelector('header-element')?.shadowRoot?.querySelector('.avatar') as HTMLImageElement;
|
||||
// Mise à jour de l'avatar dans la preview et le popup
|
||||
const popupAvatar = this.shadowRoot?.getElementById('popup-avatar-img') as HTMLImageElement;
|
||||
const previewAvatar = this.shadowRoot?.querySelector('.preview-avatar') as HTMLImageElement;
|
||||
|
||||
if (popupAvatar) popupAvatar.src = result;
|
||||
if (navAvatar) navAvatar.src = result;
|
||||
if (headerAvatar) headerAvatar.src = result;
|
||||
if (previewAvatar) previewAvatar.src = result;
|
||||
|
||||
localStorage.setItem('userAvatar', result);
|
||||
};
|
||||
@ -1099,13 +1255,12 @@ class AccountElement extends HTMLElement {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e: ProgressEvent<FileReader>) => {
|
||||
const result = e.target?.result as string;
|
||||
const popupBanner = popup.querySelector('#popup-banner-img') as HTMLImageElement;
|
||||
const navBanner = document.querySelector('.nav-wrapper .banner-image') as HTMLImageElement;
|
||||
const headerBanner = document.querySelector('header-element')?.shadowRoot?.querySelector('.banner-image') as HTMLImageElement;
|
||||
// Mise à jour de la bannière dans la preview et le popup
|
||||
const popupBanner = this.shadowRoot?.getElementById('popup-banner-img') as HTMLImageElement;
|
||||
const previewBanner = this.shadowRoot?.querySelector('.preview-banner-img') as HTMLImageElement;
|
||||
|
||||
if (popupBanner) popupBanner.src = result;
|
||||
if (navBanner) navBanner.src = result;
|
||||
if (headerBanner) headerBanner.src = result;
|
||||
if (previewBanner) previewBanner.src = result;
|
||||
|
||||
localStorage.setItem('userBanner', result);
|
||||
};
|
||||
@ -1122,39 +1277,32 @@ class AccountElement extends HTMLElement {
|
||||
nameInput.addEventListener('input', () => {
|
||||
const newName = nameInput.value;
|
||||
localStorage.setItem('userName', newName);
|
||||
|
||||
const headerName = document.querySelector('header-element')?.shadowRoot?.querySelector('.user-name');
|
||||
const navName = document.querySelector('.nav-wrapper .user-name');
|
||||
|
||||
if (headerName) headerName.textContent = newName;
|
||||
if (navName) navName.textContent = newName;
|
||||
// Mise à jour du nom dans la preview
|
||||
const previewName = this.shadowRoot?.querySelector('.preview-name');
|
||||
if (previewName) previewName.textContent = newName;
|
||||
});
|
||||
}
|
||||
|
||||
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');
|
||||
const navLastName = document.querySelector('.nav-wrapper .user-lastname');
|
||||
|
||||
if (headerLastName) headerLastName.textContent = newLastName;
|
||||
if (navLastName) navLastName.textContent = newLastName;
|
||||
// Mise à jour du nom de famille dans la preview
|
||||
const previewLastName = this.shadowRoot?.querySelector('.preview-lastname');
|
||||
if (previewLastName) previewLastName.textContent = newLastName;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private closeAvatarPopup(): void {
|
||||
const popup = document.querySelector('.avatar-popup');
|
||||
const popup = this.shadowRoot?.querySelector('.avatar-popup');
|
||||
if (popup) popup.remove();
|
||||
}
|
||||
|
||||
private loadAvatar(): void {
|
||||
const savedAvatar = localStorage.getItem('userAvatar');
|
||||
if (savedAvatar) {
|
||||
const avatarImg = document.querySelector('.avatar') as HTMLImageElement;
|
||||
const avatarImg = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement;
|
||||
if (avatarImg) {
|
||||
avatarImg.src = savedAvatar;
|
||||
}
|
||||
@ -1164,49 +1312,91 @@ class AccountElement extends HTMLElement {
|
||||
private loadUserInfo(): void {
|
||||
const savedName = localStorage.getItem('userName');
|
||||
const savedLastName = localStorage.getItem('userLastName');
|
||||
const savedAvatar = localStorage.getItem('userAvatar');
|
||||
const savedBanner = localStorage.getItem('userBanner');
|
||||
|
||||
console.log('Nom récupéré :', savedName);
|
||||
console.log('Nom de famille récupéré :', savedLastName);
|
||||
|
||||
// Mise à jour du nom dans la preview
|
||||
if (savedName) {
|
||||
const nameDisplay = document.querySelector('.user-name');
|
||||
if (nameDisplay) {
|
||||
nameDisplay.textContent = savedName;
|
||||
const previewName = this.shadowRoot?.querySelector('.preview-name');
|
||||
if (previewName) {
|
||||
previewName.textContent = savedName;
|
||||
}
|
||||
}
|
||||
|
||||
// Mise à jour du nom de famille dans la preview
|
||||
if (savedLastName) {
|
||||
const lastNameDisplay = document.querySelector('.user-lastname');
|
||||
if (lastNameDisplay) {
|
||||
lastNameDisplay.textContent = savedLastName;
|
||||
const previewLastName = this.shadowRoot?.querySelector('.preview-lastname');
|
||||
if (previewLastName) {
|
||||
previewLastName.textContent = savedLastName;
|
||||
}
|
||||
}
|
||||
|
||||
this.loadAvatar();
|
||||
this.loadSavedBanner();
|
||||
// Mise à jour de l'avatar dans la preview
|
||||
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 {
|
||||
const nameElement = document.querySelector('.nav-wrapper .user-name');
|
||||
const nameElement = this.shadowRoot?.querySelector('.nav-wrapper .user-name');
|
||||
if (nameElement) {
|
||||
nameElement.textContent = name;
|
||||
}
|
||||
}
|
||||
|
||||
private updateNavbarLastName(lastName: string): void {
|
||||
const lastNameElement = document.querySelector('.nav-wrapper .user-lastname');
|
||||
const lastNameElement = this.shadowRoot?.querySelector('.nav-wrapper .user-lastname');
|
||||
if (lastNameElement) {
|
||||
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() {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
this.shadowRoot?.addEventListener('DOMContentLoaded', () => {
|
||||
this.showPairing();
|
||||
});
|
||||
|
||||
const editableFields = document.querySelectorAll<HTMLElement>('.editable');
|
||||
editableFields.forEach((field) => {
|
||||
const editableFields = this.shadowRoot?.querySelectorAll<HTMLElement>('.editable');
|
||||
if (editableFields) {
|
||||
editableFields.forEach(field => {
|
||||
field.addEventListener('click', () => {
|
||||
if (!field.classList.contains('editing')) {
|
||||
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) {
|
||||
avatarInput.addEventListener('change', this.handleAvatarUpload);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
avatarInput.addEventListener('change', this.handleAvatarUpload.bind(this));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,48 +1,13 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Messagerie</title>
|
||||
<link rel="stylesheet" href="../../public/style/chat.css" />
|
||||
<title>Chat</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main content-->
|
||||
<div class="container">
|
||||
<!-- 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>
|
||||
<chat-component></chat-component>
|
||||
<script type="module" src="./chat.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -9,11 +9,16 @@ declare global {
|
||||
import { groupsMock } from '../../mocks/mock-signature/groupsMock';
|
||||
import { messagesMock as initialMessagesMock, messagesMock } from '../../mocks/mock-signature/messagesMock';
|
||||
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 { Member } from '../../interface/memberInterface';
|
||||
import { Group } from '../../interface/groupInterface';
|
||||
import { getCorrectDOM } from '../../utils/document.utils';
|
||||
import chatStyle from '../../../public/style/chat.css?inline';
|
||||
|
||||
|
||||
let currentUser: Member = membersMock[0];
|
||||
|
||||
@ -40,24 +45,64 @@ class ChatElement extends HTMLElement {
|
||||
private notificationBoard = document.getElementById('notification-board');
|
||||
private notificationBell = document.getElementById('notification-bell');
|
||||
private selectedSignatories: DocumentSignature[] = [];
|
||||
private allMembers = membersMock.map((member) => ({
|
||||
private allMembers = membersMock.map(member => ({
|
||||
id: member.id,
|
||||
name: member.name,
|
||||
roleName: 'Default Role',
|
||||
roleName: 'Default Role'
|
||||
}));
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.messagesMock = messageStore.getMessages();
|
||||
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.switchUser = this.switchUser.bind(this);
|
||||
window.loadMemberChat = this.loadMemberChat.bind(this);
|
||||
|
||||
// Initialiser les événements de notification
|
||||
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';
|
||||
}
|
||||
});
|
||||
@ -67,16 +112,17 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
private initMessageEvents() {
|
||||
// Pour le bouton Send
|
||||
const sendButton = document.getElementById('send-button');
|
||||
const sendButton = this.shadowRoot?.querySelector('#send-button');
|
||||
if (sendButton) {
|
||||
sendButton.addEventListener('click', () => this.sendMessage());
|
||||
}
|
||||
|
||||
// Pour la touche Entrée
|
||||
const messageInput = document.getElementById('message-input');
|
||||
const messageInput = this.shadowRoot?.querySelector('#message-input');
|
||||
if (messageInput) {
|
||||
messageInput.addEventListener('keypress', (event: KeyboardEvent) => {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
messageInput.addEventListener('keypress', (event: Event) => {
|
||||
const keyEvent = event as KeyboardEvent; // Cast en KeyboardEvent
|
||||
if (keyEvent.key === 'Enter' && !keyEvent.shiftKey) {
|
||||
event.preventDefault();
|
||||
this.sendMessage();
|
||||
}
|
||||
@ -85,7 +131,7 @@ class ChatElement extends HTMLElement {
|
||||
}
|
||||
|
||||
private initFileUpload() {
|
||||
const fileInput = document.getElementById('file-input') as HTMLInputElement;
|
||||
const fileInput = this.shadowRoot?.querySelector('#file-input') as HTMLInputElement;
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener('change', (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
@ -135,13 +181,14 @@ class ChatElement extends HTMLElement {
|
||||
(this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
|
||||
// Add notification
|
||||
private addNotification(memberId: string, message: Message) {
|
||||
// Creating a new notification
|
||||
const notification = {
|
||||
memberId,
|
||||
text: `New message from Member ${memberId}: ${message.text}`,
|
||||
time: message.time,
|
||||
time: message.time
|
||||
};
|
||||
|
||||
// Added notification to list and interface
|
||||
@ -152,7 +199,7 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
// Send a messsage
|
||||
private sendMessage() {
|
||||
const messageInput = document.getElementById('message-input') as HTMLInputElement;
|
||||
const messageInput = this.shadowRoot?.querySelector('#message-input') as HTMLInputElement;
|
||||
if (!messageInput) return;
|
||||
const messageText = messageInput.value.trim();
|
||||
|
||||
@ -162,10 +209,10 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
const newMessage: Message = {
|
||||
id: Date.now(),
|
||||
sender: '4NK',
|
||||
sender: "4NK",
|
||||
text: messageText,
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
type: 'text' as const,
|
||||
type: 'text' as const
|
||||
};
|
||||
// Add and display the message immediately
|
||||
messageStore.addMessage(this.selectedMemberId, newMessage);
|
||||
@ -188,32 +235,33 @@ class ChatElement extends HTMLElement {
|
||||
}
|
||||
|
||||
// Scroll down the conversation after loading messages
|
||||
private scrollToBottom(container: HTMLElement) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
private scrollToBottom(container: Element) {
|
||||
(container as HTMLElement).scrollTop = (container as HTMLElement).scrollHeight;
|
||||
}
|
||||
|
||||
|
||||
// Load the list of members
|
||||
private loadMemberChat(memberId: string | number) {
|
||||
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
|
||||
let memberInfo = { processName: '', roleName: '', memberName: '' };
|
||||
groupsMock.forEach((process) => {
|
||||
process.roles.forEach((role) => {
|
||||
const member = role.members.find((m) => String(m.id) === String(memberId));
|
||||
groupsMock.forEach(process => {
|
||||
process.roles.forEach(role => {
|
||||
const member = role.members.find(m => String(m.id) === String(memberId));
|
||||
if (member) {
|
||||
memberInfo = {
|
||||
processName: process.name,
|
||||
roleName: role.name,
|
||||
memberName: member.name,
|
||||
memberName: member.name
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const chatHeader = document.getElementById('chat-header');
|
||||
const messagesContainer = document.getElementById('messages');
|
||||
const chatHeader = this.shadowRoot?.querySelector('#chat-header');
|
||||
const messagesContainer = this.shadowRoot?.querySelector('#messages');
|
||||
|
||||
if (!chatHeader || !messagesContainer) return;
|
||||
|
||||
@ -232,7 +280,7 @@ class ChatElement extends HTMLElement {
|
||||
messageContent.classList.add('user');
|
||||
} else {
|
||||
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');
|
||||
}
|
||||
}
|
||||
@ -242,10 +290,11 @@ class ChatElement extends HTMLElement {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
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');
|
||||
if (memberList) {
|
||||
(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.className = 'member-list';
|
||||
|
||||
role.members.forEach((member) => {
|
||||
role.members.forEach(member => {
|
||||
const memberItem = document.createElement('li');
|
||||
memberItem.textContent = member.name;
|
||||
|
||||
@ -270,6 +319,7 @@ class ChatElement extends HTMLElement {
|
||||
roleElement.appendChild(memberList);
|
||||
}
|
||||
|
||||
|
||||
// Toggle the list of Roles
|
||||
private toggleRoles(group: Group, groupElement: HTMLElement) {
|
||||
console.log('=== toggleRoles START ===');
|
||||
@ -281,7 +331,7 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
if (roleList) {
|
||||
const roleItems = roleList.querySelectorAll('.role-item');
|
||||
roleItems.forEach((roleItem) => {
|
||||
roleItems.forEach(roleItem => {
|
||||
console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet
|
||||
|
||||
let container = roleItem.querySelector('.role-item-container');
|
||||
@ -314,12 +364,9 @@ class ChatElement extends HTMLElement {
|
||||
folderButton.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
console.log('Clicked role name:', roleName);
|
||||
console.log(
|
||||
'Available roles:',
|
||||
group.roles.map((r) => r.name),
|
||||
);
|
||||
console.log('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) {
|
||||
console.log('Found role:', role);
|
||||
} 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 {
|
||||
const groupList = document.getElementById('group-list');
|
||||
const groupList = this.shadowRoot?.querySelector('#group-list');
|
||||
if (!groupList) return;
|
||||
|
||||
groupsMock.forEach((group) => {
|
||||
groupsMock.forEach(group => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'group-list-item';
|
||||
|
||||
@ -369,7 +418,7 @@ class ChatElement extends HTMLElement {
|
||||
roleList.style.display = 'none';
|
||||
|
||||
// Add roles for this process
|
||||
group.roles.forEach((role) => {
|
||||
group.roles.forEach(role => {
|
||||
const roleItem = document.createElement('li');
|
||||
roleItem.className = 'role-item';
|
||||
roleItem.textContent = role.name;
|
||||
@ -385,15 +434,14 @@ class ChatElement extends HTMLElement {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Function to manage the list of users
|
||||
private toggleUserList() {
|
||||
const userList = getCorrectDOM('userList');
|
||||
if (!userList) return;
|
||||
|
||||
if (!(userList as HTMLElement).classList.contains('show')) {
|
||||
(userList as HTMLElement).innerHTML = membersMock
|
||||
.map(
|
||||
(member) => `
|
||||
(userList as HTMLElement).innerHTML = membersMock.map(member => `
|
||||
<div class="user-list-item" onclick="switchUser('${member.id}')">
|
||||
<span class="user-avatar">${member.avatar}</span>
|
||||
<div>
|
||||
@ -401,15 +449,13 @@ class ChatElement extends HTMLElement {
|
||||
<span class="user-email">${member.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
`).join('');
|
||||
}
|
||||
(userList as HTMLElement).classList.toggle('show');
|
||||
}
|
||||
|
||||
private switchUser(userId: string | number) {
|
||||
const user = membersMock.find((member) => member.id === userId);
|
||||
const user = membersMock.find(member => member.id === userId);
|
||||
if (!user) return;
|
||||
currentUser = user;
|
||||
this.updateCurrentUserDisplay();
|
||||
@ -434,9 +480,9 @@ class ChatElement extends HTMLElement {
|
||||
return {
|
||||
id: Date.now(),
|
||||
sender: senderName,
|
||||
text: 'OK...',
|
||||
text: "OK...",
|
||||
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) {
|
||||
messageStore.addMessage(this.selectedMemberId, {
|
||||
id: Date.now(),
|
||||
sender: '4NK',
|
||||
sender: "4NK",
|
||||
fileName: fileName,
|
||||
fileData: fileData,
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
type: 'file',
|
||||
type: 'file'
|
||||
});
|
||||
console.log('Message added to store');
|
||||
|
||||
@ -468,7 +514,8 @@ class ChatElement extends HTMLElement {
|
||||
}
|
||||
|
||||
private initializeEventListeners() {
|
||||
document.addEventListener('DOMContentLoaded', (): void => {});
|
||||
document.addEventListener('DOMContentLoaded', (): void => {
|
||||
});
|
||||
|
||||
// Gestionnaire d'événements pour le chat
|
||||
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) {
|
||||
messageStore.setMessages(initialMessagesMock);
|
||||
this.messagesMock = messageStore.getMessages();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.updateCurrentUserDisplay();
|
||||
this.initializeEventListeners();
|
||||
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);
|
||||
export { ChatElement };
|
||||
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import { SignatureElement } from './signature';
|
||||
import signatureCss from '../../../public/style/signature.css?raw';
|
||||
import Services from '../../services/service.js';
|
||||
import signatureCss from '../../../public/style/signature.css?raw'
|
||||
import Services from '../../services/service.js'
|
||||
|
||||
class SignatureComponent extends HTMLElement {
|
||||
_callback: any;
|
||||
_callback: any
|
||||
signatureElement: SignatureElement | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
console.log('INIT');
|
||||
console.log('INIT')
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACKs');
|
||||
console.log('CALLBACKs')
|
||||
this.render();
|
||||
this.fetchData();
|
||||
|
||||
@ -28,7 +28,7 @@ class SignatureComponent extends HTMLElement {
|
||||
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
|
||||
const data = await (window as any).myService?.getProcesses();
|
||||
} else {
|
||||
const service = await Services.getInstance();
|
||||
const service = await Services.getInstance()
|
||||
const data = await service.getProcesses();
|
||||
}
|
||||
}
|
||||
@ -47,7 +47,6 @@ class SignatureComponent extends HTMLElement {
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot) {
|
||||
// Créer l'élément signature-element
|
||||
const signatureElement = document.createElement('signature-element');
|
||||
this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`;
|
||||
this.shadowRoot.appendChild(signatureElement);
|
||||
@ -55,5 +54,5 @@ class SignatureComponent extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
export { SignatureComponent };
|
||||
export { SignatureComponent }
|
||||
customElements.define('signature-component', SignatureComponent);
|
||||
|
||||
@ -1,46 +1,12 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Signatures</title>
|
||||
<link rel="stylesheet" href="../../../public/style/signature.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main content-->
|
||||
<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>
|
||||
<script type="module" src="./signature.ts?ts"></script>
|
||||
<signature-component></signature-component>
|
||||
<script type="module" src="./signature.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user