File "burndown_002.php"
Full Path: /home/analogde/www/JSClass/Json/burndown_002.php
File size: 13.85 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>
<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">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" 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" 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>
</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>
<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");
}
$(document).ready(function () {
/*function getTasks() {
let tasks = [];
$("#taskTableBody tr").each(function () {
let taskName = $(this).find("td:eq(0)").text();
let estimatedTime = $(this).find("td:eq(1)").text().replace(" h", "");
tasks.push({ name: taskName, time: estimatedTime });
});
return tasks;
}*/
$("#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;
// Ignorer la dernière cellule (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>
<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);
});
})
.catch(error => {
console.error("Erreur lors du chargement des données :", error);
});
/*
$.getJSON("load.php", function (data) {
$("#taskTableBody").empty(); // Vider le tableau avant de le remplir
console.log(" ++++ " + data);
$.each(data, function (index, task) {
var newRow = `<tr>
<td>${task.name}</td>
<td>${task.time} h</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);
});
}).fail(function () {
alert("Erreur lors du chargement des tâches.");
});*/
});
$("#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 === "") {
// alert("Veuillez remplir tous les champs.");
showMissingFieldsModal();
return;
}
// Ajouter une nouvelle ligne dans le tableau
var newRow = `<tr>
<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);
// Réinitialiser les champs du formulaire
$("#taskName").val("");
$("#estimatedTime").val("");
// Fermer la modale
$("#addTaskModal").modal('hide');
});
// Suppression d'une tâche
/*
$(document).on("click", ".delete-btn", function () {
$(this).closest("tr").remove();
});
*/
// 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(0)").text();
var estimatedTime = row.find("td:eq(1)").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 === "") {
//alert("Veuillez remplir tous les champs.");
showMissingFieldsModal();
return;
}
// Récupérer la ligne en cours d'édition
var editingRow = $("#editTaskModal").data("editingRow");
// Mettre à jour les valeurs
editingRow.find("td:eq(0)").text(editedTaskName);
editingRow.find("td:eq(1)").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>