111 lines
4.7 KiB
TypeScript
Executable File
111 lines
4.7 KiB
TypeScript
Executable File
// src/pages/process-element/process-element.ts
|
||
|
||
import { interpolate } from '../../utils/html.utils';
|
||
import Services from '../../services/service';
|
||
import { Process, ProcessState } from 'pkg/sdk_client';
|
||
// 1. Plus besoin de 'getCorrectDOM'
|
||
|
||
/**
|
||
* Fonction d'initialisation, appelée par process-component.ts
|
||
* Reçoit le shadowRoot et les IDs.
|
||
*/
|
||
export async function initProcessElement(container: ShadowRoot, processId: string, stateId: string) {
|
||
console.log(`[process-element.ts] 3. init() appelé pour ${processId}_${stateId}`);
|
||
|
||
const services = await Services.getInstance();
|
||
|
||
// 2. Récupérer les éléments du DOM *dans* le shadowRoot (container)
|
||
const titleH1 = container.querySelector('h1');
|
||
const processContainer = container.querySelector('.process-container');
|
||
|
||
if (!titleH1 || !processContainer) {
|
||
console.error("[process-element.ts] 💥 Le HTML de base (h1 ou .process-container) est introuvable !");
|
||
return;
|
||
}
|
||
|
||
// 3. Récupérer les données
|
||
const process = await services.getProcess(processId);
|
||
if (!process) {
|
||
console.error(`[process-element.ts] 💥 Processus ${processId} non trouvé !`);
|
||
titleH1.innerText = "Erreur";
|
||
processContainer.innerHTML = `<p>Le processus ${processId} n'a pas pu être chargé.</p>`;
|
||
return;
|
||
}
|
||
|
||
const state = services.getStateFromId(process, stateId);
|
||
if (!state) {
|
||
console.error(`[process-element.ts] 💥 État ${stateId} non trouvé dans le processus ${processId} !`);
|
||
titleH1.innerText = "Erreur";
|
||
processContainer.innerHTML = `<p>L'état ${stateId} n'a pas pu être chargé.</p>`;
|
||
return;
|
||
}
|
||
|
||
console.log("[process-element.ts] ✅ Processus et État chargés.");
|
||
|
||
// 4. Mettre à jour le titre
|
||
const processName = services.getProcessName(process) || "Processus";
|
||
titleH1.innerHTML = interpolate(titleH1.innerHTML, { processTitle: processName });
|
||
|
||
// 5. Logique de rendu de l'élément (À COMPLÉTER PAR TES SOINS)
|
||
// C'est là que tu dois construire le HTML pour cet état spécifique
|
||
// Par exemple, déchiffrer les attributs et les afficher.
|
||
processContainer.innerHTML = `
|
||
<div class="card" style="margin: 1rem; padding: 1rem;">
|
||
<h3>État: ${stateId.substring(0, 10)}...</h3>
|
||
<p>Commit: ${state.commited_in}</p>
|
||
<div id="attributes-list">
|
||
<p><em>Chargement des attributs...</em></p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 6. Tenter de déchiffrer les données de cet état
|
||
await decryptAndDisplayAttributes(services, container, processId, state);
|
||
}
|
||
|
||
/**
|
||
* Helper (exemple) pour déchiffrer et afficher les données dans le conteneur
|
||
*/
|
||
async function decryptAndDisplayAttributes(services: Services, container: ShadowRoot, processId: string, state: ProcessState) {
|
||
const attributesList = container.querySelector('#attributes-list');
|
||
if (!attributesList) return;
|
||
|
||
console.log(`[process-element.ts] 🔐 Déchiffrement des attributs pour l'état ${state.state_id}...`);
|
||
attributesList.innerHTML = ''; // Vide le message "Chargement..."
|
||
let hasPrivateData = false;
|
||
|
||
// Affiche les données publiques
|
||
if (state.public_data) {
|
||
for (const [key, value] of Object.entries(state.public_data)) {
|
||
const el = document.createElement('div');
|
||
el.className = 'attribute-pair public';
|
||
el.innerHTML = `<strong>${key} (public):</strong> ${JSON.stringify(services.decodeValue(value))}`;
|
||
attributesList.appendChild(el);
|
||
}
|
||
}
|
||
|
||
// Affiche les données privées
|
||
for (const attribute of Object.keys(state.pcd_commitment)) {
|
||
if (attribute === 'roles' || (state.public_data && state.public_data[attribute])) {
|
||
continue; // Skip les données publiques (déjà fait) et les rôles
|
||
}
|
||
|
||
const decryptedValue = await services.decryptAttribute(processId, state, attribute);
|
||
|
||
const el = document.createElement('div');
|
||
el.className = 'attribute-pair private';
|
||
|
||
if (decryptedValue) {
|
||
hasPrivateData = true;
|
||
el.innerHTML = `<strong>${attribute} (privé):</strong> ${JSON.stringify(decryptedValue)}`;
|
||
} else {
|
||
el.innerHTML = `<strong>${attribute} (privé):</strong> <span style="color: red;">[Déchiffrement impossible / Clé manquante]</span>`;
|
||
}
|
||
attributesList.appendChild(el);
|
||
}
|
||
|
||
if (!hasPrivateData && !(state.public_data && Object.keys(state.public_data).length > 0)) {
|
||
console.log("[process-element.ts] ℹ️ Aucun attribut (public ou privé) trouvé pour cet état.");
|
||
attributesList.innerHTML = '<p>Cet état ne contient aucun attribut visible.</p>';
|
||
}
|
||
} |