File "modal_base22_010.php"
Full Path: /home/analogde/www/XTRAIL-20260403195343/affichahe _expand_collpase_tableau/modal_base22_010.php
File size: 11.89 KB
MIME-type: text/x-php
Charset: utf-8
<?php
session_start();
// Vérifier si le formulaire a été soumis
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['file_name'])) {
// Traiter le fichier soumis
$fileName = $_POST['file_name'];
// Vous pouvez ajouter ici le traitement nécessaire pour le fichier
// Restaurer l'état des lignes visibles après la soumission
if (isset($_COOKIE['visible_rows'])) {
$visibleRows = json_decode($_COOKIE['visible_rows'], true);
}
}
// Simulation des données
$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"]
],
"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"]
],
];
?>
<!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: #d1f7c4; /* Couleur pour les lignes visibles */
}
.version-visible:hover {
background-color: #a8e09a; /* Couleur de survol */
cursor: pointer;
}
.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;
}
tr:hover {
color: #fff;
background-color: #000;
}
/* 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 */
}
/* Couleur de fond pour les lignes en mode expand */
.version-row.show {
background-color: #e0f7fa; /* Couleur de fond pour les lignes en mode expand */
}
</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):
$fileId = md5($originalFile); // Utilisation de l'ID unique pour chaque fichier
$versionCount = count($versions); // Nombre d'éléments dans le sous-tableau
?>
<tr class="ligne-hover" 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-visible version-row version-row-<?= $fileId ?> <?= isset($visibleRows[$fileId]) && in_array($index, $visibleRows[$fileId]) ? 'show' : '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 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($fileName)): ?>
<div id="result" class="mt-4">
<p><strong>Résultat :</strong> <?= htmlspecialchars($fileName . '_***') ?></p>
</div>
<?php endif; ?>
</div>
<script>
// Fonction pour définir un cookie
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
// Fonction pour obtenir un cookie
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// Bouton global pour afficher/masquer toutes les versions
document.getElementById('toggleAllVersionsBtn').addEventListener('click', function () {
const allVersionRows = document.querySelectorAll('.version-row');
const isAllVisible = Array.from(allVersionRows).some(row => row.classList.contains('show'));
const button = this;
const toggleButtons = document.querySelectorAll('.toggle-version');
allVersionRows.forEach(row => {
if (isAllVisible) {
row.classList.remove('show');
row.classList.add('collapse');
} else {
row.classList.remove('collapse');
row.classList.add('show');
}
});
button.textContent = isAllVisible ? 'Afficher toutes les versions' : 'Cacher toutes les versions';
toggleButtons.forEach(btn => {
btn.disabled = !isAllVisible;
});
// Stocker l'état des lignes visibles dans un cookie
const visibleRows = Array.from(allVersionRows).filter(row => row.classList.contains('show')).map(row => row.dataset.fileId);
setCookie('visible_rows', JSON.stringify(visibleRows), 1);
});
// Gestion du modal pour afficher le fichier sélectionné
document.querySelectorAll('a[data-bs-toggle="modal"]').forEach(link => {
link.addEventListener('click', function () {
const fileName = this.dataset.file;
document.getElementById('modalFileName').textContent = fileName;
document.getElementById('fileNameInput').value = fileName;
});
});
// Gestion des boutons toggle-version
document.querySelectorAll('.toggle-version').forEach(btn => {
btn.addEventListener('click', function () {
const fileId = this.dataset.fileId;
const versionRows = document.querySelectorAll(`.version-row-${fileId}`);
const isVisible = Array.from(versionRows).some(row => row.classList.contains('show'));
const toggleAllBtn = document.getElementById('toggleAllVersionsBtn');
versionRows.forEach(row => {
if (isVisible) {
row.classList.remove('show');
row.classList.add('collapse');
} else {
row.classList.remove('collapse');
row.classList.add('show');
}
});
this.textContent = isVisible ? 'Afficher versions' : 'Cacher versions';
// Désactiver le bouton global si un bouton toggle-version est cliqué
toggleAllBtn.disabled = true;
// Vérifier si tous les boutons toggle-version sont revenus à "Afficher versions"
const allToggleButtons = document.querySelectorAll('.toggle-version');
const allInInitialState = Array.from(allToggleButtons).every(btn => btn.textContent === 'Afficher versions');
if (allInInitialState) {
toggleAllBtn.disabled = false;
}
// Stocker l'état des lignes visibles dans un cookie
const visibleRows = Array.from(versionRows).filter(row => row.classList.contains('show')).map(row => row.dataset.fileId);
setCookie('visible_rows', JSON.stringify(visibleRows), 1);
});
});
// Restaurer l'état des lignes visibles à partir du cookie
const visibleRowsCookie = getCookie('visible_rows');
if (visibleRowsCookie) {
const visibleRows = JSON.parse(visibleRowsCookie);
visibleRows.forEach(fileId => {
const versionRows = document.querySelectorAll(`.version-row-${fileId}`);
versionRows.forEach(row => {
row.classList.remove('collapse');
row.classList.add('show');
});
});
}
</script>
</body>
</html>