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

chore: remove unused views (chat/process/signature), update router to home/account only; docs(USAGE,INDEX) updated; fix build by dropping signature/chat refs
Some checks failed
CI/CD Pipeline / test (push) Failing after 19s
Details
CI/CD Pipeline / security (push) Has been skipped
Details
CI/CD Pipeline / integration-test (push) Has been skipped
Details

Browse Source
This commit is contained in:
Your Name 2025-08-26 12:31:16 +02:00
parent d35406b9e1
commit c6a44757b4
22 changed files with 64 additions and 4427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip Normal file
View File

Binary file not shown.

4
docs/INDEX.md
View File

@ -19,10 +19,8 @@ Description fonctionnelle complète (parcours, règles de gestion, contraintes).
Guide complet pour utiliser l'interface utilisateur ihm_client au quotidien. Guide complet pour utiliser l'interface utilisateur ihm_client au quotidien.
- **Démarrage du serveur de développement** - **Démarrage du serveur de développement**
- **Utilisation de l'interface utilisateur** - **Utilisation de l'interface utilisateur**
- **Gestion des profils utilisateurs** - **Navigation Accueil et Compte**
- **Opérations de pairing et wallet** - **Opérations de pairing et wallet**
- **Gestion des processus et documents**
- **Système de chat et notifications**
- **Tests et validation** - **Tests et validation**
### ⚙️ [Guide de Configuration](CONFIGURATION.md) ### ⚙️ [Guide de Configuration](CONFIGURATION.md)

6
docs/USAGE.md
View File

@ -24,12 +24,8 @@ npm run dev
### Navigation Principale ### Navigation Principale
- **🏠 Accueil** - Vue d'ensemble et statistiques - **🏠 Accueil** - Vue d'ensemble et navigation
- **👤 Compte** - Gestion du profil utilisateur - **👤 Compte** - Gestion du profil utilisateur
- **📄 Processus** - Création et gestion des processus
- **✍️ Signature** - Signatures de documents
- **💬 Chat** - Communication entre membres
- **🔗 Pairing** - Connexion avec d'autres utilisateurs
### Tableau de Bord ### Tableau de Bord

10
src/main.ts
View File

@ -1,16 +1,13 @@
import { SignatureComponent } from './pages/signature/signature-component';
import { SignatureElement } from './pages/signature/signature';
/*import { ChatComponent } from './pages/chat/chat-component'; /*import { ChatComponent } from './pages/chat/chat-component';
import { ChatElement } from './pages/chat/chat';*/ 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 { SignatureComponent, SignatureElement, AccountComponent, AccountElement }; export { AccountComponent, AccountElement };
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'signature-component': SignatureComponent; // Signatures supprimées
'signature-element': SignatureElement;
/*'chat-component': ChatComponent; /*'chat-component': ChatComponent;
'chat-element': ChatElement;*/ 'chat-element': ChatElement;*/
'account-component': AccountComponent; 'account-component': AccountComponent;
@ -21,8 +18,7 @@ declare global {
// 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); // Signatures supprimées
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);

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

@ -1,49 +0,0 @@
/*import { ChatElement } from './chat';
import chatCss from '../../../public/style/chat.css?raw';
import Services from '../../services/service.js';
class ChatComponent extends HTMLElement {
_callback: any;
chatElement: ChatElement | null = null;
constructor() {
super();
console.log('INIT');
this.attachShadow({ mode: 'open' });
this.chatElement = this.shadowRoot?.querySelector('chat-element') || null;
}
connectedCallback() {
console.log('CALLBACKs');
this.render();
if (!customElements.get('chat-element')) {
customElements.define('chat-element', ChatElement);
}
}
set callback(fn) {
if (typeof fn === 'function') {
this._callback = fn;
} else {
console.error('Callback is not a function');
}
}
get callback() {
return this._callback;
}
render() {
if (this.shadowRoot) {
// 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 };
customElements.define('chat-component', ChatComponent);*/

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

@ -1,14 +0,0 @@
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chat</title>
</head>
<body>
<chat-component></chat-component>
<script type="module" src="./chat.ts"></script>
</body>
</html>

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

File diff suppressed because it is too large Load Diff

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

@ -1,51 +0,0 @@
import processHtml from './process-element.html?raw';
import processScript from './process-element.ts?raw';
import processCss from '../../4nk.css?raw';
import { initProcessElement } from './process-element';
export class ProcessListComponent extends HTMLElement {
_callback: any;
id: string = '';
zone: string = '';
constructor() {
super();
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');
}
}
get callback() {
return this._callback;
}
render() {
if (this.shadowRoot)
this.shadowRoot.innerHTML = `
<style>
${processCss}
</style>${processHtml}
<script type="module">
${processScript}
</scipt>
`;
}
}
if (!customElements.get('process-4nk-component')) {
customElements.define('process-4nk-component', ProcessListComponent);
}

5
src/pages/process-element/process-element.html
View File

@ -1,5 +0,0 @@
<div class="title-container">
<h1>Process {{processTitle}}</h1>
</div>
<div class="process-container"></div>

50
src/pages/process-element/process-element.ts
View File

@ -1,50 +0,0 @@
import { interpolate } from '../../utils/html.utils';
import Services from '../../services/service';
import type { Process } from 'pkg/sdk_client';
import { getCorrectDOM } from '~/utils/document.utils';
let currentPageStyle: HTMLStyleElement | null = null;
export async function initProcessElement(id: string, zone: string) {
const processes = await getProcesses();
const container = getCorrectDOM('process-4nk-component');
// const currentProcess = processes.find((process) => process[0] === id)[1];
// const currentProcess = {title: 'Hello', html: '', css: ''};
// await loadPage({ processTitle: currentProcess.title, inputValue: 'Hello World !' });
// const wrapper = document.querySelector('.process-container');
// if (wrapper) {
// wrapper.innerHTML = interpolate(currentProcess.html, { processTitle: currentProcess.title, inputValue: 'Hello World !' });
// injectCss(currentProcess.css);
// }
}
async function loadPage(data?: any) {
const content = document.getElementById('containerId');
if (content && data) {
if (data) {
content.innerHTML = interpolate(content.innerHTML, data);
}
}
}
function injectCss(cssContent: string) {
removeCss(); // Ensure that the previous CSS is removed
currentPageStyle = document.createElement('style');
currentPageStyle.type = 'text/css';
currentPageStyle.appendChild(document.createTextNode(cssContent));
document.head.appendChild(currentPageStyle);
}
function removeCss() {
if (currentPageStyle) {
document.head.removeChild(currentPageStyle);
currentPageStyle = null;
}
}
async function getProcesses(): Promise<Record<string, Process>> {
const service = await Services.getInstance();
const processes = await service.getProcesses();
return processes;
}

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

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

19
src/pages/process/process.html
View File

@ -1,19 +0,0 @@
<!-- <div class="title-container">
<h1>Process Selection</h1>
</div>
<div class="process-container">
<div class="process-card">
<div class="process-card-description">
<div class="input-container">
<select multiple data-multi-select-plugin id="autocomplete" placeholder="Filter processes..." class="select-field"></select>
<label for="autocomplete" class="input-label">Filter processes :</label>
<div class="selected-processes"></div>
</div>
<div class="process-card-content"></div>
</div>
<div class="process-card-action">
<a class="btn" onclick="goToProcessPage()">OK</a>
</div>
</div>
</div> -->

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

@ -1,520 +0,0 @@
// import { addSubscription } from '../../utils/subscription.utils';
// import Services from '../../services/service';
// import { getCorrectDOM } from '~/utils/html.utils';
// import { Process } from 'pkg/sdk_client';
// import chatStyle from '../../../public/style/chat.css?inline';
// import { Database } from '../../services/database.service';
// // Initialize function, create initial tokens with itens that are already selected by the user
// export async function init() {
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
// const element = container.querySelector('select') as HTMLSelectElement;
// // Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
// const wrapper = document.createElement('div');
// if (wrapper) addSubscription(wrapper, 'click', clickOnWrapper);
// wrapper.classList.add('multi-select-component');
// wrapper.classList.add('input-field');
// // Create elements of search
// const search_div = document.createElement('div');
// search_div.classList.add('search-container');
// const input = document.createElement('input');
// input.classList.add('selected-input');
// input.setAttribute('autocomplete', 'off');
// input.setAttribute('tabindex', '0');
// if (input) {
// addSubscription(input, 'keyup', inputChange);
// addSubscription(input, 'keydown', deletePressed);
// addSubscription(input, 'click', openOptions);
// }
// const dropdown_icon = document.createElement('a');
// dropdown_icon.classList.add('dropdown-icon');
// if (dropdown_icon) addSubscription(dropdown_icon, 'click', clickDropdown);
// const autocomplete_list = document.createElement('ul');
// autocomplete_list.classList.add('autocomplete-list');
// search_div.appendChild(input);
// search_div.appendChild(autocomplete_list);
// search_div.appendChild(dropdown_icon);
// // set the wrapper as child (instead of the element)
// element.parentNode?.replaceChild(wrapper, element);
// // set element as child of wrapper
// wrapper.appendChild(element);
// wrapper.appendChild(search_div);
// addPlaceholder(wrapper);
// }
// function removePlaceholder(wrapper: HTMLElement) {
// const input_search = wrapper.querySelector('.selected-input');
// input_search?.removeAttribute('placeholder');
// }
// function addPlaceholder(wrapper: HTMLElement) {
// const input_search = wrapper.querySelector('.selected-input');
// const tokens = wrapper.querySelectorAll('.selected-wrapper');
// if (!tokens.length && !(document.activeElement === input_search)) input_search?.setAttribute('placeholder', '---------');
// }
// // Listener of user search
// function inputChange(e: Event) {
// const target = e.target as HTMLInputElement;
// const wrapper = target?.parentNode?.parentNode;
// const select = wrapper?.querySelector('select') as HTMLSelectElement;
// const dropdown = wrapper?.querySelector('.dropdown-icon');
// const input_val = target?.value;
// if (input_val) {
// dropdown?.classList.add('active');
// populateAutocompleteList(select, input_val.trim());
// } else {
// dropdown?.classList.remove('active');
// const event = new Event('click');
// dropdown?.dispatchEvent(event);
// }
// }
// // Listen for clicks on the wrapper, if click happens focus on the input
// function clickOnWrapper(e: Event) {
// const wrapper = e.target as HTMLElement;
// if (wrapper.tagName == 'DIV') {
// const input_search = wrapper.querySelector('.selected-input');
// const dropdown = wrapper.querySelector('.dropdown-icon');
// if (!dropdown?.classList.contains('active')) {
// const event = new Event('click');
// dropdown?.dispatchEvent(event);
// }
// (input_search as HTMLInputElement)?.focus();
// removePlaceholder(wrapper);
// }
// }
// function openOptions(e: Event) {
// const input_search = e.target as HTMLElement;
// const wrapper = input_search?.parentElement?.parentElement;
// const dropdown = wrapper?.querySelector('.dropdown-icon');
// if (!dropdown?.classList.contains('active')) {
// const event = new Event('click');
// dropdown?.dispatchEvent(event);
// }
// e.stopPropagation();
// }
// // Function that create a token inside of a wrapper with the given value
// function createToken(wrapper: HTMLElement, value: any) {
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
// const search = wrapper.querySelector('.search-container');
// const inputInderline = container.querySelector('.selected-processes');
// // Create token wrapper
// const token = document.createElement('div');
// token.classList.add('selected-wrapper');
// const token_span = document.createElement('span');
// token_span.classList.add('selected-label');
// token_span.innerText = value;
// const close = document.createElement('a');
// close.classList.add('selected-close');
// close.setAttribute('tabindex', '-1');
// close.setAttribute('data-option', value);
// close.setAttribute('data-hits', '0');
// close.innerText = 'x';
// if (close) addSubscription(close, 'click', removeToken);
// token.appendChild(token_span);
// token.appendChild(close);
// inputInderline?.appendChild(token);
// }
// // Listen for clicks in the dropdown option
// function clickDropdown(e: Event) {
// const dropdown = e.target as HTMLElement;
// const wrapper = dropdown?.parentNode?.parentNode;
// const input_search = wrapper?.querySelector('.selected-input') as HTMLInputElement;
// const select = wrapper?.querySelector('select') as HTMLSelectElement;
// dropdown.classList.toggle('active');
// if (dropdown.classList.contains('active')) {
// removePlaceholder(wrapper as HTMLElement);
// input_search?.focus();
// if (!input_search?.value) {
// populateAutocompleteList(select, '', true);
// } else {
// populateAutocompleteList(select, input_search.value);
// }
// } else {
// clearAutocompleteList(select);
// addPlaceholder(wrapper as HTMLElement);
// }
// }
// // Clears the results of the autocomplete list
// function clearAutocompleteList(select: HTMLSelectElement) {
// const wrapper = select.parentNode;
// const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
// if (autocomplete_list) autocomplete_list.innerHTML = '';
// }
// async function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
// const { autocomplete_options } = getOptions(select);
// let options_to_show = [];
// const service = await Services.getInstance();
// const mineArray: string[] = await service.getMyProcesses();
// const allProcesses = await service.getProcesses();
// const allArray: string[] = Object.keys(allProcesses).filter(x => !mineArray.includes(x));
// const wrapper = select.parentNode;
// const input_search = wrapper?.querySelector('.search-container');
// const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
// if (autocomplete_list) autocomplete_list.innerHTML = '';
// const addProcessToList = (processId:string, isMine: boolean) => {
// const li = document.createElement('li');
// li.innerText = processId;
// li.setAttribute("data-value", processId);
// if (isMine) {
// li.classList.add("my-process");
// li.style.cssText = `color: var(--accent-color)`;
// }
// if (li) addSubscription(li, 'click', selectOption);
// autocomplete_list?.appendChild(li);
// };
// mineArray.forEach(processId => addProcessToList(processId, true));
// allArray.forEach(processId => addProcessToList(processId, false));
// if (mineArray.length === 0 && allArray.length === 0) {
// const li = document.createElement('li');
// li.classList.add('not-cursor');
// li.innerText = 'No options found';
// autocomplete_list?.appendChild(li);
// }
// }
// // Listener to autocomplete results when clicked set the selected property in the select option
// function selectOption(e: any) {
// console.log('🎯 Click event:', e);
// console.log('🎯 Target value:', e.target.dataset.value);
// const wrapper = e.target.parentNode.parentNode.parentNode;
// const select = wrapper.querySelector('select');
// const input_search = wrapper.querySelector('.selected-input');
// const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`);
// console.log('🎯 Selected option:', option);
// console.log('🎯 Process ID:', option?.getAttribute('data-process-id'));
// if (e.target.dataset.value.includes('messaging')) {
// const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]);
// const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`);
// console.log('🚀 Dispatching newMessagingProcess event:', {
// processId,
// processName: `Messaging Process ${processId}`
// });
// // Dispatch l'événement avant la navigation
// document.dispatchEvent(new CustomEvent('newMessagingProcess', {
// detail: {
// processId: processId,
// processName: `Messaging Process ${processId}`
// }
// }));
// // Navigation vers le chat
// const navigateEvent = new CustomEvent('navigate', {
// detail: {
// page: 'chat',
// processId: processId || ''
// }
// });
// document.dispatchEvent(navigateEvent);
// return;
// }
// option.setAttribute('selected', '');
// createToken(wrapper, e.target.dataset.value);
// if (input_search.value) {
// input_search.value = '';
// }
// showSelectedProcess(e.target.dataset.value);
// input_search.focus();
// e.target.remove();
// const autocomplete_list = wrapper.querySelector('.autocomplete-list');
// if (!autocomplete_list.children.length) {
// const li = document.createElement('li');
// li.classList.add('not-cursor');
// li.innerText = 'No options found';
// autocomplete_list.appendChild(li);
// }
// const event = new Event('keyup');
// input_search.dispatchEvent(event);
// e.stopPropagation();
// }
// // function that returns a list with the autcomplete list of matches
// function autocomplete(query: string, options: any) {
// // No query passed, just return entire list
// if (!query) {
// return options;
// }
// let options_return = [];
// for (let i = 0; i < options.length; i++) {
// if (query.toLowerCase() === options[i].slice(0, query.length).toLowerCase()) {
// options_return.push(options[i]);
// }
// }
// return options_return;
// }
// // Returns the options that are selected by the user and the ones that are not
// function getOptions(select: HTMLSelectElement) {
// // Select all the options available
// const all_options = Array.from(select.querySelectorAll('option')).map((el) => el.value);
// // Get the options that are selected from the user
// const options_selected = Array.from(select.querySelectorAll('option:checked')).map((el: any) => el.value);
// // Create an autocomplete options array with the options that are not selected by the user
// const autocomplete_options: any[] = [];
// all_options.forEach((option) => {
// if (!options_selected.includes(option)) {
// autocomplete_options.push(option);
// }
// });
// autocomplete_options.sort();
// return {
// options_selected,
// autocomplete_options,
// };
// }
// // Listener for when the user wants to remove a given token.
// function removeToken(e: Event) {
// // Get the value to remove
// const target = e.target as HTMLSelectElement;
// const value_to_remove = target.dataset.option;
// const wrapper = target.parentNode?.parentNode?.parentNode;
// const input_search = wrapper?.querySelector('.selected-input');
// const dropdown = wrapper?.querySelector('.dropdown-icon');
// // Get the options in the select to be unselected
// const option_to_unselect = wrapper?.querySelector(`select option[value="${value_to_remove}"]`);
// option_to_unselect?.removeAttribute('selected');
// // Remove token attribute
// (target.parentNode as any)?.remove();
// dropdown?.classList.remove('active');
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
// const process = container.querySelector('#' + target.dataset.option);
// process?.remove();
// }
// // Listen for 2 sequence of hits on the delete key, if this happens delete the last token if exist
// function deletePressed(e: Event) {
// const input_search = e.target as HTMLInputElement;
// const wrapper = input_search?.parentNode?.parentNode;
// const key = (e as KeyboardEvent).keyCode || (e as KeyboardEvent).charCode;
// const tokens = wrapper?.querySelectorAll('.selected-wrapper');
// if (tokens?.length) {
// const last_token_x = tokens[tokens.length - 1].querySelector('a');
// let hits = +(last_token_x?.dataset?.hits || 0);
// if (key == 8 || key == 46) {
// if (!input_search.value) {
// if (hits > 1) {
// // Trigger delete event
// const event = new Event('click');
// last_token_x?.dispatchEvent(event);
// } else {
// if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '2';
// }
// }
// } else {
// if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '0';
// }
// }
// return true;
// }
// // Dismiss on outside click
// addSubscription(document, 'click', () => {
// // get select that has the options available
// const select = document.querySelectorAll('[data-multi-select-plugin]');
// for (let i = 0; i < select.length; i++) {
// if (event) {
// var isClickInside = select[i].parentElement?.parentElement?.contains(event.target as Node);
// if (!isClickInside) {
// const wrapper = select[i].parentElement?.parentElement;
// const dropdown = wrapper?.querySelector('.dropdown-icon');
// const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
// //the click was outside the specifiedElement, do something
// dropdown?.classList.remove('active');
// if (autocomplete_list) autocomplete_list.innerHTML = '';
// addPlaceholder(wrapper as HTMLElement);
// }
// }
// }
// });
// async function showSelectedProcess(elem: MouseEvent) {
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
// if (elem) {
// const cardContent = container.querySelector('.process-card-content');
// const processes = await getProcesses();
// const process = processes.find((process: any) => process[1].title === elem);
// if (process) {
// const processDiv = document.createElement('div');
// processDiv.className = 'process';
// processDiv.id = process[0];
// const titleDiv = document.createElement('div');
// titleDiv.className = 'process-title';
// titleDiv.innerHTML = `${process[1].title} : ${process[1].description}`;
// processDiv.appendChild(titleDiv);
// for (const zone of process.zones) {
// const zoneElement = document.createElement('div');
// zoneElement.className = 'process-element';
// const zoneId = process[1].title + '-' + zone.id;
// zoneElement.setAttribute('zone-id', zoneId);
// zoneElement.setAttribute('process-title', process[1].title);
// zoneElement.setAttribute('process-id', `${process[0]}_${zone.id}`);
// zoneElement.innerHTML = `${zone.title}: ${zone.description}`;
// addSubscription(zoneElement, 'click', select);
// processDiv.appendChild(zoneElement);
// }
// if (cardContent) cardContent.appendChild(processDiv);
// }
// }
// }
// function select(event: Event) {
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
// const target = event.target as HTMLElement;
// const oldSelectedProcess = container.querySelector('.selected-process-zone');
// oldSelectedProcess?.classList.remove('selected-process-zone');
// if (target) {
// target.classList.add('selected-process-zone');
// }
// const name = target.getAttribute('zone-id');
// console.log('🚀 ~ select ~ name:', name);
// }
// function goToProcessPage() {
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
// const target = container.querySelector('.selected-process-zone');
// console.log('🚀 ~ goToProcessPage ~ event:', target);
// if (target) {
// const process = target?.getAttribute('process-id');
// console.log('=======================> going to process page', process);
// // navigate('process-element/' + process);
// document.querySelector('process-list-4nk-component')?.dispatchEvent(
// new CustomEvent('processSelected', {
// detail: {
// process: process,
// },
// }),
// );
// }
// }
// (window as any).goToProcessPage = goToProcessPage;
// async function createMessagingProcess(): Promise<void> {
// console.log('Creating messaging process');
// const service = await Services.getInstance();
// const otherMembers = [
// {
// sp_addresses: [
// "tsp1qqd7snxfh44am8f7a3x36znkh4v0dcagcgakfux488ghsg0tny7degq4gd9q4n4us0cyp82643f2p4jgcmtwknadqwl3waf9zrynl6n7lug5tg73a",
// "tsp1qqvd8pak9fyz55rxqj90wxazqzwupf2egderc96cn84h3l84z8an9vql85scudrmwvsnltfuy9ungg7pxnhys2ft5wnf2gyr3n4ukvezygswesjuc"
// ]
// },
// {
// sp_addresses: [
// "tsp1qqgl5vawdey6wnnn2sfydcejsr06uzwsjlfa6p6yr8u4mkqwezsnvyqlazuqmxhxd8crk5eq3wfvdwv4k3tn68mkj2nj72jj39d2ngauu4unfx0q7",
// "tsp1qqthmj56gj8vvkjzwhcmswftlrf6ye7ukpks2wra92jkehqzrvx7m2q570q5vv6zj6dnxvussx2h8arvrcfwz9sp5hpdzrfugmmzz90pmnganxk28"
// ]
// },
// {
// sp_addresses: [
// "tsp1qqwjtxr9jye7d40qxrsmd6h02egdwel6mfnujxzskgxvxphfya4e6qqjq4tsdmfdmtnmccz08ut24q8y58qqh4lwl3w8pvh86shlmavrt0u3smhv2",
// "tsp1qqwn7tf8q2jhmfh8757xze53vg2zc6x5u6f26h3wyty9mklvcy0wnvqhhr4zppm5uyyte4y86kljvh8r0tsmkmszqqwa3ecf2lxcs7q07d56p8sz5"
// ]
// }
// ];
// await service.checkConnections(otherMembers);
// const relayAddress = service.getAllRelays().pop();
// if (!relayAddress) {
// throw new Error('Empty relay address list');
// }
// const feeRate = 1;
// setTimeout(async () => {
// const createProcessReturn = await service.createMessagingProcess(otherMembers, relayAddress.spAddress, feeRate);
// const updatedProcess = createProcessReturn.updated_process.current_process;
// if (!updatedProcess) {
// console.error('Failed to retrieved new messaging process');
// return;
// }
// const processId = updatedProcess.states[0].commited_in;
// const stateId = updatedProcess.states[0].state_id;
// await service.handleApiReturn(createProcessReturn);
// const createPrdReturn = await service.createPrdUpdate(processId, stateId);
// await service.handleApiReturn(createPrdReturn);
// const approveChangeReturn = await service.approveChange(processId, stateId);
// await service.handleApiReturn(approveChangeReturn);
// }, 500)
// }
// async function getDescription(processId: string, process: Process): Promise<string | null> {
// const service = await Services.getInstance();
// // Get the `commited_in` value of the last state and remove it from the array
// const currentCommitedIn = process.states.pop()?.commited_in;
// if (currentCommitedIn === undefined) {
// return null; // No states available
// }
// // Find the last state where `commited_in` is different
// let lastDifferentState = process.states.findLast(
// state => state.commited_in !== currentCommitedIn
// );
// if (!lastDifferentState) {
// // It means that we only have one state that is not commited yet, that can happen with process we just created
// // let's assume that the right description is in the last concurrent state and not handle the (arguably rare) case where we have multiple concurrent states on a creation
// lastDifferentState = process.states.pop();
// }
// // Take the description out of the state, if any
// const description = lastDifferentState!.pcd_commitment['description'];
// if (description) {
// const userDiff = await service.getDiffByValue(description);
// if (userDiff) {
// console.log("Successfully retrieved userDiff:", userDiff);
// return userDiff.new_value;
// } else {
// console.log("Failed to retrieve a non-null userDiff.");
// }
// }
// return null;
// }

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

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

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

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Signatures</title>
</head>
<body>
<signature-component></signature-component>
<script type="module" src="./signature.ts"></script>
</body>
</html>

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

File diff suppressed because it is too large Load Diff

61
src/router.ts
View File

@ -1,6 +1,5 @@
import '../public/style/4nk.css'; import '../public/style/4nk.css';
import { initHeader } from './components/header/header'; import { initHeader } from './components/header/header';
/*import { initChat } from '../src/pages/chat/chat';*/
import Database from './services/database.service'; import Database from './services/database.service';
import Services from './services/service'; import Services from './services/service';
import TokenService from './services/token'; import TokenService from './services/token';
@ -14,11 +13,7 @@ import type { MerkleProofResult } from 'pkg/sdk_client';
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-element': '/src/pages/process-element/process-element.html',
account: '/src/pages/account/account.html', account: '/src/pages/account/account.html',
chat: '/src/pages/chat/chat.html',
signature: '/src/pages/signature/signature.html',
}; };
export let currentRoute = ''; export let currentRoute = '';
@ -53,7 +48,7 @@ async function handleLocation(path: string) {
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 {
const html = await fetch(routeHtml).then((data) => data.text()); const html = await fetch(routeHtml).then((data) => data.text());
content.innerHTML = html; content.innerHTML = html;
} }
@ -64,28 +59,6 @@ async function handleLocation(path: string) {
// const modalService = await ModalService.getInstance() // const modalService = await ModalService.getInstance()
// modalService.injectValidationModal() // modalService.injectValidationModal()
switch (path) { switch (path) {
case 'process':
// const { init } = await import('./pages/process/process');
//const { ProcessListComponent } = await import('./pages/process/process-list-component');
const container2 = document.querySelector('#containerId');
const accountComponent = document.createElement('process-list-4nk-component');
//if (!customElements.get('process-list-4nk-component')) {
//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': case 'account':
const { AccountComponent } = await import('./pages/account/account-component'); const { AccountComponent } = await import('./pages/account/account-component');
const accountContainer = document.querySelector('.parameter-list'); const accountContainer = document.querySelector('.parameter-list');
@ -97,30 +70,6 @@ async function handleLocation(path: string) {
accountContainer.appendChild(accountComponent); accountContainer.appendChild(accountComponent);
} }
break; break;
/*case 'chat':
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;
} }
} }
} }
@ -130,7 +79,7 @@ window.onpopstate = async () => {
if (!services.isPaired()) { if (!services.isPaired()) {
handleLocation('home'); handleLocation('home');
} else { } else {
handleLocation('process'); handleLocation('account');
} }
}; };
@ -172,11 +121,8 @@ export async function init(): Promise<void> {
await registerAllListeners(); await registerAllListeners();
} }
if (services.isPaired()) { // Si appairé, rester sur home/account uniquement
await navigate('process');
} else {
await navigate('home'); await navigate('home');
}
} catch (error) { } catch (error) {
console.error(error); console.error(error);
await navigate('home'); await navigate('home');
@ -980,3 +926,4 @@ document.addEventListener('navigate', ((e: Event) => {
} }
} }
})); }));

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

@ -79,9 +79,6 @@ class NotificationStore {
${notif.time ? `<div>${notif.time}</div>` : ''} ${notif.time ? `<div>${notif.time}</div>` : ''}
`; `;
notifElement.onclick = () => { notifElement.onclick = () => {
if (notif.memberId) {
window.loadMemberChat(notif.memberId);
}
this.removeNotification(index); this.removeNotification(index);
}; };
board.appendChild(notifElement); board.appendChild(notifElement);

8
test-results/.last-run.json Normal file
View File

@ -0,0 +1,8 @@
{
"status": "failed",
"failedTests": [
"8441ffd23af3346276e7-56f9d5b0e8b6ed86465b",
"8441ffd23af3346276e7-f630137873bddb821e00",
"37e4c99d8313ab3db5d7-b8719acdf6b3b69064f7"
]
}

6
test-results/channel-channel-REQUEST-LINK---LINK-ACCEPTED-chromium/error-context.md Normal file
View File

@ -0,0 +1,6 @@
# Page snapshot
```yaml
- iframe [ref=e3]:
```

6
test-results/channel-channel-VALIDATE-TOKEN-puis-RENEW-TOKEN-chromium/error-context.md Normal file
View File

@ -0,0 +1,6 @@
# Page snapshot
```yaml
- iframe [ref=e3]:
```

6
test-results/process-channel-CREATE-PRO-5e777-OCESS-CREATED-flux-minimal--chromium/error-context.md Normal file
View File

@ -0,0 +1,6 @@
# Page snapshot
```yaml
- iframe [ref=e3]:
```