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

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>