File "pendientesVisitantes.php"
Full Path: C:/wamp64/www/porteria/ANTERIOR/visitantes/pendientesVisitantes.php
File size: 11.32 KB
MIME-type: text/x-php
Charset: utf-8
<?php
include("connection.php");
$con = connection();
// Modificamos la consulta para mostrar solo los registros sin salida
$sql = "SELECT * FROM colaboradores WHERE salida IS NULL OR salida = '' ORDER BY id DESC";
$query = mysqli_query($con, $sql);
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Colaboradores sin registro de salida">
<meta name="keywords" content="html, css, bases de datos, php">
<meta name="author" content="Juan Ca">
<meta name="copyright" content="Juan ca">
<meta name="google" content="notranslate"> <!-- Evita la traducción automática -->
<title>Visitantes Sin Salida</title>
<link rel="icon" type="image/png" href="../img/icono.png"><!-- Cambia el icono de los titulos en las pestañas ico 16X16 -->
<!-- Carga de jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.header h2 {
margin: 0;
color: #333;
}
.button-container {
margin: 15px 0;
}
.button-container input[type="button"] {
padding: 8px 15px;
margin-right: 10px;
cursor: pointer;
background-color: coral;
color: white;
border: none;
border-radius: 4px;
}
.button-container input[type="button"]:hover {
background-color: coral;
}
.users-table {
width: 100%;
overflow-x: auto;
}
table.display {
width: 100%;
border-collapse: collapse;
}
table.display th, table.display td {
padding: 12px 8px;
text-align: left;
border: 1px solid #ddd;
}
table.display th {
background-color: #f2f2f2;
font-weight: bold;
}
table.display tr:nth-child(even) {
background-color: #f9f9f9;
}
table.display tr:hover {
background-color: #f1f1f1;
}
.btn-salida {
background-color: coral;
border: 1px solid coral;
color: white;
padding: 8px 12px;
cursor: pointer;
border-radius: 20px;
transition: all 0.3s ease;
}
.btn-salida:hover {
background-color: #ff6347;
transform: scale(1.05);
}
.no-records {
padding: 20px;
background-color: #d1ecf1;
color: #0c5460;
border-radius: 5px;
text-align: center;
margin-top: 20px;
}
.copyright {
text-align: center;
margin-top: 30px;
color: #666;
font-size: 14px;
padding: 10px;
}
.refresh-btn {
background-color: #007bff;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
}
.refresh-btn:hover {
background-color: #0069d9;
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #dc3545;
margin-right: 8px;
}
.status-text {
font-weight: bold;
color: #dc3545;
}
.header-info {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header-info">
<h2>Visitantes Sin Registro de Salida</h2>
<span class="status-indicator"></span>
<span class="status-text">
<?php
$count = mysqli_num_rows($query);
echo $count . " " . ($count == 1 ? "registro pendiente" : "registros pendientes");
?>
</span>
</div>
<button class="refresh-btn" onclick="location.reload()">Actualizar</button>
</div>
<div class="button-container">
<input type="button" onclick="window.location.href='../index.php';" value="Menú Principal">
<input type="button" onclick="window.location.href='generarExcel.php';" value="Generar Excel">
</div>
<?php if(mysqli_num_rows($query) > 0): ?>
<div class="users-table">
<div style="overflow-x: auto;">
<table id="tablaPersonas" class="display">
<thead>
<tr>
<th>ID</th>
<th>Fecha</th>
<th>Nombre</th>
<th>Cédula</th>
<th>Hora Ingreso</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_array($query)): ?>
<tr id="fila_<?= $row['id'] ?>">
<td><?= $row['id'] ?></td>
<td><?= $row['fecha'] ?></td>
<td><?= $row['nombre'] ?></td>
<td><?= $row['cedula'] ?></td>
<td><?= $row['ingreso'] ?></td>
<td>
<button id='btnSalida_<?= $row['id'] ?>' class='btn-salida' data-registro="<?= $row['id'] ?>">
Marcar Salida
</button>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</div>
<?php else: ?>
<div class="no-records">
<h3>¡No hay Visitantes pendientes de salida!</h3>
<p>Todos los Visitantes han registrado su salida correctamente.</p>
</div>
<?php endif; ?>
</div>
<!-- Script para inicializar DataTables -->
<script>
$(document).ready(function () {
$('#tablaPersonas').DataTable({
"paging": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
"searching": true,
"language": {
"url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/Spanish.json"
},
"order": [[0, 'desc']], // Ordenar por la primera columna (ID) en orden descendente
"autoWidth": false, // Desactiva el ajuste automático del ancho
"responsive": true // Habilita el modo responsive
});
});
</script>
<!-- Script para manejar el botón de salida -->
<script>
document.addEventListener('DOMContentLoaded', function () {
var botonesSalida = document.querySelectorAll('.btn-salida');
botonesSalida.forEach(function (boton) {
boton.addEventListener('click', function () {
var registroId = this.getAttribute('data-registro');
marcarSalida(registroId);
});
});
function marcarSalida(registroId) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'consul.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('id=' + registroId + '&accion=salida');
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
// Eliminar la fila de la tabla
var fila = document.getElementById('fila_' + registroId);
if (fila) {
// Eliminar la fila con una animación
fila.style.transition = "opacity 0.5s";
fila.style.opacity = "0";
setTimeout(function() {
fila.parentNode.removeChild(fila);
// Actualizar el contador de registros pendientes
var filas = document.querySelectorAll('#tablaPersonas tbody tr').length;
var statusText = document.querySelector('.status-text');
if (statusText) {
statusText.textContent = filas + " " + (filas == 1 ? "registro pendiente" : "registros pendientes");
}
// Si no quedan registros, mostrar mensaje
if (filas === 0) {
var tablaContainer = document.querySelector('.users-table');
if (tablaContainer) {
tablaContainer.innerHTML = `
<div class="no-records">
<h3>¡No hay colaboradores pendientes de salida!</h3>
<p>Todos los colaboradores han registrado su salida correctamente.</p>
</div>
`;
}
}
}, 500);
}
console.log('Salida marcada correctamente');
} else {
console.error('Error al marcar la salida. Código de estado:', xhr.status);
alert('Error al marcar la salida. Por favor, inténtelo de nuevo.');
}
};
}
});
</script>
<!-- CopyRight-->
<div class="copyright">
© 2025 Avicampo
</div>
</body>
</html>