Actualiser test.html

2026-06-17 20:44:36 +00:00
parent 32da374e57
commit 6cba7132d5
1 changed files with 71 additions and 30 deletions
@@ -2,63 +2,104 @@
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
-    <title>EverShelf - Liste des Produits</title>
+    <title>EverShelf - Réconciliation Totale</title>
    <style>
        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; }
        th, td { border: 1px solid #333; padding: 12px; text-align: left; }
        th { background: #252525; color: #1976d2; }
-        tr:hover { background: #2a2a2a; }
-        .loading { color: #ff9800; }
    </style>
 </head>
 <body>

-    <h2>Inventaire des produits</h2>
-    <div id="status" class="loading">Chargement des données...</div>
+    <div class="card">
+        <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">
        <thead>
            <tr>
+                <th><input type="checkbox" onclick="toggleAll(this)"></th>
                <th>Produit</th>
                <th>Catégorie</th>
                <th>Emplacement</th>
-                <th>Stock/Quantité</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
-        async function fetchProducts() {
+        let fullProductList = [];
+
+        async function init() {
            try {
-                // Appel à l'API
-                const res = await fetch('api/index.php?action=products_list');
-                const data = await res.json();
+                // 1. Chargement des données
+                const [transRes, prodsRes] = await Promise.all([
+                    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)
-                const products = data.inventory || data.products || data;
-                const tbody = document.querySelector('#prod-table tbody');
-                
-                tbody.innerHTML = "";
-                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);
+                // 2. Peupler le menu déroulant
+                const cats = transRes.categories || {};
+                const sel = document.getElementById('cat-mass');
+                Object.entries(cats).forEach(([id, name]) => {
+                    sel.innerHTML += `<option value="${id}">${name}</option>`;
                });

-                document.getElementById('status').textContent = "Données chargées.";
-            } catch (e) {
-                document.getElementById('status').textContent = "Erreur de chargement : " + e.message;
-            }
+                // 3. Remplir le tableau
+                fullProductList = prodsRes.inventory || prodsRes.products || prodsRes;
+                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>
 </body>
 </html>