From 56d2f918625ef29ef9a3f8ec15dbf79980f18550 Mon Sep 17 00:00:00 2001 From: Pascal Date: Thu, 21 Nov 2024 12:48:27 +0100 Subject: [PATCH] login_working_with_clean_page --- src/components/header/header.html | 1 + src/components/header/header.ts | 59 ++++++++++++ src/pages/account/account.ts | 152 +++++++++++++++++++++++------- src/router.ts | 45 +++++++-- src/services/service.ts | 4 + 5 files changed, 220 insertions(+), 41 deletions(-) diff --git a/src/components/header/header.html b/src/components/header/header.html index 4a7c57f..886b238 100755 --- a/src/components/header/header.html +++ b/src/components/header/header.html @@ -1,4 +1,5 @@
+
diff --git a/src/components/header/header.ts b/src/components/header/header.ts index 0ebf93b..74cb190 100755 --- a/src/components/header/header.ts +++ b/src/components/header/header.ts @@ -37,6 +37,18 @@ function openCloseNotifications() { (window as any).openCloseNotifications = openCloseNotifications; export async function initHeader() { + if (currentRoute === 'account') { + // Charger le profile-header + const profileContainer = document.getElementById('profile-header-container'); + if (profileContainer) { + const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html') + .then(res => res.text()); + profileContainer.innerHTML = profileHeaderHtml; + + // Initialiser les données du profil + loadUserProfile(); + } + } if (currentRoute === 'home') { hideSomeFunctionnalities(); } else { @@ -86,3 +98,50 @@ async function fetchNotifications() { const data = service.getNotifications(); setNotification(data); } + +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 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 avatarElement = document.querySelector('.avatar'); + const bannerElement = document.querySelector('.banner-image'); + + if (nameElement) nameElement.textContent = userName; + if (lastNameElement) lastNameElement.textContent = userLastName; + if (avatarElement) (avatarElement as HTMLImageElement).src = userAvatar; + if (bannerElement) (bannerElement as HTMLImageElement).src = userBanner; +} + +async function importJSON() { +const input = document.createElement('input'); +input.type = 'file'; +input.accept = '.json'; + +input.onchange = async (e) => { + const file = (e.target as HTMLInputElement).files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onload = async (e) => { + try { + const content = JSON.parse(e.target?.result as string); + const service = await Services.getInstance(); + await service.importJSON(content); + alert('Import réussi'); + } catch (error) { + alert('Erreur lors de l\'import: ' + error); + } + }; + reader.readAsText(file); + } +}; + +input.click(); +} + +(window as any).importJSON = importJSON; \ No newline at end of file diff --git a/src/pages/account/account.ts b/src/pages/account/account.ts index 974f875..0591e60 100755 --- a/src/pages/account/account.ts +++ b/src/pages/account/account.ts @@ -281,7 +281,7 @@ const mockContracts = { "Access Rights", "Service Level Agreement" ], - content: "This agreement establishes the terms and conditions for user data management and privacy protection..." + content: "This agreement establishes the terms and conditions for user project management." }, 'Contract #456': { title: "Process Management Contract", @@ -293,7 +293,91 @@ const mockContracts = { "Performance Metrics", "Monitoring Procedures" ], - content: "This contract defines the process management standards and operational procedures..." + content: "This contract defines the process management standards and procedures." + }, + 'Contract #789': { + title: "Member Access Agreement", + date: "2024-03-15", + parties: ["Company XYZ", "Member Team"], + terms: [ + "Member Rights", + "Access Levels", + "Security Protocol", + "Confidentiality Agreement" + ], + content: "This agreement outlines the terms for member access and privileges." + }, + 'Contract #101': { + title: "Peer Collaboration Agreement", + date: "2024-04-01", + parties: ["Company XYZ", "Peer Network"], + terms: [ + "Collaboration Rules", + "Resource Sharing", + "Dispute Resolution", + "Network Protocol" + ], + content: "This contract establishes peer collaboration and networking guidelines." + }, + 'Contract #102': { + title: "Payment Processing Agreement", + date: "2024-05-01", + parties: ["Company XYZ", "Payment Team"], + terms: [ + "Transaction Protocol", + "Security Measures", + "Fee Structure", + "Service Availability" + ], + content: "This agreement defines payment processing terms and conditions." + }, + 'Contract #103': { + title: "Deposit Management Contract", + date: "2024-06-01", + parties: ["Company XYZ", "Deposit Team"], + terms: [ + "Deposit Rules", + "Storage Protocol", + "Access Control", + "Security Standards" + ], + content: "This contract outlines deposit management procedures and security measures." + }, + 'Contract #104': { + title: "Artefact Handling Agreement", + date: "2024-07-01", + parties: ["Company XYZ", "Artefact Team"], + terms: [ + "Handling Procedures", + "Storage Guidelines", + "Access Protocol", + "Preservation Standards" + ], + content: "This agreement establishes artefact handling and preservation guidelines." + }, + 'Contract #105': { + title: "Resolution Protocol Agreement", + date: "2024-08-01", + parties: ["Company XYZ", "Resolution Team"], + terms: [ + "Resolution Process", + "Time Constraints", + "Escalation Protocol", + "Documentation Requirements" + ], + content: "This contract defines the resolution process and protocol standards." + }, + 'Contract #106': { + title: "Backup Service Agreement", + date: "2024-09-01", + parties: ["Company XYZ", "Backup Team"], + terms: [ + "Backup Schedule", + "Data Protection", + "Recovery Protocol", + "Service Reliability" + ], + content: "This agreement outlines backup service terms and recovery procedures." } }; @@ -948,47 +1032,51 @@ document.addEventListener('DOMContentLoaded', () => { // Fonctions de gestion des contrats -function showContractPopup(contractId: string): void { +function showContractPopup(contractId: string) { + // Empêcher la navigation par défaut + event?.preventDefault(); + // Check if the contract exists in mockContracts const contract = mockContracts[contractId as keyof typeof mockContracts]; if (!contract) { - showAlert('Contract not found'); + console.error('Contract not found:', contractId); return; } - const popupHTML = ` -
-
- -
-

${contract.title}

-
Date: ${contract.date}
-
- -
- Parties involved: -
    - ${contract.parties.map(party => `
  • ${party}
    • `).join('')} -
-
- -
- Terms and Conditions: -
    - ${contract.terms.map(term => `
  • ${term}
    • `).join('')} -
-
- -
- Details: -

${contract.content}

-
+ // Créer la popup + const popup = document.createElement('div'); + popup.className = 'contract-popup-overlay'; + popup.innerHTML = ` +
+ +

${contract.title}

+
+

Date: ${contract.date}

+

Parties: ${contract.parties.join(', ')}

+

Terms:

+
    + ${contract.terms.map(term => `
  • ${term}
    • `).join('')} +
+

Content: ${contract.content}

`; - document.body.insertAdjacentHTML('beforeend', popupHTML); + // Ajouter la popup au body + document.body.appendChild(popup); + + // Gérer la fermeture + const closeBtn = popup.querySelector('.close-contract-popup'); + const closePopup = () => popup.remove(); + + closeBtn?.addEventListener('click', closePopup); + popup.addEventListener('click', (e) => { + if (e.target === popup) closePopup(); + }); } +// Ajouter à l'objet window +window.showContractPopup = showContractPopup; + // Fonction utilitaire pour cacher tous les contenus function hideAllContent(): void { const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content']; diff --git a/src/router.ts b/src/router.ts index f3b0f4c..5f809e7 100755 --- a/src/router.ts +++ b/src/router.ts @@ -1,5 +1,5 @@ import '../public/style/4nk.css'; -import { initHeader } from './components/header/header'; +import { initHeader } from '../src/components/header/header'; import Database from './services/database.service'; import Services from './services/service'; import { cleanSubscriptions } from './utils/subscription.utils'; @@ -8,6 +8,9 @@ const routes: { [key: string]: string } = { home: '/src/pages/home/home.html', process: '/src/pages/process/process.html', 'process-element': '/src/pages/process-element/process-element.html', + account: '/src/pages/account/account.html', + chat: '/src/pages/chat/chat.html', + signature: '/src/pages/signature/signature.html', }; export let currentRoute = ''; @@ -35,23 +38,45 @@ async function handleLocation(path: string) { const content = document.getElementById('containerId'); if (content) { - const html = await fetch(routeHtml).then((data) => data.text()); - content.innerHTML = html; - await new Promise(requestAnimationFrame); - injectHeader(); - if (path === 'home') { + const html = await fetch(routeHtml).then((data) => data.text()); + content.innerHTML = html; + await new Promise(requestAnimationFrame); + injectHeader(); + + switch (path) { + case 'home': const { initHomePage } = await import('./pages/home/home'); initHomePage(); - } else if (path === 'process') { + break; + + case 'process': const { init } = await import('./pages/process/process'); init(); - } else if (path.includes('process-element')) { - const { initProcessElement } = await import('./pages/process-element/process-element'); + break; + + case 'process-element': if (parsedPath && parsedPath.length) { + const { initProcessElement } = await import('./pages/process-element/process-element'); const parseProcess = parsedPath[1].split('_'); initProcessElement(parseProcess[0], parseProcess[1]); } + break; + + case 'account': + const { initAccount } = await import('./pages/account/account'); + initAccount(); + break; + + case 'chat': + const { initChat } = await import('./pages/chat/chat'); + initChat(); + break; + + case 'signature': + const { initSignature } = await import('./pages/signature/signature'); + initSignature(); + break; } } } @@ -117,3 +142,5 @@ async function injectHeader() { (async () => { await init(); })(); + +(window as any).navigate = navigate; diff --git a/src/services/service.ts b/src/services/service.ts index 5cd485f..fbbb8db 100755 --- a/src/services/service.ts +++ b/src/services/service.ts @@ -533,4 +533,8 @@ export default class Services { }, ]; } + + async importJSON(content: any): Promise { + return Promise.resolve(); + } }