Actualiser test.html

2026-06-17 17:43:46 +00:00
parent 619b7b4517
commit 6e86c19262
1 changed files with 19 additions and 6 deletions
@@ -2,16 +2,26 @@
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
-    <title>⚡ Debug Catégories - Fix</title>
+    <title>⚡ Debug Catégories - Final</title>
    <style>
        body { font-family: sans-serif; background: #222; color: #eee; padding: 20px; }
+        .controls { background: #444; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
        table { width: 100%; border-collapse: collapse; background: #333; }
        th, td { border: 1px solid #555; padding: 10px; text-align: left; }
        th { background: #444; }
        .key { color: #fbbf24; font-weight: bold; }
+        select { padding: 10px; width: 300px; border-radius: 5px; }
    </style>
 </head>
 <body>
+
+    <div class="controls">
+        <h3>Choisir une catégorie :</h3>
+        <select id="category-selector">
+            <option value="">-- Sélectionner --</option>
+        </select>
+    </div>
+
    <h1>Table des Catégories (Source: translations/fr.json)</h1>
    <table id="cat-table">
        <thead><tr><th>Clé</th><th>Libellé (Français)</th></tr></thead>
@@ -23,18 +33,21 @@
            .then(res => res.json())
            .then(data => {
                const tbody = document.querySelector('#cat-table tbody');
-                
-                // On accède directement à la section 'categories'
+                const selector = document.querySelector('#category-selector');
                const catData = data.categories; 
                
                if (catData) {
                    Object.entries(catData).forEach(([key, val]) => {
+                        // 1. Ajouter au tableau
                        const row = `<tr><td class="key">${key}</td><td>${val}</td></tr>`;
                        tbody.innerHTML += row;
+
+                        // 2. Ajouter à la liste déroulante
+                        const opt = document.createElement('option');
+                        opt.value = key;
+                        opt.textContent = val;
+                        selector.appendChild(opt);
                    });
-                } else {
-                    tbody.innerHTML = "<tr><td colspan='2'>Section 'categories' non trouvée. Vérifie la console.</td></tr>";
-                    console.log("Structure du JSON :", data);
                }
            })
            .catch(err => alert("Erreur : " + err));