File "VisualizarAnexos.php"
Full Path: C:/wamp64/www/sistemas/ManualAPP/VisualizarAnexos.php
File size: 26.29 KB
MIME-type: text/x-php
Charset: utf-8
<?php
session_start();
header("Cache-control: private");
$page = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
$itemsPerPage = 30;
$dateFilter = isset($_GET['date']) ? $_GET['date'] : '';
$searchTerm = isset($_GET['search']) ? $_GET['search'] : '';
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Visualizador de Manuales APP</title>
<link rel="icon" type="image/png" href="../img/icono1.png">
<meta name="author" content="Sebastian Obando">
<meta name="copyright" content="Sebastian Obando">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
height: 100vh;
background-image: linear-gradient(to right, #FF8626, #025159);
padding-top: 20px;
padding-bottom: 20px;
}
.logo {
display: block;
margin: 0 auto 1.5rem;
}
.document-container {
border-radius: 20px;
background: #fff;
width: 100%;
max-width: 900px;
padding: 40px;
box-shadow: 10px 10px 20px 0 rgb(0 0 0 / 30%);
margin: 0 auto;
}
.document-card {
border: 2px solid #d9534f;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.document-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.document-card.selected {
background-color: #e3f2fd;
border-color: #2196f3;
}
.btn-view {
background-color: #5bc0de;
color: white;
border: none;
}
.btn-download {
background-color: #d9534f;
color: white;
border: none;
}
.btn-view:hover, .btn-download:hover {
opacity: 0.8;
}
h2 {
color: black;
text-align: center;
margin-bottom: 30px;
}
.search-container {
margin-bottom: 20px;
position: relative;
}
.search-input-container {
position: relative;
}
.clear-search {
position: absolute;
right: 45px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #666;
cursor: pointer;
display: none;
z-index: 3;
}
.clear-search:hover {
color: #333;
}
.search-stats {
background: #f8f9fa;
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 15px;
border-left: 4px solid #007bff;
}
.no-results {
display: none;
text-align: center;
padding: 40px 20px;
color: #666;
background: #f8f9fa;
border-radius: 10px;
margin: 20px 0;
}
.highlight {
background-color: #ffeb3b;
font-weight: bold;
padding: 2px 4px;
border-radius: 3px;
}
.loading {
opacity: 0.7;
pointer-events: none;
}
.keyboard-shortcut {
font-size: 0.8em;
color: #666;
margin-top: 5px;
}
.stats-badge {
background: #979393;
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.85em;
margin-left: 10px;
}
/* Added pagination styles */
.pagination-container {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.pagination-info {
background: #f8f9fa;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9em;
color: #666;
}
.date-filter-container {
background: #f8f9fa;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
border-left: 4px solid #28a745;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.document-card {
animation: fadeIn 0.3s ease;
}
</style>
</head>
<body>
<div class="container">
<div class="document-container">
<!-- Logo -->
<img src="../img/LOGO.png" alt="" width="37" height="37" class="logo" style="width: 250px; height: auto;" />
<?php
$directorio = 'ANEXOS/';
$allFiles = array();
$totalDocuments = 0;
if(file_exists($directorio)) {
$archivos = scandir($directorio);
$archivos = array_diff($archivos, array('.', '..'));
// Filter files by date if specified
foreach($archivos as $archivo) {
$ruta_archivo = $directorio . $archivo;
$fileDate = date('Y-m-d', filemtime($ruta_archivo));
// Apply date filter if specified
if($dateFilter && $fileDate != $dateFilter) {
continue;
}
// Apply search filter if specified
if($searchTerm && stripos($archivo, $searchTerm) === false) {
continue;
}
$allFiles[] = array(
'name' => $archivo,
'path' => $ruta_archivo,
'date' => $fileDate,
'time' => filemtime($ruta_archivo)
);
}
// Sort by modification time (newest first)
usort($allFiles, function($a, $b) {
return $b['time'] - $a['time'];
});
$totalDocuments = count($allFiles);
$totalPages = ceil($totalDocuments / $itemsPerPage);
$offset = ($page - 1) * $itemsPerPage;
$currentPageFiles = array_slice($allFiles, $offset, $itemsPerPage);
}
?>
<h2>
Manueles Anexados
<span class="stats-badge" id="totalStats">
<i class="fas fa-file-alt"></i>
<?php echo $totalDocuments; ?> documentos
</span>
</h2>
<hr>
<div class="mb-4">
<a href="javascript:history.back()" class="btn btn-danger me-2">
<i class="fas fa-undo"></i> Regresar
</a>
<a href="../index.php" class="btn btn-warning me-2">
<i class="fas fa-house"></i> Menu
</a>
</div>
<!-- Added date filter form -->
<form method="GET" class="date-filter-container">
<div class="row align-items-end">
<div class="col-md-4">
<label for="dateFilter" class="form-label">
<i class="fas fa-calendar-alt"></i> Filtrar por fecha:
</label>
<input type="date"
id="dateFilter"
name="date"
class="form-control"
value="<?php echo htmlspecialchars($dateFilter); ?>">
</div>
<div class="col-md-4">
<label for="searchFilter" class="form-label">
<i class="fas fa-search"></i> Buscar por nombre:
</label>
<input type="text"
id="searchFilter"
name="search"
class="form-control"
placeholder="Nombre del archivo..."
value="<?php echo htmlspecialchars($searchTerm); ?>">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary me-2">
<i class="fas fa-filter"></i> Filtrar
</button>
<a href="?" class="btn btn-outline-secondary">
<i class="fas fa-times"></i> Limpiar
</a>
</div>
</div>
<?php if($dateFilter || $searchTerm): ?>
<div class="mt-2">
<small class="text-muted">
Filtros activos:
<?php if($dateFilter): ?>
<span class="badge bg-info">Fecha: <?php echo $dateFilter; ?></span>
<?php endif; ?>
<?php if($searchTerm): ?>
<span class="badge bg-info">Búsqueda: "<?php echo htmlspecialchars($searchTerm); ?>"</span>
<?php endif; ?>
</small>
</div>
<?php endif; ?>
</form>
<!-- Barra de búsqueda mejorada -->
<div class="search-container">
<div class="search-input-container">
<div class="input-group">
<input type="text"
id="searchInput"
class="form-control"
placeholder="Buscar documentos en tiempo real..."
aria-label="Buscar documento"
autocomplete="off">
<button class="clear-search" id="clearSearch" title="Limpiar búsqueda">
<i class="fas fa-times"></i>
</button>
<button class="btn btn-outline-secondary" type="button" id="searchButton">
<i class="fas fa-search"></i> Buscar
</button>
</div>
</div>
<div class="keyboard-shortcut">
<i class="fas fa-keyboard"></i>
<strong>Escape</strong> para limpiar
</div>
</div>
<!-- Estadísticas de búsqueda -->
<div class="search-stats" id="searchStats">
<i class="fas fa-chart-bar"></i>
Mostrando <span id="resultsCount"><?php echo count($currentPageFiles); ?></span>
de <span id="totalDocuments"><?php echo $totalDocuments; ?></span> documentos
<?php if($totalPages > 1): ?>
- Página <?php echo $page; ?> de <?php echo $totalPages; ?>
<?php endif; ?>
</div>
<!-- Mensaje sin resultados -->
<div id="noResults" class="no-results">
<i class="fas fa-search fa-3x mb-3" style="color: #ddd;"></i>
<h4>No se encontraron resultados</h4>
<p>Intenta con otros términos de búsqueda</p>
<button class="btn btn-outline-primary" onclick="clearSearch()">
<i class="fas fa-refresh"></i> Limpiar filtros
</button>
</div>
<div class="row" id="documentsContainer">
<?php
if(count($currentPageFiles) > 0) {
foreach($currentPageFiles as $fileInfo) {
$archivo = $fileInfo['name'];
$ruta_archivo = $fileInfo['path'];
$extension = strtolower(pathinfo($archivo, PATHINFO_EXTENSION));
$icono = "";
$puedeVisualizar = false;
// Asignar icono y determinar si se puede visualizar
switch($extension) {
case 'pdf':
$icono = "<i class='fas fa-file-pdf text-danger me-2'></i>";
$puedeVisualizar = true;
break;
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
$icono = "<i class='fas fa-file-image text-success me-2'></i>";
$puedeVisualizar = true;
break;
case 'txt':
$icono = "<i class='fas fa-file-alt text-info me-2'></i>";
$puedeVisualizar = true;
break;
case 'doc':
case 'docx':
$icono = "<i class='fas fa-file-word text-primary me-2'></i>";
$puedeVisualizar = false;
break;
case 'xls':
case 'xlsx':
$icono = "<i class='fas fa-file-excel text-success me-2'></i>";
$puedeVisualizar = false;
break;
default:
$icono = "<i class='fas fa-file text-secondary me-2'></i>";
$puedeVisualizar = false;
}
echo "
<div class='col-md-6 document-item' data-filename='".strtolower($archivo)."' data-date='{$fileInfo['date']}'>
<div class='document-card' onclick='selectDocument(this)'>
<div class='d-flex justify-content-between align-items-center'>
<div class='text-truncate flex-grow-1'>
{$icono}
<span class='fw-bold document-name' title='".htmlspecialchars($archivo)."'>" . htmlspecialchars($archivo) . "</span>
<br><small class='text-muted'><i class='fas fa-clock'></i> {$fileInfo['date']}</small>
</div>
<div class='btn-group'>
".($puedeVisualizar ?
"<a href='{$ruta_archivo}' target='_blank' class='btn btn-sm btn-view me-1' title='Visualizar documento'>
<i class='fas fa-eye'></i> Ver
</a>" : "")."
<a href='{$ruta_archivo}' download class='btn btn-sm btn-download' title='Descargar documento'>
<i class='fas fa-download'></i> Descargar
</a>
</div>
</div>
</div>
</div>";
}
} else {
if($dateFilter || $searchTerm) {
echo "<div class='col-12'>
<div class='alert alert-warning'>
<i class='fas fa-filter me-2'></i> No se encontraron documentos con los filtros aplicados.
</div>
</div>";
} else {
echo "<div class='col-12'>
<div class='alert alert-info'>
<i class='fas fa-info-circle me-2'></i> No hay documentos en la carpeta ANEXOS.
</div>
</div>";
}
}
?>
</div>
<!-- Added pagination controls -->
<?php if($totalPages > 1): ?>
<div class="pagination-container">
<div class="pagination-info">
Mostrando <?php echo ($offset + 1); ?> - <?php echo min($offset + $itemsPerPage, $totalDocuments); ?>
de <?php echo $totalDocuments; ?> documentos
</div>
<nav aria-label="Navegación de páginas">
<ul class="pagination mb-0">
<?php if($page > 1): ?>
<li class="page-item">
<a class="page-link" href="?page=<?php echo ($page-1); ?><?php echo $dateFilter ? '&date='.$dateFilter : ''; ?><?php echo $searchTerm ? '&search='.urlencode($searchTerm) : ''; ?>">
<i class="fas fa-chevron-left"></i> Anterior
</a>
</li>
<?php endif; ?>
<?php
$startPage = max(1, $page - 2);
$endPage = min($totalPages, $page + 2);
if($startPage > 1): ?>
<li class="page-item">
<a class="page-link" href="?page=1<?php echo $dateFilter ? '&date='.$dateFilter : ''; ?><?php echo $searchTerm ? '&search='.urlencode($searchTerm) : ''; ?>">1</a>
</li>
<?php if($startPage > 2): ?>
<li class="page-item disabled"><span class="page-link">...</span></li>
<?php endif; ?>
<?php endif; ?>
<?php for($i = $startPage; $i <= $endPage; $i++): ?>
<li class="page-item <?php echo ($i == $page) ? 'active' : ''; ?>">
<a class="page-link" href="?page=<?php echo $i; ?><?php echo $dateFilter ? '&date='.$dateFilter : ''; ?><?php echo $searchTerm ? '&search='.urlencode($searchTerm) : ''; ?>">
<?php echo $i; ?>
</a>
</li>
<?php endfor; ?>
<?php if($endPage < $totalPages): ?>
<?php if($endPage < $totalPages - 1): ?>
<li class="page-item disabled"><span class="page-link">...</span></li>
<?php endif; ?>
<li class="page-item">
<a class="page-link" href="?page=<?php echo $totalPages; ?><?php echo $dateFilter ? '&date='.$dateFilter : ''; ?><?php echo $searchTerm ? '&search='.urlencode($searchTerm) : ''; ?>">
<?php echo $totalPages; ?>
</a>
</li>
<?php endif; ?>
<?php if($page < $totalPages): ?>
<li class="page-item">
<a class="page-link" href="?page=<?php echo ($page+1); ?><?php echo $dateFilter ? '&date='.$dateFilter : ''; ?><?php echo $searchTerm ? '&search='.urlencode($searchTerm) : ''; ?>">
Siguiente <i class="fas fa-chevron-right"></i>
</a>
</li>
<?php endif; ?>
</ul>
</nav>
</div>
<?php endif; ?>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
const clearButton = document.getElementById('clearSearch');
const documentItems = document.querySelectorAll('.document-item');
const noResults = document.getElementById('noResults');
const searchStats = document.getElementById('searchStats');
const resultsCount = document.getElementById('resultsCount');
const totalDocuments = document.getElementById('totalDocuments');
let isSearching = false;
const totalDocs = documentItems.length;
// Auto-focus en el campo de búsqueda
searchInput.focus();
// Función principal de filtrado (búsqueda en tiempo real)
function filterDocuments() {
if (isSearching) return;
isSearching = true;
searchButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Buscando...';
setTimeout(() => {
const searchTerm = searchInput.value.toLowerCase().trim();
let hasResults = false;
let visibleCount = 0;
clearButton.style.display = searchTerm ? 'block' : 'none';
documentItems.forEach(item => {
const documentName = item.querySelector('.document-name').textContent.toLowerCase();
const filename = item.getAttribute('data-filename');
if (documentName.includes(searchTerm) || filename.includes(searchTerm)) {
item.style.display = 'block';
hasResults = true;
visibleCount++;
highlightText(item.querySelector('.document-name'), searchTerm);
} else {
item.style.display = 'none';
removeHighlight(item.querySelector('.document-name'));
}
});
resultsCount.textContent = visibleCount;
if (searchTerm && !hasResults) {
noResults.style.display = 'block';
searchStats.style.display = 'none';
} else {
noResults.style.display = 'none';
searchStats.style.display = 'block';
}
searchButton.innerHTML = '<i class="fas fa-search"></i> Buscar';
isSearching = false;
}, 300);
}
function highlightText(element, searchTerm) {
if (!searchTerm) return;
const originalText = element.getAttribute('data-original') || element.textContent;
element.setAttribute('data-original', originalText);
const regex = new RegExp(`(${searchTerm})`, 'gi');
const highlightedText = originalText.replace(regex, '<span class="highlight">$1</span>');
element.innerHTML = highlightedText;
}
function removeHighlight(element) {
const originalText = element.getAttribute('data-original');
if (originalText) {
element.textContent = originalText;
}
}
function clearSearch() {
searchInput.value = '';
clearButton.style.display = 'none';
documentItems.forEach(item => {
item.style.display = 'block';
removeHighlight(item.querySelector('.document-name'));
});
resultsCount.textContent = totalDocs;
noResults.style.display = 'none';
searchStats.style.display = 'block';
searchInput.focus();
}
function selectDocument(card) {
document.querySelectorAll('.document-card').forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
}
// Event listeners
searchButton.addEventListener('click', filterDocuments);
clearButton.addEventListener('click', clearSearch);
searchInput.addEventListener('input', function() {
clearTimeout(window.searchTimeout);
window.searchTimeout = setTimeout(filterDocuments, 300);
});
searchInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
filterDocuments();
}
});
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 'f') {
e.preventDefault();
searchInput.focus();
searchInput.select();
}
if (e.key === 'Escape') {
clearSearch();
}
});
window.selectDocument = selectDocument;
window.clearSearch = clearSearch;
});
</script>
</body>
</html>