ArtPruebaHTMK
admin
Uncategorised
Hits: 592
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registros de Pacientes</title>
<!-- Incluye Bootstrap y DataTables con el tema de Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
<style>
/* Estilo personalizado */
body {
padding: 0;
margin: 0;
background-color: #ffffff; /* Fondo blanco */
}
.container {
max-width: 100%;
padding: 20px;
}
.card {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para darle un efecto moderno */
}
.card-header {
background-color: #0099FF; /* Color azul para el encabezado de la tarjeta */
color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.legend-container {
display: flex;
justify-content: flex-start;
margin-bottom: 15px;
}
.legend-item {
display: flex;
align-items: center;
margin-right: 20px;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 3px;
margin-right: 10px;
}
.red-color {
background-color: #ff1c31;
}
.orange-color {
background-color: #fff3cd;
}
/* Ajuste de ancho fijo para la columna "Usuario" */
.usuario-columna {
width: 300px; /* Ancho fijo para la columna usuario */
white-space: nowrap; /* Evitar saltos de línea */
overflow: hidden; /* Ocultar texto desbordado */
text-overflow: ellipsis; /* Mostrar "..." si el texto es muy largo */
}
/* Ajuste de la columna "CausaExterna" si también lo deseas */
.causaexterna-columna {
width: 200px; /* Ancho fijo para la columna causa externa */
white-space: nowrap; /* Evitar saltos de línea */
overflow: hidden;
text-overflow: ellipsis;
}
.columna-pequena {
width: 20px !important; /* Ancho reducido para las columnas pequeñas */
}
table {
table-layout: auto; /* Ajuste automático de columnas */
width: 100%;
}
/* Estilo para la fila en rojo */
.highlight-red {
background-color: #ff1c31 !important; /* Fondo rojo */
color: white !important; /* Texto blanco */
}
/* Estilo para la fila en naranja */
.highlight-orange {
background-color: #fff3cd !important; /* Fondo naranja claro */
color: #856404 !important; /* Texto naranja oscuro */
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-header text-center">
<h4 class="mb-0">Registros de Pacientes</h4>
</div>
<div class="card-body">
<!-- Leyendas de Colores -->
<div class="legend-container">
<div class="legend-item">
<div class="legend-color red-color"></div>
<span>Paciente sin Registro de Urgencia</span>
</div>
<div class="legend-item">
<div class="legend-color orange-color"></div>
<span>Paciente con más de 6 Horas</span>
</div>
</div>
<!-- Tabla de Registros -->
<div class="table-responsive">
<table id="registrosTable" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr id="headerRow">
<!-- El encabezado se generará dinámicamente -->
</tr>
</thead>
<tbody>
<?php
// Conexión a la base de datos y ejecución del SP
include 'conexion.php';
$sql = "EXEC MWCLV.RegistrosPacientes";
$stmt = sqlsrv_query($conn, $sql);
if ($stmt === false) {
die(print_r(sqlsrv_errors(), true));
}
// Obtener la primera fila para generar los encabezados de las columnas
$firstRow = true;
$columnIndex = 0;
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
// Generar el encabezado dinámico si es la primera fila
if ($firstRow) {
foreach ($row as $column => $value) {
$class = $columnIndex == 1 ? 'usuario-columna' : ($columnIndex == 5 ? 'causaexterna-columna' : ($columnIndex >= 5 ? 'columna-pequena' : ''));
$headerText = $columnIndex >= 5 ? substr(htmlspecialchars((string)$column), 0, 3) : htmlspecialchars((string)$column);
$fullHeaderText = htmlspecialchars((string)$column); // El nombre completo para el tooltip
echo '<script>$("#headerRow").append("<th class=\'' . $class . '\' title=\'' . $fullHeaderText . '\'>' . $headerText . '</th>");</script>';
$columnIndex++;
}
$firstRow = false;
}
// Generar las filas de la tabla con los datos
echo "<tr>";
foreach ($row as $column => $value) {
$class = $columnIndex == 1 ? 'usuario-columna' : ($columnIndex == 5 ? 'causaexterna-columna' : ($columnIndex >= 5 ? 'columna-pequena' : ''));
if ($value instanceof DateTime) {
$formattedValue = $value->format('Y-m-d H:i:s');
} elseif (is_object($value)) {
$formattedValue = serialize($value);
} elseif (is_array($value)) {
$formattedValue = json_encode($value);
} else {
$formattedValue = (string)$value;
}
echo "<td class='$class' data-value='$formattedValue'>" . htmlspecialchars($formattedValue) . "</td>";
}
echo "</tr>";
}
sqlsrv_free_stmt($stmt);
sqlsrv_close($conn);
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Inicializar DataTables con configuración personalizada y aplicar el resaltado condicional -->
<script>
$(document).ready(function() {
$('#registrosTable').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
"pageLength": 30
});
// Aplicar el resaltado condicional
$('#registrosTable tbody tr').each(function() {
var row = $(this);
var fechaHora = new Date(row.find('td:eq(3)').data('value')); // Obtener la fecha y hora (columna 4, índice 3)
var registroClinico = parseInt(row.find('td:eq(7)').text()); // Obtener el valor de "Registro Clínico de Urgencias" (columna 6, índice 5)
var estadoCaso = row.find('td:eq(5)').text(); // Obtener el valor de "Estado Caso" (columna 7, índice 6)
// Verificar si la diferencia de tiempo es mayor a 15 minutos y el valor es cero
var ahora = new Date();
var diferenciaMinutos = (ahora - fechaHora) / (1000 * 60);
var diferenciaHoras = diferenciaMinutos / 60; // Convertimos minutos a horas
// Condición 1: Resaltar en rojo si la diferencia es mayor a 15 minutos y "Registro Clínico de Urgencias" es cero
if (diferenciaMinutos > 15 && registroClinico === 0) {
row.addClass('highlight-red');
}
// Condición 2: Resaltar en naranja si la diferencia es mayor a 6 horas y "Estado Caso" es "Activo"
if (diferenciaHoras > 6 && estadoCaso.trim().toLowerCase() === 'activo') {
row.addClass('highlight-orange');
}
});
});
</script>
</body>
</html>
