Actualiser test.html
CI / PHP Syntax Check (push) Has been cancelled
CI / JavaScript Lint (push) Has been cancelled
CI / Docker Build Test (push) Has been cancelled
CI / Validate Translation Files (push) Has been cancelled
CI / Auto-merge develop → main (push) Has been cancelled
CI / Create GitHub Release (push) Has been cancelled

This commit is contained in:
2026-06-17 17:45:21 +00:00
parent 6e86c19262
commit b60994d745
+26 -5
View File
@@ -2,9 +2,12 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>⚡ Debug Catégories - Final</title> <title>⚡ Debug Catégories - Dashboard</title>
<style> <style>
body { font-family: sans-serif; background: #222; color: #eee; padding: 20px; } 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; }
.controls { background: #444; padding: 20px; margin-bottom: 20px; border-radius: 8px; } .controls { background: #444; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; background: #333; } table { width: 100%; border-collapse: collapse; background: #333; }
th, td { border: 1px solid #555; padding: 10px; text-align: left; } th, td { border: 1px solid #555; padding: 10px; text-align: left; }
@@ -15,6 +18,10 @@
</head> </head>
<body> <body>
<div class="debug-header" id="debug-panel">
État : <span id="status-text">Tentative de récupération...</span>
</div>
<div class="controls"> <div class="controls">
<h3>Choisir une catégorie :</h3> <h3>Choisir une catégorie :</h3>
<select id="category-selector"> <select id="category-selector">
@@ -29,28 +36,42 @@
</table> </table>
<script> <script>
const statusText = document.getElementById('status-text');
const debugPanel = document.getElementById('debug-panel');
fetch('translations/fr.json') fetch('translations/fr.json')
.then(res => res.json()) .then(res => {
if (!res.ok) throw new Error("Fichier introuvable (" + res.status + ")");
return res.json();
})
.then(data => { .then(data => {
const tbody = document.querySelector('#cat-table tbody'); const tbody = document.querySelector('#cat-table tbody');
const selector = document.querySelector('#category-selector'); const selector = document.querySelector('#category-selector');
const catData = data.categories; const catData = data.categories;
if (catData) { if (catData) {
statusText.innerText = "OK - Données chargées avec succès.";
debugPanel.style.borderLeftColor = "#4ade80";
statusText.className = "status-ok";
Object.entries(catData).forEach(([key, val]) => { Object.entries(catData).forEach(([key, val]) => {
// 1. Ajouter au tableau
const row = `<tr><td class="key">${key}</td><td>${val}</td></tr>`; const row = `<tr><td class="key">${key}</td><td>${val}</td></tr>`;
tbody.innerHTML += row; tbody.innerHTML += row;
// 2. Ajouter à la liste déroulante
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = key; opt.value = key;
opt.textContent = val; opt.textContent = val;
selector.appendChild(opt); selector.appendChild(opt);
}); });
} else {
throw new Error("Structure JSON invalide (section 'categories' manquante)");
} }
}) })
.catch(err => alert("Erreur : " + err)); .catch(err => {
statusText.innerText = "ERREUR : " + err.message;
debugPanel.style.borderLeftColor = "#f87171";
statusText.className = "status-err";
});
</script> </script>
</body> </body>
</html> </html>