web_component_ok
This commit is contained in:
Pascal
parent
c150dab6ed
commit
69493e59ed
@ -101,14 +101,14 @@ async function fetchNotifications() {
|
||||
|
||||
async function loadUserProfile() {
|
||||
// Charger les données du profil depuis le localStorage
|
||||
const userName = localStorage.getItem('userName') || 'John';
|
||||
const userLastName = localStorage.getItem('userLastName') || 'Doe';
|
||||
const userName = localStorage.getItem('userName');
|
||||
const userLastName = localStorage.getItem('userLastName');
|
||||
const userAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150';
|
||||
const userBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200';
|
||||
|
||||
// Mettre à jour les éléments du DOM
|
||||
const nameElement = document.querySelector('.user-name');
|
||||
const lastNameElement = document.querySelector('.user-last-name');
|
||||
const lastNameElement = document.querySelector('.user-lastname');
|
||||
const avatarElement = document.querySelector('.avatar');
|
||||
const bannerElement = document.querySelector('.banner-image');
|
||||
|
||||
|
||||
@ -46,11 +46,15 @@ class AccountComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot) {
|
||||
// Créer l'élément chat-element
|
||||
if(this.shadowRoot && !this.shadowRoot.querySelector('account-element')) {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = accountCss;
|
||||
|
||||
const accountElement = document.createElement('account-element');
|
||||
this.shadowRoot.innerHTML = `<style>${accountCss}</style>`;
|
||||
|
||||
this.shadowRoot.appendChild(style);
|
||||
this.shadowRoot.appendChild(accountElement);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
declare global {
|
||||
interface Window {
|
||||
localStorage: Storage;
|
||||
initAccount: () => void;
|
||||
showContractPopup: (contractId: string) => void;
|
||||
showPairing: () => void;
|
||||
@ -543,7 +542,7 @@ private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void
|
||||
const rows: Row[] = JSON.parse(localStorage.getItem(storageKey) || '[]');
|
||||
|
||||
if (rows[index]) {
|
||||
rows[index].column3 = newValue;
|
||||
rows[index].column2 = newValue;
|
||||
localStorage.setItem(storageKey, JSON.stringify(rows));
|
||||
}
|
||||
|
||||
@ -952,32 +951,6 @@ private cancelWalletRow(): void {
|
||||
|
||||
}
|
||||
|
||||
// Fonctions de sauvegarde
|
||||
private saveDataRowToLocalStorage(row: DataRow): void {
|
||||
const rows: DataRow[] = JSON.parse(localStorage.getItem(STORAGE_KEYS.data) || '[]');
|
||||
rows.push(row);
|
||||
localStorage.setItem(STORAGE_KEYS.data, JSON.stringify(rows));
|
||||
}
|
||||
|
||||
private saveDeviceName(cell: HTMLTableCellElement, newValue: string): void {
|
||||
const row = cell.closest('tr');
|
||||
if (!row) return;
|
||||
|
||||
const index = Array.from(row.parentElement?.children || []).indexOf(row);
|
||||
const rows: Row[] = JSON.parse(localStorage.getItem(STORAGE_KEYS[currentMode]) || '[]');
|
||||
|
||||
if (rows[index]) {
|
||||
rows[index].column3 = newValue;
|
||||
localStorage.setItem(STORAGE_KEYS[currentMode], JSON.stringify(rows));
|
||||
}
|
||||
}
|
||||
|
||||
private saveRowToLocalStorage(row: Row): void {
|
||||
const rows: Row[] = JSON.parse(localStorage.getItem(STORAGE_KEYS[currentMode]) || '[]');
|
||||
rows.push(row);
|
||||
localStorage.setItem(STORAGE_KEYS[currentMode], JSON.stringify(rows));
|
||||
}
|
||||
|
||||
private updateDataTableContent(rows: DataRow[]): void {
|
||||
const tbody = document.querySelector('#data-table tbody');
|
||||
if (!tbody) return;
|
||||
@ -1002,8 +975,8 @@ private openAvatarPopup(): void {
|
||||
if (!popup) return;
|
||||
|
||||
// Récupérer les valeurs stockées
|
||||
const savedName = localStorage.getItem('userName') || 'Luke';
|
||||
const savedLastName = localStorage.getItem('userLastName') || 'Doe';
|
||||
const savedName = localStorage.getItem('userName');
|
||||
const savedLastName = localStorage.getItem('userLastName');
|
||||
const savedAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150';
|
||||
const savedBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200';
|
||||
const savedAddress = localStorage.getItem('userAddress') || '🏠 🌍 🗽🎊😩-🎊😑😩';
|
||||
@ -1158,6 +1131,7 @@ private setupEventListeners(popup: HTMLElement): void {
|
||||
if (lastNameInput) {
|
||||
lastNameInput.addEventListener('input', () => {
|
||||
const newLastName = lastNameInput.value;
|
||||
console.log('Nom de famille mis à jour :', newLastName);
|
||||
localStorage.setItem('userLastName', newLastName);
|
||||
|
||||
const headerLastName = document.querySelector('header-element')?.shadowRoot?.querySelector('.user-lastname');
|
||||
@ -1174,17 +1148,6 @@ private closeAvatarPopup(): void {
|
||||
if (popup) popup.remove();
|
||||
}
|
||||
|
||||
private saveUserInfo(): void {
|
||||
const nameInput = document.querySelector<HTMLInputElement>('#user-name-input');
|
||||
if (nameInput) {
|
||||
localStorage.setItem('userName', nameInput.value);
|
||||
}
|
||||
}
|
||||
|
||||
private saveAvatarToLocalStorage(dataUrl: string): void {
|
||||
localStorage.setItem('userAvatar', dataUrl);
|
||||
}
|
||||
|
||||
private loadAvatar(): void {
|
||||
const savedAvatar = localStorage.getItem('userAvatar');
|
||||
if (savedAvatar) {
|
||||
@ -1199,6 +1162,9 @@ private loadUserInfo(): void {
|
||||
const savedName = localStorage.getItem('userName');
|
||||
const savedLastName = localStorage.getItem('userLastName');
|
||||
|
||||
console.log('Nom récupéré :', savedName);
|
||||
console.log('Nom de famille récupéré :', savedLastName);
|
||||
|
||||
if (savedName) {
|
||||
const nameDisplay = document.querySelector('.user-name');
|
||||
if (nameDisplay) {
|
||||
@ -1218,178 +1184,6 @@ private loadUserInfo(): void {
|
||||
}
|
||||
|
||||
|
||||
private addressToEmoji(address: string): string {
|
||||
// Utiliser l'adresse pour générer un hash déterministe
|
||||
let hash = 0;
|
||||
for (let i = 0; i < address.length; i++) {
|
||||
hash = ((hash << 5) - hash) + address.charCodeAt(i);
|
||||
hash = hash & hash;
|
||||
}
|
||||
|
||||
// Utiliser le hash pour sélectionner les emojis
|
||||
const emojis = this.generateEmojiList();
|
||||
const selectedEmojis: string[] = [];
|
||||
|
||||
// Sélectionner 4 emojis basés sur le hash de l'adresse
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const index = Math.abs(hash + i) % emojis.length;
|
||||
selectedEmojis.push(emojis[index]);
|
||||
}
|
||||
|
||||
return selectedEmojis.join('');
|
||||
}
|
||||
|
||||
private isValidRole(role: string): boolean {
|
||||
const validRoles = ['admin', 'user', 'guest', 'manager'];
|
||||
return validRoles.includes(role.toLowerCase());
|
||||
}
|
||||
|
||||
// Fonction pour annuler l'ajout d'une ligne
|
||||
private cancelAddRow(): void {
|
||||
if (!currentRow) return;
|
||||
currentRow.remove();
|
||||
isAddingRow = false;
|
||||
currentRow = null;
|
||||
|
||||
const buttonContainer = document.querySelector('.button-container');
|
||||
if (buttonContainer) {
|
||||
buttonContainer.innerHTML = `
|
||||
<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 {
|
||||
const nameElement = document.querySelector('.nav-wrapper .user-name');
|
||||
if (nameElement) {
|
||||
@ -1398,7 +1192,7 @@ private showNotifications(processName: string): void {
|
||||
}
|
||||
|
||||
private updateNavbarLastName(lastName: string): void {
|
||||
const lastNameElement = document.querySelector('.user-lastname');
|
||||
const lastNameElement = document.querySelector('.nav-wrapper .user-lastname');
|
||||
if (lastNameElement) {
|
||||
lastNameElement.textContent = lastName;
|
||||
}
|
||||
@ -1438,12 +1232,13 @@ private showNotifications(processName: string): void {
|
||||
connectedCallback() {
|
||||
this.initializeEventListeners();
|
||||
this.loadSavedBanner();
|
||||
this.loadUserInfo();
|
||||
|
||||
|
||||
const savedAvatar = localStorage.getItem('userAvatar');
|
||||
const savedBanner = localStorage.getItem('userBanner');
|
||||
const savedName = localStorage.getItem('userName') || 'Luke';
|
||||
const savedLastName = localStorage.getItem('userLastName') || 'Doe';
|
||||
const savedName = localStorage.getItem('userName');
|
||||
const savedLastName = localStorage.getItem('userLastName');
|
||||
|
||||
if (savedAvatar) {
|
||||
const navAvatar = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user