Actualiser test.html

test.html

@@ -21,11 +21,19 @@
 
     <div class="card">
         <h3>Modifier le produit</h3>
-        <input type="text" id="prod-id" placeholder="ID du produit (ex: 123)">
+        
+        <label>Sélectionner un produit existant :</label>
+        <select id="product-selector" onchange="updateIdField()">
+            <option value="">-- Choisir un produit --</option>
+        </select>
+
+        <input type="text" id="prod-id" placeholder="ID du produit (auto-rempli)" readonly style="background:#555;">
         <input type="text" id="prod-name" placeholder="Nom du produit">
+        
         <select id="category-selector">
             <option value="">-- Choisir une catégorie --</option>
         </select>
+        
         <button onclick="saveProduct()">Enregistrer la modification</button>
     </div>
 
@@ -39,19 +47,17 @@
         const statusText = document.getElementById('status-text');
         const debugPanel = document.getElementById('debug-panel');
 
-        // Chargement des catégories
+        // 1. Chargement des catégories (fr.json)
         fetch('translations/fr.json')
             .then(res => res.json())
             .then(data => {
                 const tbody = document.querySelector('#cat-table tbody');
                 const selector = document.getElementById('category-selector');
                 const catData = data.categories; 
-                
                 if (catData) {
                     statusText.innerText = "OK - Données chargées.";
                     debugPanel.style.borderLeftColor = "#4ade80";
                     statusText.className = "status-ok";
-
                     Object.entries(catData).forEach(([key, val]) => {
                         tbody.innerHTML += `<tr><td style="border:1px solid #555; padding:8px;">${key}</td><td style="border:1px solid #555; padding:8px;">${val}</td></tr>`;
                         const opt = document.createElement('option');
@@ -60,27 +66,40 @@
                         selector.appendChild(opt);
                     });
                 }
-            })
-            .catch(err => {
-                statusText.innerText = "ERREUR : " + err.message;
-                debugPanel.style.borderLeftColor = "#f87171";
             });
 
-        // Fonction d'enregistrement
+        // 2. Chargement des produits pour la liste déroulante
+        fetch('api/index.php?action=list_products')
+            .then(res => res.json())
+            .then(data => {
+                const selector = document.getElementById('product-selector');
+                data.products.forEach(prod => {
+                    const opt = document.createElement('option');
+                    opt.value = prod.id;
+                    opt.setAttribute('data-name', prod.name);
+                    opt.textContent = prod.name;
+                    selector.appendChild(opt);
+                });
+            });
+
+        // 3. Auto-remplissage
+        function updateIdField() {
+            const selector = document.getElementById('product-selector');
+            const idField = document.getElementById('prod-id');
+            const nameField = document.getElementById('prod-name');
+            idField.value = selector.value;
+            const selectedOption = selector.options[selector.selectedIndex];
+            nameField.value = selectedOption.getAttribute('data-name') || '';
+        }
+
+        // 4. Enregistrement
         function saveProduct() {
-            const idEl = document.getElementById('prod-id');
-            const nameEl = document.getElementById('prod-name');
-            const catEl = document.getElementById('category-selector');
-
-            if (!idEl.value) return alert("Veuillez entrer un ID de produit.");
-
             const data = {
-                id: idEl.value,
-                name: nameEl.value,
-                category: catEl.value
+                id: document.getElementById('prod-id').value,
+                name: document.getElementById('prod-name').value,
+                category: document.getElementById('category-selector').value
             };
             
-            // Remplace 'product_edit' par l'action confirmée dans ton onglet Réseau
             fetch('api/index.php?action=product_edit', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -89,7 +108,7 @@
             .then(r => r.json())
             .then(res => {
                 console.log("Réponse API :", res);
-                alert("Action effectuée. Voir la console pour les détails.");
+                alert("Action effectuée. Vérifiez la console F12.");
             })
             .catch(e => alert("Erreur : " + e));
         }