Pour cet exercice, nous allons ajouter un bouton "Modifier" à chaque aliment et créer un formulaire de modification qui apparaît lorsque l'utilisateur clique sur ce bouton. Voici comment vous pouvez le faire :

HTML

Ajoutez un formulaire de modification dans votre fichier HTML :

<div id="edit-form" style="display: none;">
    <h2>Modifier l'aliment</h2>
    <form id="edit-food-form">
        <input type="hidden" id="edit-food-id">
        <input type="text" id="edit-food-name" placeholder="Nom de l'aliment" required>
        <input type="text" id="edit-food-type" placeholder="Type de l'aliment" required>
        <input type="text" id="edit-food-emoji" placeholder="Emoji de l'aliment" required>
        <button type="submit">Enregistrer les modifications</button>
    </form>
</div>
 

Pour intégrer la fonctionnalité de mise à jour 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. Ajout des écouteurs d'événements pour les boutons "Modifier" :

    Dans la fonction fetchFoods, ajoutez un écouteur d'événements pour chaque bouton "Modifier" afin d'ouvrir le formulaire de modification avec les données de l'aliment sélectionné.

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="edit-btn" data-food='${JSON.stringify(food)}'>Modifier</button>
            `;
            foodsList.appendChild(foodItem);
        });

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

  1. Fonction pour ouvrir le formulaire de modification :

    Assurez-vous que la fonction openEditForm remplit correctement le formulaire avec les données de l'aliment sélectionné.

function openEditForm(food) {
    document.getElementById('edit-food-id').value = food.id;
    document.getElementById('edit-food-name').value = food.name;
    document.getElementById('edit-food-type').value = food.type;
    document.getElementById('edit-food-emoji').value = food.emoji;
    document.getElementById('edit-form').style.display = 'block';
}

  1. Fonction pour envoyer les modifications à l'API :

    Assurez-vous que la fonction updateFood envoie correctement les modifications à l'API.

async function updateFood(event) {
    event.preventDefault();
    const id = document.getElementById('edit-food-id').value;
    const name = document.getElementById('edit-food-name').value;
    const type = document.getElementById('edit-food-type').value;
    const emoji = document.getElementById('edit-food-emoji').value;

    try {
        const response = await fetch(`http://localhost/Food/back/foods/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ name, type, emoji }),
        });

        if (response.ok) {
            fetchFoods(); // Rafraîchir la liste des aliments
            document.getElementById('edit-form').style.display = 'none'; // Masquer le formulaire après la mise à jour
        } else {
            console.error('Erreur lors de la mise à jour de l\'aliment');
        }
    } catch (error) {
        console.error('Erreur lors de la mise à jour:', error);
    }
}

  1. Écouteur d'événement pour le formulaire de modification :

    Ajoutez un écouteur d'événement pour le formulaire de modification afin de gérer l'envoi des modifications.

document.getElementById('edit-food-form').addEventListener('submit', updateFood);

Modifications du CSS

Ajoutez un style pour le formulaire de modification afin de le rendre visuellement attrayant :

#edit-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

#edit-food-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#edit-food-form input, #edit-food-form button {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#edit-food-form button {
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
}

#edit-food-form button:hover {
    background-color: #218838;
}

Explications

  • Bouton "Modifier" : Chaque aliment dans la liste a un bouton "Modifier" qui, lorsqu'il est cliqué, ouvre le formulaire de modification avec les données de l'aliment sélectionné.

  • Formulaire de modification : Le formulaire est pré-rempli avec les données de l'aliment sélectionné et apparaît lorsque l'utilisateur clique sur le bouton "Modifier".

  • Envoi des modifications : Lorsque le formulaire est soumis, la fonction updateFood est appelée pour envoyer une requête PUT à l'API et mettre à jour les informations de l'aliment. Si la requête est réussie, la liste des aliments est rafraîchie et le formulaire est masqué.

Ces modifications permettent d'ajouter un bouton "Modifier" à chaque aliment affiché et de gérer la mise à jour des informations de l'aliment via un formulaire de modification. Le style CSS est ajouté pour rendre le formulaire visuellement attrayant.

Modifié le: dimanche 8 juin 2025, 02:54