From 450095376c7bdcd684bfe916940f2c3db6cf4b9f Mon Sep 17 00:00:00 2001
From: morgane <enagore@gmail.com>
Date: Wed, 17 Jun 2026 17:25:31 +0000
Subject: [PATCH] Actualiser test.html

---
 test.html | 119 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 61 insertions(+), 58 deletions(-)
diff --git a/test.html b/test.html
index 3b0f117..5c9eb88 100644
--- a/test.html
+++ b/test.html
@@ -2,77 +2,80 @@
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
-    <title>⚡ Sandbox - Test Récupération ID</title>
+    <title>⚡ Sandbox - Récupération Dynamique</title>
     <style>
-        body { font-family: sans-serif; background: #333; color: #fff; padding: 50px; }
-        .modal-preview { background: #fff; color: #000; padding: 20px; border-radius: 12px; width: 500px; margin: 0 auto; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
-        .button-container { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 8px; }
-        
-        .btn { padding: 12px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; flex: 1; text-align: center; text-decoration: none; }
-        .btn-success { background-color: #2e7d32; color: white; }
-        .btn-danger { background-color: #d32f2f; color: white; }
-        .btn-purple { background-color: #7b1fa2; color: white; }
-        .btn-catalog-shortcut { background-color: #1976d2; color: white; font-size: 11px; }
+        body { font-family: sans-serif; background: #333; padding: 50px; color: white; }
+        .modal { background: white; padding: 20px; border-radius: 12px; width: 400px; margin: 0 auto; color: black; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
+        .debug-panel { margin-top: 20px; padding: 15px; background: #222; border-radius: 8px; border: 1px solid #444; font-size: 12px; }
+        .btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; margin: 5px; font-weight: bold; }
+        .btn-blue { background: #1976d2; color: white; }
     </style>
 </head>
 <body>
 
-    <h2 style="text-align: center;">Test de Capture d'attribut HTML</h2>
+    <div class="modal" id="app-container">
+        <h3>Produit : Jus Ananas</h3>
+        <p>Catégorie actuelle : <b>Boissons</b></p>
+        <button class="btn btn-blue" onclick="initForm()">✏️ Modifier la catégorie</button>
+    </div>
 
-    <div class="modal-preview">
-        <h3>Jus ananas</h3>
-        <p>Emplacement : 🍷 Cave</p>
-        
-        <div class="button-container">
-            <button class="btn btn-danger">Utiliser</button>
-            <button class="btn btn-success" data-id="145">Modifier</button>
-            <button class="btn btn-purple">Recette</button>
-        </div>
+    <div class="debug-panel">
+        <strong>Debug - État :</strong>
+        <pre id="debug-log">Prêt à charger les données...</pre>
     </div>
 
     <script>
-        // 1. Fonction qui affiche le formulaire
-        function mockEditProduct(id) {
-            // 1. On va chercher les catégories directement dans la mémoire de l'appli.
-            // Si 'categories' n'est pas définie, on prévoit une liste de secours.
-            const appCategories = (typeof categories !== 'undefined') ? categories : ["Fruits", "Légumes", "Boissons", "Épicerie", "Surgelés"];
-            
-            // 2. On construit les options dynamiquement
-            let optionsHTML = appCategories.map(cat => `<option value="${cat}">${cat}</option>`).join('');
-    
-            const container = document.querySelector('.modal-preview');
+        let GLOBAL_CATEGORY_LABELS = {};
+
+        // 1. Récupération dynamique depuis le fichier source de l'app
+        async function fetchCategories() {
+            try {
+                const response = await fetch('/assets/js/app.js');
+                const text = await response.text();
+                
+                // Extrait le bloc CATEGORY_LABELS du fichier app.js
+                const match = text.match(/const CATEGORY_LABELS = ({[\s\S]*?});/);
+                
+                if (match) {
+                    // Nettoyage et conversion en objet JS
+                    const jsonStr = match[1].replace(/(\w+):/g, '"$1":'); // Ajoute des guillemets aux clés
+                    GLOBAL_CATEGORY_LABELS = JSON.parse(jsonStr);
+                    document.getElementById('debug-log').innerText = "Succès : " + Object.keys(GLOBAL_CATEGORY_LABELS).length + " catégories chargées.";
+                    return true;
+                }
+            } catch (e) {
+                document.getElementById('debug-log').innerText = "Erreur : Impossible de lire app.js (" + e.message + ")";
+            }
+            return false;
+        }
+
+        // 2. Initialisation du formulaire
+        async function initForm() {
+            const loaded = await fetchCategories();
+            if (!loaded) return;
+
+            const container = document.getElementById('app-container');
+            const entries = Object.entries(GLOBAL_CATEGORY_LABELS);
+
             container.innerHTML = `
-                <h3>Modification du produit #${id}</h3>
-                <form onsubmit="event.preventDefault(); alert('Catégorie ' + document.getElementById('cat-select').value + ' appliquée !'); location.reload();">
-                    <label>Catégories EverShelf :</label><br>
-                    <select id="cat-select" style="width:100%; padding:8px; margin: 10px 0;">
-                        ${optionsHTML}
-                    </select>
-                    <br>
-                    <button type="submit" class="btn btn-success">Enregistrer</button>
-                    <button type="button" class="btn btn-danger" onclick="location.reload()">Annuler</button>
-                </form>
+                <h3>Changer la catégorie</h3>
+                <select id="cat-select" style="width:100%; padding:10px; margin: 10px 0;">
+                    ${entries.map(([key, label]) => `<option value="${key}">${label}</option>`).join('')}
+                </select>
+                <br>
+                <button class="btn btn-blue" onclick="save()">Enregistrer</button>
+                <button class="btn" onclick="location.reload()">Annuler</button>
             `;
         }
 
-        // 2. Injecteur qui ajoute le bouton bleu
-        setInterval(() => {
-            const greenBtn = document.querySelector('.btn-success');
-            if (greenBtn && !document.querySelector('.btn-catalog-shortcut')) {
-                const container = greenBtn.parentNode;
-                let pId = greenBtn.getAttribute('data-id');
-                
-                const blueBtn = document.createElement('button');
-                blueBtn.type = 'button';
-                blueBtn.className = 'btn btn-catalog-shortcut';
-                blueBtn.innerText = '✏️ Modifier la fiche';
-                
-                // Au clic, on appelle notre fonction de test
-                blueBtn.onclick = () => mockEditProduct(pId);
-                
-                container.insertBefore(blueBtn, greenBtn);
-            }
-        }, 500);
+        // 3. Sauvegarde
+        function save() {
+            const selectedKey = document.getElementById('cat-select').value;
+            const selectedLabel = GLOBAL_CATEGORY_LABELS[selectedKey];
+            alert("Réconciliation réussie : Envoi de la clé '" + selectedKey + "' vers EverShelf.");
+            console.log("Donnée API :", { category: selectedKey });
+            location.reload();
+        }
     </script>
 </body>
 </html>
\ No newline at end of file
