Actualiser test.html

2026-06-17 18:00:35 +00:00
parent f7fb4e8f33
commit c2002977cd
1 changed files with 50 additions and 68 deletions
@@ -2,115 +2,97 @@
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
-    <title>⚡ Debug & Modification</title>
+    <title>⚡ Debug & Modification Complet</title>
    <style>
        body { font-family: sans-serif; background: #222; color: #eee; padding: 20px; }
        .debug-header { background: #333; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #555; }
-        .status-ok { color: #4ade80; font-weight: bold; }
-        .status-err { color: #f87171; font-weight: bold; }
        .card { background: #444; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
        input, select { padding: 10px; border-radius: 5px; border: none; margin: 5px 0; width: 100%; box-sizing: border-box; }
-        button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; }
+        button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 5px; cursor: pointer; }
    </style>
 </head>
 <body>

    <div class="debug-header" id="debug-panel">
-        État : <span id="status-text">Chargement...</span>
+        État : <span id="status-text">Prêt</span>
    </div>

    <div class="card">
-        <h3>Modifier le produit</h3>
+        <h3>1. Tester l'action API pour les produits</h3>
+        <input type="text" id="api-action" value="list_products" placeholder="ex: list_products, app_bootstrap">
+        <button onclick="loadProducts()">Charger la liste des produits</button>
+    </div>

-        <label>Sélectionner un produit existant :</label>
+    <div class="card">
+        <h3>2. Modifier le produit</h3>
        <select id="product-selector" onchange="updateIdField()">
-            <option value="">-- Choisir un produit --</option>
+            <option value="">-- Sélectionner un produit chargé --</option>
        </select>
-
-        <input type="text" id="prod-id" placeholder="ID du produit (auto-rempli)" readonly style="background:#555;">
+        <input type="text" id="prod-id" placeholder="ID du produit" 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>

-    <h1>Table des Catégories</h1>
-    <table id="cat-table" style="width:100%; border-collapse: collapse;">
-        <thead><tr style="background:#444;"><th style="padding:10px;">Clé</th><th style="padding:10px;">Libellé</th></tr></thead>
-        <tbody></tbody>
-    </table>
-
    <script>
-        const statusText = document.getElementById('status-text');
-        const debugPanel = document.getElementById('debug-panel');
-
-        // 1. Chargement des catégories (fr.json)
+        // Charger les catégories au démarrage
        fetch('translations/fr.json')
-            .then(res => res.json())
+            .then(r => r.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>`;
+                Object.entries(data.categories || {}).forEach(([key, val]) => {
                    const opt = document.createElement('option');
-                        opt.value = key;
-                        opt.textContent = val;
+                    opt.value = key; opt.textContent = val;
                    selector.appendChild(opt);
                });
-                }
            });

-        // 2. Chargement des produits pour la liste déroulante
-        fetch('api/index.php?action=list_products')
-            .then(res => res.json())
+        // Charger les produits selon l'action saisie
+        function loadProducts() {
+            const action = document.getElementById('api-action').value;
+            fetch('api/index.php?action=' + action)
+                .then(r => r.json())
                .then(data => {
+                    console.log("Données reçues :", data);
                    const selector = document.getElementById('product-selector');
-                data.products.forEach(prod => {
+                    selector.innerHTML = '<option value="">-- Choisir un produit --</option>';
+                    
+                    // On cherche le tableau de produits. Souvent dans data.products ou data directement
+                    const list = data.products || data;
+                    if(Array.isArray(list)) {
+                        list.forEach(p => {
                            const opt = document.createElement('option');
-                    opt.value = prod.id;
-                    opt.setAttribute('data-name', prod.name);
-                    opt.textContent = prod.name;
+                            opt.value = p.id;
+                            opt.setAttribute('data-name', p.name || 'Sans nom');
+                            opt.textContent = (p.name || 'ID: ' + p.id);
                            selector.appendChild(opt);
                        });
+                        alert("Produits chargés ! Vérifie la console F12 si vide.");
+                    } else {
+                        alert("Format JSON non reconnu. Regarde la console (F12) pour voir la structure.");
+                    }
                });
-
-        // 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 updateIdField() {
+            const sel = document.getElementById('product-selector');
+            document.getElementById('prod-id').value = sel.value;
+            document.getElementById('prod-name').value = sel.options[sel.selectedIndex].getAttribute('data-name');
+        }
+
        function saveProduct() {
            const data = {
                id: document.getElementById('prod-id').value,
                name: document.getElementById('prod-name').value,
                category: document.getElementById('category-selector').value
            };
-            
            fetch('api/index.php?action=product_edit', {
                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
-            })
-            .then(r => r.json())
-            .then(res => {
-                console.log("Réponse API :", res);
-                alert("Action effectuée. Vérifiez la console F12.");
-            })
-            .catch(e => alert("Erreur : " + e));
+            }).then(r => r.json()).then(res => alert(JSON.stringify(res)));
        }
    </script>
 </body>