<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- Définit le type de contenu et l'encodage pour la page JSP -->

<html>
<head>
    <title>Liste des Couleurs</title>
    <!-- Titre de la page, affiché dans l'onglet du navigateur -->
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <!-- Lien vers un fichier CSS externe pour styliser la page -->
    <!-- Inclure les fichiers CSS/JS si nécessaire -->
    <!-- Commentaire pour rappeler d'inclure d'autres fichiers CSS ou JS si nécessaire -->
    <!-- http://localhost:8080/demo/webapps/jsp/CouleurListForm.jsp -->
    <!-- URL pour accéder à cette page JSP -->
</head>
<body>
    <!-- Inclure le menu -->
    <jsp:include page="menu.jsp" />
    <!-- Inclut le contenu d'un autre fichier JSP (menu) pour la réutilisation du code -->

    <h1>Liste des Couleurs</h1>
    <!-- Titre principal de la page -->
    <form id="deleteCouleurForm">
        <!-- Formulaire pour la suppression des couleurs -->
        <table>
            <!-- Table pour afficher les couleurs -->
            <tr>
                <!-- Ligne d'en-tête de la table -->
                <th>ID</th>
                <th>Nom</th>
                <th>Hexadecimal RVB</th>
                <th>Supprimer</th>
                <th>Modifier</th>
            </tr>
            <!-- Les lignes de la table seront remplis par un script JavaScript -->
            <!-- Ceci est un commentaire indiquant que les données seront ajoutées dynamiquement -->
        </table>
        <input type="submit" value="Supprimer les couleurs sélectionnées">
        <!-- Bouton pour soumettre le formulaire de suppression -->
    </form>

    <script>
        window.onload = function() {
            <!-- Exécuté lorsque la page est complètement chargée -->
            fetch('http://localhost:8080/couleur')
                <!-- Requête AJAX pour obtenir la liste des couleurs -->
                .then(response => response.json())
                <!-- Convertit la réponse en JSON -->
                .then(data => {
                    <!-- Traite les données JSON -->
                    var table = document.querySelector('#deleteCouleurForm table');
                    <!-- Sélectionne la table dans le formulaire -->
                    data.forEach(function(couleur) {
                        <!-- Itère sur chaque couleur reçue -->
                        var row = table.insertRow();
                        <!-- Insère une nouvelle ligne dans la table -->
                        row.insertCell().textContent = couleur.id;
                        row.insertCell().textContent = couleur.nom;
                        row.insertCell().textContent = couleur.hexadecimal_rvb;
                        <!-- Remplit les cellules de la ligne avec les données de la couleur -->

                        // Ajouter une checkbox pour la suppression
                        var deleteCell = row.insertCell();
                        <!-- Ajoute une cellule pour la case à cocher de suppression -->
                        var checkbox = document.createElement('input');
                        <!-- Crée une case à cocher -->
                        checkbox.type = 'checkbox';
                        checkbox.name = 'delete';
                        checkbox.value = couleur.id;
                        deleteCell.appendChild(checkbox);
                        <!-- Ajoute la case à cocher à la cellule -->

                        // Ajouter un bouton pour la modification
                        var modifyCell = row.insertCell();
                        <!-- Ajoute une cellule pour le bouton de modification -->
                        var modifyButton = document.createElement('button');
                        <!-- Crée un bouton -->
                        modifyButton.textContent = 'Modifier';
                        modifyButton.onclick = function() {
                            event.preventDefault(); // Empêcher la soumission du formulaire
                            window.location.href = 'CouleurUpdateForm.jsp?id=' + couleur.id;
                            <!-- Redirige vers le formulaire de modification pour la couleur sélectionnée -->
                        };
                        modifyCell.appendChild(modifyButton);
                        <!-- Ajoute le bouton à la cellule -->
                    });
                })
                .catch(error => console.error('Error:', error));
                <!-- Gère les erreurs éventuelles -->

        };

        document.getElementById('deleteCouleurForm').addEventListener('submit', function(event) {
            event.preventDefault();
            <!-- Empêche le comportement par défaut du formulaire lors de la soumission -->

            var checkboxes = document.querySelectorAll('input[name="delete"]:checked');
            <!-- Sélectionne toutes les cases à cocher cochées -->
            if (checkboxes.length === 0) {
                alert("Aucune couleur n'est sélectionnée pour la suppression.");
                return;
                <!-- Affiche un message si aucune couleur n'est sélectionnée -->
            }
            // Afficher un popup de confirmation
            var userConfirmed = confirm("Êtes-vous sûr de vouloir supprimer les couleurs sélectionnées ?");
            if (!userConfirmed) {
                return; // Arrêter si l'utilisateur n'a pas confirmé
            }
            
                     
            var idsToDelete = Array.from(checkboxes).map(cb => cb.value);
            <!-- Crée un tableau des ID à supprimer -->

            idsToDelete.forEach(function(id) {
                fetch('http://localhost:8080/couleur', {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ id: parseInt(id) })
                    <!-- Envoie une requête DELETE pour chaque couleur sélectionnée -->
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok: ' + response.statusText);
                    }
                    return response.json();
                    <!-- Traite la réponse du serveur -->
                })
                .then(data => {
                    console.log('Couleur supprimée:', data);
                    // Vous pouvez ici actualiser la page ou supprimer la ligne correspondante du tableau
                     window.location.reload(); // Recharger la page
                     <!-- Recharge la page pour mettre à jour la liste des couleurs -->
                })
                .catch(error => {
                    console.error('Error:', error);
                    <!-- Gère les erreurs -->
                });
            });
        });
    </script>
</body>
</html>

 

Ce fichier JSP, "CouleurListForm.jsp", est conçu pour afficher une liste des couleurs disponibles dans une table HTML. Il permet aux utilisateurs de sélectionner une ou plusieurs couleurs pour les supprimer ou les modifier. Le fichier utilise JavaScript pour interagir avec le serveur via des requêtes AJAX, gérer la liste des couleurs, et traiter les actions de suppression et de modification.

Ce fichier montre comment implémenter plusieurs requête AJAX (fetch) dans la même page jsp.

 

Modifié le: jeudi 23 novembre 2023, 03:41