File "test03.php"

Full Path: /home/analogde/www/Python/Monsta-FTP-master/affichahe _expand_collpase_tableau/test03.php
File size: 5.13 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau de Fichiers</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

<div class="container mt-5">
    <h1 class="mb-4">Liste des fichiers</h1>
    <table class="table table-bordered table-hover">
        <thead class="table-dark">
            <tr>
                <th>Nom du fichier</th>
                <th>Nombre de versions</th>
                <th>Taille (première version)</th>
                <th>Date de création</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php
            $data = [
                "0filtre_P1000118.jpg" => [
                    [
                        "file_name" => "/home/analogde//www/Document_workarea/patrice/plouf/0filtre_P1000118.jpg",
                        "size" => 119005,
                        "creation_date" => "2025-01-06 22:40:26",
                    ],
                ],
                "1105655.jpg" => [
                    [
                        "file_name" => "/home/analogde//www/Document_workarea/patrice/plouf/1105655_v1.jpg",
                        "size" => 262301,
                        "creation_date" => "2025-01-06 22:50:11",
                    ],
                    [
                        "file_name" => "/home/analogde//www/Document_workarea/patrice/plouf/1105655_v2.jpg",
                        "size" => 262301,
                        "creation_date" => "2025-01-07 22:34:30",
                    ],
                ],
                "example_large_file.jpg" => [
                    [
                        "file_name" => "/home/analogde//www/Document_workarea/example_large_file_v1.jpg",
                        "size" => 1024000,
                        "creation_date" => "2025-01-10 15:20:45",
                    ],
                    [
                        "file_name" => "/home/analogde//www/Document_workarea/example_large_file_v2.jpg",
                        "size" => 1024000,
                        "creation_date" => "2025-01-11 10:12:30",
                    ],
                ],
            ];

            foreach ($data as $fileName => $versions) {
                $rowId = md5($fileName);
                $firstVersion = $versions[0];
                $isMultiple = count($versions) > 1;

                echo '<tr>';
                echo '<td>' . htmlspecialchars($fileName) . '</td>';
                echo '<td>' . count($versions) . '</td>';
                echo '<td>' . number_format($firstVersion["size"], 0, ",", " ") . ' bytes</td>';
                echo '<td>' . $firstVersion["creation_date"] . '</td>';
                echo '<td>';
                if ($isMultiple) {
                    echo '<button class="btn btn-primary btn-sm toggle-collapse" data-bs-toggle="collapse" data-bs-target="#' . $rowId . '" aria-expanded="false">Afficher</button>';
                } else {
                    echo '-';
                }
                echo '</td>';
                echo '</tr>';

                if ($isMultiple) {
                    echo '<tr class="collapse" id="' . $rowId . '">';
                    echo '<td colspan="5">';
                    echo '<table class="table table-sm">';
                    echo '<thead class="table-secondary">';
                    echo '<tr>';
                    echo '<th>Nom</th>';
                    echo '<th>Taille</th>';
                    echo '<th>Date de création</th>';
                    echo '</tr>';
                    echo '</thead>';
                    echo '<tbody>';
                    foreach ($versions as $version) {
                        echo '<tr>';
                        echo '<td>' . htmlspecialchars($version["file_name"]) . '</td>';
                        echo '<td>' . number_format($version["size"], 0, ",", " ") . ' bytes</td>';
                        echo '<td>' . $version["creation_date"] . '</td>';
                        echo '</tr>';
                    }
                    echo '</tbody>';
                    echo '</table>';
                    echo '</td>';
                    echo '</tr>';
                }
            }
            ?>
        </tbody>
    </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Sélectionnez tous les boutons avec la classe 'toggle-collapse'
        const buttons = document.querySelectorAll('.toggle-collapse');

        buttons.forEach(button => {
            button.addEventListener('click', () => {
                // Récupérez l'état du bouton
                const expanded = button.getAttribute('aria-expanded') === 'true';

                // Changez le texte en fonction de l'état
                if (expanded) {
                    button.textContent = 'Afficher';
                } else {
                    button.textContent = 'Masquer';
                }
            });
        });
    });
</script>
</body>
</html>