File "inserer_tache_planning005.php"
Full Path: /home/analogde/www/Chart burndown/inserer_tache_planning005.php
File size: 52.26 KB
MIME-type: text/html
Charset: utf-8
dans le code suivant,
<!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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<style>
.sortable-helper {
opacity: 0.7;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
#taskTableBody tr {
cursor: move;
}
#taskTableBody tr td {
padding: 8px;
border: 1px solid #ddd;
}
</style>
</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">Annuler</button>
<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;
// Activer le glisser-déposer pour les lignes du tableau
$("#taskTableBody").sortable({
helper: "clone",
placeholder: "ui-state-highlight",
start: function (event, ui) {
ui.placeholder.height(ui.helper.outerHeight());
},
update: function (event, ui) {
// Mettre à jour les indices après le glisser-déposer
updateIndices();
}
});
$("#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);
// 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");
});
// Fonction pour mettre à jour les indices après le glisser-déposer
function updateIndices() {
$("#taskTableBody tr").each(function (index) {
$(this).find("td:eq(0)").text(index + 1);
});
}
});
</script>
</body>
</html>
je veux qe tu affiche un message sur la console quand on appui sur le bouton Fermer et modifer de la fenetre modale modifier la tache.
Pour afficher un message sur la console lorsque l'utilisateur clique sur les boutons "Fermer" et "Modifier" de la fenêtre modale "Modifier la tâche", vous pouvez ajouter des gestionnaires d'événements pour ces boutons. Voici comment vous pouvez le faire :
Ajoutez un gestionnaire d'événements pour le bouton "Fermer" (celui avec la classe btn-secondary dans la modale d'édition).
Ajoutez un gestionnaire d'événements pour le bouton "Modifier" (celui avec l'ID editTaskButton).
Voici le code modifié avec les gestionnaires d'événements ajoutés :
Copier
<!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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<style>
.sortable-helper {
opacity: 0.7;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
#taskTableBody tr {
cursor: move;
}
#taskTableBody tr td {
padding: 8px;
border: 1px solid #ddd;
}
</style>
</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" id="closeEditModalButton">Fermer</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">Annuler</button>
<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;
// Activer le glisser-déposer pour les lignes du tableau
$("#taskTableBody").sortable({
helper: "clone",
placeholder: "ui-state-highlight",
start: function (event, ui) {
ui.placeholder.height(ui.helper.outerHeight());
},
update: function (event, ui) {
// Mettre à jour les indices après le glisser-déposer
updateIndices();
}
});
$("#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);
// Fermer la modale
$("#editTaskModal").modal("hide");
// Afficher un message dans la console
console.log("Tâche modifiée :", editedTaskName, editedEstimatedTime);
});
// 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");
});
// Fonction pour mettre à jour les indices après le glisser-déposer
function updateIndices() {
$("#taskTableBody tr").each(function (index) {
$(this).find("td:eq(0)").text(index + 1);
});
}
// Gestionnaire d'événement pour le bouton "Fermer" dans la modale d'édition
$("#closeEditModalButton").click(function () {
console.log("Fermeture de la modale d'édition");
});
});
</script>
</body>
</html>
Dans ce code, j'ai ajouté un gestionnaire d'événement pour le bouton "Fermer" (#closeEditModalButton) et un message de console dans le gestionnaire d'événement pour le bouton "Modifier" (#editTaskButton). Lorsque vous cliquez sur ces boutons, un message sera affiché dans la console.
comment fermer la boite modal correspondant à Modifer la tâche en cliquant sur la croix supérieur droite.
Pour fermer la boîte modale "Modifier la tâche" en cliquant sur la croix en haut à droite, vous pouvez utiliser l'attribut data-dismiss="modal" sur le bouton de fermeture. Cet attribut est déjà présent dans le code que vous avez fourni, donc la boîte modale devrait se fermer automatiquement lorsque vous cliquez sur la croix.
Voici comment cela fonctionne dans votre code :
Copier
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
L'attribut data-dismiss="modal" indique à Bootstrap de fermer la modale lorsque ce bouton est cliqué. Assurez-vous que le script Bootstrap est correctement chargé et que le code JavaScript est exécuté sans erreurs pour que cela fonctionne correctement.
Si cela ne fonctionne pas comme prévu, voici quelques points à vérifier :
Vérifiez les dépendances : Assurez-vous que les fichiers JavaScript de Bootstrap et jQuery sont correctement inclus dans votre projet.
Console JavaScript : Ouvrez la console du navigateur pour vérifier s'il y a des erreurs JavaScript qui pourraient empêcher le fonctionnement de la modale.
Compatibilité des versions : Assurez-vous que les versions de Bootstrap et jQuery que vous utilisez sont compatibles entre elles.
Si tout est correctement configuré, cliquer sur la croix devrait fermer la modale sans nécessiter de modifications supplémentaires.
donne moi le code complet et insérer un commentaire particulier qui me permettra de repérer le changement que tu propose.
Voici le code complet avec un commentaire spécifique pour indiquer où se trouve le changement proposé. Le changement concerne l'utilisation de l'attribut data-dismiss="modal" pour fermer la modale lorsque vous cliquez sur la croix.
Copier
<!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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<style>
.sortable-helper {
opacity: 0.7;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
#taskTableBody tr {
cursor: move;
}
#taskTableBody tr td {
padding: 8px;
border: 1px solid #ddd;
}
</style>
</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>
<!-- Changement ici : ce bouton ferme la modale lorsqu'on clique dessus -->
<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" id="closeEditModalButton">Fermer</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">Annuler</button>
<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;
// Activer le glisser-déposer pour les lignes du tableau
$("#taskTableBody").sortable({
helper: "clone",
placeholder: "ui-state-highlight",
start: function (event, ui) {
ui.placeholder.height(ui.helper.outerHeight());
},
update: function (event, ui) {
// Mettre à jour les indices après le glisser-déposer
updateIndices();
}
});
$("#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);
// Fermer la modale
$("#editTaskModal").modal("hide");
// Afficher un message dans la console
console.log("Tâche modifiée :", editedTaskName, editedEstimatedTime);
});
// 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");
});
// Fonction pour mettre à jour les indices après le glisser-déposer
function updateIndices() {
$("#taskTableBody tr").each(function (index) {
$(this).find("td:eq(0)").text(index + 1);
});
}
// Gestionnaire d'événement pour le bouton "Fermer" dans la modale d'édition
$("#closeEditModalButton").click(function () {
console.log("Fermeture de la modale d'édition");
});
});
</script>
</body>
</html>