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 Dynamique</title>
    <style>
        table {
            width: auto;
            min-width: 1200px; /* Largeur minimale pour gérer le grand nombre de colonnes */
            border-collapse: separate;
            border-spacing: 0;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
            white-space: nowrap; /* Évite le retour à la ligne */
            box-sizing: border-box; /* Inclut les bordures et le padding dans la largeur totale */
        }
        thead th {
            background: #f8f8f8;
            position: sticky;
            top: 0;
            z-index: 2; /* S'assure que l'en-tête reste au-dessus du contenu */
        }
        .table-container {
            width: 100%;
            overflow-x: auto;
            position: relative;
            margin-top: 20px;
            border: 1px solid #ddd; /* Pour délimiter la zone de défilement */
        }
        /* Fixe les deux premières colonnes */
        th:first-child, td:first-child {
            position: sticky;
            left: 0;
            z-index: 4; /* Pour qu'elles soient au-dessus des autres colonnes */
            background: white;
            border-right: 2px solid black; /* Séparation visible */
            width: 80px; /* Largeur fixe pour la première colonne */
            min-width: 80px; /* Largeur minimale pour la première colonne */
            max-width: 80px; /* Largeur maximale pour la première colonne */
        }
        th:nth-child(2), td:nth-child(2) {
            position: sticky;
            left: 80px; /* Décalage pour ne pas chevaucher la première colonne */
            z-index: 3; /* Pour qu'elles soient au-dessus des autres colonnes */
            background: white;
            border-right: 2px solid black; /* Séparation visible */
            width: 100px; /* Largeur fixe pour la deuxième colonne */
            min-width: 100px; /* Largeur minimale pour la deuxième colonne */
            max-width: 100px; /* Largeur maximale pour la deuxième colonne */
        }
        /* Centrer la combo box dans la cellule */
        td:first-child {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        select {
            width: 100%; /* Assure que la combo box prend toute la largeur de la cellule */
            max-width: 80px; /* Limite la largeur maximale de la combo box */
        }
        button {
            margin-top: 20px;
            padding: 10px;
            font-size: 16px;
        }
        .cell-active {
            background-color: green;
        }
        /* Largeur fixe pour les colonnes à partir de la troisième */
        th:nth-child(n+3), td:nth-child(n+3) {
            width: 50px; /* Largeur fixe pour les colonnes à partir de la troisième */
            min-width: 50px; /* Largeur minimale pour les colonnes à partir de la troisième */
            max-width: 50px; /* Largeur maximale pour les colonnes à partir de la troisième */
        }
        /* Style pour la cellule grisée */
        .unused-cell {
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<div class="table-container">
    <table>
        <thead>
            <tr id="header-row">
                <th>Nom</th>
                <th>Total</th>
            </tr>
            <tr id="month-row">
                <th>Mois</th>
                <th class="unused-cell">Non utilisé</th>
            </tr>
            <tr id="semaine-row">
                <th>Jours</th>
                <th class="unused-cell">Non utilisé</th>
            </tr>
            
        </thead>
        <tbody id="table-body"></tbody>
    </table>
</div>
<button id="getDataButton">Récupérer les données du tableau</button>
<button id="sendDataButton">Envoyer les données</button>
<button id="readDataButton">Lire les données</button>
<button id="addRowButton">Ajouter une ligne</button>
<script>
    const numCols = 100; // Nombre de colonnes à 100
    const holidays = [
        '2025-01-01', // Nouvel An
        '2025-04-21', // Pâques
        '2025-05-01', // Fête du Travail
        '2025-05-08', // Victoire 1945
        '2025-05-29', // Ascension
        '2025-06-09', // Pentecôte
        '2025-07-14', // Fête Nationale
        '2025-08-15', // Assomption
        // Ajoutez d'autres jours fériés et fêtes religieuses si nécessaire
    ];

function createTable() {
    const theadRow = document.getElementById("header-row");
    const monthRow = document.getElementById("month-row");
    const weekRow = document.getElementById("semaine-row");
    const numeroWeekRow = document.getElementById("numero-row");
    let currentDate = new Date('2025-01-01');
    const endDate = new Date('2025-06-30');
    let lastMonth = "";
    let colSpan = 0;
    let lastTh = null;
    let currentWeekIndex = 0;
    let isEvenMonth = false;
    let allDateCells = [];
    let weekNumber = 1;
    let workDaysCount = 0;
    let currentColor = "#E0E0E0";

while (currentDate <= endDate) {
        const dayOfWeek = currentDate.getDay();
        const dateString = currentDate.toISOString().split('T')[0];

if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
            // Ajout du jour dans l'en-tête (ligne 1)
            let th = document.createElement("th");
            th.textContent = currentDate.getDate();
            theadRow.appendChild(th);
            allDateCells.push(th);

// Ajout de l'initiale du mois (ligne 2)
            let monthShort = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
            if (monthShort === lastMonth) {
                colSpan++;
                lastTh.colSpan = colSpan;
            } else {
                lastMonth = monthShort;
                colSpan = 1;
                lastTh = document.createElement("th");
                lastTh.textContent = monthShort;
                monthRow.appendChild(lastTh);

if (parseInt(currentDate.toLocaleString('default', { month: 'numeric' })) % 2 === 0) {
                    lastTh.style.backgroundColor = "#E0E0E0";
                    isEvenMonth = true;
                } else {
                    lastTh.style.backgroundColor = "#B0C4DE";
                    isEvenMonth = false;
                }
            }

th.style.backgroundColor = isEvenMonth ? "#FFA500" : "#0000FF";

// Ajout de l'initiale du jour de la semaine (ligne 3)
            let weekTh = document.createElement("th");
            weekTh.textContent = currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0);
            weekRow.appendChild(weekTh);

// Changer la couleur de fond tous les lundis
            if (dayOfWeek === 1) {
                currentColor = (currentColor === "#E0E0E0") ? "#B0C4DE" : "#E0E0E0";
            }
            weekTh.style.backgroundColor = currentColor;

// Incrémenter le numéro de semaine si c'est un lundi
            if (dayOfWeek === 1) {
                currentWeekIndex++;
                weekNumber++;
            }

workDaysCount++;
        }
        currentDate.setDate(currentDate.getDate() + 1);
    }
}

function createTable() 
    {

//     console.log(ComputeWeekNumber()); // Numéro de la semaine pour aujourd'hui (si lundi-vendredi)
//console.log(getWeekNumber(new Date(2025, , 1))); // Test pour le 1er janvier 2024 (lundi)
//console.log(getWeekNumber(new Date(2024, 0, 6))); // Test pour un samedi -> null

const theadRow = document.getElementById("header-row");
        const monthRow = document.getElementById("month-row");
        const weekRow = document.getElementById("semaine-row");
        const numeroWeekRow = document.getElementById("numero-row");
        let currentDate = new Date('2025-01-01');
        const endDate = new Date('2025-06-30');
        let lastMonth = "";
        let colSpan = 0;
        let lastTh = null;
        let currentWeekIndex = 0;  // Suivi de l'index de la semaine pour alterner les couleurs des semaines
        let isEvenMonth = false; // Variable pour savoir si c'est un mois pair ou impair
        let allDateCells = []; // Tableau pour stocker les cellules des dates
        let weekNumber = 1; // Initialiser le numéro de semaine
        let workDaysCount = 0; // Compteur de jours ouvrés

const dayOfWeek = currentDate.getDay();
        const dateString = currentDate.toISOString().split('T')[0];
        const bbb = currentDate.getDate();

console.log(" ++++ " + bbb + "  " + dayOfWeek + " " + dateString)

while (currentDate <= endDate) {
            const dayOfWeek = currentDate.getDay();
            const dateString = currentDate.toISOString().split('T')[0];
            if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
                // Ajout du jour dans l'en-tête (ligne 1)
                let th = document.createElement("th");
                th.textContent = currentDate.getDate();
                theadRow.appendChild(th);
                allDateCells.push(th); // Stockage de la cellule de la date

// Ajout de l'initiale du mois (ligne 2)
                let monthShort = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
                if (monthShort === lastMonth) {
                    colSpan++;
                    lastTh.colSpan = colSpan;
                } else {
                    lastMonth = monthShort;
                    colSpan = 1;
                    lastTh = document.createElement("th");
                    lastTh.textContent = monthShort;
                    monthRow.appendChild(lastTh);

// Application de la couleur de fond alternée pour les mois dans la ligne 2 (mois pairs / impairs)
                    if (lastTh) {
                        if (parseInt(currentDate.toLocaleString('default', { month: 'numeric' })) % 2 === 0) {
                            lastTh.style.backgroundColor = "#E0E0E0"; // Mois pair : Gris clair
                            isEvenMonth = true;
                        } else {
                            lastTh.style.backgroundColor = "#B0C4DE"; // Mois impair : Bleu clair
                            isEvenMonth = false;
                        }
                    }
                }

// Appliquer la couleur de fond alternée dans la première ligne (jours) pour les mois pairs/impairs
                if (isEvenMonth) {
                    th.style.backgroundColor = "#FFA500";  // Mois pair : Orange
                } else {
                    th.style.backgroundColor = "#0000FF";  // Mois impair : Bleu
                }

// Ajout de l'initiale du jour de la semaine (ligne 3)
                let weekTh = document.createElement("th");
                weekTh.textContent = currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0);
                //weekRow.appendChild(weekTh);
                weekRow.appendChild(weekTh);

// Application de la couleur de fond pour les jours de la semaine (lundi à vendredi)
                if (dayOfWeek >= 1 && dayOfWeek <= 5) { // Lundi à vendredi
                    if (currentWeekIndex % 2 === 0) {
                        weekTh.style.backgroundColor = "#E0E0E0"; // Semaine paire : Gris clair
                    } else {
                        weekTh.style.backgroundColor = "#B0C4DE"; // Semaine impaire : Bleu clair
                    }
                }

// Incrémenter le numéro de semaine si c'est un lundi
                if (dayOfWeek === 1) { // Lundi (début de la semaine)
                    currentWeekIndex++;
                    weekNumber++; // Incrémenter le numéro de semaine
                }

workDaysCount++; // Incrémenter le compteur de jours ouvrés
            }

// Ajouter les numéros de semaine sous la ligne de semaine
//            let numeroSemaine = document.createElement("th");
//            numeroSemaine.textContent = weekNumber;  // Utiliser le numéro de semaine calculé
//            numeroWeekRow.appendChild(numeroSemaine);

currentDate.setDate(currentDate.getDate() + 1);
        }
    }

function getWeekNumber(date) {
    let tempDate = new Date(date.getTime());
    tempDate.setHours(0, 0, 0, 0);
    
    // Définir le jeudi de la semaine (ISO 8601)
    tempDate.setDate(tempDate.getDate() + 3 - ((tempDate.getDay() + 6) % 7));

// Premier jour de l'année (jeudi ISO 8601)
    let firstThursday = new Date(tempDate.getFullYear(), 0, 4);
    firstThursday.setDate(firstThursday.getDate() + 3 - ((firstThursday.getDay() + 6) % 7));

// Calcul du numéro de la semaine
    let weekNumber = Math.round(((tempDate - firstThursday) / 86400000) / 7) + 1;
    
    return weekNumber;
    }

function ComputeWeekNumber(date = new Date()) 
    {
    const day = date.getDay(); // Obtenir le jour de la semaine (0 = dimanche, 6 = samedi)
    
    if (day === 0 || day === 6) {
        return null; // Retourne null pour samedi et dimanche
    }

const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
    const dayNum = d.getUTCDay() || 7; // Convertir dimanche en 7
    d.setUTCDate(d.getUTCDate() + 4 - dayNum); // Ajuster au jeudi de la semaine en cours
    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
    return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
}

window.onload = function() {
        createTable();
    };

function logTableData() {
        let data = getTableData();
        console.log(data); // Affiche les données dans la console
        // Convertir en JSON et afficher dans la console
        console.log(JSON.stringify(data, null, 2)); // JSON avec une indentation de 2 espaces
    }

// Ajouter un événement au bouton pour déclencher la récupération des données
    document.getElementById('getDataButton').addEventListener('click', logTableData);

document.getElementById('sendDataButton').addEventListener('click', sendTableData);

// Fonction pour lire les données du dernier enregistrement
    function readTableData() {
        fetch('lecture.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json()) // Convertir la réponse en JSON
        .then(data => {
            if (data.success) {
                updateTable(data.data_json); // Met à jour le tableau avec les données récupérées
            } else {
                alert('Erreur lors de la récupération des données.');
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
        });
    }

// Associer la fonction au bouton "Lire les données"
    document.getElementById('readDataButton').addEventListener('click', readTableData);

// Ajouter un événement au bouton pour ajouter une nouvelle ligne
    document.getElementById('addRowButton').addEventListener('click', addRow);
</script>
</body>
</html>