login_working_with_clean_page
This commit is contained in:
Pascal
parent
c2a4e8517f
commit
3ae7ac959a
@ -1,4 +1,5 @@
|
||||
<div class="nav-wrapper">
|
||||
<div id="profile-header-container"></div>
|
||||
<div class="brand-logo">4NK</div>
|
||||
<div class="nav-right-icons">
|
||||
<div class="notification-container">
|
||||
|
||||
@ -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;
|
||||
@ -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 = `
|
||||
<div class="contract-popup-overlay">
|
||||
<div class="contract-popup-content">
|
||||
<button class="close-contract-popup" onclick="this.closest('.contract-popup-overlay').remove()">×</button>
|
||||
<div class="contract-header">
|
||||
<h2>${contract.title}</h2>
|
||||
<div class="contract-date">Date: ${contract.date}</div>
|
||||
</div>
|
||||
|
||||
<div class="contract-parties">
|
||||
<strong>Parties involved:</strong>
|
||||
<ul>
|
||||
${contract.parties.map(party => `<li>${party}</li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="contract-terms">
|
||||
<strong>Terms and Conditions:</strong>
|
||||
<ul>
|
||||
${contract.terms.map(term => `<li>${term}</li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="contract-content">
|
||||
<strong>Details:</strong>
|
||||
<p>${contract.content}</p>
|
||||
</div>
|
||||
// Créer la popup
|
||||
const popup = document.createElement('div');
|
||||
popup.className = 'contract-popup-overlay';
|
||||
popup.innerHTML = `
|
||||
<div class="contract-popup-content">
|
||||
<button class="close-contract-popup">×</button>
|
||||
<h2>${contract.title}</h2>
|
||||
<div>
|
||||
<p><strong>Date:</strong> ${contract.date}</p>
|
||||
<p><strong>Parties:</strong> ${contract.parties.join(', ')}</p>
|
||||
<p><strong>Terms:</strong></p>
|
||||
<ul>
|
||||
${contract.terms.map(term => `<li>${term}</li>`).join('')}
|
||||
</ul>
|
||||
<p><strong>Content:</strong> ${contract.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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'];
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -533,4 +533,8 @@ export default class Services {
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
async importJSON(content: any): Promise<void> {
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user