Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Basic Tabs in Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<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://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div class="m-4">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a href="#saisie" class="nav-link active">Saisie planning</a>
        </li>
        <li class="nav-item">
            <a href="#pointage" class="nav-link">Temps passé &&&</a>
        </li>
        <li class="nav-item">
            <a href="#graphique1" class="nav-link">Courbes 1</a>
        </li>
        <li class="nav-item">
            <a href="#graphique2" class="nav-link">Courbes 2</a>
        </li>
    </ul>
</div>

<div class="tab-content">
    <div id="saisie" class="tab-pane fade show active">
        <?php include 'table_001.php'; ?>
    </div>
    <div id="pointage" class="tab-pane fade mx-5">
        <?php include 'mysql_inserer_tache_planning004.php'; ?>
    </div>
    <div id="graphique1" class="tab-pane fade mx-5">
        <h2>Burndown en escalier</h2>
        <?php include 'burndown_type01.php'; ?>
    </div>
    <div id="graphique2" class="tab-pane fade mx-5">
        <h2>Burdown classique</h2>
        <?php include 'traitement0019.php'; ?>
    </div>
</div>

tabs.forEach(tab => {
        tab.addEventListener("click", function (event) {
            event.preventDefault();
            const target = document.querySelector(tab.getAttribute("href"));

tabs.forEach(t => t.classList.remove("active"));
            tabContents.forEach(tc => tc.classList.remove("show", "active"));

tab.classList.add("active");
            target.classList.add("show", "active");

// Initialiser les scripts lorsque l'onglet devient actif
            if (target.id === "pointage") {
                initializeTaskScripts();
            }
        });
    });

// Initialiser les scripts pour l'onglet actif au chargement de la page
    if (document.querySelector("#pointage.active")) {
        initializeTaskScripts();
    }
});

function initializeTaskScripts() {
    // Votre code JavaScript pour initialiser les événements et les fonctionnalités
    $(document).on("click", ".close", function () {
        $(this).closest(".modal").modal("hide");
    });

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

let nextIndex = 1;
    let rowToDelete = null;

$("#taskTableBody").sortable({
        axis: "y",
        helper: function (e, tr) {
            let $helper = tr.clone();
            let originalWidths = [];

// Sauvegarde les largeurs originales
            tr.children().each(function (index) {
                originalWidths[index] = $(this).outerWidth();
            });

// Applique les largeurs aux cellules du clone
            $helper.children().each(function (index) {
                $(this).width(originalWidths[index]);
            });

// Ajuste la largeur du clone à celle du tableau
            $helper.width(tr.width());

// Ajoute une classe pour la personnalisation du clone
            $helper.addClass("dragging-helper");

return $helper;
        },
        start: function (event, ui) {
            let tableOffset = $("#dataTable").offset().left; // Récupère la position du tableau
            let rowOffset = ui.helper.offset().left; // Position actuelle du clone

let leftOffset = tableOffset - rowOffset; // Calcul du décalage

ui.helper.css({
                "position": "absolute",
                "left": ui.helper.position().left + leftOffset + "px", // Corrige la position
                "z-index": 1000
            });

ui.placeholder.height(ui.helper.outerHeight());

// Ajuste les largeurs du placeholder
            ui.placeholder.children().each(function (index) {
                $(this).width(ui.helper.children().eq(index).width());
            });
        },
        update: function (event, ui) {
            updateIndices();
        }
    });

// Ajout d'un curseur "move" sur toutes les cellules
    $("#taskTableBody tr td").css("cursor", "move");

$("#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;
            updateIndices();
        }
        $("#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:first").text(index + 1); // Met à jour le premier TD de chaque ligne
        });
    }

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

$("#closeEcrireModalButton").click(function () {
        console.log("Fermeture de la modale de visualisation");
        $("#successModal").modal("show");
    });

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

// Gestionnaire d'événement pour le bouton "Écrire"
    $("#writeButton").click(function () {
        let table = document.getElementById("dataTable");
        let tasks = [];

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

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); // Convertit la chaîne en JSON
                console.log('Données JSON :', jsonData);
                //alert("Checklist enregistrée !");
                // Afficher la modale de succès
                $("#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.");
        });
    });

// Gestionnaire d'événement pour le bouton "Lire"
    $("#readButton").click(function () {
        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(); // Vider le tableau avant de le remplir

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

// Mettre à jour nextIndex en fonction des données chargées
                nextIndex = data.length > 0 ? parseInt(data[data.length - 1].index) + 1 : 1;
            })
            .catch(error => {
                console.error("Erreur lors du chargement des données :", error);
            });
    });

// Initialisation de l'indexation au chargement
    //updateIndices();
}
</script>
</body>
</html>