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 18:00:35 +00:00
parent f7fb4e8f33
commit c2002977cd
1 changed files with 50 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test.html
+50 -68
View File
@@ -2,115 +2,97 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>⚡ Debug & Modification</title> <title>⚡ Debug & Modification Complet</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-err { color: #f87171; font-weight: bold; }
.card { background: #444; padding: 20px; margin-bottom: 20px; border-radius: 8px; } .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; } 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> </style>
</head> </head>
<body> <body>
<div class="debug-header" id="debug-panel"> <div class="debug-header" id="debug-panel">
État : <span id="status-text">Chargement...</span> État : <span id="status-text">Prêt</span>
</div> </div>
<div class="card"> <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">
<label>Sélectionner un produit existant :</label> <button onclick="loadProducts()">Charger la liste des produits</button>
<select id="product-selector" onchange="updateIdField()"> </div>
<option value="">-- Choisir un produit --</option>
</select>
<input type="text" id="prod-id" placeholder="ID du produit (auto-rempli)" readonly style="background:#555;"> <div class="card">
<h3>2. Modifier le produit</h3>
<select id="product-selector" onchange="updateIdField()">
<option value="">-- Sélectionner un produit chargé --</option>
</select>
<input type="text" id="prod-id" placeholder="ID du produit" readonly style="background:#555;">
<input type="text" id="prod-name" placeholder="Nom du produit"> <input type="text" id="prod-name" placeholder="Nom du produit">
<select id="category-selector"> <select id="category-selector">
<option value="">-- Choisir une catégorie --</option> <option value="">-- Choisir une catégorie --</option>
</select> </select>
<button onclick="saveProduct()">Enregistrer la modification</button> <button onclick="saveProduct()">Enregistrer la modification</button>
</div> </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> <script>
const statusText = document.getElementById('status-text'); // Charger les catégories au démarrage
const debugPanel = document.getElementById('debug-panel');
// 1. Chargement des catégories (fr.json)
fetch('translations/fr.json') fetch('translations/fr.json')
.then(res => res.json()) .then(r => r.json())
.then(data => { .then(data => {
const tbody = document.querySelector('#cat-table tbody');
const selector = document.getElementById('category-selector'); const selector = document.getElementById('category-selector');
const catData = data.categories; Object.entries(data.categories || {}).forEach(([key, val]) => {
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');
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())
.then(data => {
const selector = document.getElementById('product-selector');
data.products.forEach(prod => {
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = prod.id; opt.value = key; opt.textContent = val;
opt.setAttribute('data-name', prod.name);
opt.textContent = prod.name;
selector.appendChild(opt); selector.appendChild(opt);
}); });
}); });
// 3. Auto-remplissage // Charger les produits selon l'action saisie
function updateIdField() { function loadProducts() {
const selector = document.getElementById('product-selector'); const action = document.getElementById('api-action').value;
const idField = document.getElementById('prod-id'); fetch('api/index.php?action=' + action)
const nameField = document.getElementById('prod-name'); .then(r => r.json())
idField.value = selector.value; .then(data => {
const selectedOption = selector.options[selector.selectedIndex]; console.log("Données reçues :", data);
nameField.value = selectedOption.getAttribute('data-name') || ''; const selector = document.getElementById('product-selector');
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 = 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.");
}
});
}
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');
} }
// 4. Enregistrement
function saveProduct() { function saveProduct() {
const data = { const data = {
id: document.getElementById('prod-id').value, id: document.getElementById('prod-id').value,
name: document.getElementById('prod-name').value, name: document.getElementById('prod-name').value,
category: document.getElementById('category-selector').value category: document.getElementById('category-selector').value
}; };
fetch('api/index.php?action=product_edit', { fetch('api/index.php?action=product_edit', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data) body: JSON.stringify(data)
}) }).then(r => r.json()).then(res => alert(JSON.stringify(res)));
.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));
} }
</script> </script>
</body> </body>