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

link diffs to validation modal and show and prettify

Browse Source
This commit is contained in:
AnisHADJARAB 2024-12-17 08:28:39 +00:00 committed by Sosthene
parent d64efbd6a0
commit 2124388cc5
46 changed files with 6581 additions and 6658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

993
src/4nk.css
View File

File diff suppressed because it is too large Load Diff

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

@ -42,12 +42,11 @@ export async function initHeader() {
// Charger le profile-header // Charger le profile-header
const profileContainer = document.getElementById('profile-header-container'); const profileContainer = document.getElementById('profile-header-container');
if (profileContainer) { if (profileContainer) {
const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html') const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html').then((res) => res.text());
.then(res => res.text()); profileContainer.innerHTML = profileHeaderHtml;
profileContainer.innerHTML = profileHeaderHtml;
// Initialiser les données du profil // Initialiser les données du profil
loadUserProfile(); loadUserProfile();
} }
} }
if (currentRoute === 'home') { if (currentRoute === 'home') {
@ -77,7 +76,7 @@ async function setNotification(notifications: any[]): Promise<void> {
if (notifications?.length) { if (notifications?.length) {
badge.innerText = notifications.length.toString(); badge.innerText = notifications.length.toString();
const notificationBoard = document.querySelector('.notification-board') as HTMLDivElement; const notificationBoard = document.querySelector('.notification-board') as HTMLDivElement;
notificationBoard.querySelectorAll('.notification-element')?.forEach(elem => elem.remove()) notificationBoard.querySelectorAll('.notification-element')?.forEach((elem) => elem.remove());
noNotifications.style.display = 'none'; noNotifications.style.display = 'none';
for (const notif of notifications) { for (const notif of notifications) {
const notifElement = document.createElement('div'); const notifElement = document.createElement('div');
@ -90,9 +89,9 @@ async function setNotification(notifications: any[]): Promise<void> {
// this.addSubscription(notifElement, 'click', 'goToProcessPage') // this.addSubscription(notifElement, 'click', 'goToProcessPage')
notificationBoard.appendChild(notifElement); notificationBoard.appendChild(notifElement);
notifElement.addEventListener('click', async () => { notifElement.addEventListener('click', async () => {
const modalService = await ModalService.getInstance() const modalService = await ModalService.getInstance();
modalService.injectValidationModal(notif) modalService.injectValidationModal(notif);
}) });
} }
} else { } else {
noNotifications.style.display = 'block'; noNotifications.style.display = 'block';
@ -125,29 +124,29 @@ async function loadUserProfile() {
} }
async function importJSON() { async function importJSON() {
const input = document.createElement('input'); const input = document.createElement('input');
input.type = 'file'; input.type = 'file';
input.accept = '.json'; input.accept = '.json';
input.onchange = async (e) => { input.onchange = async (e) => {
const file = (e.target as HTMLInputElement).files?.[0]; const file = (e.target as HTMLInputElement).files?.[0];
if (file) { if (file) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = async (e) => { reader.onload = async (e) => {
try { try {
const content = JSON.parse(e.target?.result as string); const content = JSON.parse(e.target?.result as string);
const service = await Services.getInstance(); const service = await Services.getInstance();
await service.importJSON(content); await service.importJSON(content);
alert('Import réussi'); alert('Import réussi');
} catch (error) { } catch (error) {
alert('Erreur lors de l\'import: ' + error); alert("Erreur lors de l'import: " + error);
} }
}; };
reader.readAsText(file); reader.readAsText(file);
} }
}; };
input.click(); input.click();
} }
(window as any).importJSON = importJSON; (window as any).importJSON = importJSON;

18
src/components/profile-header/profile-header.html
View File

@ -1,12 +1,12 @@
<div class="avatar-section"> <div class="avatar-section">
<img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image"> <img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" />
<div class="banner-content"> <div class="banner-content">
<div class="avatar-container"> <div class="avatar-container">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" onclick="window.openAvatarPopup()"> <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>
<div class="user-info">
<span class="user-name">John</span>
<span class="user-lastname">Doe</span>
</div>
</div>
</div> </div>

123
src/components/qrcode-scanner/qrcode-scanner-component.ts
View File

@ -2,73 +2,72 @@ import QrScanner from 'qr-scanner';
import Services from '../../services/service'; import Services from '../../services/service';
import { prepareAndSendPairingTx } from '~/utils/sp-address.utils'; import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
export default class QrScannerComponent extends HTMLElement { export default class QrScannerComponent extends HTMLElement {
videoElement: any; videoElement: any;
wrapper: any wrapper: any;
qrScanner: any qrScanner: any;
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.wrapper = document.createElement('div'); this.wrapper = document.createElement('div');
this.wrapper.style.position = 'relative'; this.wrapper.style.position = 'relative';
this.wrapper.style.width = '150px'; this.wrapper.style.width = '150px';
this.wrapper.style.height = '150px'; this.wrapper.style.height = '150px';
this.videoElement = document.createElement('video'); this.videoElement = document.createElement('video');
this.videoElement.style.width = '100%'; this.videoElement.style.width = '100%';
document.body?.append(this.wrapper); document.body?.append(this.wrapper);
this.wrapper.prepend(this.videoElement); this.wrapper.prepend(this.videoElement);
} }
connectedCallback() { connectedCallback() {
this.initializeScanner(); this.initializeScanner();
} }
async initializeScanner() { async initializeScanner() {
if (!this.videoElement) { if (!this.videoElement) {
console.error('Video element not found!'); console.error('Video element not found!');
return; return;
} }
console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:", this.videoElement) console.log('🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:', this.videoElement);
this.qrScanner = new QrScanner(this.videoElement, result => this.onQrCodeScanned(result),{ this.qrScanner = new QrScanner(this.videoElement, (result) => this.onQrCodeScanned(result), {
highlightScanRegion: true, highlightScanRegion: true,
highlightCodeOutline: true, highlightCodeOutline: true,
}); });
try { try {
await QrScanner.hasCamera(); await QrScanner.hasCamera();
this.qrScanner.start(); this.qrScanner.start();
this.videoElement.style = 'height: 200px; width: 200px' this.videoElement.style = 'height: 200px; width: 200px';
this.shadowRoot?.appendChild(this.wrapper) this.shadowRoot?.appendChild(this.wrapper);
} catch (e) {
console.error('No camera found or error starting the QR scanner', e);
}
}
} catch (e) { async onQrCodeScanned(result: any) {
console.error('No camera found or error starting the QR scanner', e); console.log(`QR Code detected:`, result);
} const data = result.data;
} const scannedUrl = new URL(data);
async onQrCodeScanned(result: any) { // Extract the 'sp_address' parameter
console.log(`QR Code detected:`, result); const spAddress = scannedUrl.searchParams.get('sp_address');
const data = result.data; if (spAddress) {
const scannedUrl = new URL(data); // Call the sendPairingTx function with the extracted sp_address
try {
await prepareAndSendPairingTx(spAddress);
} catch (e) {
console.error('Failed to pair:', e);
}
}
this.qrScanner.stop(); // if you want to stop scanning after one code is detected
}
// Extract the 'sp_address' parameter disconnectedCallback() {
const spAddress = scannedUrl.searchParams.get('sp_address'); if (this.qrScanner) {
if(spAddress) { this.qrScanner.destroy();
// Call the sendPairingTx function with the extracted sp_address }
try { }
await prepareAndSendPairingTx(spAddress) }
} catch (e) {
console.error('Failed to pair:', e);
}
}
this.qrScanner.stop(); // if you want to stop scanning after one code is detected
}
disconnectedCallback() { customElements.define('qr-scanner', QrScannerComponent);
if (this.qrScanner) {
this.qrScanner.destroy();
}
}
}
customElements.define('qr-scanner', QrScannerComponent);

92
src/components/validation-modal/validation-modal.css
View File

@ -1,70 +1,70 @@
.validation-modal { .validation-modal {
display: block; /* Show the modal for demo purposes */ display: block; /* Show the modal for demo purposes */
position: fixed; position: fixed;
z-index: 1; z-index: 1;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: rgb(0,0,0); background-color: rgb(0, 0, 0);
background-color: rgba(0,0,0,0.4); background-color: rgba(0, 0, 0, 0.4);
padding-top: 60px; padding-top: 60px;
} }
.modal-content { .modal-content {
background-color: #fefefe; background-color: #fefefe;
margin: 5% auto; margin: 5% auto;
padding: 20px; padding: 20px;
border: 1px solid #888; border: 1px solid #888;
width: 80%; width: 80%;
height: fit-content; height: fit-content;
} }
.modal-title { .modal-title {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
margin-bottom: 20px; margin-bottom: 20px;
} }
.validation-box { .validation-box {
margin-bottom: 15px; margin-bottom: 15px;
width: 100%; width: 100%;
} }
.expansion-panel-header { .expansion-panel-header {
background-color: #e0e0e0; background-color: #e0e0e0;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
} }
.expansion-panel-body { .expansion-panel-body {
display: none; display: none;
background-color: #fafafa; background-color: #fafafa;
padding: 10px; padding: 10px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
.expansion-panel-body pre { .expansion-panel-body pre {
background-color: #f6f8fa; background-color: #f6f8fa;
padding: 10px; padding: 10px;
border-left: 4px solid #d1d5da; border-left: 4px solid #d1d5da;
overflow-x: auto; overflow-x: auto;
} }
.diff { .diff {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 10px;
} }
.diff-side { .diff-side {
width: 48%; width: 48%;
padding: 10px; padding: 10px;
} }
.diff-old { .diff-old {
background-color: #fee; background-color: #fee;
border: 1px solid #f00; border: 1px solid #f00;
} }
.diff-new { .diff-new {
background-color: #e6ffe6; background-color: #e6ffe6;
border: 1px solid #0f0; border: 1px solid #0f0;
} }
.radio-buttons { .radio-buttons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
} }

62
src/components/validation-modal/validation-modal.html
View File

@ -1,59 +1,11 @@
<div id="validation-modal" class="validation-modal"> <div id="validation-modal" class="validation-modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-title">Validate</div> <div class="modal-title">Validate Process {{processId}}</div>
<div class="validation-box"> <div class="validation-box">
<div class="expansion-panel">
<div class="expansion-panel-header">Validation 1</div>
<div class="expansion-panel-body">
<div class="radio-buttons">
<label>
<input type="radio" name="validation1" value="old">
Keep Old
</label>
<label>
<input type="radio" name="validation1" value="new">
Keep New
</label>
</div>
<div class="diff">
<div class="diff-side diff-old">
<pre>-old line</pre>
</div>
<div class="diff-side diff-new">
<pre>+new line</pre>
</div>
</div>
</div>
</div>
<div class="expansion-panel">
<div class="expansion-panel-header">Validation 2</div>
<div class="expansion-panel-body">
<div class="radio-buttons">
<label>
<input type="radio" name="validation2" value="old">
Keep Old
</label>
<label>
<input type="radio" name="validation2" value="new">
Keep New
</label>
</div>
<div class="diff">
<div class="diff-side diff-old">
<pre>-foo\n-bar</pre>
</div>
<div class="diff-side diff-new">
<pre>+baz</pre>
</div>
</div>
</div>
</div>
</div>
<div class="modal-action">
<button onclick="validate()">Validate</button>
</div>
</div> </div>
<div class="modal-action">
<button onclick="validate()">Validate</button>
</div>
</div>
</div> </div>

65
src/components/validation-modal/validation-modal.ts
View File

@ -1,17 +1,56 @@
import ModalService from "~/services/modal.service"; import ModalService from '~/services/modal.service';
document.querySelectorAll('.expansion-panel-header').forEach(header => {
header.addEventListener('click', function(event) {
const target = event.target as HTMLElement
const body = target.nextElementSibling as HTMLElement;
if(body?.style) body.style.display = body.style.display === 'block' ? 'none' : 'block';
});
});
async function validate() { async function validate() {
console.log('==> VALIDATE') console.log('==> VALIDATE');
const modalservice = await ModalService.getInstance() const modalservice = await ModalService.getInstance();
modalservice.closeValidationModal() modalservice.closeValidationModal();
} }
(window as any).validate = validate export async function initValidationModal(processDiffs: any) {
console.log("🚀 ~ initValidationModal ~ processDiffs:", processDiffs)
for(const diff of processDiffs.diffs) {
let diffs = ''
for(const value of diff) {
diffs+= `
<div class="radio-buttons">
<label>
<input type="radio" name="validation1" value="old" />
Keep Old
</label>
<label>
<input type="radio" name="validation1" value="new" />
Keep New
</label>
</div>
<div class="diff">
<div class="diff-side diff-old">
<pre>-${value.previous_value}</pre>
</div>
<div class="diff-side diff-new">
<pre>+${value.new_value}</pre>
</div>
</div>
`
}
const state = `
<div class="expansion-panel">
<div class="expansion-panel-header">State ${diff[0].new_state_merkle_root}</div>
<div class="expansion-panel-body">
${diffs}
</div>
</div>
`
const box = document.querySelector('.validation-box')
if(box) box.innerHTML += state
}
document.querySelectorAll('.expansion-panel-header').forEach((header) => {
header.addEventListener('click', function (event) {
const target = event.target as HTMLElement;
const body = target.nextElementSibling as HTMLElement;
if (body?.style) body.style.display = body.style.display === 'block' ? 'none' : 'block';
});
});
}
(window as any).validate = validate;

14
src/decs.d.ts vendored
View File

@ -1,10 +1,10 @@
declare class AccountComponent extends HTMLElement { declare class AccountComponent extends HTMLElement {
_callback: any; _callback: any;
constructor(); constructor();
connectedCallback(): void; connectedCallback(): void;
fetchData(): Promise<void>; fetchData(): Promise<void>;
set callback(fn: any); set callback(fn: any);
get callback(): any; get callback(): any;
render(): void; render(): void;
} }
export { AccountComponent }; export { AccountComponent };

32
src/interface/groupInterface.ts
View File

@ -1,22 +1,22 @@
import { DocumentSignature } from "~/models/signature.models"; import { DocumentSignature } from '~/models/signature.models';
export interface Group { export interface Group {
id: number;
name: string;
description: string;
roles: Array<{
name: string;
members: Array<{ id: string | number; name: string }>;
documents?: Array<any>;
}>;
commonDocuments: Array<{
id: number; id: number;
name: string; name: string;
visibility: string;
description: string; description: string;
roles: Array<{ createdAt?: string | null;
name: string; deadline?: string | null;
members: Array<{ id: string | number; name: string }>; signatures?: DocumentSignature[];
documents?: Array<any>; status?: string;
}>; }>;
commonDocuments: Array<{
id: number;
name: string;
visibility: string;
description: string;
createdAt?: string | null;
deadline?: string | null;
signatures?: DocumentSignature[];
status?: string;
}>;
} }

10
src/interface/memberInterface.ts
View File

@ -1,7 +1,7 @@
export interface Member { export interface Member {
id: string | number; id: string | number;
name: string; name: string;
email?: string; email?: string;
avatar?: string; avatar?: string;
processRoles?: Array<{ processId: number | string; role: string }>; processRoles?: Array<{ processId: number | string; role: string }>;
} }

40
src/main.ts
View File

@ -5,34 +5,26 @@ import { ChatElement } from './pages/chat/chat';
import { AccountComponent } from './pages/account/account-component'; import { AccountComponent } from './pages/account/account-component';
import { AccountElement } from './pages/account/account'; import { AccountElement } from './pages/account/account';
export { export { SignatureComponent, SignatureElement, ChatComponent, ChatElement, AccountComponent, AccountElement };
SignatureComponent,
SignatureElement,
ChatComponent,
ChatElement,
AccountComponent,
AccountElement
};
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'signature-component': SignatureComponent; 'signature-component': SignatureComponent;
'signature-element': SignatureElement; 'signature-element': SignatureElement;
'chat-component': ChatComponent; 'chat-component': ChatComponent;
'chat-element': ChatElement; 'chat-element': ChatElement;
'account-component': AccountComponent; 'account-component': AccountComponent;
'account-element': AccountElement; 'account-element': AccountElement;
} }
} }
// Configuration pour le mode indépendant // Configuration pour le mode indépendant
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB) { if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB) {
// Initialiser les composants si nécessaire // Initialiser les composants si nécessaire
customElements.define('signature-component', SignatureComponent); customElements.define('signature-component', SignatureComponent);
customElements.define('signature-element', SignatureElement); customElements.define('signature-element', SignatureElement);
customElements.define('chat-component', ChatComponent); customElements.define('chat-component', ChatComponent);
customElements.define('chat-element', ChatElement); customElements.define('chat-element', ChatElement);
customElements.define('account-component', AccountComponent); customElements.define('account-component', AccountComponent);
customElements.define('account-element', AccountElement); customElements.define('account-element', AccountElement);
} }

550
src/mocks/mock-account/constAccountMock.ts
View File

@ -1,328 +1,272 @@
export const ALLOWED_ROLES = ['User', 'Member', 'Peer', 'Payment', 'Deposit', 'Artefact', 'Resolve', 'Backup']; export const ALLOWED_ROLES = ['User', 'Member', 'Peer', 'Payment', 'Deposit', 'Artefact', 'Resolve', 'Backup'];
export const STORAGE_KEYS = { export const STORAGE_KEYS = {
pairing: 'pairingRows', pairing: 'pairingRows',
wallet: 'walletRows', wallet: 'walletRows',
process: 'processRows', process: 'processRows',
data: 'dataRows' data: 'dataRows',
}; };
// Initialiser le stockage des lignes par défaut dans le localStorage // Initialiser le stockage des lignes par défaut dans le localStorage
export const defaultRows = [ export const defaultRows = [
{ {
column1: "sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrz", column1: 'sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrz',
column2: "🎊😑🎄😩", column2: '🎊😑🎄😩',
column3: "Laptop" column3: 'Laptop',
}, },
{ {
column1: "sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrx", column1: 'sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrx',
column2: "🎏🎕😧🌥", column2: '🎏🎕😧🌥',
column3: "Phone" } column3: 'Phone',
},
]; ];
export const mockNotifications: { [key: string]: Notification[] } = {}; export const mockNotifications: { [key: string]: Notification[] } = {};
export const notificationMessages = [ export const notificationMessages = ['CPU usage high', 'Memory threshold reached', 'New update available', 'Backup completed', 'Security check required', 'Performance optimization needed', 'System alert', 'Network connectivity issue', 'Storage space low', 'Process checkpoint reached'];
"CPU usage high",
"Memory threshold reached",
"New update available",
"Backup completed",
"Security check required",
"Performance optimization needed",
"System alert",
"Network connectivity issue",
"Storage space low",
"Process checkpoint reached"
];
export const mockDataRows = [ export const mockDataRows = [
{ {
column1: "User Project", column1: 'User Project',
column2: "private", column2: 'private',
column3: "User", column3: 'User',
column4: "6 months", column4: '6 months',
column5: "NDA signed", column5: 'NDA signed',
column6: "Contract #123", column6: 'Contract #123',
processName: "User Process", processName: 'User Process',
zone: "A" zone: 'A',
}, },
{ {
column1: "Process Project", column1: 'Process Project',
column2: "private", column2: 'private',
column3: "Process", column3: 'Process',
column4: "1 year", column4: '1 year',
column5: "Terms accepted", column5: 'Terms accepted',
column6: "Contract #456", column6: 'Contract #456',
processName: "Process Management", processName: 'Process Management',
zone: "B" zone: 'B',
}, },
{ {
column1: "Member Project", column1: 'Member Project',
column2: "private", column2: 'private',
column3: "Member", column3: 'Member',
column4: "3 months", column4: '3 months',
column5: "GDPR compliant", column5: 'GDPR compliant',
column6: "Contract #789", column6: 'Contract #789',
processName: "Member Process", processName: 'Member Process',
zone: "C" zone: 'C',
}, },
{ {
column1: "Peer Project", column1: 'Peer Project',
column2: "public", column2: 'public',
column3: "Peer", column3: 'Peer',
column4: "2 years", column4: '2 years',
column5: "IP rights", column5: 'IP rights',
column6: "Contract #101", column6: 'Contract #101',
processName: "Peer Process", processName: 'Peer Process',
zone: "D" zone: 'D',
}, },
{ {
column1: "Payment Project", column1: 'Payment Project',
column2: "confidential", column2: 'confidential',
column3: "Payment", column3: 'Payment',
column4: "1 year", column4: '1 year',
column5: "NDA signed", column5: 'NDA signed',
column6: "Contract #102", column6: 'Contract #102',
processName: "Payment Process", processName: 'Payment Process',
zone: "E" zone: 'E',
}, },
{ {
column1: "Deposit Project", column1: 'Deposit Project',
column2: "private", column2: 'private',
column3: "Deposit", column3: 'Deposit',
column4: "6 months", column4: '6 months',
column5: "Terms accepted", column5: 'Terms accepted',
column6: "Contract #103", column6: 'Contract #103',
processName: "Deposit Process", processName: 'Deposit Process',
zone: "F" zone: 'F',
}, },
{ {
column1: "Artefact Project", column1: 'Artefact Project',
column2: "public", column2: 'public',
column3: "Artefact", column3: 'Artefact',
column4: "1 year", column4: '1 year',
column5: "GDPR compliant", column5: 'GDPR compliant',
column6: "Contract #104", column6: 'Contract #104',
processName: "Artefact Process", processName: 'Artefact Process',
zone: "G" zone: 'G',
}, },
{ {
column1: "Resolve Project", column1: 'Resolve Project',
column2: "private", column2: 'private',
column3: "Resolve", column3: 'Resolve',
column4: "2 years", column4: '2 years',
column5: "IP rights", column5: 'IP rights',
column6: "Contract #105", column6: 'Contract #105',
processName: "Resolve Process", processName: 'Resolve Process',
zone: "H" zone: 'H',
}, },
{ {
column1: "Backup Project", column1: 'Backup Project',
column2: "public", column2: 'public',
column3: "Backup", column3: 'Backup',
column4: "1 year", column4: '1 year',
column5: "NDA signed", column5: 'NDA signed',
column6: "Contract #106", column6: 'Contract #106',
processName: "Backup Process", processName: 'Backup Process',
zone: "I" zone: 'I',
} },
]; ];
export const mockProcessRows = [ export const mockProcessRows = [
{ {
process: "User Project", process: 'User Project',
role: "User", role: 'User',
notification: { notification: {
messages: [ messages: [
{ id: 1, read: false, date: "2024-03-10", message: "New user joined the project" }, { id: 1, read: false, date: '2024-03-10', message: 'New user joined the project' },
{ id: 2, read: false, date: "2024-03-09", message: "Project milestone reached" }, { id: 2, read: false, date: '2024-03-09', message: 'Project milestone reached' },
{ id: 3, read: false, date: "2024-03-08", message: "Security update required" }, { id: 3, read: false, date: '2024-03-08', message: 'Security update required' },
{ id: 4, read: true, date: "2024-03-07", message: "Weekly report available" }, { id: 4, read: true, date: '2024-03-07', message: 'Weekly report available' },
{ id: 5, read: true, date: "2024-03-06", message: "Team meeting scheduled" } { id: 5, read: true, date: '2024-03-06', message: 'Team meeting scheduled' },
] ],
}
}, },
{ },
process: "Member Project", {
role: "Member", process: 'Member Project',
notification: { role: 'Member',
messages: [ notification: {
{ id: 6, read: true, date: "2024-03-10", message: "Member access granted" }, messages: [
{ id: 7, read: true, date: "2024-03-09", message: "Documentation updated" }, { id: 6, read: true, date: '2024-03-10', message: 'Member access granted' },
{ id: 8, read: true, date: "2024-03-08", message: "Project status: on track" } { id: 7, read: true, date: '2024-03-09', message: 'Documentation updated' },
] { id: 8, read: true, date: '2024-03-08', message: 'Project status: on track' },
} ],
}, },
{ },
process: "Peer Project", {
role: "Peer", process: 'Peer Project',
notification: { role: 'Peer',
unread: 2, notification: {
total: 4, unread: 2,
messages: [ total: 4,
{ id: 9, read: false, date: "2024-03-10", message: "New peer project added" }, messages: [
{ id: 10, read: false, date: "2024-03-09", message: "Project milestone reached" }, { id: 9, read: false, date: '2024-03-10', message: 'New peer project added' },
{ id: 11, read: false, date: "2024-03-08", message: "Security update required" }, { id: 10, read: false, date: '2024-03-09', message: 'Project milestone reached' },
{ id: 12, read: true, date: "2024-03-07", message: "Weekly report available" }, { id: 11, read: false, date: '2024-03-08', message: 'Security update required' },
{ id: 13, read: true, date: "2024-03-06", message: "Team meeting scheduled" } { id: 12, read: true, date: '2024-03-07', message: 'Weekly report available' },
] { id: 13, read: true, date: '2024-03-06', message: 'Team meeting scheduled' },
} ],
}, },
{ },
process: "Deposit Project", {
role: "Deposit", process: 'Deposit Project',
notification: { role: 'Deposit',
unread: 1, notification: {
total: 10, unread: 1,
messages: [ total: 10,
{ id: 14, read: false, date: "2024-03-10", message: "Deposit milestone reached" }, messages: [
{ id: 15, read: false, date: "2024-03-09", message: "Security update required" }, { id: 14, read: false, date: '2024-03-10', message: 'Deposit milestone reached' },
{ id: 16, read: false, date: "2024-03-08", message: "Weekly report available" }, { id: 15, read: false, date: '2024-03-09', message: 'Security update required' },
{ id: 17, read: true, date: "2024-03-07", message: "Team meeting scheduled" }, { id: 16, read: false, date: '2024-03-08', message: 'Weekly report available' },
{ id: 18, read: true, date: "2024-03-06", message: "Project status: on track" } { id: 17, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
] { id: 18, read: true, date: '2024-03-06', message: 'Project status: on track' },
} ],
}, },
{ },
process: "Artefact Project", {
role: "Artefact", process: 'Artefact Project',
notification: { role: 'Artefact',
unread: 0, notification: {
total: 3, unread: 0,
messages: [ total: 3,
{ id: 19, read: false, date: "2024-03-10", message: "New artefact added" }, messages: [
{ id: 20, read: false, date: "2024-03-09", message: "Security update required" }, { id: 19, read: false, date: '2024-03-10', message: 'New artefact added' },
{ id: 21, read: false, date: "2024-03-08", message: "Weekly report available" }, { id: 20, read: false, date: '2024-03-09', message: 'Security update required' },
{ id: 22, read: true, date: "2024-03-07", message: "Team meeting scheduled" }, { id: 21, read: false, date: '2024-03-08', message: 'Weekly report available' },
{ id: 23, read: true, date: "2024-03-06", message: "Project status: on track" } { id: 22, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
] { id: 23, read: true, date: '2024-03-06', message: 'Project status: on track' },
} ],
}, },
{ },
process: "Resolve Project", {
role: "Resolve", process: 'Resolve Project',
notification: { role: 'Resolve',
unread: 5, notification: {
total: 12, unread: 5,
messages: [ total: 12,
{ id: 24, read: false, date: "2024-03-10", message: "New issue reported" }, messages: [
{ id: 25, read: false, date: "2024-03-09", message: "Security update required" }, { id: 24, read: false, date: '2024-03-10', message: 'New issue reported' },
{ id: 26, read: false, date: "2024-03-08", message: "Weekly report available" }, { id: 25, read: false, date: '2024-03-09', message: 'Security update required' },
{ id: 27, read: true, date: "2024-03-07", message: "Team meeting scheduled" }, { id: 26, read: false, date: '2024-03-08', message: 'Weekly report available' },
{ id: 28, read: true, date: "2024-03-06", message: "Project status: on track" } { id: 27, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
] { id: 28, read: true, date: '2024-03-06', message: 'Project status: on track' },
} ],
} },
},
]; ];
export const mockContracts = { export const mockContracts = {
'Contract #123': { 'Contract #123': {
title: "User Project Agreement", title: 'User Project Agreement',
date: "2024-01-15", date: '2024-01-15',
parties: ["Company XYZ", "User Team"], parties: ['Company XYZ', 'User Team'],
terms: [ terms: ['Data Protection', 'User Privacy', 'Access Rights', 'Service Level Agreement'],
"Data Protection", content: 'This agreement establishes the terms and conditions for user project management.',
"User Privacy", },
"Access Rights", 'Contract #456': {
"Service Level Agreement" title: 'Process Management Contract',
], date: '2024-02-01',
content: "This agreement establishes the terms and conditions for user project management." parties: ['Company XYZ', 'Process Team'],
}, terms: ['Process Workflow', 'Quality Standards', 'Performance Metrics', 'Monitoring Procedures'],
'Contract #456': { content: 'This contract defines the process management standards and procedures.',
title: "Process Management Contract", },
date: "2024-02-01", 'Contract #789': {
parties: ["Company XYZ", "Process Team"], title: 'Member Access Agreement',
terms: [ date: '2024-03-15',
"Process Workflow", parties: ['Company XYZ', 'Member Team'],
"Quality Standards", terms: ['Member Rights', 'Access Levels', 'Security Protocol', 'Confidentiality Agreement'],
"Performance Metrics", content: 'This agreement outlines the terms for member access and privileges.',
"Monitoring Procedures" },
], 'Contract #101': {
content: "This contract defines the process management standards and procedures." title: 'Peer Collaboration Agreement',
}, date: '2024-04-01',
'Contract #789': { parties: ['Company XYZ', 'Peer Network'],
title: "Member Access Agreement", terms: ['Collaboration Rules', 'Resource Sharing', 'Dispute Resolution', 'Network Protocol'],
date: "2024-03-15", content: 'This contract establishes peer collaboration and networking guidelines.',
parties: ["Company XYZ", "Member Team"], },
terms: [ 'Contract #102': {
"Member Rights", title: 'Payment Processing Agreement',
"Access Levels", date: '2024-05-01',
"Security Protocol", parties: ['Company XYZ', 'Payment Team'],
"Confidentiality Agreement" terms: ['Transaction Protocol', 'Security Measures', 'Fee Structure', 'Service Availability'],
], content: 'This agreement defines payment processing terms and conditions.',
content: "This agreement outlines the terms for member access and privileges." },
}, 'Contract #103': {
'Contract #101': { title: 'Deposit Management Contract',
title: "Peer Collaboration Agreement", date: '2024-06-01',
date: "2024-04-01", parties: ['Company XYZ', 'Deposit Team'],
parties: ["Company XYZ", "Peer Network"], terms: ['Deposit Rules', 'Storage Protocol', 'Access Control', 'Security Standards'],
terms: [ content: 'This contract outlines deposit management procedures and security measures.',
"Collaboration Rules", },
"Resource Sharing", 'Contract #104': {
"Dispute Resolution", title: 'Artefact Handling Agreement',
"Network Protocol" date: '2024-07-01',
], parties: ['Company XYZ', 'Artefact Team'],
content: "This contract establishes peer collaboration and networking guidelines." terms: ['Handling Procedures', 'Storage Guidelines', 'Access Protocol', 'Preservation Standards'],
}, content: 'This agreement establishes artefact handling and preservation guidelines.',
'Contract #102': { },
title: "Payment Processing Agreement", 'Contract #105': {
date: "2024-05-01", title: 'Resolution Protocol Agreement',
parties: ["Company XYZ", "Payment Team"], date: '2024-08-01',
terms: [ parties: ['Company XYZ', 'Resolution Team'],
"Transaction Protocol", terms: ['Resolution Process', 'Time Constraints', 'Escalation Protocol', 'Documentation Requirements'],
"Security Measures", content: 'This contract defines the resolution process and protocol standards.',
"Fee Structure", },
"Service Availability" 'Contract #106': {
], title: 'Backup Service Agreement',
content: "This agreement defines payment processing terms and conditions." date: '2024-09-01',
}, parties: ['Company XYZ', 'Backup Team'],
'Contract #103': { terms: ['Backup Schedule', 'Data Protection', 'Recovery Protocol', 'Service Reliability'],
title: "Deposit Management Contract", content: 'This agreement outlines backup service terms and recovery procedures.',
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."
}
}; };

52
src/mocks/mock-account/interfacesAccountMock.ts
View File

@ -1,45 +1,45 @@
export interface Row { export interface Row {
column1: string; column1: string;
column2: string; column2: string;
column3: string; column3: string;
} }
// Types supplémentaires nécessaires // Types supplémentaires nécessaires
export interface Contract { export interface Contract {
title: string; title: string;
date: string; date: string;
parties: string[]; parties: string[];
terms: string[]; terms: string[];
content: string; content: string;
} }
export interface WalletRow { export interface WalletRow {
column1: string; // Label column1: string; // Label
column2: string; // Wallet column2: string; // Wallet
column3: string; // Type column3: string; // Type
} }
export interface DataRow { export interface DataRow {
column1: string; // Name column1: string; // Name
column2: string; // Visibility column2: string; // Visibility
column3: string; // Role column3: string; // Role
column4: string; // Duration column4: string; // Duration
column5: string; // Legal column5: string; // Legal
column6: string; // Contract column6: string; // Contract
processName: string; processName: string;
zone: string; zone: string;
} }
export interface Notification { export interface Notification {
message: string; message: string;
timestamp: string; timestamp: string;
isRead: boolean; isRead: boolean;
} }
// Déplacer l'interface en dehors de la classe, au début du fichier // Déplacer l'interface en dehors de la classe, au début du fichier
export interface NotificationMessage { export interface NotificationMessage {
id: number; id: number;
read: boolean; read: boolean;
date: string; date: string;
message: string; message: string;
} }

82
src/mocks/mock-chat/groupsMock.js
View File

@ -1,40 +1,52 @@
export const groupsMock = [ export const groupsMock = [
{ {
id: 1,
name: 'Group 🚀 ',
roles: [
{
id: 1, id: 1,
name: "Group 🚀 ", name: 'Role 1',
roles: [ members: [
{ { id: 1, name: 'Member 1' },
id: 1, { id: 2, name: 'Member 2' },
name: "Role 1", ],
members: [{ id: 1, name: "Member 1" }, { id: 2, name: "Member 2" }] },
}, {
{
id: 2,
name: "Role 2",
members: [{ id: 3, name: "Member 3" }, { id: 4, name: "Member 4" }]
}
]
},
{
id: 2, id: 2,
name: "Group ₿", name: 'Role 2',
roles: [ members: [
{ { id: 3, name: 'Member 3' },
id: 3, { id: 4, name: 'Member 4' },
name: "Role 1", ],
members: [{ id: 5, name: "Member 5" }, { id: 6, name: "Member 6" }] },
} ],
] },
}, {
{ id: 2,
name: 'Group ₿',
roles: [
{
id: 3, id: 3,
name: "Group 🪙", name: 'Role 1',
roles: [ members: [
{ { id: 5, name: 'Member 5' },
id: 4, { id: 6, name: 'Member 6' },
name: "Role 1", ],
members: [{ id: 7, name: "Member 7" }, { id: 8, name: "Member 8" }] },
} ],
] },
} {
id: 3,
name: 'Group 🪙',
roles: [
{
id: 4,
name: 'Role 1',
members: [
{ id: 7, name: 'Member 7' },
{ id: 8, name: 'Member 8' },
],
},
],
},
]; ];

125
src/mocks/mock-chat/messagesMock.js
View File

@ -1,65 +1,64 @@
export const messagesMock = [ export const messagesMock = [
{ {
memberId: 1, // Conversations avec Mmber 1 memberId: 1, // Conversations avec Mmber 1
messages: [ messages: [
{ id: 1, sender: "Member 1", text: "Salut !", time: "10:30 AM" }, { id: 1, sender: 'Member 1', text: 'Salut !', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Bonjour ! Comment ça va ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Bonjour ! Comment ça va ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Tout va bien, merci !", time: "10:32 AM" } { id: 3, sender: '4NK', text: 'Tout va bien, merci !', time: '10:32 AM' },
] ],
}, },
{ {
memberId: 2, // Conversations avec Member 2 memberId: 2, // Conversations avec Member 2
messages: [ messages: [
{ id: 1, sender: "Member 2", text: "Salut, on se voit ce soir ?", time: "10:30 AM" }, { id: 1, sender: 'Member 2', text: 'Salut, on se voit ce soir ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Oui, à quelle heure ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Oui, à quelle heure ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 3, // Conversations avec Member 3 memberId: 3, // Conversations avec Member 3
messages: [ messages: [
{ id: 1, sender: "Member 3", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 3', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 4, // Conversations avec Member 4 memberId: 4, // Conversations avec Member 4
messages: [ messages: [
{ id: 1, sender: "Member 4", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 4', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 5, // Conversations avec Member 5 memberId: 5, // Conversations avec Member 5
messages: [ messages: [
{ id: 1, sender: "Member 5", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 5', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 6, // Conversations avec Member 6 memberId: 6, // Conversations avec Member 6
messages: [ messages: [
{ id: 1, sender: "Member 6", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 6', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 7, // Conversations avec Member 7 memberId: 7, // Conversations avec Member 7
messages: [ messages: [
{ id: 1, sender: "Member 7", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 7', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 8, // Conversations avec Member 8 memberId: 8, // Conversations avec Member 8
messages: [ messages: [
{ id: 1, sender: "Member 8", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 8', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
} },
]; ];

897
src/mocks/mock-signature/groupsMock.js
View File

@ -1,460 +1,471 @@
// Définir les rôles autorisés // Définir les rôles autorisés
const VALID_ROLES = [ const VALID_ROLES = ['User', 'Process', 'Member', 'Peer', 'Payment', 'Deposit', 'Artefact', 'Resolve', 'Backup'];
"User",
"Process",
"Member",
"Peer",
"Payment",
"Deposit",
"Artefact",
"Resolve",
"Backup"
];
const VISIBILITY_LEVELS = { const VISIBILITY_LEVELS = {
PUBLIC: "public", PUBLIC: 'public',
CONFIDENTIAL: "confidential", CONFIDENTIAL: 'confidential',
PRIVATE: "private", PRIVATE: 'private',
}; };
const DOCUMENT_STATUS = { const DOCUMENT_STATUS = {
DRAFT: "draft", DRAFT: 'draft',
PENDING: "pending", PENDING: 'pending',
IN_REVIEW: "in_review", IN_REVIEW: 'in_review',
APPROVED: "approved", APPROVED: 'approved',
REJECTED: "rejected", REJECTED: 'rejected',
EXPIRED: "expired" EXPIRED: 'expired',
}; };
// Fonction pour créer un rôle // Fonction pour créer un rôle
function createRole(name, members) { function createRole(name, members) {
if (!VALID_ROLES.includes(name)) { if (!VALID_ROLES.includes(name)) {
throw new Error(`Role "${name}" is not valid.`); throw new Error(`Role "${name}" is not valid.`);
} }
return { name, members }; return { name, members };
} }
export const groupsMock = [ export const groupsMock = [
{ {
id: 1, id: 1,
name: "Processus 1", name: 'Processus 1',
description: "Description du processus 1", description: 'Description du processus 1',
commonDocuments: [ commonDocuments: [
{ {
id: 101, id: 101,
name: "Règlement intérieur", name: 'Règlement intérieur',
description: "Document vierge pour le règlement intérieur", description: 'Document vierge pour le règlement intérieur',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 102, id: 102,
name: "Charte de confidentialité", name: 'Charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 103, id: 103,
name: "Procédures générales", name: 'Procédures générales',
description: "Document vierge pour les procédures générales", description: 'Document vierge pour les procédures générales',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 104, id: 104,
name: "Urgency A", name: 'Urgency A',
description: "Document vierge pour le plan d'urgence A", description: "Document vierge pour le plan d'urgence A",
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 105, id: 105,
name: "Urgency B", name: 'Urgency B',
description: "Document vierge pour le plan d'urgence B", description: "Document vierge pour le plan d'urgence B",
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 106, id: 106,
name: "Urgency C", name: 'Urgency C',
description: "Document vierge pour le plan d'urgence C", description: "Document vierge pour le plan d'urgence C",
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 107, id: 107,
name: "Document à signer", name: 'Document à signer',
description: "Document vierge pour le règlement intérieur", description: 'Document vierge pour le règlement intérieur',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
],
roles: [
{
name: 'User',
members: [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
], ],
roles: [ documents: [
{ {
name: "User", id: 1,
members: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }], name: 'Document User A',
documents: [ description: 'Description du document User A.',
{ visibility: 'public',
id: 1, createdAt: '2024-01-01',
name: "Document User A", deadline: '2024-02-01',
description: "Description du document User A.", signatures: [
visibility: "public", {
createdAt: "2024-01-01", member: { id: 1, name: 'Alice' },
deadline: "2024-02-01", signed: true,
signatures: [ signedAt: '2024-01-15',
{ },
member: { id: 1, name: "Alice" }, {
signed: true, member: { id: 2, name: 'Bob' },
signedAt: "2024-01-15" signed: false,
}, },
{ ],
member: { id: 2, name: "Bob" }, },
signed: false {
} id: 2,
] name: 'Document User B',
}, description: 'Document vierge pour le rôle User',
{ visibility: 'confidential',
id: 2, createdAt: null,
name: "Document User B", deadline: null,
description: "Document vierge pour le rôle User", signatures: [],
visibility: "confidential", },
createdAt: null, {
deadline: null, id: 7,
signatures: [] name: 'Document User C',
}, description: 'Document vierge pour validation utilisateur',
{ visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
id: 7, status: DOCUMENT_STATUS.DRAFT,
name: "Document User C", createdAt: null,
description: "Document vierge pour validation utilisateur", deadline: null,
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, signatures: [],
status: DOCUMENT_STATUS.DRAFT, },
createdAt: null, {
deadline: null, id: 8,
signatures: [] name: 'Document User D',
}, description: 'Document vierge pour approbation utilisateur',
{ visibility: VISIBILITY_LEVELS.PUBLIC,
id: 8, status: DOCUMENT_STATUS.DRAFT,
name: "Document User D", createdAt: null,
description: "Document vierge pour approbation utilisateur", deadline: null,
visibility: VISIBILITY_LEVELS.PUBLIC, signatures: [],
status: DOCUMENT_STATUS.DRAFT, },
createdAt: null,
deadline: null,
signatures: []
}
]
},
{
name: "Process",
members: [{ id: 3, name: "Charlie" }, { id: 4, name: "David" }],
documents: [
{
id: 3,
name: "Document Process A",
description: "Description du document Process A.",
visibility: "confidential",
createdAt: "2024-01-10",
deadline: "2024-03-01",
signatures: [
{
member: { id: 3, name: "Charlie" },
signed: true,
signedAt: "2024-01-12"
}
]
},
{
id: 9,
name: "Document Process B",
description: "Document vierge pour processus interne",
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
},
{
id: 10,
name: "Document Process C",
description: "Document vierge pour validation processus",
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
},
{
id: 11,
name: "Document Process D",
description: "Document vierge pour validation processus",
visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.PENDING,
createdAt: "2024-01-15",
deadline: "2024-02-01",
signatures: [
{
member: { id: 3, name: "Charlie" },
signed: true,
signedAt: "2024-01-15"
},
{
member: { id: 4, name: "David" },
signed: false
}
]
},
{
id: 12,
name: "Document Process E",
description: "Document vierge pour validation processus",
visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.PENDING,
createdAt: "2024-01-15",
deadline: "2024-02-01",
signatures: [
{
member: { id: 3, name: "Charlie" },
signed: true,
signedAt: "2024-01-15"
},
{
member: { id: 4, name: "David" },
signed: false
}
]
}
]
},
{
name: "Backup",
members: [{ id: 15, name: "Oscar" }, { id: 16, name: "Patricia" }],
documents: [
{
id: 11,
name: "Document Backup A",
description: "Document vierge pour sauvegarde",
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
}
]
}
]
},
{
id: 2,
name: "Processus 2",
description: "Description du processus 2",
commonDocuments: [
{
id: 201,
name: "Règlement intérieur",
description: "Document vierge pour le règlement intérieur",
visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
},
{
id: 202,
name: "Charte de confidentialité",
description: "Document vierge pour la charte de confidentialité",
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
},
{
id: 203,
name: "Charte de confidentialité",
description: "Document vierge pour la charte de confidentialité",
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
},
{
id: 204,
name: "Charte de confidentialité",
description: "Document vierge pour la charte de confidentialité",
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
},
{
id: 205,
name: "Charte de confidentialité",
description: "Document vierge pour la charte de confidentialité",
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
}
], ],
roles: [ },
{ {
name: "Artefact", name: 'Process',
members: [{ id: 17, name: "Quinn" }, { id: 18, name: "Rachel" }], members: [
documents: [ { id: 3, name: 'Charlie' },
{ { id: 4, name: 'David' },
id: 12,
name: "Document Artefact A",
description: "Document vierge pour artefact",
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
},
{
id: 13,
name: "Document Artefact B",
description: "Document vierge pour validation artefact",
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
}
]
},
{
name: "Resolve",
members: [{ id: 19, name: "Sam" }, { id: 20, name: "Tom" }],
documents: [
{
id: 14,
name: "Document Resolve A",
description: "Document vierge pour résolution",
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
}
]
}
]
},
{
id: 3,
name: "Processus 3",
description: "Description du processus 3",
commonDocuments: [
{
id: 301,
name: "Règlement intérieur",
description: "Document vierge pour le règlement intérieur",
visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
},
{
id: 302,
name: "Charte de confidentialité",
description: "Document vierge pour la charte de confidentialité",
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
},
{
id: 303,
name: "Procédures générales",
description: "Document vierge pour les procédures générales",
visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: []
}
], ],
roles: [ documents: [
{ {
name: "Deposit", id: 3,
members: [{ id: 21, name: "Uma" }, { id: 22, name: "Victor" }], name: 'Document Process A',
documents: [ description: 'Description du document Process A.',
{ visibility: 'confidential',
id: 15, createdAt: '2024-01-10',
name: "Document Deposit A", deadline: '2024-03-01',
description: "Document vierge pour dépôt", signatures: [
visibility: VISIBILITY_LEVELS.PRIVATE, {
status: DOCUMENT_STATUS.DRAFT, member: { id: 3, name: 'Charlie' },
createdAt: null, signed: true,
deadline: null, signedAt: '2024-01-12',
signatures: [] },
}, ],
{ },
id: 16, {
name: "Document Deposit B", id: 9,
description: "Document vierge pour validation dépôt", name: 'Document Process B',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, description: 'Document vierge pour processus interne',
status: DOCUMENT_STATUS.DRAFT, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
createdAt: null, status: DOCUMENT_STATUS.DRAFT,
deadline: null, createdAt: null,
signatures: [] deadline: null,
} signatures: [],
] },
}, {
{ id: 10,
name: "Payment", name: 'Document Process C',
members: [{ id: 23, name: "Walter" }, { id: 24, name: "Xena" }], description: 'Document vierge pour validation processus',
documents: [ visibility: VISIBILITY_LEVELS.PRIVATE,
{ status: DOCUMENT_STATUS.DRAFT,
id: 17, createdAt: null,
name: "Document Payment B", deadline: null,
description: "Document vierge pour paiement", signatures: [],
visibility: VISIBILITY_LEVELS.PRIVATE, },
status: DOCUMENT_STATUS.DRAFT, {
createdAt: null, id: 11,
deadline: null, name: 'Document Process D',
signatures: [] description: 'Document vierge pour validation processus',
}, visibility: VISIBILITY_LEVELS.PUBLIC,
{ status: DOCUMENT_STATUS.PENDING,
id: 18, createdAt: '2024-01-15',
name: "Document Payment C", deadline: '2024-02-01',
description: "Document vierge pour validation paiement", signatures: [
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, {
status: DOCUMENT_STATUS.DRAFT, member: { id: 3, name: 'Charlie' },
createdAt: null, signed: true,
deadline: null, signedAt: '2024-01-15',
signatures: [] },
} {
] member: { id: 4, name: 'David' },
} signed: false,
] },
} ],
},
{
id: 12,
name: 'Document Process E',
description: 'Document vierge pour validation processus',
visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.PENDING,
createdAt: '2024-01-15',
deadline: '2024-02-01',
signatures: [
{
member: { id: 3, name: 'Charlie' },
signed: true,
signedAt: '2024-01-15',
},
{
member: { id: 4, name: 'David' },
signed: false,
},
],
},
],
},
{
name: 'Backup',
members: [
{ id: 15, name: 'Oscar' },
{ id: 16, name: 'Patricia' },
],
documents: [
{
id: 11,
name: 'Document Backup A',
description: 'Document vierge pour sauvegarde',
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
],
},
],
},
{
id: 2,
name: 'Processus 2',
description: 'Description du processus 2',
commonDocuments: [
{
id: 201,
name: 'Règlement intérieur',
description: 'Document vierge pour le règlement intérieur',
visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
{
id: 202,
name: 'Charte de confidentialité',
description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
{
id: 203,
name: 'Charte de confidentialité',
description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
{
id: 204,
name: 'Charte de confidentialité',
description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
{
id: 205,
name: 'Charte de confidentialité',
description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
],
roles: [
{
name: 'Artefact',
members: [
{ id: 17, name: 'Quinn' },
{ id: 18, name: 'Rachel' },
],
documents: [
{
id: 12,
name: 'Document Artefact A',
description: 'Document vierge pour artefact',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
{
id: 13,
name: 'Document Artefact B',
description: 'Document vierge pour validation artefact',
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
],
},
{
name: 'Resolve',
members: [
{ id: 19, name: 'Sam' },
{ id: 20, name: 'Tom' },
],
documents: [
{
id: 14,
name: 'Document Resolve A',
description: 'Document vierge pour résolution',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
],
},
],
},
{
id: 3,
name: 'Processus 3',
description: 'Description du processus 3',
commonDocuments: [
{
id: 301,
name: 'Règlement intérieur',
description: 'Document vierge pour le règlement intérieur',
visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
{
id: 302,
name: 'Charte de confidentialité',
description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
{
id: 303,
name: 'Procédures générales',
description: 'Document vierge pour les procédures générales',
visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
],
roles: [
{
name: 'Deposit',
members: [
{ id: 21, name: 'Uma' },
{ id: 22, name: 'Victor' },
],
documents: [
{
id: 15,
name: 'Document Deposit A',
description: 'Document vierge pour dépôt',
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
{
id: 16,
name: 'Document Deposit B',
description: 'Document vierge pour validation dépôt',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
],
},
{
name: 'Payment',
members: [
{ id: 23, name: 'Walter' },
{ id: 24, name: 'Xena' },
],
documents: [
{
id: 17,
name: 'Document Payment B',
description: 'Document vierge pour paiement',
visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
{
id: 18,
name: 'Document Payment C',
description: 'Document vierge pour validation paiement',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
],
},
],
},
]; ];

202
src/mocks/mock-signature/membersMocks.js
View File

@ -1,105 +1,105 @@
export const membersMock = [ export const membersMock = [
// Processus 1 // Processus 1
{ {
id: 1, id: 1,
name: "Alice", name: 'Alice',
avatar: "A", avatar: 'A',
email: "alice@company.com", email: 'alice@company.com',
processRoles: [{ processId: 1, role: "User" }] processRoles: [{ processId: 1, role: 'User' }],
}, },
{ {
id: 2, id: 2,
name: "Bob", name: 'Bob',
avatar: "B", avatar: 'B',
email: "bob@company.com", email: 'bob@company.com',
processRoles: [{ processId: 1, role: "User" }] processRoles: [{ processId: 1, role: 'User' }],
}, },
{ {
id: 3, id: 3,
name: "Charlie", name: 'Charlie',
avatar: "C", avatar: 'C',
email: "charlie@company.com", email: 'charlie@company.com',
processRoles: [{ processId: 1, role: "Process" }] processRoles: [{ processId: 1, role: 'Process' }],
}, },
{ {
id: 4, id: 4,
name: "David", name: 'David',
avatar: "D", avatar: 'D',
email: "david@company.com", email: 'david@company.com',
processRoles: [{ processId: 1, role: "Process" }] processRoles: [{ processId: 1, role: 'Process' }],
}, },
{ {
id: 15, id: 15,
name: "Oscar", name: 'Oscar',
avatar: "O", avatar: 'O',
email: "oscar@company.com", email: 'oscar@company.com',
processRoles: [{ processId: 1, role: "Backup" }] processRoles: [{ processId: 1, role: 'Backup' }],
}, },
{ {
id: 16, id: 16,
name: "Patricia", name: 'Patricia',
avatar: "P", avatar: 'P',
email: "patricia@company.com", email: 'patricia@company.com',
processRoles: [{ processId: 1, role: "Backup" }] processRoles: [{ processId: 1, role: 'Backup' }],
}, },
// Processus 2 // Processus 2
{ {
id: 17, id: 17,
name: "Quinn", name: 'Quinn',
avatar: "Q", avatar: 'Q',
email: "quinn@company.com", email: 'quinn@company.com',
processRoles: [{ processId: 2, role: "Artefact" }] processRoles: [{ processId: 2, role: 'Artefact' }],
}, },
{ {
id: 18, id: 18,
name: "Rachel", name: 'Rachel',
avatar: "R", avatar: 'R',
email: "rachel@company.com", email: 'rachel@company.com',
processRoles: [{ processId: 2, role: "Artefact" }] processRoles: [{ processId: 2, role: 'Artefact' }],
}, },
{ {
id: 19, id: 19,
name: "Sam", name: 'Sam',
avatar: "S", avatar: 'S',
email: "sam@company.com", email: 'sam@company.com',
processRoles: [{ processId: 2, role: "Resolve" }] processRoles: [{ processId: 2, role: 'Resolve' }],
}, },
{ {
id: 20, id: 20,
name: "Tom", name: 'Tom',
avatar: "T", avatar: 'T',
email: "tom@company.com", email: 'tom@company.com',
processRoles: [{ processId: 2, role: "Resolve" }] processRoles: [{ processId: 2, role: 'Resolve' }],
}, },
// Processus 3 // Processus 3
{ {
id: 21, id: 21,
name: "Uma", name: 'Uma',
avatar: "U", avatar: 'U',
email: "uma@company.com", email: 'uma@company.com',
processRoles: [{ processId: 3, role: "Deposit" }] processRoles: [{ processId: 3, role: 'Deposit' }],
}, },
{ {
id: 22, id: 22,
name: "Victor", name: 'Victor',
avatar: "V", avatar: 'V',
email: "victor@company.com", email: 'victor@company.com',
processRoles: [{ processId: 3, role: "Deposit" }] processRoles: [{ processId: 3, role: 'Deposit' }],
}, },
{ {
id: 23, id: 23,
name: "Walter", name: 'Walter',
avatar: "W", avatar: 'W',
email: "walter@company.com", email: 'walter@company.com',
processRoles: [{ processId: 3, role: "Payment" }] processRoles: [{ processId: 3, role: 'Payment' }],
}, },
{ {
id: 24, id: 24,
name: "Xena", name: 'Xena',
avatar: "X", avatar: 'X',
email: "xena@company.com", email: 'xena@company.com',
processRoles: [{ processId: 3, role: "Payment" }] processRoles: [{ processId: 3, role: 'Payment' }],
} },
]; ];

125
src/mocks/mock-signature/messagesMock.ts
View File

@ -1,65 +1,64 @@
export const messagesMock = [ export const messagesMock = [
{ {
memberId: 1, // Conversations avec Mmber 1 memberId: 1, // Conversations avec Mmber 1
messages: [ messages: [
{ id: 1, sender: "Mmeber 1", text: "Salut !", time: "10:30 AM" }, { id: 1, sender: 'Mmeber 1', text: 'Salut !', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Bonjour ! Comment ça va ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Bonjour ! Comment ça va ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Tout va bien, merci !", time: "10:32 AM" } { id: 3, sender: '4NK', text: 'Tout va bien, merci !', time: '10:32 AM' },
] ],
}, },
{ {
memberId: 2, // Conversations avec Member 2 memberId: 2, // Conversations avec Member 2
messages: [ messages: [
{ id: 1, sender: "Member 2", text: "Salut, on se voit ce soir ?", time: "10:30 AM" }, { id: 1, sender: 'Member 2', text: 'Salut, on se voit ce soir ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Oui, à quelle heure ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Oui, à quelle heure ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 3, // Conversations avec Member 3 memberId: 3, // Conversations avec Member 3
messages: [ messages: [
{ id: 1, sender: "Member 3", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 3', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 4, // Conversations avec Member 4 memberId: 4, // Conversations avec Member 4
messages: [ messages: [
{ id: 1, sender: "Member 4", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 4', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 5, // Conversations avec Member 5 memberId: 5, // Conversations avec Member 5
messages: [ messages: [
{ id: 1, sender: "Member 5", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 5', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 6, // Conversations avec Member 6 memberId: 6, // Conversations avec Member 6
messages: [ messages: [
{ id: 1, sender: "Member 6", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 6', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 7, // Conversations avec Member 7 memberId: 7, // Conversations avec Member 7
messages: [ messages: [
{ id: 1, sender: "Member 7", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 7', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 8, // Conversations avec Member 8 memberId: 8, // Conversations avec Member 8
messages: [ messages: [
{ id: 1, sender: "Member 8", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 8', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
} },
]; ];

14
src/models/notification.model.ts
View File

@ -19,12 +19,12 @@ export interface IMessage {
} }
export interface UserDiff { export interface UserDiff {
new_state_merkle_root: string, // TODO add a merkle proof that the new_value belongs to that state new_state_merkle_root: string; // TODO add a merkle proof that the new_value belongs to that state
field: string, field: string;
previous_value: string, previous_value: string;
new_value: string, new_value: string;
notify_user: boolean, notify_user: boolean;
need_validation: boolean, need_validation: boolean;
// validated: bool, // validated: bool,
proof: any, // This is only validation (or refusal) for that specific diff, not the whole state. It can't be commited as such proof: any; // This is only validation (or refusal) for that specific diff, not the whole state. It can't be commited as such
} }

80
src/models/signature.models.ts
View File

@ -1,59 +1,59 @@
export interface Group { export interface Group {
id: number; id: number;
name: string;
description?: string;
roles: {
id?: number;
name: string; name: string;
description?: string; members: { id: string | number; name: string }[];
roles: { documents?: {
id?: number; id: number;
name: string; name: string;
members: { id: string | number; name: string; }[]; description?: string;
documents?: { visibility: string;
id: number; createdAt: string | null;
name: string; deadline: string | null;
description?: string; signatures: DocumentSignature[];
visibility: string; status?: string;
createdAt: string | null; files?: Array<{ name: string; url: string }>;
deadline: string | null;
signatures: DocumentSignature[];
status?: string;
files?: Array<{ name: string; url: string }>;
}[];
}[]; }[];
}[];
} }
export interface Message { export interface Message {
id: number; id: number;
sender: string; sender: string;
text?: string; text?: string;
time: string; time: string;
type: 'text' | 'file'; type: 'text' | 'file';
fileName?: string; fileName?: string;
fileData?: string; fileData?: string;
} }
export interface MemberMessages { export interface MemberMessages {
memberId: string; memberId: string;
messages: Message[]; messages: Message[];
} }
export interface DocumentSignature { export interface DocumentSignature {
signed: boolean; signed: boolean;
member: { member: {
name: string; name: string;
}; };
signedAt?: string; signedAt?: string;
} }
export interface RequestParams { export interface RequestParams {
processId: number; processId: number;
processName: string; processName: string;
roleId: number; roleId: number;
roleName: string; roleName: string;
documentId: number; documentId: number;
documentName: string; documentName: string;
} }
export interface Notification { export interface Notification {
memberId: string; memberId: string;
text: string; text: string;
time: string; time: string;
} }

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

@ -1,63 +1,62 @@
import { AccountElement } from './account'; import { AccountElement } from './account';
import accountCss from '../../../public/style/account.css?raw' import accountCss from '../../../public/style/account.css?raw';
import Services from '../../services/service.js' import Services from '../../services/service.js';
class AccountComponent extends HTMLElement { class AccountComponent extends HTMLElement {
_callback: any _callback: any;
accountElement: AccountElement | null = null; accountElement: AccountElement | null = null;
constructor() { constructor() {
super(); super();
console.log('INIT') console.log('INIT');
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.accountElement = this.shadowRoot?.querySelector('account-element') || null; this.accountElement = this.shadowRoot?.querySelector('account-element') || null;
}
connectedCallback() {
console.log('CALLBACKs');
this.render();
this.fetchData();
if (!customElements.get('account-element')) {
customElements.define('account-element', AccountElement);
} }
}
connectedCallback() { async fetchData() {
console.log('CALLBACKs') if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
this.render(); const data = await (window as any).myService?.getProcesses();
this.fetchData(); } else {
const service = await Services.getInstance();
if (!customElements.get('account-element')) { const data = await service.getProcesses();
customElements.define('account-element', AccountElement);
}
} }
}
async fetchData() { set callback(fn) {
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) { if (typeof fn === 'function') {
const data = await (window as any).myService?.getProcesses(); this._callback = fn;
} else { } else {
const service = await Services.getInstance() console.error('Callback is not a function');
const data = await service.getProcesses();
}
} }
}
set callback(fn) { get callback() {
if (typeof fn === 'function') { return this._callback;
this._callback = fn; }
} else {
console.error('Callback is not a function'); render() {
} if (this.shadowRoot && !this.shadowRoot.querySelector('account-element')) {
} const style = document.createElement('style');
style.textContent = accountCss;
get callback() {
return this._callback; const accountElement = document.createElement('account-element');
}
this.shadowRoot.appendChild(style);
render() { this.shadowRoot.appendChild(accountElement);
if(this.shadowRoot && !this.shadowRoot.querySelector('account-element')) {
const style = document.createElement('style');
style.textContent = accountCss;
const accountElement = document.createElement('account-element');
this.shadowRoot.appendChild(style);
this.shadowRoot.appendChild(accountElement);
}
} }
}
} }
export { AccountComponent } export { AccountComponent };
customElements.define('account-component', AccountComponent); customElements.define('account-component', AccountComponent);

148
src/pages/account/account.html
View File

@ -1,91 +1,99 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Account</title> <title>Account</title>
<link rel="stylesheet" href="../../public/style/account.css"> <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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head> </head>
<body> <body>
<!-- Header Container --> <!-- Header Container -->
<div id="header-container"></div> <div id="header-container"></div>
<!-- Profile Popup --> <!-- Profile Popup -->
<div id="avatar-popup" class="popup"> <div id="avatar-popup" class="popup">
<div class="popup-content"> <div class="popup-content">
<span class="close-popup">&times;</span> <span class="close-popup">&times;</span>
<h2>Profile</h2> <h2>Profile</h2>
<!-- Banner Preview Section --> <!-- Banner Preview Section -->
<div class="banner-preview"> <div class="banner-preview">
<div class="banner-image-container"> <div class="banner-image-container">
<img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" id="popup-banner-img"> <img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" id="popup-banner-img" />
<div class="banner-content"> <div class="banner-content">
<div class="avatar-container"> <div class="avatar-container">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img"> <img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img" />
</div> </div>
<div class="user-info"> <div class="user-info">
<span class="editable" id="popup-name"></span> <span class="editable" id="popup-name"></span>
<span class="editable" id="popup-lastname"></span> <span class="editable" id="popup-lastname"></span>
</div> </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>
<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> </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> </div>
<!-- Main Content --> <!-- Main Content -->
<div class="container"> <div class="container">
<!-- Parameter List --> <!-- Parameter List -->
<div class="parameter-list"> <div class="parameter-list">
<ul class="parameter-list-ul" onclick="window.showPairing()">Pairing 🔗</ul> <ul class="parameter-list-ul" onclick="window.showPairing()">
<ul class="parameter-list-ul" onclick="window.showWallet()">Wallet 👛</ul> Pairing 🔗
<ul class="parameter-list-ul" onclick="window.showProcess()">Process ⚙️</ul> </ul>
<ul class="parameter-list-ul" onclick="window.showData()">Data 💾</ul> <ul class="parameter-list-ul" onclick="window.showWallet()">
</div> 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 --> <!-- Parameter Area -->
<div class="parameter-area"> <div class="parameter-area">
<div class="content-container"> <div class="content-container">
<div id="pairing-content"></div> <div id="pairing-content"></div>
<div id="wallet-content"></div> <div id="wallet-content"></div>
<div id="process-content"></div> <div id="process-content"></div>
<div id="data-content"></div> <div id="data-content"></div>
</div>
</div> </div>
</div>
</div> </div>
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="./account.ts?ts"></script> <script type="module" src="./account.ts?ts"></script>
</body> </body>
</html> </html>

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

File diff suppressed because it is too large Load Diff

86
src/pages/chat/chat-component.ts
View File

@ -1,59 +1,59 @@
import { ChatElement } from './chat'; import { ChatElement } from './chat';
import chatCss from '../../../public/style/chat.css?raw' import chatCss from '../../../public/style/chat.css?raw';
import Services from '../../services/service.js' import Services from '../../services/service.js';
class ChatComponent extends HTMLElement { class ChatComponent extends HTMLElement {
_callback: any _callback: any;
chatElement: ChatElement | null = null; chatElement: ChatElement | null = null;
constructor() { constructor() {
super(); super();
console.log('INIT') console.log('INIT');
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.chatElement = this.shadowRoot?.querySelector('chat-element') || null; this.chatElement = this.shadowRoot?.querySelector('chat-element') || null;
}
connectedCallback() {
console.log('CALLBACKs');
this.render();
this.fetchData();
if (!customElements.get('chat-element')) {
customElements.define('chat-element', ChatElement);
} }
}
connectedCallback() { async fetchData() {
console.log('CALLBACKs') if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
this.render(); const data = await (window as any).myService?.getProcesses();
this.fetchData(); } else {
const service = await Services.getInstance();
if (!customElements.get('chat-element')) { const data = await service.getProcesses();
customElements.define('chat-element', ChatElement);
}
} }
}
async fetchData() { set callback(fn) {
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) { if (typeof fn === 'function') {
const data = await (window as any).myService?.getProcesses(); this._callback = fn;
} else { } else {
const service = await Services.getInstance() console.error('Callback is not a function');
const data = await service.getProcesses();
}
} }
}
set callback(fn) { get callback() {
if (typeof fn === 'function') { return this._callback;
this._callback = fn; }
} else {
console.error('Callback is not a function');
}
}
get callback() { render() {
return this._callback; if (this.shadowRoot) {
} // Créer l'élément chat-element
const chatElement = document.createElement('chat-element');
render() { this.shadowRoot.innerHTML = `<style>${chatCss}</style>`;
if(this.shadowRoot) { this.shadowRoot.appendChild(chatElement);
// Créer l'élément chat-element
const chatElement = document.createElement('chat-element');
this.shadowRoot.innerHTML = `<style>${chatCss}</style>`;
this.shadowRoot.appendChild(chatElement);
}
} }
}
} }
export { ChatComponent } export { ChatComponent };
customElements.define('chat-component', ChatComponent); customElements.define('chat-component', ChatComponent);

75
src/pages/chat/chat.html
View File

@ -1,53 +1,48 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Messagerie</title> <title>Messagerie</title>
<link rel="stylesheet" href="../../public/style/chat.css"> <link rel="stylesheet" href="../../public/style/chat.css" />
</head> </head>
<body>
<body>
<!-- Main content--> <!-- Main content-->
<div class="container"> <div class="container">
<!-- List of groups --> <!-- List of groups -->
<div class="group-list"> <div class="group-list">
<ul id="group-list"> <ul id="group-list">
<!-- Groups will be added here dynamically --> <!-- Groups will be added here dynamically -->
</ul> </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> </div>
<!-- Chat area --> <!-- Input area -->
<div class="chat-area"> <div class="input-area">
<div class="chat-header" id="chat-header"> <label for="file-input" class="attachment-icon">
<!-- Chat title --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
</div> <path
<div class="messages" id="messages"> 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"
<!-- Messages --> />
</div> </svg>
</label>
<input type="file" id="file-input" style="display: none" />
<!-- Input area --> <textarea id="message-input" rows="3" placeholder="Type your message..."></textarea>
<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>
<button id="send-button">Send</button>
</div>
</div> </div>
</div>
</div> </div>
<script type="module" src="./chat.ts?ts"></script> <script type="module" src="./chat.ts?ts"></script>
</body>
</body>
</html> </html>

821
src/pages/chat/chat.ts
View File

@ -1,179 +1,171 @@
declare global { declare global {
interface Window { interface Window {
toggleUserList: () => void; toggleUserList: () => void;
switchUser: (userId: string | number) => void; switchUser: (userId: string | number) => void;
loadMemberChat: (memberId: string | number) => void; loadMemberChat: (memberId: string | number) => void;
} }
} }
import { groupsMock } from '../../mocks/mock-signature/groupsMock'; import { groupsMock } from '../../mocks/mock-signature/groupsMock';
import { messagesMock as initialMessagesMock, messagesMock } from '../../mocks/mock-signature/messagesMock'; import { messagesMock as initialMessagesMock, messagesMock } from '../../mocks/mock-signature/messagesMock';
import { membersMock } from '../../mocks/mock-signature/membersMocks'; import { membersMock } from '../../mocks/mock-signature/membersMocks';
import { import { Message, DocumentSignature } from '../../models/signature.models';
Message,
DocumentSignature,
} from '../../models/signature.models';
import { messageStore } from '../../utils/messageMock'; import { messageStore } from '../../utils/messageMock';
import { Member } from '../../interface/memberInterface'; import { Member } from '../../interface/memberInterface';
import { Group } from '../../interface/groupInterface'; import { Group } from '../../interface/groupInterface';
import { getCorrectDOM } from '../../utils/document.utils'; import { getCorrectDOM } from '../../utils/document.utils';
let currentUser: Member = membersMock[0]; let currentUser: Member = membersMock[0];
interface LocalNotification { interface LocalNotification {
memberId: string; memberId: string;
text: string; text: string;
time: string; time: string;
} }
export function initChat() { export function initChat() {
const chatElement = document.createElement('chat-element'); const chatElement = document.createElement('chat-element');
const container = document.querySelector('.container'); const container = document.querySelector('.container');
if (container) { if (container) {
container.appendChild(chatElement); container.appendChild(chatElement);
} }
} }
class ChatElement extends HTMLElement { class ChatElement extends HTMLElement {
private selectedMemberId: string | null = null; private selectedMemberId: string | null = null;
private messagesMock: any[] = []; private messagesMock: any[] = [];
private dom: Node; private dom: Node;
private notifications: LocalNotification[] = []; private notifications: LocalNotification[] = [];
private notificationBadge = document.querySelector('.notification-badge'); private notificationBadge = document.querySelector('.notification-badge');
private notificationBoard = document.getElementById('notification-board'); private notificationBoard = document.getElementById('notification-board');
private notificationBell = document.getElementById('notification-bell'); private notificationBell = document.getElementById('notification-bell');
private selectedSignatories: DocumentSignature[] = []; private selectedSignatories: DocumentSignature[] = [];
private allMembers = membersMock.map(member => ({ private allMembers = membersMock.map((member) => ({
id: member.id, id: member.id,
name: member.name, name: member.name,
roleName: 'Default Role' roleName: 'Default Role',
})); }));
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.dom = getCorrectDOM('signature-element');
constructor() { window.toggleUserList = this.toggleUserList.bind(this);
super(); window.switchUser = this.switchUser.bind(this);
this.attachShadow({ mode: 'open' }); window.loadMemberChat = this.loadMemberChat.bind(this);
this.dom = getCorrectDOM('signature-element');
window.toggleUserList = this.toggleUserList.bind(this); // Initialiser les événements de notification
window.switchUser = this.switchUser.bind(this); document.addEventListener('click', (event: Event): void => {
window.loadMemberChat = this.loadMemberChat.bind(this); 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';
}
});
this.initMessageEvents();
this.initFileUpload();
}
// Initialiser les événements de notification private initMessageEvents() {
document.addEventListener('click', (event: Event): void => { // Pour le bouton Send
if (this.notificationBoard && this.notificationBoard.style.display === 'block' && const sendButton = document.getElementById('send-button');
!this.notificationBoard.contains(event.target as Node) && if (sendButton) {
this.notificationBell && !this.notificationBell.contains(event.target as Node)) { sendButton.addEventListener('click', () => this.sendMessage());
this.notificationBoard.style.display = 'none';
}
});
this.initMessageEvents();
this.initFileUpload();
} }
private initMessageEvents() { // Pour la touche Entrée
// Pour le bouton Send const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button'); if (messageInput) {
if (sendButton) { messageInput.addEventListener('keypress', (event: KeyboardEvent) => {
sendButton.addEventListener('click', () => this.sendMessage()); if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
this.sendMessage();
} }
});
}
}
// Pour la touche Entrée private initFileUpload() {
const messageInput = document.getElementById('message-input'); const fileInput = document.getElementById('file-input') as HTMLInputElement;
if (messageInput) { if (fileInput) {
messageInput.addEventListener('keypress', (event: KeyboardEvent) => { fileInput.addEventListener('change', (event: Event) => {
if (event.key === 'Enter' && !event.shiftKey) { const target = event.target as HTMLInputElement;
event.preventDefault(); if (target.files && target.files.length > 0) {
this.sendMessage(); this.sendFile(target.files[0]);
}
});
} }
});
}
}
///////////////////// Notification module /////////////////////
// Delete a notification
private removeNotification(index: number) {
this.notifications?.splice(index, 1); // Ajout de ?.
this.renderNotifications();
this.updateNotificationBadge();
}
// Show notifications
private renderNotifications() {
if (!this.notificationBoard) return;
// Reset the interface
this.notificationBoard.innerHTML = '';
// Displays "No notifications available" if there are no notifications
if (this.notifications.length === 0) {
this.notificationBoard.innerHTML = '<div class="no-notification">No notifications available</div>';
return;
} }
private initFileUpload() { // Add each notification to the list
const fileInput = document.getElementById('file-input') as HTMLInputElement; this.notifications.forEach((notif, index) => {
if (fileInput) { const notifElement = document.createElement('div');
fileInput.addEventListener('change', (event: Event) => { notifElement.className = 'notification-item';
const target = event.target as HTMLInputElement; notifElement.textContent = `${notif.text} at ${notif.time}`;
if (target.files && target.files.length > 0) { notifElement.onclick = () => {
this.sendFile(target.files[0]); this.loadMemberChat(notif.memberId);
} this.removeNotification(index);
}); };
} this.notificationBoard?.appendChild(notifElement);
} });
}
private updateNotificationBadge() {
if (!this.notificationBadge) return;
const count = this.notifications.length;
this.notificationBadge.textContent = count > 99 ? '+99' : count.toString();
(this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none';
}
///////////////////// Notification module ///////////////////// // Add notification
// Delete a notification private addNotification(memberId: string, message: Message) {
private removeNotification(index: number) { // Creating a new notification
this.notifications?.splice(index, 1); // Ajout de ?. const notification = {
this.renderNotifications(); memberId,
this.updateNotificationBadge(); text: `New message from Member ${memberId}: ${message.text}`,
} time: message.time,
// Show notifications };
private renderNotifications() {
if (!this.notificationBoard) return;
// Reset the interface // Added notification to list and interface
this.notificationBoard.innerHTML = ''; this.notifications.push(notification);
this.renderNotifications();
this.updateNotificationBadge();
}
// Displays "No notifications available" if there are no notifications // Send a messsage
if (this.notifications.length === 0) { private sendMessage() {
this.notificationBoard.innerHTML = '<div class="no-notification">No notifications available</div>';
return;
}
// Add each notification to the list
this.notifications.forEach((notif, index) => {
const notifElement = document.createElement('div');
notifElement.className = 'notification-item';
notifElement.textContent = `${notif.text} at ${notif.time}`;
notifElement.onclick = () => {
this.loadMemberChat(notif.memberId);
this.removeNotification(index);
};
this.notificationBoard?.appendChild(notifElement);
});
}
private updateNotificationBadge() {
if (!this.notificationBadge) return;
const count = this.notifications.length;
this.notificationBadge.textContent = count > 99 ? '+99' : count.toString();
(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
};
// Added notification to list and interface
this.notifications.push(notification);
this.renderNotifications();
this.updateNotificationBadge();
}
// Send a messsage
private sendMessage() {
const messageInput = document.getElementById('message-input') as HTMLInputElement; const messageInput = document.getElementById('message-input') as HTMLInputElement;
if (!messageInput) return; if (!messageInput) return;
const messageText = messageInput.value.trim(); const messageText = messageInput.value.trim();
if (messageText === '' || this.selectedMemberId === null) { if (messageText === '' || this.selectedMemberId === null) {
return; return;
} }
const newMessage: Message = { const newMessage: Message = {
id: Date.now(), id: Date.now(),
sender: "4NK", sender: '4NK',
text: messageText, text: messageText,
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'text' as const type: 'text' as const,
}; };
// Add and display the message immediately // Add and display the message immediately
messageStore.addMessage(this.selectedMemberId, newMessage); messageStore.addMessage(this.selectedMemberId, newMessage);
@ -185,224 +177,223 @@ class ChatElement extends HTMLElement {
// Automatic response after 2 seconds // Automatic response after 2 seconds
setTimeout(() => { setTimeout(() => {
if (this.selectedMemberId) { if (this.selectedMemberId) {
const autoReply = this.generateAutoReply(`Member ${this.selectedMemberId}`); const autoReply = this.generateAutoReply(`Member ${this.selectedMemberId}`);
messageStore.addMessage(this.selectedMemberId, autoReply); messageStore.addMessage(this.selectedMemberId, autoReply);
this.messagesMock = messageStore.getMessages(); this.messagesMock = messageStore.getMessages();
this.loadMemberChat(this.selectedMemberId); this.loadMemberChat(this.selectedMemberId);
this.addNotification(this.selectedMemberId, autoReply); this.addNotification(this.selectedMemberId, autoReply);
}
}, 2000);
}
// Scroll down the conversation after loading messages
private scrollToBottom(container: HTMLElement) {
container.scrollTop = container.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));
// 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));
if (member) {
memberInfo = {
processName: process.name,
roleName: role.name,
memberName: member.name,
};
} }
}, 2000); });
});
const chatHeader = document.getElementById('chat-header');
const messagesContainer = document.getElementById('messages');
if (!chatHeader || !messagesContainer) return;
chatHeader.textContent = `Chat with ${memberInfo.roleName} ${memberInfo.memberName} from ${memberInfo.processName}`;
messagesContainer.innerHTML = '';
if (memberMessages) {
memberMessages.messages.forEach((message: Message) => {
const messageElement = document.createElement('div');
messageElement.className = 'message-container';
const messageContent = document.createElement('div');
messageContent.className = 'message';
if (message.type === 'file') {
messageContent.innerHTML = `<a href="${message.fileData}" download="${message.fileName}" target="_blank">${message.fileName}</a>`;
messageContent.classList.add('user');
} else {
messageContent.innerHTML = `<strong>${message.sender}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`;
if (message.sender === '4NK') {
messageContent.classList.add('user');
}
}
messageElement.appendChild(messageContent);
messagesContainer.appendChild(messageElement);
});
} }
// Scroll down the conversation after loading messages this.scrollToBottom(messagesContainer);
private scrollToBottom(container: HTMLElement) { }
container.scrollTop = container.scrollHeight;
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';
return;
}
memberList = document.createElement('ul');
memberList.className = 'member-list';
role.members.forEach((member) => {
const memberItem = document.createElement('li');
memberItem.textContent = member.name;
memberItem.onclick = (event) => {
event.stopPropagation();
this.loadMemberChat(member.id.toString());
};
memberList.appendChild(memberItem);
});
roleElement.appendChild(memberList);
}
// Toggle the list of Roles
private toggleRoles(group: Group, groupElement: HTMLElement) {
console.log('=== toggleRoles START ===');
console.log('Group:', group.name);
console.log('Group roles:', group.roles); // Afficher tous les rôles disponibles
let roleList = groupElement.querySelector('.role-list');
console.log('Existing roleList:', roleList);
if (roleList) {
const roleItems = roleList.querySelectorAll('.role-item');
roleItems.forEach((roleItem) => {
console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet
let container = roleItem.querySelector('.role-item-container');
if (!container) {
container = document.createElement('div');
container.className = 'role-item-container';
// Créer un span pour le nom du rôle
const nameSpan = document.createElement('span');
nameSpan.className = 'role-name';
nameSpan.textContent = roleItem.textContent?.trim() || '';
container.appendChild(nameSpan);
roleItem.textContent = '';
roleItem.appendChild(container);
} }
// Récupérer le nom du rôle
const roleName = roleItem.textContent?.trim();
console.log('Role name from textContent:', roleName);
// Load the list of members // Alternative pour obtenir le nom du rôle
private loadMemberChat(memberId: string | number) { const roleNameAlt = container.querySelector('.role-name')?.textContent;
this.selectedMemberId = String(memberId); console.log('Role name from span:', roleNameAlt);
const memberMessages = this.messagesMock.find(m => String(m.memberId) === String(memberId));
// Find the process and the role of the member if (!container.querySelector('.folder-icon')) {
let memberInfo = { processName: '', roleName: '', memberName: '' }; const folderButton = document.createElement('span');
groupsMock.forEach(process => { folderButton.className = 'folder-icon';
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
};
}
});
});
const chatHeader = document.getElementById('chat-header'); folderButton.addEventListener('click', (event) => {
const messagesContainer = document.getElementById('messages'); event.stopPropagation();
console.log('Clicked role name:', roleName);
console.log(
'Available roles:',
group.roles.map((r) => r.name),
);
if (!chatHeader || !messagesContainer) return; const role = group.roles.find((r) => r.name === roleName);
if (role) {
chatHeader.textContent = `Chat with ${memberInfo.roleName} ${memberInfo.memberName} from ${memberInfo.processName}`; console.log('Found role:', role);
messagesContainer.innerHTML = ''; } else {
console.error('Role not found. Name:', roleName);
if (memberMessages) { console.error('Available roles:', group.roles);
memberMessages.messages.forEach((message: Message) => {
const messageElement = document.createElement('div');
messageElement.className = 'message-container';
const messageContent = document.createElement('div');
messageContent.className = 'message';
if (message.type === 'file') {
messageContent.innerHTML = `<a href="${message.fileData}" download="${message.fileName}" target="_blank">${message.fileName}</a>`;
messageContent.classList.add('user');
} else {
messageContent.innerHTML = `<strong>${message.sender}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`;
if (message.sender === "4NK") {
messageContent.classList.add('user');
}
}
messageElement.appendChild(messageContent);
messagesContainer.appendChild(messageElement);
});
} }
});
container.appendChild(folderButton);
this.scrollToBottom(messagesContainer);
} }
});
private toggleMembers(role: { members: { id: string | number; name: string; }[] }, roleElement: HTMLElement) { (roleList as HTMLElement).style.display = (roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
let memberList = roleElement.querySelector('.member-list');
if (memberList) {
(memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none';
return;
}
memberList = document.createElement('ul');
memberList.className = 'member-list';
role.members.forEach(member => {
const memberItem = document.createElement('li');
memberItem.textContent = member.name;
memberItem.onclick = (event) => {
event.stopPropagation();
this.loadMemberChat(member.id.toString());
};
memberList.appendChild(memberItem);
});
roleElement.appendChild(memberList);
} }
}
private loadGroupList(): void {
const groupList = document.getElementById('group-list');
if (!groupList) return;
// Toggle the list of Roles groupsMock.forEach((group) => {
private toggleRoles(group: Group, groupElement: HTMLElement) { const li = document.createElement('li');
console.log('=== toggleRoles START ==='); li.className = 'group-list-item';
console.log('Group:', group.name);
console.log('Group roles:', group.roles); // Afficher tous les rôles disponibles
let roleList = groupElement.querySelector('.role-list'); // Create a flex container for the name and the icon
console.log('Existing roleList:', roleList); const container = document.createElement('div');
container.className = 'group-item-container';
if (roleList) { // Span for the process name
const roleItems = roleList.querySelectorAll('.role-item'); const nameSpan = document.createElement('span');
roleItems.forEach(roleItem => { nameSpan.textContent = group.name;
console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet nameSpan.className = 'process-name';
let container = roleItem.querySelector('.role-item-container'); // Add click event to show roles
if (!container) { nameSpan.addEventListener('click', (event) => {
container = document.createElement('div'); event.stopPropagation();
container.className = 'role-item-container'; this.toggleRoles(group, li);
});
// Créer un span pour le nom du rôle // Assemble the elements
const nameSpan = document.createElement('span'); container.appendChild(nameSpan);
nameSpan.className = 'role-name'; li.appendChild(container);
nameSpan.textContent = roleItem.textContent?.trim() || '';
container.appendChild(nameSpan); // Create and append the role list container
roleItem.textContent = ''; const roleList = document.createElement('ul');
roleItem.appendChild(container); roleList.className = 'role-list';
} roleList.style.display = 'none';
// Récupérer le nom du rôle // Add roles for this process
const roleName = roleItem.textContent?.trim(); group.roles.forEach((role) => {
console.log('Role name from textContent:', roleName); const roleItem = document.createElement('li');
roleItem.className = 'role-item';
roleItem.textContent = role.name;
roleItem.onclick = (event) => {
event.stopPropagation();
this.toggleMembers(role, roleItem);
};
roleList.appendChild(roleItem);
});
// Alternative pour obtenir le nom du rôle li.appendChild(roleList);
const roleNameAlt = container.querySelector('.role-name')?.textContent; groupList.appendChild(li);
console.log('Role name from span:', roleNameAlt); });
}
if (!container.querySelector('.folder-icon')) { // Function to manage the list of users
const folderButton = document.createElement('span'); private toggleUserList() {
folderButton.className = 'folder-icon'; const userList = getCorrectDOM('userList');
if (!userList) return;
folderButton.addEventListener('click', (event) => { if (!(userList as HTMLElement).classList.contains('show')) {
event.stopPropagation(); (userList as HTMLElement).innerHTML = membersMock
console.log('Clicked role name:', roleName); .map(
console.log('Available roles:', group.roles.map(r => r.name)); (member) => `
const role = group.roles.find(r => r.name === roleName);
if (role) {
console.log('Found role:', role);
} else {
console.error('Role not found. Name:', roleName);
console.error('Available roles:', group.roles);
}
});
container.appendChild(folderButton);
}
});
(roleList as HTMLElement).style.display =
(roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
}
}
private loadGroupList(): void {
const groupList = document.getElementById('group-list');
if (!groupList) return;
groupsMock.forEach(group => {
const li = document.createElement('li');
li.className = 'group-list-item';
// Create a flex container for the name and the icon
const container = document.createElement('div');
container.className = 'group-item-container';
// Span for the process name
const nameSpan = document.createElement('span');
nameSpan.textContent = group.name;
nameSpan.className = 'process-name';
// Add click event to show roles
nameSpan.addEventListener('click', (event) => {
event.stopPropagation();
this.toggleRoles(group, li);
});
// Assemble the elements
container.appendChild(nameSpan);
li.appendChild(container);
// Create and append the role list container
const roleList = document.createElement('ul');
roleList.className = 'role-list';
roleList.style.display = 'none';
// Add roles for this process
group.roles.forEach(role => {
const roleItem = document.createElement('li');
roleItem.className = 'role-item';
roleItem.textContent = role.name;
roleItem.onclick = (event) => {
event.stopPropagation();
this.toggleMembers(role, roleItem);
};
roleList.appendChild(roleItem);
});
li.appendChild(roleList);
groupList.appendChild(li);
});
}
// 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 => `
<div class="user-list-item" onclick="switchUser('${member.id}')"> <div class="user-list-item" onclick="switchUser('${member.id}')">
<span class="user-avatar">${member.avatar}</span> <span class="user-avatar">${member.avatar}</span>
<div> <div>
@ -410,105 +401,106 @@ class ChatElement extends HTMLElement {
<span class="user-email">${member.email}</span> <span class="user-email">${member.email}</span>
</div> </div>
</div> </div>
`).join(''); `,
} )
(userList as HTMLElement).classList.toggle('show'); .join('');
} }
(userList as HTMLElement).classList.toggle('show');
}
private switchUser(userId: string | number) { private switchUser(userId: string | number) {
const user = membersMock.find(member => member.id === userId); const user = membersMock.find((member) => member.id === userId);
if (!user) return; if (!user) return;
currentUser = user; currentUser = user;
this.updateCurrentUserDisplay(); this.updateCurrentUserDisplay();
const userList = getCorrectDOM('userList') as HTMLElement; const userList = getCorrectDOM('userList') as HTMLElement;
userList?.classList.remove('show'); userList?.classList.remove('show');
} }
// Function to update the display of the current user // Function to update the display of the current user
private updateCurrentUserDisplay() { private updateCurrentUserDisplay() {
const userDisplay = getCorrectDOM('current-user') as HTMLElement; const userDisplay = getCorrectDOM('current-user') as HTMLElement;
if (userDisplay) { if (userDisplay) {
userDisplay.innerHTML = ` userDisplay.innerHTML = `
<div class="current-user-info"> <div class="current-user-info">
<span class="user-avatar">${currentUser.avatar}</span> <span class="user-avatar">${currentUser.avatar}</span>
<span class="user-name">${currentUser.name}</span> <span class="user-name">${currentUser.name}</span>
</div> </div>
`; `;
}
}
// Generate an automatic response
private generateAutoReply(senderName: string): Message {
return {
id: Date.now(),
sender: senderName,
text: "OK...",
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'text' as const
};
} }
}
// Generate an automatic response
private generateAutoReply(senderName: string): Message {
return {
id: Date.now(),
sender: senderName,
text: 'OK...',
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'text' as const,
};
}
// Send a file // Send a file
private sendFile(file: File) { private sendFile(file: File) {
console.log('SendFile called with file:', file); console.log('SendFile called with file:', file);
const reader = new FileReader(); const reader = new FileReader();
reader.onloadend = () => { reader.onloadend = () => {
const fileData = reader.result; const fileData = reader.result;
const fileName = file.name; const fileName = file.name;
console.log('File loaded:', fileName); console.log('File loaded:', fileName);
if (this.selectedMemberId) { if (this.selectedMemberId) {
messageStore.addMessage(this.selectedMemberId, { messageStore.addMessage(this.selectedMemberId, {
id: Date.now(), id: Date.now(),
sender: "4NK", sender: '4NK',
fileName: fileName, fileName: fileName,
fileData: fileData, fileData: fileData,
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'file' type: 'file',
});
console.log('Message added to store');
this.messagesMock = messageStore.getMessages();
this.loadMemberChat(this.selectedMemberId);
}
};
reader.readAsDataURL(file);
}
private initializeEventListeners() {
document.addEventListener('DOMContentLoaded', (): void => {
}); });
console.log('Message added to store');
this.messagesMock = messageStore.getMessages();
this.loadMemberChat(this.selectedMemberId);
}
};
reader.readAsDataURL(file);
}
private initializeEventListeners() {
document.addEventListener('DOMContentLoaded', (): void => {});
// Gestionnaire d'événements pour le chat // Gestionnaire d'événements pour le chat
const sendBtn = this.shadowRoot?.querySelector('#send-button'); const sendBtn = this.shadowRoot?.querySelector('#send-button');
if (sendBtn) { if (sendBtn) {
sendBtn.addEventListener('click', this.sendMessage.bind(this)); sendBtn.addEventListener('click', this.sendMessage.bind(this));
} }
const messageInput = this.shadowRoot?.querySelector('#message-input'); const messageInput = this.shadowRoot?.querySelector('#message-input');
if (messageInput) { if (messageInput) {
messageInput.addEventListener('keypress', (event: Event) => { messageInput.addEventListener('keypress', (event: Event) => {
if ((event as KeyboardEvent).key === 'Enter') { if ((event as KeyboardEvent).key === 'Enter') {
event.preventDefault(); event.preventDefault();
this.sendMessage(); this.sendMessage();
}
});
}
// Gestionnaire pour l'envoi de fichiers
const fileInput = this.shadowRoot?.querySelector('#file-input');
if (fileInput) {
fileInput.addEventListener('change', (event: Event) => {
const file = (event.target as HTMLInputElement).files?.[0];
if (file) {
this.sendFile(file);
}
});
} }
});
} }
connectedCallback() { // Gestionnaire pour l'envoi de fichiers
if (this.shadowRoot) { const fileInput = this.shadowRoot?.querySelector('#file-input');
this.shadowRoot.innerHTML = ` if (fileInput) {
fileInput.addEventListener('change', (event: Event) => {
const file = (event.target as HTMLInputElement).files?.[0];
if (file) {
this.sendFile(file);
}
});
}
}
connectedCallback() {
if (this.shadowRoot) {
this.shadowRoot.innerHTML = `
<div class="container"> <div class="container">
<div class="group-list"> <div class="group-list">
<ul id="group-list"></ul> <ul id="group-list"></ul>
@ -518,19 +510,18 @@ class ChatElement extends HTMLElement {
</div> </div>
</div> </div>
`; `;
}
this.messagesMock = messageStore.getMessages();
if (this.messagesMock.length === 0) {
messageStore.setMessages(initialMessagesMock);
this.messagesMock = messageStore.getMessages();
}
this.updateCurrentUserDisplay();
this.initializeEventListeners();
this.loadGroupList();
} }
this.messagesMock = messageStore.getMessages();
if (this.messagesMock.length === 0) {
messageStore.setMessages(initialMessagesMock);
this.messagesMock = messageStore.getMessages();
}
this.updateCurrentUserDisplay();
this.initializeEventListeners();
this.loadGroupList();
}
} }
customElements.define('chat-element', ChatElement); customElements.define('chat-element', ChatElement);
export { ChatElement }; export { ChatElement };

57
src/pages/home/home-component.ts
View File

@ -1,37 +1,38 @@
import loginHtml from './home.html?raw' import loginHtml from './home.html?raw';
import loginScript from './home.ts?raw' import loginScript from './home.ts?raw';
import loginCss from '../../4nk.css?raw' import loginCss from '../../4nk.css?raw';
import { initHomePage } from './home'; import { initHomePage } from './home';
export class LoginComponent extends HTMLElement { export class LoginComponent extends HTMLElement {
_callback: any; _callback: any;
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACK LOGIN PAGE') console.log('CALLBACK LOGIN PAGE');
this.render(); this.render();
setTimeout(() => { setTimeout(() => {
initHomePage(); initHomePage();
}, 500); }, 500);
} }
set callback(fn) { set callback(fn) {
if (typeof fn === 'function') { if (typeof fn === 'function') {
this._callback = fn; this._callback = fn;
} else { } else {
console.error('Callback is not a function'); console.error('Callback is not a function');
}
} }
}
get callback() { get callback() {
return this._callback; return this._callback;
} }
render() { render() {
if(this.shadowRoot) this.shadowRoot.innerHTML = ` if (this.shadowRoot)
this.shadowRoot.innerHTML = `
<style> <style>
${loginCss} ${loginCss}
</style>${loginHtml} </style>${loginHtml}
@ -40,9 +41,9 @@ export class LoginComponent extends HTMLElement {
</scipt> </scipt>
`; `;
} }
} }
if (!customElements.get('login-4nk-component')) { if (!customElements.get('login-4nk-component')) {
customElements.define('login-4nk-component', LoginComponent); customElements.define('login-4nk-component', LoginComponent);
} }

12
src/pages/home/home.ts
View File

@ -4,10 +4,10 @@ import { addSubscription } from '../../utils/subscription.utils';
import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils'; import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils';
import { getCorrectDOM } from '../../utils/html.utils'; import { getCorrectDOM } from '../../utils/html.utils';
import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component'; import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component';
export {QrScannerComponent} export { QrScannerComponent };
export async function initHomePage(): Promise<void> { export async function initHomePage(): Promise<void> {
console.log('INIT-HOME'); console.log('INIT-HOME');
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
container.querySelectorAll('.tab').forEach((tab) => { container.querySelectorAll('.tab').forEach((tab) => {
addSubscription(tab, 'click', () => { addSubscription(tab, 'click', () => {
container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active')); container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
@ -34,17 +34,15 @@ export async function openModal(myAddress: string, receiverAddress: string) {
// service.setNotification() // service.setNotification()
function scanDevice() { function scanDevice() {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const scannerImg = container.querySelector('#scanner') as HTMLElement; const scannerImg = container.querySelector('#scanner') as HTMLElement;
if (scannerImg) scannerImg.style.display = 'none'; if (scannerImg) scannerImg.style.display = 'none';
const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement; const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
if (scannerQrCode) scannerQrCode.style.display = 'block'; if (scannerQrCode) scannerQrCode.style.display = 'block';
const scanButton = container?.querySelector('#scan-btn') as HTMLElement; const scanButton = container?.querySelector('#scan-btn') as HTMLElement;
if (scanButton) scanButton.style.display = 'none'; if (scanButton) scanButton.style.display = 'none';
const reader = container?.querySelector('#qr-reader') const reader = container?.querySelector('#qr-reader');
if(reader) reader.innerHTML = '<qr-scanner></qr-scanner>' if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
} }
(window as any).scanDevice = scanDevice; (window as any).scanDevice = scanDevice;

65
src/pages/process-element/process-component.ts
View File

@ -1,40 +1,41 @@
import processHtml from './process-element.html?raw' import processHtml from './process-element.html?raw';
import processScript from './process-element.ts?raw' import processScript from './process-element.ts?raw';
import processCss from '../../4nk.css?raw' import processCss from '../../4nk.css?raw';
import { initProcessElement } from './process-element'; import { initProcessElement } from './process-element';
export class ProcessListComponent extends HTMLElement { export class ProcessListComponent extends HTMLElement {
_callback: any; _callback: any;
id: string = ''; id: string = '';
zone: string = ''; zone: string = '';
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
}
connectedCallback() {
console.log('CALLBACK PROCESS LIST PAGE');
this.render();
setTimeout(() => {
initProcessElement(this.id, this.zone);
}, 500);
}
set callback(fn) {
if (typeof fn === 'function') {
this._callback = fn;
} else {
console.error('Callback is not a function');
} }
}
connectedCallback() { get callback() {
console.log('CALLBACK PROCESS LIST PAGE') return this._callback;
this.render(); }
setTimeout(() => {
initProcessElement(this.id, this.zone);
}, 500);
}
set callback(fn) { render() {
if (typeof fn === 'function') { if (this.shadowRoot)
this._callback = fn; this.shadowRoot.innerHTML = `
} else {
console.error('Callback is not a function');
}
}
get callback() {
return this._callback;
}
render() {
if(this.shadowRoot) this.shadowRoot.innerHTML = `
<style> <style>
${processCss} ${processCss}
</style>${processHtml} </style>${processHtml}
@ -42,9 +43,9 @@ export class ProcessListComponent extends HTMLElement {
${processScript} ${processScript}
</scipt> </scipt>
`; `;
} }
} }
if (!customElements.get('process-4nk-component')) { if (!customElements.get('process-4nk-component')) {
customElements.define('process-4nk-component', ProcessListComponent); customElements.define('process-4nk-component', ProcessListComponent);
} }

57
src/pages/process/process-list-component.ts
View File

@ -1,37 +1,38 @@
import processHtml from './process.html?raw' import processHtml from './process.html?raw';
import processScript from './process.ts?raw' import processScript from './process.ts?raw';
import processCss from '../../4nk.css?raw' import processCss from '../../4nk.css?raw';
import { init } from './process'; import { init } from './process';
export class ProcessListComponent extends HTMLElement { export class ProcessListComponent extends HTMLElement {
_callback: any; _callback: any;
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACK PROCESS LIST PAGE') console.log('CALLBACK PROCESS LIST PAGE');
this.render(); this.render();
setTimeout(() => { setTimeout(() => {
init(); init();
}, 500); }, 500);
} }
set callback(fn) { set callback(fn) {
if (typeof fn === 'function') { if (typeof fn === 'function') {
this._callback = fn; this._callback = fn;
} else { } else {
console.error('Callback is not a function'); console.error('Callback is not a function');
}
} }
}
get callback() { get callback() {
return this._callback; return this._callback;
} }
render() { render() {
if(this.shadowRoot) this.shadowRoot.innerHTML = ` if (this.shadowRoot)
this.shadowRoot.innerHTML = `
<style> <style>
${processCss} ${processCss}
</style>${processHtml} </style>${processHtml}
@ -40,9 +41,9 @@ export class ProcessListComponent extends HTMLElement {
</scipt> </scipt>
`; `;
} }
} }
if (!customElements.get('process-list-4nk-component')) { if (!customElements.get('process-list-4nk-component')) {
customElements.define('process-list-4nk-component', ProcessListComponent); customElements.define('process-list-4nk-component', ProcessListComponent);
} }

16
src/pages/process/process.ts
View File

@ -4,7 +4,7 @@ import { getCorrectDOM } from '~/utils/html.utils';
// Initialize function, create initial tokens with itens that are already selected by the user // Initialize function, create initial tokens with itens that are already selected by the user
export async function init() { export async function init() {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const element = container.querySelector('select') as HTMLSelectElement; const element = container.querySelector('select') as HTMLSelectElement;
// Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside // Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
@ -118,7 +118,7 @@ function openOptions(e: Event) {
// Function that create a token inside of a wrapper with the given value // Function that create a token inside of a wrapper with the given value
function createToken(wrapper: HTMLElement, value: any) { function createToken(wrapper: HTMLElement, value: any) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const search = wrapper.querySelector('.search-container'); const search = wrapper.querySelector('.search-container');
const inputInderline = container.querySelector('.selected-processes'); const inputInderline = container.querySelector('.selected-processes');
// Create token wrapper // Create token wrapper
@ -299,7 +299,7 @@ function removeToken(e: Event) {
// Remove token attribute // Remove token attribute
(target.parentNode as any)?.remove(); (target.parentNode as any)?.remove();
dropdown?.classList.remove('active'); dropdown?.classList.remove('active');
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const process = container.querySelector('#' + target.dataset.option); const process = container.querySelector('#' + target.dataset.option);
process?.remove(); process?.remove();
@ -355,7 +355,7 @@ addSubscription(document, 'click', () => {
}); });
async function showSelectedProcess(elem: MouseEvent) { async function showSelectedProcess(elem: MouseEvent) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
if (elem) { if (elem) {
const cardContent = container.querySelector('.process-card-content'); const cardContent = container.querySelector('.process-card-content');
@ -387,7 +387,7 @@ async function showSelectedProcess(elem: MouseEvent) {
} }
function select(event: Event) { function select(event: Event) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
const oldSelectedProcess = container.querySelector('.selected-process-zone'); const oldSelectedProcess = container.querySelector('.selected-process-zone');
oldSelectedProcess?.classList.remove('selected-process-zone'); oldSelectedProcess?.classList.remove('selected-process-zone');
@ -399,7 +399,7 @@ function select(event: Event) {
} }
function goToProcessPage() { function goToProcessPage() {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const target = container.querySelector('.selected-process-zone'); const target = container.querySelector('.selected-process-zone');
console.log('🚀 ~ goToProcessPage ~ event:', target); console.log('🚀 ~ goToProcessPage ~ event:', target);
@ -426,8 +426,8 @@ async function getProcesses(): Promise<any[]> {
const res = Object.entries(processes).map(([key, value]) => ({ const res = Object.entries(processes).map(([key, value]) => ({
key, key,
value value,
})) }));
return res; return res;
} }

86
src/pages/signature/signature-component.ts
View File

@ -1,59 +1,59 @@
import { SignatureElement } from './signature'; import { SignatureElement } from './signature';
import signatureCss from '../../../public/style/signature.css?raw' import signatureCss from '../../../public/style/signature.css?raw';
import Services from '../../services/service.js' import Services from '../../services/service.js';
class SignatureComponent extends HTMLElement { class SignatureComponent extends HTMLElement {
_callback: any _callback: any;
signatureElement: SignatureElement | null = null; signatureElement: SignatureElement | null = null;
constructor() { constructor() {
super(); super();
console.log('INIT') console.log('INIT');
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null; this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null;
}
connectedCallback() {
console.log('CALLBACKs');
this.render();
this.fetchData();
if (!customElements.get('signature-element')) {
customElements.define('signature-element', SignatureElement);
} }
}
connectedCallback() { async fetchData() {
console.log('CALLBACKs') if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
this.render(); const data = await (window as any).myService?.getProcesses();
this.fetchData(); } else {
const service = await Services.getInstance();
if (!customElements.get('signature-element')) { const data = await service.getProcesses();
customElements.define('signature-element', SignatureElement);
}
} }
}
async fetchData() { set callback(fn) {
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) { if (typeof fn === 'function') {
const data = await (window as any).myService?.getProcesses(); this._callback = fn;
} else { } else {
const service = await Services.getInstance() console.error('Callback is not a function');
const data = await service.getProcesses();
}
} }
}
set callback(fn) { get callback() {
if (typeof fn === 'function') { return this._callback;
this._callback = fn; }
} else {
console.error('Callback is not a function');
}
}
get callback() { render() {
return this._callback; if (this.shadowRoot) {
} // Créer l'élément signature-element
const signatureElement = document.createElement('signature-element');
render() { this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`;
if(this.shadowRoot) { this.shadowRoot.appendChild(signatureElement);
// Créer l'élément signature-element
const signatureElement = document.createElement('signature-element');
this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`;
this.shadowRoot.appendChild(signatureElement);
}
} }
}
} }
export { SignatureComponent } export { SignatureComponent };
customElements.define('signature-component', SignatureComponent); customElements.define('signature-component', SignatureComponent);

71
src/pages/signature/signature.html
View File

@ -1,53 +1,46 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signatures</title> <title>Signatures</title>
<link rel="stylesheet" href="../../../public/style/signature.css"> <link rel="stylesheet" href="../../../public/style/signature.css" />
</head> </head>
<body>
<body>
<!-- Main content--> <!-- Main content-->
<div class="container"> <div class="container">
<!-- List of groups -->
<div class="group-list">
<ul id="group-list"></ul>
</div>
<!-- List of groups --> <!-- Chat area -->
<div class="group-list"> <div class="chat-area">
<ul id="group-list"> <div class="chat-header" id="chat-header">
</ul> <!-- Chat title -->
</div>
<div class="messages" id="messages">
<!-- Messages -->
</div> </div>
<!-- Chat area --> <!-- Input area -->
<div class="chat-area"> <div class="input-area">
<div class="chat-header" id="chat-header"> <label for="file-input" class="attachment-icon">
<!-- Chat title --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
</div> <path
<div class="messages" id="messages"> 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"
<!-- Messages --> />
</div> </svg>
</label>
<input type="file" id="file-input" style="display: none" />
<!-- Input area --> <textarea id="message-input" rows="3" placeholder="Type your message..."></textarea>
<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>
<button id="send-button">Send</button>
</div>
</div> </div>
</div>
</div> </div>
<script type="module" src="./signature.ts?ts"></script> <script type="module" src="./signature.ts?ts"></script>
</body>
</body>
</html> </html>

2433
src/pages/signature/signature.ts
View File

File diff suppressed because it is too large Load Diff

131
src/router.ts
View File

@ -6,7 +6,7 @@ import { cleanSubscriptions } from './utils/subscription.utils';
import { LoginComponent } from './pages/home/home-component'; import { LoginComponent } from './pages/home/home-component';
import { prepareAndSendPairingTx } from './utils/sp-address.utils'; import { prepareAndSendPairingTx } from './utils/sp-address.utils';
import ModalService from './services/modal.service'; import ModalService from './services/modal.service';
export {Services}; export { Services };
const routes: { [key: string]: string } = { const routes: { [key: string]: string } = {
home: '/src/pages/home/home.html', home: '/src/pages/home/home.html',
process: '/src/pages/process/process.html', process: '/src/pages/process/process.html',
@ -20,7 +20,7 @@ export let currentRoute = '';
export async function navigate(path: string) { export async function navigate(path: string) {
cleanSubscriptions(); cleanSubscriptions();
cleanPage() cleanPage();
path = path.replace(/^\//, ''); path = path.replace(/^\//, '');
if (path.includes('/')) { if (path.includes('/')) {
const parsedPath = path.split('/')[0]; const parsedPath = path.split('/')[0];
@ -42,81 +42,80 @@ async function handleLocation(path: string) {
const content = document.getElementById('containerId'); const content = document.getElementById('containerId');
if (content) { if (content) {
if (path === 'home') {
if(path === 'home' ) { const login = LoginComponent;
const login = LoginComponent
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
const accountComponent = document.createElement('login-4nk-component'); const accountComponent = document.createElement('login-4nk-component');
accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;') accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;');
if(container) container.appendChild(accountComponent) if (container) container.appendChild(accountComponent);
} else if(path !== 'process') { } else if (path !== 'process') {
const html = await fetch(routeHtml).then((data) => data.text()); const html = await fetch(routeHtml).then((data) => data.text());
content.innerHTML = html; content.innerHTML = html;
} }
await new Promise(requestAnimationFrame); await new Promise(requestAnimationFrame);
injectHeader(); injectHeader();
// const modalService = await ModalService.getInstance() // const modalService = await ModalService.getInstance()
// modalService.injectValidationModal() // modalService.injectValidationModal()
switch (path) { switch (path) {
case 'process': case 'process':
// const { init } = await import('./pages/process/process'); // const { init } = await import('./pages/process/process');
const { ProcessListComponent } = await import('./pages/process/process-list-component'); const { ProcessListComponent } = await import('./pages/process/process-list-component');
const container2 = document.querySelector('#containerId'); const container2 = document.querySelector('#containerId');
const accountComponent = document.createElement('process-list-4nk-component'); const accountComponent = document.createElement('process-list-4nk-component');
if (!customElements.get('process-list-4nk-component')) { if (!customElements.get('process-list-4nk-component')) {
customElements.define('process-list-4nk-component', ProcessListComponent); customElements.define('process-list-4nk-component', ProcessListComponent);
}
accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;')
if(container2) container2.appendChild(accountComponent)
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 { AccountComponent } = await import('./pages/account/account-component');
const accountContainer = document.querySelector('.parameter-list');
if (accountContainer) {
if (!customElements.get('account-component')) {
customElements.define('account-component', AccountComponent);
} }
const accountComponent = document.createElement('account-component'); accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;');
accountContainer.appendChild(accountComponent); if (container2) container2.appendChild(accountComponent);
} break;
break;
case 'chat': case 'process-element':
const { ChatComponent } = await import('./pages/chat/chat-component'); if (parsedPath && parsedPath.length) {
const chatContainer = document.querySelector('.group-list'); const { initProcessElement } = await import('./pages/process-element/process-element');
if (chatContainer) { const parseProcess = parsedPath[1].split('_');
if (!customElements.get('chat-component')) { initProcessElement(parseProcess[0], parseProcess[1]);
customElements.define('chat-component', ChatComponent);
} }
const chatComponent = document.createElement('chat-component'); break;
chatContainer.appendChild(chatComponent);
}
break;
case 'signature': case 'account':
const { SignatureComponent } = await import('./pages/signature/signature-component'); const { AccountComponent } = await import('./pages/account/account-component');
const container = document.querySelector('.group-list'); const accountContainer = document.querySelector('.parameter-list');
if (container) { if (accountContainer) {
if (!customElements.get('signature-component')) { if (!customElements.get('account-component')) {
customElements.define('signature-component', SignatureComponent); customElements.define('account-component', AccountComponent);
}
const accountComponent = document.createElement('account-component');
accountContainer.appendChild(accountComponent);
} }
const signatureComponent = document.createElement('signature-component'); break;
container.appendChild(signatureComponent);
} case 'chat':
break; const { ChatComponent } = await import('./pages/chat/chat-component');
const chatContainer = document.querySelector('.group-list');
if (chatContainer) {
if (!customElements.get('chat-component')) {
customElements.define('chat-component', ChatComponent);
}
const chatComponent = document.createElement('chat-component');
chatContainer.appendChild(chatComponent);
}
break;
case 'signature':
const { SignatureComponent } = await import('./pages/signature/signature-component');
const container = document.querySelector('.group-list');
if (container) {
if (!customElements.get('signature-component')) {
customElements.define('signature-component', SignatureComponent);
}
const signatureComponent = document.createElement('signature-component');
container.appendChild(signatureComponent);
}
break;
} }
} }
} }
@ -157,7 +156,7 @@ export async function init(): Promise<void> {
setTimeout(async () => { setTimeout(async () => {
try { try {
// check if we have a shared secret with that address // check if we have a shared secret with that address
await prepareAndSendPairingTx(pairingAddress) await prepareAndSendPairingTx(pairingAddress);
} catch (e) { } catch (e) {
console.error('Failed to pair:', e); console.error('Failed to pair:', e);
} }
@ -174,7 +173,7 @@ export async function init(): Promise<void> {
async function cleanPage() { async function cleanPage() {
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
if(container) container.innerHTML = '' if (container) container.innerHTML = '';
} }
async function injectHeader() { async function injectHeader() {

24
src/service-workers/cache.worker.js
View File

@ -1,20 +1,8 @@
const addResourcesToCache = async (resources) => { const addResourcesToCache = async (resources) => {
const cache = await caches.open("v1"); const cache = await caches.open('v1');
await cache.addAll(resources); await cache.addAll(resources);
}; };
self.addEventListener("install", (event) => { self.addEventListener('install', (event) => {
event.waitUntil( event.waitUntil(addResourcesToCache(['/', '/index.html', '/style.css', '/app.js', '/image-list.js', '/star-wars-logo.jpg', '/gallery/bountyHunters.jpg', '/gallery/myLittleVader.jpg', '/gallery/snowTroopers.jpg']));
addResourcesToCache([ });
"/",
"/index.html",
"/style.css",
"/app.js",
"/image-list.js",
"/star-wars-logo.jpg",
"/gallery/bountyHunters.jpg",
"/gallery/myLittleVader.jpg",
"/gallery/snowTroopers.jpg",
]),
);
});

38
src/service-workers/database.worker.js
View File

@ -9,21 +9,21 @@ self.addEventListener('activate', (event) => {
// Event listener for messages from clients // Event listener for messages from clients
self.addEventListener('message', async (event) => { self.addEventListener('message', async (event) => {
const data = event.data; const data = event.data;
if(data.type === 'START') { if (data.type === 'START') {
const fetchNotifications = async () => { const fetchNotifications = async () => {
const itemsWithFlag = await getAllItemsWithFlag(); const itemsWithFlag = await getAllItemsWithFlag();
// Process items with the specific flag // Process items with the specific flag
itemsWithFlag?.forEach(item => { itemsWithFlag?.forEach((item) => {
console.log(item); // Do something with each flagged item console.log(item); // Do something with each flagged item
}); });
event.ports[0].postMessage({ event.ports[0].postMessage({
type: "NOTIFICATIONS", type: 'NOTIFICATIONS',
data: itemsWithFlag data: itemsWithFlag,
}); });
} };
fetchNotifications() fetchNotifications();
setInterval(fetchNotifications, 2 * 60 * 1000); setInterval(fetchNotifications, 2 * 60 * 1000);
} }
@ -100,13 +100,13 @@ async function getAllItemsWithFlag() {
const request = store.getAll(); const request = store.getAll();
request.onsuccess = (event) => { request.onsuccess = (event) => {
const allItems = event.target.result; const allItems = event.target.result;
const itemsWithFlag = allItems.filter(item => !item.need_validation); const itemsWithFlag = allItems.filter((item) => item.need_validation);
const processMap = {}; const processMap = {};
for (const diff of itemsWithFlag) { for (const diff of itemsWithFlag) {
const currentProcess = allProcesses.find(item => { const currentProcess = allProcesses.find((item) => {
return item.states.some(state => state.merkle_root === diff.new_state_merkle_root); return item.states.some((state) => state.merkle_root === diff.new_state_merkle_root);
}); });
if (currentProcess) { if (currentProcess) {
@ -116,18 +116,25 @@ async function getAllItemsWithFlag() {
processMap[processKey] = { processMap[processKey] = {
process: currentProcess.states, process: currentProcess.states,
processId: currentProcess.key, processId: currentProcess.key,
diffs: [] diffs: [],
}; };
} }
processMap[processKey].diffs.push(diff); processMap[processKey].diffs.push(diff);
} }
} }
const results = Object.values(processMap).map(entry => { const results = Object.values(processMap).map((entry) => {
const diffs = []
for(const state of entry.process) {
const filteredDiff = entry.diffs.filter(diff => diff.new_state_merkle_root === state.merkle_root);
if(filteredDiff && filteredDiff.length) {
diffs.push(filteredDiff)
}
}
return { return {
process: entry.process, process: entry.process,
processId: entry.processId, processId: entry.processId,
diffs: entry.diffs diffs: diffs,
}; };
}); });
@ -139,4 +146,3 @@ async function getAllItemsWithFlag() {
}; };
}); });
} }

21
src/services/database.service.ts
View File

@ -1,4 +1,4 @@
import Services from "./service"; import Services from './service';
class Database { class Database {
private static instance: Database; private static instance: Database;
@ -31,9 +31,9 @@ class Database {
}, },
AnkDiff: { AnkDiff: {
name: 'diffs', name: 'diffs',
options: { key: 'new_state_merkle_root'}, options: { key: 'new_state_merkle_root' },
indices: [] indices: [],
} },
}; };
// Private constructor to prevent direct instantiation from outside // Private constructor to prevent direct instantiation from outside
@ -144,11 +144,11 @@ class Database {
} }
private handleAddObjectResponse = async (event: MessageEvent) => { private handleAddObjectResponse = async (event: MessageEvent) => {
const data = event.data const data = event.data;
console.log('Received response from service worker (ADD_OBJECT):', data); console.log('Received response from service worker (ADD_OBJECT):', data);
if(data.type === 'NOTIFICATIONS') { if (data.type === 'NOTIFICATIONS') {
const service = await Services.getInstance() const service = await Services.getInstance();
service.setNotifications(data.data) service.setNotifications(data.data);
} }
}; };
@ -201,7 +201,7 @@ class Database {
getRequest.onsuccess = () => resolve(getRequest.result); getRequest.onsuccess = () => resolve(getRequest.result);
getRequest.onerror = () => reject(getRequest.error); getRequest.onerror = () => reject(getRequest.error);
}); });
return result return result;
} }
public async dumpStore(storeName: string): Promise<Record<string, any>> { public async dumpStore(storeName: string): Promise<Record<string, any>> {
@ -227,9 +227,8 @@ class Database {
// Combine keys and values into an object // Combine keys and values into an object
const result: Record<string, any> = Object.fromEntries(keys.map((key, index) => [key, values[index]])); const result: Record<string, any> = Object.fromEntries(keys.map((key, index) => [key, values[index]]));
return result; return result;
} catch (error) { } catch (error) {
console.error("Error fetching data from IndexedDB:", error); console.error('Error fetching data from IndexedDB:', error);
throw error; throw error;
} }
} }

28
src/services/modal.service.ts
View File

@ -2,9 +2,11 @@ import modalHtml from '../components/login-modal/login-modal.html?raw';
import modalScript from '../components/login-modal/login-modal.js?raw'; import modalScript from '../components/login-modal/login-modal.js?raw';
import validationModalStyle from '../components/validation-modal/validation-modal.css?raw'; import validationModalStyle from '../components/validation-modal/validation-modal.css?raw';
import Services from './service'; import Services from './service';
import { navigate } from '../router'; import { init, navigate } from '../router';
import { addressToEmoji } from '../utils/sp-address.utils'; import { addressToEmoji } from '../utils/sp-address.utils';
import { RoleDefinition } from 'pkg/sdk_client'; import { RoleDefinition } from 'pkg/sdk_client';
import { initValidationModal } from '~/components/validation-modal/validation-modal';
import { interpolate } from '~/utils/html.utils';
export default class ModalService { export default class ModalService {
private static instance: ModalService; private static instance: ModalService;
@ -56,28 +58,30 @@ export default class ModalService {
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
if (container) { if (container) {
let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text()); let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text());
html = interpolate(html, {processId: processDiff.processId})
container.innerHTML += html; container.innerHTML += html;
// Dynamically load the header JS // Dynamically load the header JS
const script = document.createElement('script'); const script = document.createElement('script');
script.id = 'validation-modal-script' script.id = 'validation-modal-script';
script.src = '/src/components/validation-modal/validation-modal.ts'; script.src = '/src/components/validation-modal/validation-modal.ts';
script.type = 'module'; script.type = 'module';
document.head.appendChild(script); document.head.appendChild(script);
const css = document.createElement('style'); const css = document.createElement('style');
css.id = 'validation-modal-css' css.id = 'validation-modal-css';
css.innerText = validationModalStyle; css.innerText = validationModalStyle;
document.head.appendChild(css); document.head.appendChild(css);
initValidationModal(processDiff)
} }
} }
async closeValidationModal() { async closeValidationModal() {
const script = document.querySelector('#validation-modal-script') const script = document.querySelector('#validation-modal-script');
const css = document.querySelector('#validation-modal-css') const css = document.querySelector('#validation-modal-css');
const component = document.querySelector('#validation-modal') const component = document.querySelector('#validation-modal');
script?.remove() script?.remove();
css?.remove() css?.remove();
component?.remove() component?.remove();
} }
// this is kind of too specific for pairing though // this is kind of too specific for pairing though
@ -88,7 +92,7 @@ export default class ModalService {
const owner = roleDefinition['owner']; const owner = roleDefinition['owner'];
members = owner.members; members = owner.members;
} else { } else {
throw new Error('No \"owner\" role'); throw new Error('No "owner" role');
} }
// pairing specifics // pairing specifics
@ -145,7 +149,7 @@ export default class ModalService {
const createPrdUpdateReturn = service.createPrdUpdate(this.currentPcdCommitment); const createPrdUpdateReturn = service.createPrdUpdate(this.currentPcdCommitment);
await service.handleApiReturn(createPrdUpdateReturn); await service.handleApiReturn(createPrdUpdateReturn);
} catch (e) { } catch (e) {
throw e throw e;
} }
} else { } else {
throw new Error('No currentPcdCommitment'); throw new Error('No currentPcdCommitment');
@ -156,7 +160,7 @@ export default class ModalService {
const approveChangeReturn = service.approveChange(this.currentPcdCommitment!); const approveChangeReturn = service.approveChange(this.currentPcdCommitment!);
await service.handleApiReturn(approveChangeReturn); await service.handleApiReturn(approveChangeReturn);
} catch (e) { } catch (e) {
throw e throw e;
} }
try { try {

24
src/services/service.ts
View File

@ -11,6 +11,8 @@ import { storeData, retrieveData } from './storage.service';
export const U32_MAX = 4294967295; export const U32_MAX = 4294967295;
const storageUrl = `http://localhost:8080`; const storageUrl = `http://localhost:8080`;
const RELAY_ADDRESS = 'sprt1qqdg4x69xdyhxpz4weuel0985qyswa0x9ycl4q6xc0fngf78jtj27gqj5vff4fvlt3fydx4g7vv0mh7vqv8jncgusp6n2zv860nufdzkyy59pqrdr';
const wsurl = `https://demo.4nkweb.com/ws/`;
export default class Services { export default class Services {
private static initializing: Promise<Services> | null = null; private static initializing: Promise<Services> | null = null;
@ -95,7 +97,7 @@ export default class Services {
throw new Error('Trying to connect to empty members list'); throw new Error('Trying to connect to empty members list');
} }
const members_str = members.map(member => JSON.stringify(member)); const members_str = members.map((member) => JSON.stringify(member));
const waitForAmount = async (): Promise<BigInt> => { const waitForAmount = async (): Promise<BigInt> => {
let attempts = 3; let attempts = 3;
@ -186,7 +188,7 @@ export default class Services {
try { try {
return this.sdkClient.create_response_prd(this.currentProcess, pcdMerkleRoot); return this.sdkClient.create_response_prd(this.currentProcess, pcdMerkleRoot);
} catch (e) { } catch (e) {
throw e throw e;
} }
} }
@ -344,7 +346,7 @@ export default class Services {
try { try {
await this.openConfirmationModal(); await this.openConfirmationModal();
} catch (e) { } catch (e) {
throw new Error(`Error while evaluating pending updates for process ${this.currentProcess}: ${e}`) throw new Error(`Error while evaluating pending updates for process ${this.currentProcess}: ${e}`);
} }
} }
@ -479,7 +481,7 @@ export default class Services {
key: commitedIn, key: commitedIn,
}); });
} catch (e) { } catch (e) {
throw new Error(`Failed to save process: ${e}`) throw new Error(`Failed to save process: ${e}`);
} }
// We check how many copies in storage nodes // We check how many copies in storage nodes
@ -502,7 +504,7 @@ export default class Services {
public async saveDiffs(diffs: UserDiff[]) { public async saveDiffs(diffs: UserDiff[]) {
const db = await Database.getInstance(); const db = await Database.getInstance();
try { try {
for(const diff of diffs) { for (const diff of diffs) {
await db.addObject({ await db.addObject({
storeName: 'diffs', storeName: 'diffs',
object: diff, object: diff,
@ -510,7 +512,7 @@ export default class Services {
}); });
} }
} catch (e) { } catch (e) {
throw new Error(`Failed to save process: ${e}`) throw new Error(`Failed to save process: ${e}`);
} }
} }
@ -540,7 +542,6 @@ export default class Services {
} catch (e) { } catch (e) {
throw e; throw e;
} }
} }
public async restoreSecrets() { public async restoreSecrets() {
@ -549,14 +550,13 @@ export default class Services {
const sharedSecrets: Record<string, string> = await db.dumpStore('shared_secrets'); const sharedSecrets: Record<string, string> = await db.dumpStore('shared_secrets');
const unconfirmedSecrets = await db.dumpStore('unconfirmed_secrets'); const unconfirmedSecrets = await db.dumpStore('unconfirmed_secrets');
const secretsStore = { const secretsStore = {
'shared_secrets': sharedSecrets, shared_secrets: sharedSecrets,
'unconfirmed_secrets': Object.values(unconfirmedSecrets), unconfirmed_secrets: Object.values(unconfirmedSecrets),
}; };
this.sdkClient.set_shared_secrets(JSON.stringify(secretsStore)); this.sdkClient.set_shared_secrets(JSON.stringify(secretsStore));
} catch (e) { } catch (e) {
throw e; throw e;
} }
} }
getNotifications(): any[] | null { getNotifications(): any[] | null {
@ -583,11 +583,11 @@ export default class Services {
// path: '/notif3', // path: '/notif3',
// }, // },
// ]; // ];
return this.notifications return this.notifications;
} }
setNotifications(notifications: any[]) { setNotifications(notifications: any[]) {
this.notifications = notifications this.notifications = notifications;
} }
async importJSON(content: any): Promise<void> { async importJSON(content: any): Promise<void> {

6
src/utils/document.utils.ts
View File

@ -1,4 +1,4 @@
export function getCorrectDOM(componentTag: string): Node { export function getCorrectDOM(componentTag: string): Node {
const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node const dom = document?.querySelector(componentTag)?.shadowRoot || (document as Node);
return dom return dom;
} }

4
src/utils/html.utils.ts
View File

@ -3,6 +3,6 @@ export function interpolate(template: string, data: { [key: string]: string }) {
} }
export function getCorrectDOM(componentTag: string): Node { export function getCorrectDOM(componentTag: string): Node {
const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node const dom = document?.querySelector(componentTag)?.shadowRoot || (document as Node);
return dom return dom;
} }

74
src/utils/messageMock.ts
View File

@ -2,52 +2,52 @@ import { messagesMock as initialMessagesMock } from '../mocks/mock-signature/mes
// Store singleton for messages // Store singleton for messages
class MessageStore { class MessageStore {
private readonly STORAGE_KEY = 'chat_messages'; private readonly STORAGE_KEY = 'chat_messages';
private messages: any[] = []; private messages: any[] = [];
constructor() { constructor() {
this.messages = this.loadFromLocalStorage() || []; this.messages = this.loadFromLocalStorage() || [];
} }
private loadFromLocalStorage() { private loadFromLocalStorage() {
try { try {
const stored = localStorage.getItem(this.STORAGE_KEY); const stored = localStorage.getItem(this.STORAGE_KEY);
return stored ? JSON.parse(stored) : null; return stored ? JSON.parse(stored) : null;
} catch (error) { } catch (error) {
console.error('Error loading messages:', error); console.error('Error loading messages:', error);
return null; return null;
}
} }
}
getMessages() { getMessages() {
return this.messages; return this.messages;
} }
setMessages(messages: any[]) { setMessages(messages: any[]) {
this.messages = messages; this.messages = messages;
this.saveToLocalStorage(); this.saveToLocalStorage();
} }
private saveToLocalStorage() { private saveToLocalStorage() {
try { try {
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.messages)); localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.messages));
} catch (error) { } catch (error) {
console.error('Error saving messages:', error); console.error('Error saving messages:', error);
}
} }
}
addMessage(memberId: string | number, message: any) { addMessage(memberId: string | number, message: any) {
const memberMessages = this.messages.find(m => String(m.memberId) === String(memberId)); const memberMessages = this.messages.find((m) => String(m.memberId) === String(memberId));
if (memberMessages) { if (memberMessages) {
memberMessages.messages.push(message); memberMessages.messages.push(message);
} else { } else {
this.messages.push({ this.messages.push({
memberId: String(memberId), memberId: String(memberId),
messages: [message] messages: [message],
}); });
}
this.saveToLocalStorage();
} }
this.saveToLocalStorage();
}
} }
export const messageStore = new MessageStore(); export const messageStore = new MessageStore();

158
src/utils/notification.store.ts
View File

@ -1,96 +1,96 @@
interface INotification { interface INotification {
id: number; id: number;
title: string; title: string;
description: string; description: string;
time?: string; time?: string;
memberId?: string; memberId?: string;
} }
class NotificationStore { class NotificationStore {
private static instance: NotificationStore; private static instance: NotificationStore;
private notifications: INotification[] = []; private notifications: INotification[] = [];
private constructor() { private constructor() {
this.loadFromLocalStorage(); this.loadFromLocalStorage();
}
static getInstance(): NotificationStore {
if (!NotificationStore.instance) {
NotificationStore.instance = new NotificationStore();
}
return NotificationStore.instance;
}
addNotification(notification: INotification) {
this.notifications.push(notification);
this.saveToLocalStorage();
this.updateUI();
}
removeNotification(index: number) {
this.notifications.splice(index, 1);
this.saveToLocalStorage();
this.updateUI();
}
getNotifications(): INotification[] {
return this.notifications;
}
private saveToLocalStorage() {
localStorage.setItem('notifications', JSON.stringify(this.notifications));
}
private loadFromLocalStorage() {
const stored = localStorage.getItem('notifications');
if (stored) {
this.notifications = JSON.parse(stored);
}
}
private updateUI() {
const badge = document.querySelector('.notification-badge') as HTMLElement;
const board = document.querySelector('.notification-board') as HTMLElement;
if (badge) {
badge.textContent = this.notifications.length.toString();
badge.style.display = this.notifications.length > 0 ? 'block' : 'none';
} }
static getInstance(): NotificationStore { if (board) {
if (!NotificationStore.instance) { this.renderNotificationBoard(board);
NotificationStore.instance = new NotificationStore(); }
} }
return NotificationStore.instance;
private renderNotificationBoard(board: HTMLElement) {
board.innerHTML = '';
if (this.notifications.length === 0) {
board.innerHTML = '<div class="no-notification">No notifications available</div>';
return;
} }
addNotification(notification: INotification) { this.notifications.forEach((notif, index) => {
this.notifications.push(notification); const notifElement = document.createElement('div');
this.saveToLocalStorage(); notifElement.className = 'notification-item';
this.updateUI(); notifElement.innerHTML = `
}
removeNotification(index: number) {
this.notifications.splice(index, 1);
this.saveToLocalStorage();
this.updateUI();
}
getNotifications(): INotification[] {
return this.notifications;
}
private saveToLocalStorage() {
localStorage.setItem('notifications', JSON.stringify(this.notifications));
}
private loadFromLocalStorage() {
const stored = localStorage.getItem('notifications');
if (stored) {
this.notifications = JSON.parse(stored);
}
}
private updateUI() {
const badge = document.querySelector('.notification-badge') as HTMLElement;
const board = document.querySelector('.notification-board') as HTMLElement;
if (badge) {
badge.textContent = this.notifications.length.toString();
badge.style.display = this.notifications.length > 0 ? 'block' : 'none';
}
if (board) {
this.renderNotificationBoard(board);
}
}
private renderNotificationBoard(board: HTMLElement) {
board.innerHTML = '';
if (this.notifications.length === 0) {
board.innerHTML = '<div class="no-notification">No notifications available</div>';
return;
}
this.notifications.forEach((notif, index) => {
const notifElement = document.createElement('div');
notifElement.className = 'notification-item';
notifElement.innerHTML = `
<div>${notif.title}</div> <div>${notif.title}</div>
<div>${notif.description}</div> <div>${notif.description}</div>
${notif.time ? `<div>${notif.time}</div>` : ''} ${notif.time ? `<div>${notif.time}</div>` : ''}
`; `;
notifElement.onclick = () => { notifElement.onclick = () => {
if (notif.memberId) { if (notif.memberId) {
window.loadMemberChat(notif.memberId); window.loadMemberChat(notif.memberId);
} }
this.removeNotification(index); this.removeNotification(index);
}; };
board.appendChild(notifElement); board.appendChild(notifElement);
}); });
} }
public refreshNotifications() { public refreshNotifications() {
this.updateUI(); this.updateUI();
} }
} }
export const notificationStore = NotificationStore.getInstance(); export const notificationStore = NotificationStore.getInstance();

8
src/utils/sp-address.utils.ts
View File

@ -100,7 +100,7 @@ export async function displayEmojis(text: string) {
// Verify Other address // Verify Other address
export function initAddressInput() { export function initAddressInput() {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const addressInput = container.querySelector('#addressInput') as HTMLInputElement; const addressInput = container.querySelector('#addressInput') as HTMLInputElement;
const emojiDisplay = container.querySelector('#emoji-display-2'); const emojiDisplay = container.querySelector('#emoji-display-2');
const okButton = container.querySelector('#okButton') as HTMLButtonElement; const okButton = container.querySelector('#okButton') as HTMLButtonElement;
@ -148,13 +148,13 @@ export function initAddressInput() {
} }
async function onOkButtonClick() { async function onOkButtonClick() {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const secondDeviceAddress = (container.querySelector('#addressInput') as HTMLInputElement).value; const secondDeviceAddress = (container.querySelector('#addressInput') as HTMLInputElement).value;
try { try {
// Connect to target, if necessary // Connect to target, if necessary
await prepareAndSendPairingTx(secondDeviceAddress); await prepareAndSendPairingTx(secondDeviceAddress);
} catch (e) { } catch (e) {
console.error(`onOkButtonClick error: ${e}`); console.error(`onOkButtonClick error: ${e}`);
} }
} }
@ -184,7 +184,7 @@ export async function prepareAndSendPairingTx(secondDeviceAddress: string) {
export async function generateQRCode(spAddress: string) { export async function generateQRCode(spAddress: string) {
try { try {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const currentUrl = 'https://' + window.location.host; const currentUrl = 'https://' + window.location.host;
const url = await QRCode.toDataURL(currentUrl + '?sp_address=' + spAddress); const url = await QRCode.toDataURL(currentUrl + '?sp_address=' + spAddress);
const qrCode = container?.querySelector('.qr-code img'); const qrCode = container?.querySelector('.qr-code img');