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 19:33:41 +00:00
parent a02abce26e
commit 11886578ab
1 changed files with 65 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test.html
+53 -20
View File
@@ -1,43 +1,76 @@
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<head>
<meta charset="UTF-8">
<style>
body { font-family: sans-serif; background: #222; color: #eee; padding: 20px; }
.card { background: #444; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
input, select { padding: 8px; border-radius: 4px; border: 1px solid #666; margin-right: 5px; }
table { width: 100%; border-collapse: collapse; background: #333; margin-top: 20px; }
th, td { border: 1px solid #555; padding: 10px; text-align: left; }
th { background: #444; }
</style>
</head>
<body>
<div class="card">
<h3>Modification de produit</h3>
<select id="sel" onchange="fill()"><option value="">-- Choisir un produit --</option></select>
<input id="id" readonly placeholder="ID">
<select id="cat-sel"><option value="">-- Choisir une catégorie --</option></select>
<button onclick="save()">SAVE</button>
<input id="id" readonly placeholder="ID" style="width: 50px;">
<select id="cat-sel"><option value="">-- Catégorie --</option></select>
<button onclick="save()">ENREGISTRER</button>
</div>
<table id="prod-table">
<thead><tr><th>Produit</th><th>Catégorie</th><th>Emplacement</th></tr></thead>
<tbody></tbody>
</table>
<script>
let fullProductList = [];
let categories = {};
// 1. Charger les catégories en français
fetch('translations/fr.json')
.then(r => r.json())
.then(data => {
categories = data.categories || {};
// 1. Initialisation : Chargement des catégories et des produits
Promise.all([
fetch('translations/fr.json').then(r => r.json()),
fetch('api/index.php?action=products_list').then(r => r.json())
]).then(([trans, prods]) => {
categories = trans.categories || {};
fullProductList = prods.inventory || prods.products || prods;
// Remplir le select de modif
const sel = document.getElementById('sel');
const catSel = document.getElementById('cat-sel');
Object.entries(categories).forEach(([key, val]) => {
let opt = document.createElement('option');
opt.value = key; opt.textContent = val;
catSel.appendChild(opt);
});
});
// 2. Charger les produits
fetch('api/index.php?action=products_list')
.then(r => r.json())
.then(data => {
fullProductList = data.inventory || data.products || data;
const sel = document.getElementById('sel');
fullProductList.forEach((p, index) => {
let opt = document.createElement('option');
opt.value = index;
opt.textContent = p.name;
sel.appendChild(opt);
});
renderTable();
});
function renderTable() {
const tbody = document.querySelector('#prod-table tbody');
tbody.innerHTML = "";
fullProductList.forEach(p => {
let row = `<tr>
<td>${p.name}</td>
<td>${categories[p.category] || p.category}</td>
<td>${p.location || 'N/A'}</td>
</tr>`;
tbody.innerHTML += row;
});
}
function fill() {
let s = document.getElementById('sel');
let p = fullProductList[s.value];
@@ -48,16 +81,16 @@
function save() {
let s = document.getElementById('sel');
let p = fullProductList[s.value];
// On met à jour avec la clé sélectionnée dans le menu déroulant
p.category = document.getElementById('cat-sel').value;
fetch('api/index.php?action=product_save', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(p)
})
.then(r => r.json())
.then(res => alert("Réponse serveur : " + JSON.stringify(res)));
}).then(() => {
renderTable(); // Rafraîchit le tableau immédiatement
alert("Modifié avec succès !");
});
}
</script>
</body>