morgane/EverShelf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
morgane
2026-06-17 17:48:35 +00:00
parent b60994d745
commit 56bc6a709f
1 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test.html
+36 -26
View File
@@ -2,36 +2,35 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>⚡ Debug Catégories - Dashboard</title> <title>⚡ Debug & Modification</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; } .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-ok { color: #4ade80; font-weight: bold; }
.status-err { color: #f87171; font-weight: bold; } .status-err { color: #f87171; font-weight: bold; }
.controls { background: #444; padding: 20px; margin-bottom: 20px; border-radius: 8px; } .card { background: #444; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; background: #333; } input, select { padding: 10px; border-radius: 5px; border: none; margin: 5px 0; width: 100%; }
th, td { border: 1px solid #555; padding: 10px; text-align: left; } button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 5px; cursor: pointer; }
th { background: #444; }
.key { color: #fbbf24; font-weight: bold; }
select { padding: 10px; width: 300px; border-radius: 5px; }
</style> </style>
</head> </head>
<body> <body>
<div class="debug-header" id="debug-panel"> <div class="debug-header" id="debug-panel">
État : <span id="status-text">Tentative de récupération...</span> État : <span id="status-text">Chargement...</span>
</div> </div>
<div class="controls"> <div class="card">
<h3>Choisir une catégorie :</h3> <h3>Modifier le produit</h3>
<input type="text" id="prod-name" placeholder="Nom du produit" value="Jus Ananas">
<select id="category-selector"> <select id="category-selector">
<option value="">-- Sélectionner --</option> <option value="">-- Choisir une catégorie --</option>
</select> </select>
<button onclick="saveProduct()">Enregistrer la modification</button>
</div> </div>
<h1>Table des Catégories (Source: translations/fr.json)</h1> <h1>Table des Catégories</h1>
<table id="cat-table"> <table id="cat-table" style="width:100%; border-collapse: collapse;">
<thead><tr><th>Clé</th><th>Libellé (Français)</th></tr></thead> <thead><tr style="background:#444;"><th>Clé</th><th>Libellé</th></tr></thead>
<tbody></tbody> <tbody></tbody>
</table> </table>
@@ -40,38 +39,49 @@
const debugPanel = document.getElementById('debug-panel'); const debugPanel = document.getElementById('debug-panel');
fetch('translations/fr.json') fetch('translations/fr.json')
.then(res => { .then(res => res.json())
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.getElementById('category-selector');
const catData = data.categories; const catData = data.categories;
if (catData) { if (catData) {
statusText.innerText = "OK - Données chargées avec succès."; statusText.innerText = "OK - Données chargées.";
debugPanel.style.borderLeftColor = "#4ade80"; debugPanel.style.borderLeftColor = "#4ade80";
statusText.className = "status-ok"; statusText.className = "status-ok";
Object.entries(catData).forEach(([key, val]) => { Object.entries(catData).forEach(([key, val]) => {
const row = `<tr><td class="key">${key}</td><td>${val}</td></tr>`; // Remplir tableau
tbody.innerHTML += row; tbody.innerHTML += `<tr><td style="border:1px solid #555; padding:8px;">${key}</td><td style="border:1px solid #555; padding:8px;">${val}</td></tr>`;
// Remplir select
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 => { .catch(err => {
statusText.innerText = "ERREUR : " + err.message; statusText.innerText = "ERREUR : " + err.message;
debugPanel.style.borderLeftColor = "#f87171"; debugPanel.style.borderLeftColor = "#f87171";
statusText.className = "status-err";
}); });
function saveProduct() {
const data = {
name: document.getElementById('prod-name').value,
category: document.getElementById('category-selector').value
};
// Appel API pour la réconciliation
fetch('api/index.php?action=update_product', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
.then(r => r.json())
.then(res => alert("Réponse API : " + JSON.stringify(res)))
.catch(e => alert("Erreur d'envoi : " + e));
}
</script> </script>
</body> </body>
</html> </html>