Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
Json
:
burndown_005.php
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gestion des Tâches</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <h1>Gestion des Tâches</h1> <table id="dataTable" class="table"> <thead> <tr> <th scope="col">Indice</th> <th scope="col">Nom de la tâche</th> <th scope="col">Temps estimé</th> <th scope="col">Actions</th> </tr> </thead> <tbody id="taskTableBody"> <!-- Les tâches seront ajoutées ici --> </tbody> </table> <!-- Boutons pour ajouter, sauvegarder et charger --> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addTaskModal" id="addButton">Ajouter une tâche</button> <button id="saveButton" class="btn btn-success">Sauver</button> <button id="loadButton" class="btn btn-info">Charger</button> <!-- Modale d'ajout de tâche --> <div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="addTaskModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="addTaskModalLabel">Ajouter une tâche</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="taskName">Nom de la tâche :</label> <input type="text" class="form-control" id="taskName" required> </div> <div class="form-group"> <label for="estimatedTime">Temps estimé (en heures) :</label> <input type="number" class="form-control" id="estimatedTime" min="1" step="1" required> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button> <button type="button" class="btn btn-primary" id="addTaskButton">Ajouter</button> </div> </div> </div> </div> <!-- Modale d'édition de tâche --> <div class="modal fade" id="editTaskModal" tabindex="-1" role="dialog" aria-labelledby="editTaskModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="editTaskModalLabel">Modifier la tâche</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="editTaskName">Nom de la tâche :</label> <input type="text" class="form-control" id="editTaskName" required> </div> <div class="form-group"> <label for="editEstimatedTime">Temps estimé (en heures) :</label> <input type="number" class="form-control" id="editEstimatedTime" min="1" step="1" required> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button> <button type="button" class="btn btn-primary" id="editTaskButton">Modifier</button> </div> </div> </div> </div> <!-- Modale de confirmation de suppression --> <div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Confirmer la suppression</h5> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p>Êtes-vous sûr de vouloir supprimer cette tâche ?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button> <button type="button" class="btn btn-danger" id="confirmDeleteButton">Supprimer</button> </div> </div> </div> </div> <!-- Modale pour les champs manquants --> <div class="modal fade" id="missingFieldsModal" tabindex="-1" role="dialog" aria-labelledby="missingFieldsModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="missingFieldsModalLabel">Champs manquants</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Tous les champs sont nécessaires pour ajouter ou modifier une tâche. Veuillez remplir les champs manquants.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button> </div> </div> </div> </div> <!-- Modale pour les valeurs invalides --> <div class="modal fade" id="invalidValueModal" tabindex="-1" role="dialog" aria-labelledby="invalidValueModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="invalidValueModalLabel">Valeur invalide</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Le temps estimé doit être supérieur à zéro.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button> </div> </div> </div> </div> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script> <script> // Fonction pour afficher la modale en cas de champs manquants function showMissingFieldsModal() { $("#missingFieldsModal").modal("show"); } // Fonction pour afficher la modale en cas de valeur invalide function showInvalidValueModal() { $("#invalidValueModal").modal("show"); } $(document).ready(function () { let nextIndex = 1; $("#saveButton").click(function () { let table = document.getElementById("dataTable"); let data = []; // Parcourir les lignes en ignorant la première ligne (header) for (let i = 1; i < table.rows.length; i++) { let row = []; let cells = table.rows[i].cells; // Inclure toutes les cellules sauf la dernière (actions) for (let j = 0; j < cells.length - 1; j++) { row.push(cells[j].innerText); } data.push(row); } fetch('save.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }).then(response => response.text()).then(data => { alert("Données sauvegardées !"); }); }); $("#loadButton").click(function () { fetch("load.php") .then(response => { if (!response.ok) { throw new Error("Erreur réseau : " + response.status); } return response.json(); }) .then(data => { console.log("Données reçues :", data); $("#taskTableBody").empty(); // Vider le tableau avant de le remplir data.forEach(task => { var newRow = `<tr> <td>${task[0]}</td> <td>${task[1]}</td> <td>${task[2]}</td> <td> <button class="btn btn-warning btn-sm edit-btn">Modifier</button> <button class="btn btn-danger btn-sm delete-btn">Supprimer</button> </td> </tr>`; $("#taskTableBody").append(newRow); }); // Mettre à jour nextIndex en fonction des données chargées nextIndex = data.length > 0 ? parseInt(data[data.length - 1][0]) + 1 : 1; }) .catch(error => { console.error("Erreur lors du chargement des données :", error); }); }); $("#addTaskButton").click(function () { // Récupérer les valeurs des champs du formulaire var taskName = $("#taskName").val().trim(); var estimatedTime = $("#estimatedTime").val().trim(); // Vérifier que les champs ne sont pas vides if (taskName === "" || estimatedTime === "") { showMissingFieldsModal(); return; } // Vérifier que le temps estimé est supérieur à zéro if (estimatedTime <= 0) { showInvalidValueModal(); return; } // Ajouter une nouvelle ligne dans le tableau avec l'indice var newRow = `<tr> <td>${nextIndex}</td> <td>${taskName}</td> <td>${estimatedTime}</td> <td> <button class="btn btn-warning btn-sm edit-btn">Modifier</button> <button class="btn btn-danger btn-sm delete-btn">Supprimer</button> </td> </tr>`; $("#taskTableBody").append(newRow); // Incrémenter l'indice pour la prochaine tâche nextIndex++; // Réinitialiser les champs du formulaire $("#taskName").val(""); $("#estimatedTime").val(""); // Fermer la modale $("#addTaskModal").modal('hide'); }); // Modification d'une tâche (remplissage du formulaire de modification) $(document).on("click", ".edit-btn", function () { var row = $(this).closest("tr"); var taskName = row.find("td:eq(1)").text(); var estimatedTime = row.find("td:eq(2)").text().replace(" h", ""); $("#editTaskName").val(taskName); $("#editEstimatedTime").val(estimatedTime); // Stocker la ligne en cours d'édition $("#editTaskModal").data("editingRow", row); // Afficher la modale d'édition $("#editTaskModal").modal("show"); }); // Validation de la modification $("#editTaskButton").click(function () { var editedTaskName = $("#editTaskName").val().trim(); var editedEstimatedTime = $("#editEstimatedTime").val().trim(); if (editedTaskName === "" || editedEstimatedTime === "") { showMissingFieldsModal(); return; } // Vérifier que le temps estimé est supérieur à zéro if (editedEstimatedTime <= 0) { showInvalidValueModal(); return; } // Récupérer la ligne en cours d'édition var editingRow = $("#editTaskModal").data("editingRow"); // Mettre à jour les valeurs editingRow.find("td:eq(1)").text(editedTaskName); editingRow.find("td:eq(2)").text(editedEstimatedTime + " h"); // Fermer la modale $("#editTaskModal").modal("hide"); }); // Clic sur "Supprimer" => ouvrir la boîte de confirmation $(document).on("click", ".delete-btn", function () { rowToDelete = $(this).closest("tr"); // Stocke la ligne $("#confirmDeleteModal").modal("show"); }); // Confirmation de suppression $("#confirmDeleteButton").click(function () { if (rowToDelete) { rowToDelete.remove(); rowToDelete = null; } $("#confirmDeleteModal").modal("hide"); }); }); </script> </body> </html>