Supprimer reconcile.html

2026-06-17 19:19:27 +00:00
parent 477139d47c
commit b12cd76acc
1 changed files with 0 additions and 123 deletions
@@ -1,123 +0,0 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EverShelf - Réconciliation</title>
    <style>
        :root { --bg: #111827; --card: #1f2937; --text: #f3f4f6; --accent: #3b82f6; }
        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; }
        /* Formulaire de modification (fixé en haut) */
        .edit-zone { 
            position: sticky; top: 0; background: var(--card); padding: 20px; 
            border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); z-index: 100;
            display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; margin-bottom: 30px;
        }
        /* Grille de produits */
        .inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
        .product-card { 
            background: var(--card); padding: 15px; border-radius: 8px; cursor: pointer;
            border: 1px solid #374151; transition: 0.2s;
        }
        .product-card:hover { border-color: var(--accent); transform: translateY(-2px); }
        .product-card h4 { margin: 0 0 10px 0; font-size: 14px; }
        .badge { background: #374151; padding: 3px 8px; border-radius: 4px; font-size: 11px; color: #9ca3af; }
        input, select { background: #374151; color: white; border: 1px solid #4b5563; padding: 10px; border-radius: 6px; }
        button { background: var(--accent); color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; }
        button:hover { background: #2563eb; }
        .status { font-size: 12px; margin-top: 5px; color: #10b981; }
    </style>
 </head>
 <body>
    <div class="edit-zone">
        <input type="hidden" id="edit-id">
        <input type="text" id="edit-name" placeholder="Nom du produit">
        <select id="edit-category">
            <option value="">-- Catégorie --</option>
        </select>
        <button onclick="saveChanges()">ENREGISTRER</button>
        <div id="save-status" class="status" style="grid-column: span 4; display:none;">Modification enregistrée !</div>
    </div>
    <div id="loader" style="text-align:center;">Chargement de l'inventaire...</div>
    <div class="inventory-grid" id="inventory"></div>
    <script>
        let categories = {};
        // 1. Charger les catégories FR
        fetch('translations/fr.json')
            .then(r => r.json())
            .then(data => {
                categories = data.categories;
                const sel = document.getElementById('edit-category');
                Object.entries(categories).forEach(([key, val]) => {
                    const opt = document.createElement('option');
                    opt.value = key; opt.textContent = val;
                    sel.appendChild(opt);
                });
                loadInventory(); // Charger les produits après les catégories
            });
        // 2. Charger les produits via app_bootstrap
        function loadInventory() {
            fetch('api/index.php?action=app_bootstrap')
                .then(r => r.json())
                .then(data => {
                    document.getElementById('loader').style.display = 'none';
                    const container = document.getElementById('inventory');
                    // Dans app_bootstrap, les produits sont souvent dans data.inventory ou data.products
                    const products = data.inventory || data.products || [];
                    container.innerHTML = "";
                    products.forEach(p => {
                        const card = document.createElement('div');
                        card.className = 'product-card';
                        const catLabel = categories[p.category] || p.category;
                        card.innerHTML = `
                            <h4>${p.name}</h4>
                            <span class="badge">${catLabel}</span>
                        `;
                        card.onclick = () => prepareEdit(p);
                        container.appendChild(card);
                    });
                });
        }
        // 3. Remplir le formulaire au clic
        function prepareEdit(p) {
            document.getElementById('edit-id').value = p.id;
            document.getElementById('edit-name').value = p.name;
            document.getElementById('edit-category').value = p.category;
            window.scrollTo({top: 0, behavior: 'smooth'});
        }
        // 4. Sauvegarder
        function saveChanges() {
            const data = {
                id: document.getElementById('edit-id').value,
                name: document.getElementById('edit-name').value,
                category: document.getElementById('edit-category').value
            };
            fetch('api/index.php?action=product_edit', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
            })
            .then(r => r.json())
            .then(res => {
                const st = document.getElementById('save-status');
                st.style.display = 'block';
                setTimeout(() => st.style.display = 'none', 3000);
                loadInventory(); // Recharger pour voir le changement
            });
        }
    </script>
 </body>
 </html>