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
+65 -32
View File
@@ -1,43 +1,76 @@
<!DOCTYPE html> <!DOCTYPE html>
<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> <body>
<select id="sel" onchange="fill()"><option value="">-- Choisir un produit --</option></select>
<input id="id" readonly placeholder="ID"> <div class="card">
<select id="cat-sel"><option value="">-- Choisir une catégorie --</option></select> <h3>Modification de produit</h3>
<button onclick="save()">SAVE</button> <select id="sel" onchange="fill()"><option value="">-- Choisir un produit --</option></select>
<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> <script>
let fullProductList = []; let fullProductList = [];
let categories = {}; let categories = {};
// 1. Charger les catégories en français // 1. Initialisation : Chargement des catégories et des produits
fetch('translations/fr.json') Promise.all([
.then(r => r.json()) fetch('translations/fr.json').then(r => r.json()),
.then(data => { fetch('api/index.php?action=products_list').then(r => r.json())
categories = data.categories || {}; ]).then(([trans, prods]) => {
const catSel = document.getElementById('cat-sel'); categories = trans.categories || {};
Object.entries(categories).forEach(([key, val]) => { fullProductList = prods.inventory || prods.products || prods;
let opt = document.createElement('option');
opt.value = key; opt.textContent = val; // Remplir le select de modif
catSel.appendChild(opt); 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 fullProductList.forEach((p, index) => {
fetch('api/index.php?action=products_list') let opt = document.createElement('option');
.then(r => r.json()) opt.value = index;
.then(data => { opt.textContent = p.name;
fullProductList = data.inventory || data.products || data; sel.appendChild(opt);
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() { function fill() {
let s = document.getElementById('sel'); let s = document.getElementById('sel');
let p = fullProductList[s.value]; let p = fullProductList[s.value];
@@ -48,16 +81,16 @@
function save() { function save() {
let s = document.getElementById('sel'); let s = document.getElementById('sel');
let p = fullProductList[s.value]; 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; p.category = document.getElementById('cat-sel').value;
fetch('api/index.php?action=product_save', { fetch('api/index.php?action=product_save', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(p) body: JSON.stringify(p)
}) }).then(() => {
.then(r => r.json()) renderTable(); // Rafraîchit le tableau immédiatement
.then(res => alert("Réponse serveur : " + JSON.stringify(res))); alert("Modifié avec succès !");
});
} }
</script> </script>
</body> </body>