<!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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<style>
#taskTableBody tr {
cursor: move;
}
#taskTableBody tr td {
padding: 8px;
border: 1px solid #ddd;
}
#dataTable th:nth-child(1), #dataTable td:nth-child(1) {
width: 10%;
}
#dataTable th:nth-child(2), #dataTable td:nth-child(2) {
width: 35%;
}
#dataTable th:nth-child(3), #dataTable td:nth-child(3) {
width: 20%;
}
#dataTable th:nth-child(4), #dataTable td:nth-child(4) {
width: 35%;
}
.ui-sortable-helper {
opacity: 0.8;
background: white;
}
.dragging-helper {
opacity: 0.8;
background: white;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Gestion des Tâches (debug)</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"></tbody>
</table>
<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>
<button id="writeButton" class="btn btn-primary">Écrire</button>
<button id="PIPOreadButton" class="btn btn-secondary">Lire</button>
<!-- Modales -->
<!-- Ajouter une 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>
<!-- Modifier une 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>
<!-- Confirmer la 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" id="closeCoonfirmationModalButton">Annuler</button>
<button type="button" class="btn btn-danger" id="confirmDeleteButton">Supprimer</button>
</div>
</div>
</div>
</div>
<!-- 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>
<!-- Valeur invalide -->
<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>
<!-- Voir la tâche -->
<div class="modal fade" id="viewTaskModal" tabindex="-1" role="dialog" aria-labelledby="viewTaskModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="viewTaskModalLabel">Voir 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="viewTaskName">Nom de la tâche :</label>
<input type="text" class="form-control" id="viewTaskName" readonly>
</div>
<div class="form-group">
<label for="viewEstimatedTime">Temps estimé (en heures) :</label>
<input type="text" class="form-control" id="viewEstimatedTime" readonly>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="closeVoirModalButton">Fermer</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="successModalLabel">Enregistrement réussi</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Les données ont été enregistrées avec succès dans la base de données.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="closeEcrireModalButton">Fermer</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).on("click", ".close", function () {
$(this).closest(".modal").modal("hide");
});
function showMissingFieldsModal() {
$("#missingFieldsModal").modal("show");
}
function showInvalidValueModal() {
$("#invalidValueModal").modal("show");
}
$(document).ready(function () {
let nextIndex = 1;
let rowToDelete = null;
$("#taskTableBody").sortable({
axis: "y",
helper: function (e, tr) {
let $helper = tr.clone();
let originalWidths = [];
tr.children().each(function (index) {
originalWidths[index] = $(this).outerWidth();
});
$helper.children().each(function (index) {
$(this).width(originalWidths[index]);
});
$helper.width(tr.width());
$helper.addClass("dragging-helper");
return $helper;
},
start: function (event, ui) {
let tableOffset = $("#dataTable").offset().left;
let rowOffset = ui.helper.offset().left;
let leftOffset = tableOffset - rowOffset;
ui.helper.css({
"position": "absolute",
"left": ui.helper.position().left + leftOffset + "px",
"z-index": 1000
});
ui.placeholder.height(ui.helper.outerHeight());
ui.placeholder.children().each(function (index) {
$(this).width(ui.helper.children().eq(index).width());
});
},
update: function (event, ui) {
updateIndices();
}
});
$("#taskTableBody tr td").css("cursor", "move");
$("#saveButton").click(function () {
let table = document.getElementById("dataTable");
let data = [];
for (let i = 1; i < table.rows.length; i++) {
let row = [];
let cells = table.rows[i].cells;
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();
data.forEach(task => {
var newRow = `<tr>
<td>${task[0]}</td>
<td>${task[1]}</td>
<td>${task[2]}</td>
<td>
<button class="btn btn-info btn-sm view-btn">Voir</button>
<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);
});
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 () {
var taskName = $("#taskName").val().trim();
var estimatedTime = $("#estimatedTime").val().trim();
if (taskName === "" || estimatedTime === "") {
showMissingFieldsModal();
return;
}
if (estimatedTime <= 0) {
showInvalidValueModal();
return;
}
var newRow = `<tr>
<td>${nextIndex}</td>
<td>${taskName}</td>
<td>${estimatedTime}</td>
<td>
<button class="btn btn-info btn-sm view-btn">Voir</button>
<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);
nextIndex++;
$("#taskName").val("");
$("#estimatedTime").val("");
$("#addTaskModal").modal('hide');
});
$(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);
$("#editTaskModal").data("editingRow", row);
$("#editTaskModal").modal("show");
});
$("#editTaskButton").click(function () {
var editedTaskName = $("#editTaskName").val().trim();
var editedEstimatedTime = $("#editEstimatedTime").val().trim();
if (editedTaskName === "" || editedEstimatedTime === "") {
showMissingFieldsModal();
return;
}
if (editedEstimatedTime <= 0) {
showInvalidValueModal();
return;
}
var editingRow = $("#editTaskModal").data("editingRow");
editingRow.find("td:eq(1)").text(editedTaskName);
editingRow.find("td:eq(2)").text(editedEstimatedTime);
$("#editTaskModal").modal("hide");
console.log("Tâche modifiée :", editedTaskName, editedEstimatedTime);
});
$(document).on("click", ".delete-btn", function () {
rowToDelete = $(this).closest("tr");
$("#confirmDeleteModal").modal("show");
});
$("#confirmDeleteButton").click(function () {
if (rowToDelete) {
rowToDelete.remove();
rowToDelete = null;
updateIndices();
}
$("#confirmDeleteModal").modal("hide");
});
$(document).on("click", ".view-btn", function () {
var row = $(this).closest("tr");
var taskName = row.find("td:eq(1)").text();
var estimatedTime = row.find("td:eq(2)").text();
$("#viewTaskName").val(taskName);
$("#viewEstimatedTime").val(estimatedTime);
$("#viewTaskModal").modal("show");
});
function updateIndices() {
$("#taskTableBody tr").each(function (index) {
$(this).find("td:first").text(index + 1);
});
}
$("#closeEditModalButton").click(function () {
console.log("Fermeture de la modale d'édition");
$("#editTaskModal").modal("hide");
});
$("#closeVoirModalButton").click(function () {
console.log("Fermeture de la modale de visualisation");
$("#viewTaskModal").modal("hide");
});
$("#closeCoonfirmationModalButton").click(function () {
console.log("Fermeture de la modale de visualisation");
$("#confirmDeleteModal").modal("hide");
});
$("#closeEcrireModalButton").click(function () {
console.log("Fermeture de la modale de visualisation");
$("#successModal").modal("show");
});
$(".modal").on("hidden.bs.modal", function () {
console.log("Modale fermée");
});
$("#writeButton").click(function () {
let table = document.getElementById("dataTable");
let tasks = [];
for (let i = 1; i < table.rows.length; i++) {
let row = [];
let cells = table.rows[i].cells;
for (let j = 0; j < cells.length - 1; j++) {
row.push(cells[j].innerText);
}
tasks.push(row);
}
fetch('store_taches_007.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(tasks)
})
.then(response => response.text())
.then(data => {
try {
const jsonData = JSON.parse(data);
console.log('Données JSON :', jsonData);
$("#successModal").modal("show");
} catch (e) {
console.error("Erreur lors du parsing JSON", e);
alert("Erreur lors de l'enregistrement de la checklist.");
}
})
.catch(error => {
console.error('Erreur :', error);
alert("Erreur de communication avec le serveur.");
});
});
$("#aaaaaaaaaaaaaPIPOreadButton").click(function () {
alert("dfff");
console.log("TRACE");
});
$("#PIPOreadButton").click(function () {
console.log("TRACE");
fetch("read001.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();
data.forEach(task => {
var newRow = `<tr>
<td>${task.index}</td>
<td>${task.name}</td>
<td>${task.duration}</td>
<td>
<button class="btn btn-info btn-sm view-btn">Voir</button>
<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);
});
nextIndex = data.length > 0 ? parseInt(data[data.length - 1].index) + 1 : 1;
})
.catch(error => {
console.error("Erreur lors du chargement des données :", error);
});
});
});
</script>
</body>
</html>