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>Tableau HTML</title>
    
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .table-container {
            width: 100%;
            overflow-x: auto;
            margin-bottom: 10px;
        }

.fixed-column {
            position: sticky;
            left: 0;
            background: white;
            z-index: 2;
            border-left: 2px solid black;
            border-right: 1px solid black;
            padding-left: 10px;
            padding-right: 10px;
            width: 222px;
            min-width: 222px;
        }

.second-fixed-column {
            position: sticky;
            left: 222px;
            background: white;
            z-index: 2;
            border-right: 1px solid black;
            padding-left: 5px;
            padding-right: 5px;
            width: 1px; 
            min-width: 1px; 
            white-space: nowrap;
        }

th.fixed-column, th.second-fixed-column {
            top: 0;
            z-index: 3;
        }

td:first-child {
            border-left: 2px solid black;
        }

.active-cell {
            background-color: green;
            color: white;
        }

.total-column {
            background-color: #f0f0f0;
            pointer-events: none;
            width: 25px;
        }

.week-even {
            background-color: #e0f7fa;
        }

.week-odd {
            background-color: #ffecb3;
        }

.button-container {
            text-align: center;
            margin-top: 10px;
        }

.grayed-out {
            background-color: #d3d3d3;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table id="data-table" class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th class="fixed-column">Nom</th>
                    <th class="second-fixed-column total-column">Total</th>
                    <?php 
                        $start_date = new DateTime("2025-01-01");
                        $end_date = new DateTime("2025-12-31");
                        $holidays = [
                            "01/01", "01/05", "08/05", "14/07", "15/08", "01/11", "11/11", "25/12", 
                            date("d/m", strtotime("2025-05-29")), 
                            date("d/m", strtotime("2025-06-08"))
                        ];
                        $dates = [];
                        while ($start_date <= $end_date) {
                            $dayOfWeek = $start_date->format("N");
                            $formattedDate = $start_date->format("d");
                            if ($dayOfWeek < 6 && !in_array($formattedDate, $holidays)) {
                                $weekNumber = $start_date->format("W");
                                $month = $start_date->format("m");
                                $dates[] = ["date" => $formattedDate, "week" => $weekNumber, "month" => $month];
                            }
                            $start_date->modify("+1 day");
                        }
                        $currentWeek = null;
                        $weekClass = "week-even";
                        $lastMonth = null;
                        $months = [
                            "01" => "Janvier", "02" => "Février", "03" => "Mars", "04" => "Avril",
                            "05" => "Mai", "06" => "Juin", "07" => "Juillet", "08" => "Août",
                            "09" => "Septembre", "10" => "Octobre", "11" => "Novembre", "12" => "Décembre"
                        ];

foreach ($dates as $data) {
                            $monthName = isset($months[$data['month']]) ? $months[$data['month']] : 'Mois inconnu';
                            if ($currentWeek !== $data['week']) {
                                $currentWeek = $data['week'];
                                $weekClass = ($weekClass === "week-even") ? "week-odd" : "week-even";
                            }
                            echo "<th class='$weekClass'>{$data['date']}</th>";
                        }
                    ?>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="fixed-column">Mois</td>
                    <td class="second-fixed-column"></td>
                    <?php 
                        $currentMonth = null;
                        $count = 1;
                        foreach ($dates as $index => $data) {
                            if ($currentMonth !== $data['month']) {
                                if ($currentMonth !== null) {
                                    echo "<td colspan='$count'>{$months[$currentMonth]}</td>";
                                }
                                $currentMonth = $data['month'];
                                $count = 1;
                            } else {
                                $count++;
                            }
                            if ($index == count($dates) - 1) {
                                echo "<td colspan='$count'>{$months[$currentMonth]}</td>";
                            }
                        }
                    ?>
                </tr>
                <tr>
                    <td class="fixed-column">Semaine</td>
                    <td class="second-fixed-column"></td>
                    <?php 
                        $currentWeek = null;
                        $weekCount = 1;
                        foreach ($dates as $index => $data) {
                            if ($currentWeek !== $data['week']) {
                                if ($currentWeek !== null) {
                                    echo "<td colspan='$weekCount'>{$currentWeek}</td>";
                                }
                                $currentWeek = $data['week'];
                                $weekCount = 1;
                            } else {
                                $weekCount++;
                            }
                            if ($index == count($dates) - 1) {
                                echo "<td colspan='$weekCount'>{$currentWeek}</td>";
                            }
                        }
                    ?>
                </tr>
            </tbody>
        </table>
    </div>

<div class="button-container">
        <button class="btn btn-primary" onclick="addRow()">Ajouter une ligne</button>
        <button class="btn btn-success" onclick="saveData()">SAUVER</button>
        <button class="btn btn-info" onclick="loadData()">CHARGER</button>
    </div>

//combien data-table contient de lignes.
//il faut prendre les lignes dont l'indice est supérieur à 2
//on va venir recupérer pour chacunes de ces lignes le contenu des différentes cellules.

function addRow() {
            let table = document.getElementById("data-table");
            let row = table.insertRow(-1);
            
            // Première cellule - Combo Box
            let cell1 = row.insertCell(0);
            cell1.classList.add("fixed-column");
            let select = document.createElement("select");
            select.addEventListener("change", function(event) {
                // Ajouter ici des actions à effectuer lors de la sélection d'un item
                select.blur();
            });

// Ajouter des options à la combo box
            let option1 = document.createElement("option");
            option1.value = "Option 1";
            option1.textContent = "Option 1";
            select.appendChild(option1);

let option2 = document.createElement("option");
            option2.value = "Option 2";
            option2.textContent = "Option 2";
            select.appendChild(option2);

let option3 = document.createElement("option");
            option3.value = "Option 3";
            option3.textContent = "Option 3";
            select.appendChild(option3);

// Ajouter le select dans la cellule
            cell1.appendChild(select);
            
            // Deuxième cellule - Total
            let cell2 = row.insertCell(1);
            cell2.classList.add("second-fixed-column", "total-column");
            cell2.innerText = "0";
            
            // Ajouter les autres cellules de la ligne
            for (let i = 2; i < table.rows[0].cells.length; i++) {
                let cell = row.insertCell(i);
                cell.innerText = "0";
                cell.onclick = function() {
                    toggleCell(cell, row);
                };
            }
        }

function saveData() {
        let table = document.getElementById("data-table");
        let rowCount = table.rows.length;

// Vérifier s'il y a plus de 2 lignes de données
        if (rowCount <= 2) {
            alert("Pas assez de données à sauvegarder.");
            return;
        }

let dataToSend = [];

// Parcourir les lignes à partir de l'indice 3 (l'indice 2 correspondant à la ligne "Semaine")
        for (let i = 3; i < rowCount; i++) 
        {

console.log(" >>> " + i);

let tableau = document.getElementById("data-table");
            let nb_rows = tableau.rows.length;
            console.log(" Nb rows " + nb_rows);

let cells = document.querySelectorAll('#data-table td');

// Parcourir chaque cellule et afficher son contenu
cells.forEach(cell => {
    console.log(cell.textContent);  // Vous pouvez aussi utiliser `innerText`
});

for (let i = 3 ; i < tableau.rows.length; i++) 
            {
                let row = tableau.rows[i]; // Une ligne du tableau
                console.log(`Ligne ${i} :`);

let nombreCellules = row.cells.length; // Obtenir le nombre de cellules
                console.log("Nb cellules "  + nombreCellules);

let selection_row = tableau.rows[i];

for (let j = 0 ; j < nombreCellules; j++) 
                {

if(j == 0)
                    {
                        let select = selection_row.cells[j].querySelector("select"); // Trouver la combo box
                        let choix = select.value; // Obtenir la valeur sélectionnée
                        console.log(" blabla "  + choix);
                    }
                    else
                    {
                        let valeur = selection_row.cells[j];
                        console.log(" --- " + j + " " + valeur);
                    }

}

// Parcourir les cellules de la ligne
                /*for (let cell of row.cells) 
                {

// let row = table.rows[i];
                //let select = row.cells[0].querySelector("select"); // Trouver la combo box
                //let choix = select.value; // Obtenir la valeur sélectionnée

//console.log(" - " + cell.textContent);
                    let row = table.rows[i];
                let select = row.cells[0].querySelector("select"); // Trouver la combo box
                let choix = select.value; // Obtenir la valeur sélectionnée   
                */

}

/* let ligne = tableau.rows[2]; // Récupérer la ligne par son index

console.log(" 000 " + ligne);

let cellule = ligne.cells[0]; // Première cellule de la ligne
            let select = cellule.querySelector("select"); // Trouver le combo box dans la cellule

let indice = select.id;

console.log(" ----> " + indice); */

/*let row = table.rows[i];
            let rowData = {
                id: i - 2, // On donne un ID arbitraire (vous pouvez le changer)
                contenu: [],
                date_insertion: new Date().toISOString().split('T')[0] // Date du jour au format YYYY-MM-DD
            };

// Récupérer les données des cellules de la ligne
            for (let j = 2; j < row.cells.length; j++) { // Commencer après les colonnes fixes
                rowData.contenu.push(row.cells[j].innerText);
            }

dataToSend.push(rowData);*/
        }

// console.log(" +++ " + dataToSend);

// Envoyer les données au serveur via AJAX (Fetch API)
        /*fetch('save_data03.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(dataToSend)
        })
        .then(response => response.json())
        .then(data => {
            alert("Données sauvegardées avec succès !");
        })
        .catch(error => {
            console.error('Erreur lors de la sauvegarde :', error);
        });*/
    }

function loadDataxxxxxxxxxxxxxxxxxxxxxx()
    {
        alert("query ");
        fetch('recuperation2.php')
        .then(response => response.json())
        .then(data => {
            let table = document.getElementById("data-table");

console.log(" +++ " + data);

// Vérifier s'il y a des données à ajouter
            if (data.length === 0) {
                alert("Aucune donnée trouvée.");
                return;
            }

console.log(" on peux recharger le tableau ");

// Ajouter chaque sous-tableau comme une nouvelle ligne
            data.forEach(rowData => {
                let newRow = table.insertRow(-1); // Insère une nouvelle ligne à la fin du tableau

// Ajout des cellules pour chaque valeur de `contenu`
                rowData.contenu.forEach((cellData, index) => {
                    let cell = newRow.insertCell(index + 2); // Décalage car les 2 premières colonnes sont fixes
                    cell.innerText = cellData;
                });
            });

alert("Données chargées avec succès !");
        })
        .catch(error => {
            console.error('Erreur lors du chargement :', error);
        });
    }

function loadData() 
    {
    
        let table = document.getElementById("data-table");

while (table.rows.length > 3) 
        {
            table.deleteRow(3);
            console.log("toto");
        }

let rowCount = table.rows.length;
        console.log("NB row " + rowCount);

for (let i = rowCount - 1; i >= 3; i--) 
        {
            table.deleteRow(i);
        }

fetch('recuperation2.php')
        .then(response => response.text()) // Récupérer la réponse brute
        .then(text => {
            try {
                // Vérifier si le texte est un JSON valide
                let data = JSON.parse(text);
               
                console.log(" +++ " + data);

let jsonData = JSON.stringify(data);
                console.log(jsonData);

// Vérifier si `data` est bien un tableau contenant des objets avec `contenu`
                if (!Array.isArray(data)) {
                    console.error("Format incorrect : le JSON retourné n'est pas un tableau.", data);
                    alert("Erreur : Format des données incorrect.");
                    return;
                }

let table = document.getElementById("data-table");

// Vérifier si des données valides sont présentes
                if (data.length === 0) {
                    alert("Aucune donnée trouvée.");
                    return;
                }

// Ajouter chaque sous-tableau comme une nouvelle ligne
                data.forEach(rowData => {
                    // Vérifier que chaque ligne possède bien un tableau `contenu`
                    if (!rowData || !Array.isArray(rowData.contenu)) {
                        console.warn("Donnée incorrecte, adaptation nécessaire :", rowData);
                        return; // Passer à la ligne suivante
                    }

let newRow = table.insertRow(-1); // Insère une nouvelle ligne à la fin du tableau

// Ajouter les cellules avec les valeurs du contenu
                    rowData.contenu.forEach((cellData, index) => {
                        let cell = newRow.insertCell(index + 2); // Décalage car les 2 premières colonnes sont fixes
                        cell.innerText = cellData;
                    });
                });

alert("Données chargées avec succès !");
            } catch (error) {
                console.error("Erreur lors du parsing du JSON :", error, text);
                alert("Erreur : Les données reçues ne sont pas au format JSON valide.");
            }
        })
        .catch(error => {
            console.error('Erreur lors du chargement :', error);
            alert("Erreur de connexion avec le serveur.");
        });
}

/****************************************/

</script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.6/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>