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 20:44:36 +00:00
parent 32da374e57
commit 6cba7132d5
1 changed files with 71 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test.html
+70 -29
View File
@@ -2,63 +2,104 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>EverShelf - Liste des Produits</title> <title>EverShelf - Réconciliation Totale</title>
<style> <style>
body { font-family: sans-serif; background: #121212; color: #e0e0e0; padding: 20px; } body { font-family: sans-serif; background: #121212; color: #e0e0e0; padding: 20px; }
.card { background: #1e1e1e; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 20px; }
select, button { padding: 10px; border-radius: 4px; border: none; cursor: pointer; }
button { background: #1976d2; color: white; font-weight: bold; }
table { width: 100%; border-collapse: collapse; background: #1e1e1e; margin-top: 20px; } table { width: 100%; border-collapse: collapse; background: #1e1e1e; margin-top: 20px; }
th, td { border: 1px solid #333; padding: 12px; text-align: left; } th, td { border: 1px solid #333; padding: 12px; text-align: left; }
th { background: #252525; color: #1976d2; } th { background: #252525; color: #1976d2; }
tr:hover { background: #2a2a2a; }
.loading { color: #ff9800; }
</style> </style>
</head> </head>
<body> <body>
<h2>Inventaire des produits</h2> <div class="card">
<div id="status" class="loading">Chargement des données...</div> <h3>Modification en masse</h3>
<select id="cat-mass"><option value="">-- Choisir nouvelle catégorie --</option></select>
<button id="save-btn" onclick="applyToSelected()">APPLIQUER AUX COCHÉS</button>
</div>
<table id="prod-table"> <table id="prod-table">
<thead> <thead>
<tr> <tr>
<th><input type="checkbox" onclick="toggleAll(this)"></th>
<th>Produit</th> <th>Produit</th>
<th>Catégorie</th> <th>Catégorie</th>
<th>Emplacement</th> <th>Emplacement</th>
<th>Stock/Quantité</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
</table> </table>
<script> <script>
async function fetchProducts() { let fullProductList = [];
async function init() {
try { try {
// Appel à l'API // 1. Chargement des données
const res = await fetch('api/index.php?action=products_list'); const [transRes, prodsRes] = await Promise.all([
const data = await res.json(); fetch('translations/fr.json').then(r => r.json()),
fetch('api/index.php?action=products_list').then(r => r.json())
]);
// Extraction de la liste (s'adapte à la structure retournée) // 2. Peupler le menu déroulant
const products = data.inventory || data.products || data; const cats = transRes.categories || {};
const tbody = document.querySelector('#prod-table tbody'); const sel = document.getElementById('cat-mass');
Object.entries(cats).forEach(([id, name]) => {
tbody.innerHTML = ""; sel.innerHTML += `<option value="${id}">${name}</option>`;
products.forEach(p => {
let row = document.createElement('tr');
row.innerHTML = `
<td>${p.name || '---'}</td>
<td>${p.category || 'Non classé'}</td>
<td>${p.location || 'N/A'}</td>
<td>${p.quantity !== undefined ? p.quantity : '---'}</td>
`;
tbody.appendChild(row);
}); });
document.getElementById('status').textContent = "Données chargées."; // 3. Remplir le tableau
} catch (e) { fullProductList = prodsRes.inventory || prodsRes.products || prodsRes;
document.getElementById('status').textContent = "Erreur de chargement : " + e.message; const tbody = document.querySelector('#prod-table tbody');
} fullProductList.forEach((p, idx) => {
tbody.innerHTML += `<tr>
<td><input type="checkbox" class="prod-check" data-index="${idx}"></td>
<td>${p.name}</td>
<td>${cats[p.category] || p.category || 'Non classé'}</td>
<td>${p.location || 'N/A'}</td>
</tr>`;
});
} catch (e) { alert("Erreur : " + e.message); }
} }
fetchProducts(); function toggleAll(el) {
document.querySelectorAll('.prod-check').forEach(c => c.checked = el.checked);
}
async function applyToSelected() {
const cat = document.getElementById('cat-mass').value;
const checks = document.querySelectorAll('.prod-check:checked');
if(!cat || checks.length === 0) return alert("Choisis une catégorie et des produits !");
const btn = document.getElementById('save-btn');
btn.disabled = true;
for (let c of checks) {
let p = { ...fullProductList[c.dataset.index] };
p.category = cat;
let fd = new FormData();
for (let k in p) fd.append(k, p[k]);
try {
// Envoi sans en-tête superflu pour laisser le navigateur gérer la session
const res = await fetch('api/index.php?action=product_save', {
method: 'POST',
body: fd
});
if (!res.ok) console.error("Échec sur " + p.name);
} catch(e) { console.error(e); }
await new Promise(r => setTimeout(r, 300));
}
alert("Opération terminée.");
location.reload();
}
init();
</script> </script>
</body> </body>
</html> </html>