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

web_component_ok

Browse Source
This commit is contained in:
Pascal 2024-12-03 16:27:23 +01:00
parent c150dab6ed
commit 69493e59ed
3 changed files with 21 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/header/header.ts
View File

@ -101,14 +101,14 @@ async function fetchNotifications() {
async function loadUserProfile() { async function loadUserProfile() {
// Charger les données du profil depuis le localStorage // Charger les données du profil depuis le localStorage
const userName = localStorage.getItem('userName') || 'John'; const userName = localStorage.getItem('userName');
const userLastName = localStorage.getItem('userLastName') || 'Doe'; const userLastName = localStorage.getItem('userLastName');
const userAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150'; const userAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150';
const userBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200'; const userBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200';
// Mettre à jour les éléments du DOM // Mettre à jour les éléments du DOM
const nameElement = document.querySelector('.user-name'); const nameElement = document.querySelector('.user-name');
const lastNameElement = document.querySelector('.user-last-name'); const lastNameElement = document.querySelector('.user-lastname');
const avatarElement = document.querySelector('.avatar'); const avatarElement = document.querySelector('.avatar');
const bannerElement = document.querySelector('.banner-image'); const bannerElement = document.querySelector('.banner-image');

10
src/pages/account/account-component.ts
View File

@ -46,11 +46,15 @@ class AccountComponent extends HTMLElement {
} }
render() { render() {
if(this.shadowRoot) { if(this.shadowRoot && !this.shadowRoot.querySelector('account-element')) {
// Créer l'élément chat-element const style = document.createElement('style');
style.textContent = accountCss;
const accountElement = document.createElement('account-element'); const accountElement = document.createElement('account-element');
this.shadowRoot.innerHTML = `<style>${accountCss}</style>`;
this.shadowRoot.appendChild(style);
this.shadowRoot.appendChild(accountElement); this.shadowRoot.appendChild(accountElement);
} }
} }
} }

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

@ -1,6 +1,5 @@
declare global { declare global {
interface Window { interface Window {
localStorage: Storage;
initAccount: () => void; initAccount: () => void;
showContractPopup: (contractId: string) => void; showContractPopup: (contractId: string) => void;
showPairing: () => void; showPairing: () => void;
@ -543,7 +542,7 @@ private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void
const rows: Row[] = JSON.parse(localStorage.getItem(storageKey) || '[]'); const rows: Row[] = JSON.parse(localStorage.getItem(storageKey) || '[]');
if (rows[index]) { if (rows[index]) {
rows[index].column3 = newValue; rows[index].column2 = newValue;
localStorage.setItem(storageKey, JSON.stringify(rows)); localStorage.setItem(storageKey, JSON.stringify(rows));
} }
@ -952,32 +951,6 @@ private cancelWalletRow(): void {
} }
// Fonctions de sauvegarde
private saveDataRowToLocalStorage(row: DataRow): void {
const rows: DataRow[] = JSON.parse(localStorage.getItem(STORAGE_KEYS.data) || '[]');
rows.push(row);
localStorage.setItem(STORAGE_KEYS.data, JSON.stringify(rows));
}
private saveDeviceName(cell: HTMLTableCellElement, newValue: string): void {
const row = cell.closest('tr');
if (!row) return;
const index = Array.from(row.parentElement?.children || []).indexOf(row);
const rows: Row[] = JSON.parse(localStorage.getItem(STORAGE_KEYS[currentMode]) || '[]');
if (rows[index]) {
rows[index].column3 = newValue;
localStorage.setItem(STORAGE_KEYS[currentMode], JSON.stringify(rows));
}
}
private saveRowToLocalStorage(row: Row): void {
const rows: Row[] = JSON.parse(localStorage.getItem(STORAGE_KEYS[currentMode]) || '[]');
rows.push(row);
localStorage.setItem(STORAGE_KEYS[currentMode], JSON.stringify(rows));
}
private updateDataTableContent(rows: DataRow[]): void { private updateDataTableContent(rows: DataRow[]): void {
const tbody = document.querySelector('#data-table tbody'); const tbody = document.querySelector('#data-table tbody');
if (!tbody) return; if (!tbody) return;
@ -1002,8 +975,8 @@ private openAvatarPopup(): void {
if (!popup) return; if (!popup) return;
// Récupérer les valeurs stockées // Récupérer les valeurs stockées
const savedName = localStorage.getItem('userName') || 'Luke'; const savedName = localStorage.getItem('userName');
const savedLastName = localStorage.getItem('userLastName') || 'Doe'; 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';
const savedBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200'; const savedBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200';
const savedAddress = localStorage.getItem('userAddress') || '🏠 🌍 🗽🎊😩-🎊😑😩'; const savedAddress = localStorage.getItem('userAddress') || '🏠 🌍 🗽🎊😩-🎊😑😩';
@ -1158,6 +1131,7 @@ private setupEventListeners(popup: HTMLElement): void {
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);
const headerLastName = document.querySelector('header-element')?.shadowRoot?.querySelector('.user-lastname'); const headerLastName = document.querySelector('header-element')?.shadowRoot?.querySelector('.user-lastname');
@ -1174,17 +1148,6 @@ private closeAvatarPopup(): void {
if (popup) popup.remove(); if (popup) popup.remove();
} }
private saveUserInfo(): void {
const nameInput = document.querySelector<HTMLInputElement>('#user-name-input');
if (nameInput) {
localStorage.setItem('userName', nameInput.value);
}
}
private saveAvatarToLocalStorage(dataUrl: string): void {
localStorage.setItem('userAvatar', dataUrl);
}
private loadAvatar(): void { private loadAvatar(): void {
const savedAvatar = localStorage.getItem('userAvatar'); const savedAvatar = localStorage.getItem('userAvatar');
if (savedAvatar) { if (savedAvatar) {
@ -1199,6 +1162,9 @@ private loadUserInfo(): void {
const savedName = localStorage.getItem('userName'); const savedName = localStorage.getItem('userName');
const savedLastName = localStorage.getItem('userLastName'); const savedLastName = localStorage.getItem('userLastName');
console.log('Nom récupéré :', savedName);
console.log('Nom de famille récupéré :', savedLastName);
if (savedName) { if (savedName) {
const nameDisplay = document.querySelector('.user-name'); const nameDisplay = document.querySelector('.user-name');
if (nameDisplay) { if (nameDisplay) {
@ -1218,178 +1184,6 @@ private loadUserInfo(): void {
} }
private addressToEmoji(address: string): string {
// Utiliser l'adresse pour générer un hash déterministe
let hash = 0;
for (let i = 0; i < address.length; i++) {
hash = ((hash << 5) - hash) + address.charCodeAt(i);
hash = hash & hash;
}
// Utiliser le hash pour sélectionner les emojis
const emojis = this.generateEmojiList();
const selectedEmojis: string[] = [];
// Sélectionner 4 emojis basés sur le hash de l'adresse
for (let i = 0; i < 4; i++) {
const index = Math.abs(hash + i) % emojis.length;
selectedEmojis.push(emojis[index]);
}
return selectedEmojis.join('');
}
private isValidRole(role: string): boolean {
const validRoles = ['admin', 'user', 'guest', 'manager'];
return validRoles.includes(role.toLowerCase());
}
// Fonction pour annuler l'ajout d'une ligne
private cancelAddRow(): void {
if (!currentRow) return;
currentRow.remove();
isAddingRow = false;
currentRow = null;
const buttonContainer = document.querySelector('.button-container');
if (buttonContainer) {
buttonContainer.innerHTML = `
<button class="add-row-button button-style" onclick="addRow()">Add a line</button>
`;
}
}
// Fonction pour sauvegarder le nom
private saveName(cell: HTMLElement, input: HTMLInputElement): void {
const newValue = input.value.trim();
const originalValue = cell.getAttribute('data-original-value');
// Si vide, revenir à la valeur originale
if (newValue === '') {
cell.textContent = originalValue;
return;
}
// Mettre à jour l'affichage
cell.textContent = newValue;
// Mettre à jour le localStorage
const storageKey = STORAGE_KEYS.data;
const rows = JSON.parse(localStorage.getItem(storageKey) || '[]');
const updatedRows = rows.map((row: any) => {
if (row.column1 === originalValue) {
return { ...row, column1: newValue };
}
return row;
});
localStorage.setItem(storageKey, JSON.stringify(updatedRows));
}
// Fonction pour mettre à jour le localStorage après suppression
private updateLocalStorageAfterDelete(index: number): void {
const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS[currentMode]) || '[]');
rows.splice(index, 1);
localStorage.setItem(STORAGE_KEYS[currentMode], JSON.stringify(rows));
}
// Fonction pour désactiver les boutons de suppression
private disableDeleteButtons(disabled: boolean): void {
const deleteButtons = document.querySelectorAll<HTMLButtonElement>('.delete-button');
deleteButtons.forEach(button => {
button.disabled = disabled;
button.style.opacity = disabled ? '0.5' : '1';
button.style.cursor = disabled ? 'not-allowed' : 'pointer';
});
}
// Fonction pour mettre jour le contenu de la bannière
private updateBannerContent(): void {
const bannerImg = document.getElementById('popup-banner-img') as HTMLImageElement;
const bannerUpload = document.getElementById('banner-upload') as HTMLInputElement;
if (bannerUpload && bannerImg) {
bannerUpload.addEventListener('change', (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = (e: ProgressEvent<FileReader>) => {
const result = e.target?.result as string;
bannerImg.src = result;
this.saveBannerToLocalStorage(result);
this.updateNavbarBanner(result);
};
reader.readAsDataURL(file);
}
});
}
}
// Fonction pour générer la liste d'emojis
private generateEmojiList(): string[] {
const emojis = ['😀', '😃', '😄', '😁', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉'];
const result: string[] = [];
while (result.length < 4) {
const emoji = emojis[Math.floor(Math.random() * emojis.length)];
if (!result.includes(emoji)) {
result.push(emoji);
}
}
return result;
}
// Fonction pour afficher les notifications
private showNotifications(processName: string): void {
const process = mockProcessRows.find(p => p.process === processName);
if (!process) return;
const popupHTML = `
<div class="notifications-modal">
<div class="notifications-content">
<span class="close-button">×</span>
<h2 class="notifications-title">${processName} Notifications</h2>
<div class="notifications-list">
${process.notification.messages.map(msg => `
<div class="notification-item ${msg.read ? 'read' : 'unread'}">
<div class="notification-status">
${msg.read ?
'<span class="check-icon">✓</span>' :
'<span class="dot-icon">●</span>'
}
</div>
<div class="notification-content">
<div class="notification-message">${msg.message}</div>
<div class="notification-date">${msg.date}</div>
</div>
</div>
`).join('')}
</div>
</div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', popupHTML);
// Event listeners
const modal = document.querySelector('.notifications-modal');
const closeBtn = document.querySelector('.close-button');
if (modal && closeBtn) {
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.remove();
}
});
closeBtn.addEventListener('click', () => {
modal.remove();
});
}
}
private updateNavbarName(name: string): void { private updateNavbarName(name: string): void {
const nameElement = document.querySelector('.nav-wrapper .user-name'); const nameElement = document.querySelector('.nav-wrapper .user-name');
if (nameElement) { if (nameElement) {
@ -1398,7 +1192,7 @@ private showNotifications(processName: string): void {
} }
private updateNavbarLastName(lastName: string): void { private updateNavbarLastName(lastName: string): void {
const lastNameElement = document.querySelector('.user-lastname'); const lastNameElement = document.querySelector('.nav-wrapper .user-lastname');
if (lastNameElement) { if (lastNameElement) {
lastNameElement.textContent = lastName; lastNameElement.textContent = lastName;
} }
@ -1438,12 +1232,13 @@ private showNotifications(processName: string): void {
connectedCallback() { connectedCallback() {
this.initializeEventListeners(); this.initializeEventListeners();
this.loadSavedBanner(); this.loadSavedBanner();
this.loadUserInfo();
const savedAvatar = localStorage.getItem('userAvatar'); const savedAvatar = localStorage.getItem('userAvatar');
const savedBanner = localStorage.getItem('userBanner'); const savedBanner = localStorage.getItem('userBanner');
const savedName = localStorage.getItem('userName') || 'Luke'; const savedName = localStorage.getItem('userName');
const savedLastName = localStorage.getItem('userLastName') || 'Doe'; const savedLastName = localStorage.getItem('userLastName');
if (savedAvatar) { if (savedAvatar) {
const navAvatar = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement; const navAvatar = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement;