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

Neutralize process page

Browse Source
This commit is contained in:
NicolasCantu 2025-03-28 12:51:12 +01:00
parent 3f42cb27a7
commit 51c906866e
5 changed files with 521 additions and 514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -866,22 +866,29 @@ private updateProcessTableContent(processes: any[]): void {
return;
}
tbody.innerHTML = processes.map(process => `
<tr>
<td>${process.name || 'N/A'}</td>
<td>${process.role || 'N/A'}</td>
<td>
<div class="notification-container" onclick="window.showProcessNotifications('${process.id}')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
<path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/>
</svg>
<span class="notification-count" data-process="${process.id}">
${process.notifications?.unread || 0}/${process.notifications?.total || 0}
</span>
</div>
</td>
</tr>
`).join('');
const service = await Services.getInstance();
/*tbody.innerHTML = processes.map((process: Process) => {
const processName = process.states[0]?.public_data?.memberPublicName || 'N/A';
const processId = process.states[0]?.state_id || 'N/A';
return `
<tr>
<td>${processName}</td>
<td>${service.getRoles(process) || 'N/A'}</td>
<td>
<div class="notification-container" onclick="window.showProcessNotifications('${processId}')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
<path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/>
</svg>
<span class="notification-count" data-process="${processId}">
0/0
</span>
</div>
</td>
</tr>
`;
}).join('');*/
}

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

@ -1,49 +1,49 @@
import processHtml from './process.html?raw';
import processScript from './process.ts?raw';
import processCss from '../../4nk.css?raw';
import { init } from './process';
// 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' });
}
// 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);
}
// 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');
}
}
// set callback(fn) {
// if (typeof fn === 'function') {
// this._callback = fn;
// } else {
// console.error('Callback is not a function');
// }
// }
get callback() {
return this._callback;
}
// get callback() {
// return this._callback;
// }
render() {
if (this.shadowRoot)
this.shadowRoot.innerHTML = `
<style>
${processCss}
</style>${processHtml}
<script type="module">
${processScript}
</scipt>
// 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);
}
// if (!customElements.get('process-list-4nk-component')) {
// customElements.define('process-list-4nk-component', ProcessListComponent);
// }

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

@ -1,4 +1,4 @@
<div class="title-container">
<!-- <div class="title-container">
<h1>Process Selection</h1>
</div>
@ -16,4 +16,4 @@
<a class="btn" onclick="goToProcessPage()">OK</a>
</div>
</div>
</div>
</div> -->

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

File diff suppressed because it is too large Load Diff

8
src/router.ts
View File

@ -62,14 +62,14 @@ async function handleLocation(path: string) {
switch (path) {
case '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 accountComponent = document.createElement('process-list-4nk-component');
if (!customElements.get('process-list-4nk-component')) {
customElements.define('process-list-4nk-component', ProcessListComponent);
}
//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;