File "inserer_tache_planning002.php"
Full Path: /home/analogde/www/Chart burndown/inserer_tache_planning002.php
File size: 16.35 KB
MIME-type: text/html
Charset: utf-8
<!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;
}
.index-col {
width: 5%;
}
.name-col {
width: 40%;
}
.time-col {
width: 20%;
}
.actions-col {
width: 35%;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Gestion des Tâches</h1>
<table id="dataTable" class="table">
<thead>
<tr>
<th scope="col" class="index-col">Indice</th>
<th scope="col" class="name-col">Nom de la tâche</th>
<th scope="col" class="time-col">Temps estimé</th>
<th scope="col" class="actions-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;
// 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>