morgane
56bc6a709f
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
87 lines
3.6 KiB
HTML
87 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>⚡ Debug & Modification</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%; }
|
|
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>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Modifier le produit</h3>
|
|
<input type="text" id="prod-name" placeholder="Nom du produit" value="Jus Ananas">
|
|
<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>Clé</th><th>Libellé</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
|
|
<script>
|
|
const statusText = document.getElementById('status-text');
|
|
const debugPanel = document.getElementById('debug-panel');
|
|
|
|
fetch('translations/fr.json')
|
|
.then(res => res.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]) => {
|
|
// Remplir tableau
|
|
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');
|
|
opt.value = key;
|
|
opt.textContent = val;
|
|
selector.appendChild(opt);
|
|
});
|
|
}
|
|
})
|
|
.catch(err => {
|
|
statusText.innerText = "ERREUR : " + err.message;
|
|
debugPanel.style.borderLeftColor = "#f87171";
|
|
});
|
|
|
|
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>
|
|
</body>
|
|
</html> |