File "modal_base19_07.php"
Full Path: /home/analogde/www/XTRAIL-20260403195343/affichahe _expand_collpase_tableau/modal_base19_07.php
File size: 12.27 KB
MIME-type: text/x-php
Charset: utf-8
<?php
// Traitement du formulaire
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['file_name'])) {
$fileName = $_POST['file_name'];
// Ajout de "_***" au nom du fichier
$result = $fileName . '_***';
}
// Gestion des cookies pour garder l'état des versions visibles
if (isset($_POST['toggle_versions'])) {
$fileId = $_POST['file_id'];
$currentState = isset($_COOKIE[$fileId]) ? $_COOKIE[$fileId] : 'collapsed';
$newState = $currentState === 'expanded' ? 'collapsed' : 'expanded';
setcookie($fileId, $newState, time() + 3600, '/'); // Le cookie expire dans une heure
// Actualiser la page après le changement d'état
header("Location: " . $_SERVER['PHP_SELF']);
exit();
}
$files = [
"0filtre_P1000118.jpg" => [
["file_name" => "0filtre_P1000118.jpg", "size" => 119005, "creation_date" => "2025-01-06 22:40:26"]
],
"1105655.jpg" => [
["file_name" => "1105655.jpg", "size" => 262301, "creation_date" => "2025-01-06 22:33:28"],
["file_name" => "1105655_v1.jpg", "size" => 262301, "creation_date" => "2025-01-06 22:50:11"],
["file_name" => "1105655_v2.jpg", "size" => 262301, "creation_date" => "2025-01-07 22:34:30"],
["file_name" => "1105655_v3.jpg", "size" => 262301, "creation_date" => "2025-01-07 22:54:21"]
],
"84311735_018_22c3.jpg" => [
["file_name" => "84311735_018_22c3.jpg", "size" => 69937, "creation_date" => "2025-01-06 22:38:07"]
],
"capture_IC616.jpg" => [
["file_name" => "capture_IC616.jpg", "size" => 300234, "creation_date" => "2025-01-05 18:24:02"],
["file_name" => "capture_IC616_v1.jpg", "size" => 300234, "creation_date" => "2025-01-05 18:24:17"],
["file_name" => "capture_IC616_v2.jpg", "size" => 300234, "creation_date" => "2025-01-05 18:25:02"],
["file_name" => "capture_IC616_v3.jpg", "size" => 300234, "creation_date" => "2025-01-05 18:29:11"],
["file_name" => "capture_IC616_v4.jpg", "size" => 300234, "creation_date" => "2025-01-05 18:54:55"]
]
];
?>
<!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.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<style>
.version-visible {
background-color: #444444; /* Couleur pour les lignes visibles */
}
/* Effet de survol pour les lignes des versions */
.version-visible:hover {
background-color: #a8e09a; /* Couleur de survol (plus foncée) */
cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
}
/* 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 */
}
/* Classe pour désactiver le bouton */
.disabled-btn {
pointer-events: none;
opacity: 0.6;
}
/* Classe pour rendre les éléments invisibles */
.invisible {
display: none;
}
</style>
</head>
<body>
<div class="container mt-4">
<h2>Liste des fichiers et versions</h2>
<table class="table table-hover 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 foreach ($files as $originalFile => $versions): ?>
<?php $fileId = md5($originalFile);
$versionCount = count($versions); // Nombre d'éléments dans le sous-tableau
?>
<tr id="file-<?= $fileId ?>">
<td>
<a href="#" data-bs-toggle="modal" data-bs-target="#fileModal" data-file="<?= $originalFile ?>">
<?= $originalFile ?>
</a>
</td>
<td><?= $versionCount ?></td>
<td><?= number_format($versions[0]['size'], 0, ',', ' ') ?> octets</td>
<td><?= $versions[0]['creation_date'] ?></td>
<td>
<?php if (count($versions) > 1): ?>
<form method="POST" action="" style="display:inline;">
<input type="hidden" name="file_id" value="<?= $fileId ?>">
<input type="hidden" name="toggle_versions" value="true">
<button class="btn btn-primary btn-sm toggle-btn" type="submit">
<?= isset($_COOKIE[$fileId]) && $_COOKIE[$fileId] === 'expanded' ? 'Cacher versions' : 'Afficher versions' ?>
</button>
</form>
<?php endif; ?>
</td>
</tr>
<?php foreach ($versions as $index => $version): ?>
<?php if ($index > 0): ?>
<?php
// Vérifier l'état des versions dans les cookies (expand/collapse)
$isExpanded = isset($_COOKIE[$fileId]) && $_COOKIE[$fileId] === 'expanded';
?>
<tr class="version-row-<?= $fileId ?> <?= $isExpanded ? 'version-visible' : 'collapse' ?>" id="version-<?= md5($originalFile . '-' . $version['file_name']) ?>">
<td>
<a href="#" data-bs-toggle="modal" data-bs-target="#fileModal" data-file="<?= $version['file_name'] ?>">
<?= $version['file_name'] ?>
</a>
</td>
<td></td>
<td><?= number_format($version['size'], 0, ',', ' ') ?> octets</td>
<td><?= $version['creation_date'] ?></td>
<td></td>
</tr>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</tbody>
</table>
<!-- Bouton 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">
<form method="POST" action="">
<p>Voulez-vous vraiment traiter le fichier <span id="modalFileName"></span> ?</p>
<input type="hidden" id="fileNameInput" name="file_name" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="submit" class="btn btn-primary">OK</button>
</form>
</div>
</div>
</div>
</div>
<?php if (isset($result)): ?>
<div id="result" class="mt-4">
<p><strong>Résultat :</strong> <?= $result ?></p>
</div>
<?php endif; ?>
</div>
<script>
// Afficher le nom du fichier dans la fenêtre modale
document.getElementById('fileModal').addEventListener('show.bs.modal', function (event)
{
var button = event.relatedTarget;
var filename = button.getAttribute('data-file');
var modal = this;
modal.querySelector('.modal-body #modalFileName').textContent = filename;
modal.querySelector('.modal-body #fileNameInput').value = filename;
});
// Gestion du bouton "Afficher / Cacher toutes les versions"
document.getElementById('toggleAllVersionsBtn').addEventListener('click', function()
{
var allVersionRows = document.querySelectorAll('[class^="version-row-"]');
var allCollapsed = true;
var button = this;
allVersionRows.forEach(function(row) {
if (row.classList.contains('version-visible')) {
allCollapsed = false;
}
});
if (allCollapsed) {
// Afficher toutes les lignes de version
allVersionRows.forEach(function(row) {
row.classList.remove('collapse');
row.classList.add('version-visible');
});
button.textContent = 'Cacher toutes les versions';
// Mémoriser l'état des boutons en mode expand
document.querySelectorAll('.toggle-btn').forEach(function(btn) {
var fileId = btn.closest('form').querySelector('input[name="file_id"]').value;
document.cookie = `${fileId}=expanded; path=/; max-age=3600`;
});
} else {
// Cacher toutes les lignes de version
allVersionRows.forEach(function(row) {
row.classList.add('collapse');
row.classList.remove('version-visible');
});
button.textContent = 'Afficher toutes les versions';
// Mémoriser l'état des boutons en mode collapse
document.querySelectorAll('.toggle-btn').forEach(function(btn) {
var fileId = btn.closest('form').querySelector('input[name="file_id"]').value;
document.cookie = `${fileId}=collapsed; path=/; max-age=3600`;
});
}
// Rendre tous les boutons avec la classe btn btn-primary btn-sm toggle-btn invisibles
var toggleButtons = document.querySelectorAll('.toggle-btn');
toggleButtons.forEach(function(btn) {
btn.classList.toggle('invisible');
});
});
// Vérifier l'état des boutons et activer/désactiver le bouton toggleAllVersionsBtn
function checkToggleButtons() {
var toggleButtons = document.querySelectorAll('.toggle-btn');
var allCollapsed = true;
toggleButtons.forEach(function(button) {
if (button.textContent.includes('Cacher versions')) {
allCollapsed = false;
}
});
var toggleAllVersionsBtn = document.getElementById('toggleAllVersionsBtn');
if (allCollapsed) {
toggleAllVersionsBtn.classList.remove('disabled-btn');
} else {
//toggleAllVersionsBtn.classList.add('disabled-btn');
}
}
// Appeler la fonction après le chargement de la page
document.addEventListener('DOMContentLoaded', function() {
checkToggleButtons();
});
// Appeler la fonction après chaque clic sur un bouton de la classe btn btn-primary btn-sm
document.querySelectorAll('.toggle-btn').forEach(function(button) {
button.addEventListener('click', function() {
checkToggleButtons();
});
});
</script>
</body>
</html>