Pour intégrer la fonctionnalité de suppression des aliments dans votre application front-end, voici les modifications spécifiques à apporter au code existant, en tenant compte des ajustements nécessaires pour s'assurer que tout fonctionne correctement :

Modifications du JavaScript

  1. Ajoutez une fonction pour supprimer un aliment :

    Cette fonction envoie une requête DELETE à l'API pour supprimer l'aliment avec l'ID spécifié. Si la suppression est réussie, la liste des aliments est rafraîchie.

async function deleteFood(id) {
    if (confirm('Êtes-vous sûr de vouloir supprimer cet aliment ?')) {
        try {
            const response = await fetch(`http://localhost/Food/back/foods/${id}`, {
                method: 'DELETE'
            });

            if (response.ok) {
                fetchFoods(); // Rafraîchir la liste des aliments
            } else {
                console.error('Erreur lors de la suppression de l\'aliment');
            }
        } catch (error) {
            console.error('Erreur lors de la suppression:', error);
        }
    }
}
 

  1. Modifiez la fonction fetchFoods pour inclure un bouton "Supprimer" :

    Ajoutez un bouton "Supprimer" à chaque aliment affiché. Ce bouton appelle la fonction deleteFood avec l'ID de l'aliment.

async function fetchFoods() {
    try {
        const response = await fetch('http://localhost/Food/back/foods');
        const foods = await response.json();
        foodsList.innerHTML = '';
        foods.forEach(food => {
            const foodItem = document.createElement('div');
            foodItem.className = 'food-item';
            foodItem.innerHTML = `
                <p>${food.emoji}</p>
                <p>${food.name}</p>
                <p>${food.type}</p>
                <button class="delete-btn" data-id="${food.id}">Supprimer</button>
            `;
            foodsList.appendChild(foodItem);
        });

        // Ajoutez les écouteurs d'événements pour les boutons "Supprimer"
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                deleteFood(id);
            });
        });
    } catch (error) {
        console.error('Erreur lors de la récupération des aliments:', error);
    }
}
 

Modifications du CSS

Ajoutez un style pour le bouton "Supprimer" afin de le rendre visuellement distinct :

.food-item button {
    background-color: #ff4444;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.food-item button:hover {
    background-color: #cc0000;
}
 

Explications

  • Bouton "Supprimer" : Chaque aliment dans la liste a un bouton "Supprimer" qui, lorsqu'il est cliqué, appelle la fonction deleteFood avec l'ID de l'aliment.

  • Fonction deleteFood : Cette fonction envoie une requête DELETE à l'API pour supprimer l'aliment. Si la suppression est réussie, la liste des aliments est rafraîchie pour refléter les changements.

  • Confirmation de suppression : Une boîte de dialogue de confirmation apparaît pour demander à l'utilisateur de confirmer la suppression avant d'envoyer la requête DELETE.

Ces modifications permettent d'ajouter un bouton "Supprimer" à chaque aliment affiché et de gérer la suppression via une requête à votre API. Le style CSS est ajouté pour rendre le bouton visuellement distinct.

Last modified: Sunday, 8 June 2025, 2:58 AM