File "temp.php"
Full Path: /home/analogde/www/Python/Monsta-FTP-master/affichahe _expand_collpase_tableau/temp.php
File size: 6.33 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fichiers et Versions</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.version-visible {
background-color: orange; /* Couleur pour les lignes rendues visibles */
}
.version-visible-new {
background-color: orange;
animation: fadeHighlight 2s forwards;
}
@keyframes fadeHighlight {
from {
background-color: orange;
}
to {
background-color: inherit;
}
}
.ligne-hover:hover {
background-color: rgb(33, 83, 130); /* Couleur de fond lors du survol */
}
.table-row:hover {
background-color: #f0f0f0; /* Couleur de survol pour toutes les lignes */
cursor: pointer;
}
/* Supprime le soulignement des liens */
a {
text-decoration: none;
}
/* Style personnalisé pour les liens au survol */
a:hover {
color: blue; /* Exemple : change la couleur au survol */
}
</style>
</head>
<body>
<div class="container mt-4">
<h2>Liste des fichiers et versions</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Nom</th>
<th>Nombre d'éléments</th>
<th>Taille</th>
<th>Date de création</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$files = [
"file1.jpg" => [
["file_name" => "file1.jpg", "size" => 12345, "creation_date" => "2025-01-01 10:00:00"],
["file_name" => "file1_v1.jpg", "size" => 12345, "creation_date" => "2025-01-02 10:00:00"],
],
"file2.jpg" => [
["file_name" => "file2.jpg", "size" => 54321, "creation_date" => "2025-01-01 12:00:00"],
],
];
foreach ($files as $originalFile => $versions):
$fileId = md5($originalFile);
$versionCount = count($versions);
?>
<tr id="file-<?= $fileId ?>">
<td>
<a href="#" data-bs-toggle="modal" data-bs-target="#fileModal" data-file="<?= $originalFile ?>">
<?= htmlspecialchars($originalFile) ?>
</a>
</td>
<td><?= $versionCount ?></td>
<td><?= number_format($versions[0]['size'], 0, ',', ' ') ?> octets</td>
<td><?= htmlspecialchars($versions[0]['creation_date']) ?></td>
<td>
<?php if (count($versions) > 1): ?>
<button class="btn btn-primary btn-sm toggle-version" data-file-id="<?= $fileId ?>">
Afficher versions
</button>
<?php endif; ?>
</td>
</tr>
<?php foreach ($versions as $index => $version): ?>
<?php if ($index > 0): ?>
<tr class="version-row version-row-<?= $fileId ?> collapse">
<td>
<a href="#" data-bs-toggle="modal" data-bs-target="#fileModal" data-file="<?= $version['file_name'] ?>">
<?= htmlspecialchars($version['file_name']) ?>
</a>
</td>
<td></td>
<td><?= number_format($version['size'], 0, ',', ' ') ?> octets</td>
<td><?= htmlspecialchars($version['creation_date']) ?></td>
<td></td>
</tr>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</tbody>
</table>
<!-- Bouton global pour afficher/masquer toutes les versions -->
<button id="toggleAllVersionsBtn" class="btn btn-secondary mt-3">Afficher toutes les versions</button>
<!-- Modal -->
<div class="modal fade" id="fileModal" tabindex="-1" aria-labelledby="fileModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fileModalLabel">Fichier</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p id="modalFileName">Fichier : </p>
</div>
</div>
</div>
</div>
</div>
<script>
document.getElementById('toggleAllVersionsBtn').addEventListener('click', function () {
const rows = document.querySelectorAll('.version-row');
const isVisible = Array.from(rows).some(row => row.classList.contains('show'));
rows.forEach(row => {
if (isVisible) {
row.classList.remove('show', 'version-visible-new');
row.classList.add('collapse');
} else {
row.classList.remove('collapse');
row.classList.add('show', 'version-visible-new');
}
});
this.textContent = isVisible ? 'Afficher toutes les versions' : 'Cacher toutes les versions';
});
document.querySelectorAll('.toggle-version').forEach(button => {
button.addEventListener('click', function () {
const fileId = this.dataset.fileId;
const rows = document.querySelectorAll('.version-row-' + fileId);
const isVisible = Array.from(rows).some(row => row.classList.contains('show'));
rows.forEach(row => {
if (isVisible) {
row.classList.remove('show', 'version-visible-new');
row.classList.add('collapse');
} else {
row.classList.remove('collapse');
row.classList.add('show', 'version-visible-new');
}
});
this.textContent = isVisible ? 'Afficher versions' : 'Cacher versions';
});
});
</script>
</body>
</html>