Tiny File Manager

Back Back Up Advanced Editor

<!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;
        }

/* Ajuster la largeur des colonnes */
        #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%;
        }
    </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">
                
            </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>

<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">&times;</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>

<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">&times;</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>

<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">&times;</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>

<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">&times;</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>

<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">&times;</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 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">&times;</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>

// 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;

$("#taskTableBody").sortable({
                helper: function (e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();

// Appliquer les mêmes largeurs aux colonnes
                    $helper.children().each(function (index) {
                        $(this).width($originals.eq(index).outerWidth());
                    });

// Appliquer la même hauteur pour éviter l'effet de réduction
                    $helper.height(tr.height());

// Copier les styles internes (notamment pour les boutons)
                    $helper.children().each(function (index) {
                        $(this).css({
                            "height": $originals.eq(index).height(),
                            "display": $originals.eq(index).css("display"),
                            "visibility": "visible",
                            "overflow": "visible"
                        });

// Copier les styles des boutons dans la colonne action
                        var $originalButtons = $originals.eq(index).find("button");
                        var $helperButtons = $(this).find("button");

$helperButtons.each(function (btnIndex) {
                            $(this).css({
                                "width": $originalButtons.eq(btnIndex).outerWidth(),
                                "height": $originalButtons.eq(btnIndex).outerHeight(),
                                "display": "inline-block",
                                "visibility": "visible"
                            });
                        });
                    });

// S'assurer que la ligne déplacée garde son style
                    $helper.css({
                        "display": "table",
                        "background": "#fff",
                        "box-shadow": "2px 2px 5px rgba(0,0,0,0.2)"
                    });

return $helper;
                },
                placeholder: "ui-state-highlight",
                start: function (event, ui) {
                    ui.placeholder.height(ui.helper.outerHeight());

// Ajuster la largeur des colonnes du placeholder
                    ui.placeholder.children().each(function (index) {
                        $(this).width(ui.helper.children().eq(index).width());
                    });
                },
                update: function (event, ui) {
                    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-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);
                        });

// 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-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);

// 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");
            });

// Clic sur "Voir" => afficher les détails de la tâche
            $(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);

// Afficher la modale de visualisation
                $("#viewTaskModal").modal("show");
            });

// 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");
                $("#editTaskModal").modal("hide");
            });

// Gestionnaire d'événement pour le bouton "Fermer" dans la modale de visualisation
            $("#closeVoirModalButton").click(function () {
                console.log("Fermeture de la modale de visualisation");
                $("#viewTaskModal").modal("hide");
            });

// Gestionnaire d'événement pour le bouton "Fermer" dans la modale de visualisation
            $("#closeCoonfirmationModalButton").click(function () {
                console.log("Fermeture de la modale de visualisation");
                $("#confirmDeleteModal").modal("hide");
            });

// Gestionnaire d'événement pour les boutons de fermeture des modales
            $(".modal").on("hidden.bs.modal", function () {
                console.log("Modale fermée");
            });
        });
    </script>
</body>
</html>