nuevas correciones
This commit is contained in:
@@ -19,7 +19,7 @@
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<div class="card-header text-white" style="background: linear-gradient(180deg, #2c3e50 0%, #1a2530 100%);">
|
||||
<h5 class="mb-0"><i class="fas fa-filter"></i> Filtros</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@@ -71,8 +71,8 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 d-flex align-items-end">
|
||||
<button type="submit" class="btn btn-primary w-100">
|
||||
<i class="fas fa-search"></i> Filtrar
|
||||
<button type="submit" class="btn w-100" style="background: linear-gradient(180deg, #2c3e50 0%, #1a2530 100%); color: white;">
|
||||
<i class="fas fa-search text-white"></i> Filtrar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -101,82 +101,125 @@
|
||||
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive" style="max-height: 70vh; overflow-y: auto;">
|
||||
<table class="table table-bordered table-striped mb-0" id="tablaAsistencia">
|
||||
<thead class="table-dark sticky-top" style="top: 0;">
|
||||
<tr>
|
||||
<th style="min-width: 200px; position: sticky; left: 0; background: #343a40; z-index: 10;">
|
||||
Niño
|
||||
</th>
|
||||
<table class="table table-bordered table-hover table-sm" id="tablaAsistencia">
|
||||
<thead class="table-dark sticky-top">
|
||||
<tr>
|
||||
<th class="sticky-left bg-dark text-white" style="min-width: 200px;">
|
||||
<div>Nombre</div>
|
||||
<div class="small">Edad</div>
|
||||
</th>
|
||||
@foreach (var dia in Model.DiasDelMes)
|
||||
{
|
||||
var diaSemana = ((int)dia.DayOfWeek).ToString();
|
||||
var isChecked = Model.DiasSemanaSeleccionados?.Contains(diaSemana) ?? true;
|
||||
|
||||
if (!string.IsNullOrEmpty(Model.DiasSemanaSeleccionados) && !isChecked)
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
var nombreDia = dia.ToString("ddd", new System.Globalization.CultureInfo("es-ES"));
|
||||
var esFinDeSemana = dia.DayOfWeek == DayOfWeek.Saturday || dia.DayOfWeek == DayOfWeek.Sunday;
|
||||
|
||||
<th class="text-center @(esFinDeSemana ? "" : "")" style="min-width: 50px;">
|
||||
<div>@dia.Day</div>
|
||||
<div class="small">@nombreDia</div>
|
||||
</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var expediente in Model.Expedientes)
|
||||
{
|
||||
<!-- Calcular propiedades aquí mismo -->
|
||||
|
||||
var nombreCompleto = $"{expediente.Nombre} {expediente.Apellidos}".Trim();
|
||||
var edad = 0;
|
||||
if (expediente.FechaNacimiento != DateTime.MinValue)
|
||||
{
|
||||
var today = DateTime.Today;
|
||||
edad = today.Year - expediente.FechaNacimiento.Year;
|
||||
if (expediente.FechaNacimiento.Date > today.AddYears(-edad))
|
||||
{
|
||||
edad--;
|
||||
}
|
||||
}
|
||||
|
||||
<tr data-expediente-id="@expediente.Id">
|
||||
<td class="sticky-left bg-white" style="min-width: 200px;">
|
||||
<div class="fw-bold">@nombreCompleto</div>
|
||||
<div class="small text-muted">Edad: @edad años</div>
|
||||
</td>
|
||||
|
||||
@foreach (var dia in Model.DiasDelMes)
|
||||
{
|
||||
var diaSemana = ((int)dia.DayOfWeek).ToString();
|
||||
var isChecked = Model.DiasSemanaSeleccionados?.Contains(diaSemana) ?? true;
|
||||
|
||||
if (!string.IsNullOrEmpty(Model.DiasSemanaSeleccionados) && !isChecked)
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
var key = $"{expediente.Id}_{dia:yyyy-MM-dd}";
|
||||
var estadoActual = Model.Asistencias.ContainsKey(key)
|
||||
? Model.Asistencias[key]
|
||||
: "";
|
||||
|
||||
// Determinar clase CSS según estado
|
||||
var claseEstado = estadoActual switch
|
||||
{
|
||||
"P" => "celda-presente",
|
||||
"T" => "celda-tarde",
|
||||
"F" => "celda-falta",
|
||||
_ => ""
|
||||
};
|
||||
|
||||
var esFinDeSemana = dia.DayOfWeek == DayOfWeek.Saturday || dia.DayOfWeek == DayOfWeek.Sunday;
|
||||
|
||||
<td class="text-center p-0 celda-asistencia @claseEstado @(esFinDeSemana ? "bg-light" : "")"
|
||||
data-expediente="@expediente.Id"
|
||||
data-fecha="@dia.ToString("yyyy-MM-dd")"
|
||||
style="min-width: 50px;">
|
||||
|
||||
<select class="form-select form-select-sm estado-select border-0 h-100 w-100"
|
||||
data-initial="@estadoActual">
|
||||
<option value=""></option>
|
||||
|
||||
@foreach (var dia in diasAMostrar)
|
||||
@if (estadoActual == "P")
|
||||
{
|
||||
var esFinSemana = dia.DayOfWeek == DayOfWeek.Saturday || dia.DayOfWeek == DayOfWeek.Sunday;
|
||||
|
||||
<th class="text-center @(esFinSemana ? "" : "")"
|
||||
style="min-width: 60px;">
|
||||
<div class="small">@dia.ToString("ddd")</div>
|
||||
<div class="fw-bold">@dia.Day</div>
|
||||
</th>
|
||||
<option value="P" selected class="bg-success text-white">P</option>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var expediente in Model.Expedientes)
|
||||
{
|
||||
<tr data-expediente-id="@expediente.Id">
|
||||
<td style="position: sticky; left: 0; background: white; z-index: 5;">
|
||||
<div class="fw-bold">@expediente.NombreCompleto</div>
|
||||
<div class="small text-muted">Edad: @expediente.Edad años</div>
|
||||
</td>
|
||||
|
||||
@foreach (var dia in diasAMostrar)
|
||||
{
|
||||
var key = $"{expediente.Id}_{dia:yyyy-MM-dd}";
|
||||
var estadoActual = Model.Asistencias.ContainsKey(key)
|
||||
? Model.Asistencias[key]
|
||||
: "";
|
||||
|
||||
<td class="text-center p-0 celda-asistencia"
|
||||
data-expediente="@expediente.Id"
|
||||
data-fecha="@dia.ToString("yyyy-MM-dd")">
|
||||
<select class="form-select form-select-sm estado-select border-0 rounded-0 h-100 w-100"
|
||||
data-initial="@estadoActual">
|
||||
<option value=""></option>
|
||||
else
|
||||
{
|
||||
<option value="P" class="bg-success text-white">P</option>
|
||||
}
|
||||
|
||||
@if (estadoActual == "T")
|
||||
{
|
||||
<option value="T" selected class="bg-warning">T</option>
|
||||
}
|
||||
else
|
||||
{
|
||||
<option value="T" class="bg-warning">T</option>
|
||||
}
|
||||
|
||||
@if (estadoActual == "F")
|
||||
{
|
||||
<option value="F" selected class="bg-danger text-white">F</option>
|
||||
}
|
||||
else
|
||||
{
|
||||
<option value="F" class="bg-danger text-white">F</option>
|
||||
}
|
||||
</select>
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@if (estadoActual == "P")
|
||||
{
|
||||
<option value="P" selected class="bg-success text-white">P</option>
|
||||
}
|
||||
else
|
||||
{
|
||||
<option value="P" class="bg-success text-white">P</option>
|
||||
}
|
||||
|
||||
@if (estadoActual == "T")
|
||||
{
|
||||
<option value="T" selected class="bg-warning">T</option>
|
||||
}
|
||||
else
|
||||
{
|
||||
<option value="T" class="bg-warning">T</option>
|
||||
}
|
||||
|
||||
@if (estadoActual == "F")
|
||||
{
|
||||
<option value="F" selected class="bg-danger text-white">F</option>
|
||||
}
|
||||
else
|
||||
{
|
||||
<option value="F" class="bg-danger text-white">F</option>
|
||||
}
|
||||
</select>
|
||||
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -216,123 +259,286 @@
|
||||
|
||||
@section Styles {
|
||||
<style>
|
||||
/* Estilos generales de la tabla */
|
||||
.table th, .table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/* Colores para las celdas según estado */
|
||||
.celda-presente {
|
||||
background-color: #d1e7dd !important; /* Verde claro */
|
||||
}
|
||||
|
||||
.celda-tarde {
|
||||
background-color: #fff3cd !important; /* Amarillo claro */
|
||||
}
|
||||
|
||||
.celda-falta {
|
||||
background-color: #f8d7da !important; /* Rojo claro */
|
||||
}
|
||||
|
||||
/* Estilos para el select */
|
||||
.estado-select {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid transparent !important;
|
||||
text-align: center;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.estado-select:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.estado-select option[value="P"] {
|
||||
background-color: #198754 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.estado-select option[value="T"] {
|
||||
background-color: #ffc107 !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.estado-select option[value="F"] {
|
||||
background-color: #dc3545 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
/* Ocultar flecha del select */
|
||||
.estado-select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.estado-select:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Colores para el select según estado */
|
||||
.estado-select.bg-success {
|
||||
background-color: #198754 !important;
|
||||
color: white !important;
|
||||
border-color: #198754 !important;
|
||||
}
|
||||
|
||||
.estado-select.bg-warning {
|
||||
background-color: #ffc107 !important;
|
||||
color: black !important;
|
||||
border-color: #ffc107 !important;
|
||||
}
|
||||
|
||||
.estado-select.bg-danger {
|
||||
background-color: #dc3545 !important;
|
||||
color: white !important;
|
||||
border-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
/* Select vacío */
|
||||
.estado-select:not([value]):not([value=""]) {
|
||||
background-color: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
/* Celdas cambiadas (no guardadas) */
|
||||
.celda-asistencia.changed {
|
||||
outline: 2px solid #0d6efd;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
|
||||
/* Posición fija para la primera columna */
|
||||
.sticky-left {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: white;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
|
||||
/* Estilos para checkboxes de días */
|
||||
.dias-semana-checkboxes {
|
||||
background: #f8f9fa;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.bg-lunes { background-color: #e3f2fd !important; }
|
||||
.bg-martes { background-color: #f3e5f5 !important; }
|
||||
.bg-miercoles { background-color: #e8f5e8 !important; }
|
||||
.bg-jueves { background-color: #fff3e0 !important; }
|
||||
.bg-viernes { background-color: #fce4ec !important; }
|
||||
.bg-sabado { background-color: #f1f8e9 !important; }
|
||||
.bg-domingo { background-color: #fff8e1 !important; }
|
||||
|
||||
/* Colores para días de semana en encabezados */
|
||||
.bg-lunes {
|
||||
background-color: #e3f2fd !important;
|
||||
}
|
||||
|
||||
.bg-martes {
|
||||
background-color: #f3e5f5 !important;
|
||||
}
|
||||
|
||||
.bg-miercoles {
|
||||
background-color: #e8f5e8 !important;
|
||||
}
|
||||
|
||||
.bg-jueves {
|
||||
background-color: #fff3e0 !important;
|
||||
}
|
||||
|
||||
.bg-viernes {
|
||||
background-color: #fce4ec !important;
|
||||
}
|
||||
|
||||
.bg-sabado {
|
||||
background-color: #f1f8e9 !important;
|
||||
}
|
||||
|
||||
.bg-domingo {
|
||||
background-color: #fff8e1 !important;
|
||||
}
|
||||
|
||||
/* Estilos para encabezados fijos */
|
||||
.table-dark.sticky-top {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Estilos para tarjetas de estadísticas */
|
||||
.card .display-6 {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Progress bars en estadísticas */
|
||||
.progress {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Hover effects para celdas */
|
||||
.celda-asistencia:hover {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
.celda-presente:hover {
|
||||
background-color: #c3e6cb !important;
|
||||
}
|
||||
|
||||
.celda-tarde:hover {
|
||||
background-color: #ffeaa7 !important;
|
||||
}
|
||||
|
||||
.celda-falta:hover {
|
||||
background-color: #f5c6cb !important;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@@media (max-width: 768px) {
|
||||
.table-responsive
|
||||
|
||||
{
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.estado-select {
|
||||
padding: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.dias-semana-checkboxes .form-check-inline {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Animación suave para cambios de color */
|
||||
.celda-asistencia, .estado-select {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Estilos para fin de semana */
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
/* Leyenda de colores */
|
||||
.leyenda .badge {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.4em 0.8em;
|
||||
}
|
||||
|
||||
/* Cambia de 50px a 65px */
|
||||
.celda-asistencia {
|
||||
min-width: 65px !important; /* ← Cambiado de 50px */
|
||||
}
|
||||
|
||||
.table th.text-center {
|
||||
min-width: 65px !important; /* ← Cambiado de 50px */
|
||||
}
|
||||
|
||||
/* Cambia de 200px a 240px */
|
||||
.sticky-left {
|
||||
min-width: 240px !important; /* ← Cambiado de 200px */
|
||||
}
|
||||
|
||||
/* Aumenta el padding del select */
|
||||
.estado-select {
|
||||
padding: 10px 4px !important; /* ← Más padding */
|
||||
font-size: 14px !important; /* ← Texto más grande */
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$(document).ready(function() {
|
||||
// Actualizar estadísticas al cargar
|
||||
cargarEstadisticas();
|
||||
|
||||
// Manejar checkboxes de días de semana
|
||||
$('.dia-checkbox').change(function() {
|
||||
var diasSeleccionados = $('.dia-checkbox:checked').map(function() {
|
||||
return $(this).val();
|
||||
}).get().join(',');
|
||||
$('#diasSemanaInput').val(diasSeleccionados);
|
||||
});
|
||||
|
||||
$('.estado-select').change(function() {
|
||||
var initial = $(this).data('initial');
|
||||
var current = $(this).val();
|
||||
|
||||
if (initial !== current) {
|
||||
$(this).closest('.celda-asistencia').addClass('changed');
|
||||
} else {
|
||||
$(this).closest('.celda-asistencia').removeClass('changed');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Inicializar colores al cargar
|
||||
inicializarColores();
|
||||
|
||||
// Guardar asistencia individual y actualizar colores
|
||||
$('.estado-select').change(function() {
|
||||
var estado = $(this).val();
|
||||
var celda = $(this).closest('.celda-asistencia');
|
||||
var initial = $(this).data('initial');
|
||||
|
||||
// Actualizar colores
|
||||
aplicarColorSelect($(this), estado);
|
||||
aplicarColorCelda(celda, estado);
|
||||
|
||||
// Marcar como cambiado si es diferente
|
||||
if (initial !== estado) {
|
||||
celda.addClass('changed');
|
||||
} else {
|
||||
celda.removeClass('changed');
|
||||
}
|
||||
|
||||
// Guardar automáticamente
|
||||
var expedienteId = celda.data('expediente');
|
||||
var fecha = celda.data('fecha');
|
||||
var estado = $(this).val();
|
||||
|
||||
|
||||
guardarAsistencia(expedienteId, fecha, estado, celda);
|
||||
});
|
||||
|
||||
|
||||
// Guardar todas las asistencias cambiadas
|
||||
$('#btnGuardarTodo').click(function() {
|
||||
var cambios = [];
|
||||
var celdasCambiadas = $('.celda-asistencia.changed');
|
||||
|
||||
|
||||
if (celdasCambiadas.length === 0) {
|
||||
toastr.info('No hay cambios para guardar');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!confirm(`¿Guardar ${celdasCambiadas.length} cambios?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
$('#modalCarga').modal('show');
|
||||
|
||||
|
||||
celdasCambiadas.each(function() {
|
||||
var celda = $(this);
|
||||
var select = celda.find('.estado-select');
|
||||
var expedienteId = celda.data('expediente');
|
||||
var fecha = celda.data('fecha');
|
||||
var estado = select.val();
|
||||
|
||||
|
||||
cambios.push({
|
||||
expedienteId: expedienteId,
|
||||
fecha: fecha,
|
||||
estado: estado
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Enviar cambios masivos
|
||||
$.ajax({
|
||||
url: '@Url.Action("GuardarAsistenciasMasivas", "Asistencia")',
|
||||
type: 'POST',
|
||||
@@ -341,6 +547,7 @@
|
||||
success: function(response) {
|
||||
$('#modalCarga').modal('hide');
|
||||
if (response.success) {
|
||||
// Quitar marca de cambiado y actualizar estado inicial
|
||||
$('.celda-asistencia').removeClass('changed');
|
||||
$('.estado-select').each(function() {
|
||||
$(this).data('initial', $(this).val());
|
||||
@@ -357,27 +564,89 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Exportar a Excel
|
||||
$('#btnExportar').click(function() {
|
||||
var año = $('#selectAnio').val();
|
||||
var mes = $('#selectMes').val();
|
||||
var diasSemana = $('#diasSemanaInput').val();
|
||||
|
||||
var url = '@Url.Action("ExportarExcel", "Asistencia")' +
|
||||
'?año=' + año +
|
||||
'&mes=' + mes +
|
||||
|
||||
var url = '@Url.Action("ExportarExcel", "Asistencia")' +
|
||||
'?año=' + año +
|
||||
'&mes=' + mes +
|
||||
'&diasSemana=' + diasSemana;
|
||||
|
||||
|
||||
window.open(url, '_blank');
|
||||
});
|
||||
|
||||
|
||||
// Cambiar mes/año con selects
|
||||
$('#selectAnio, #selectMes').change(function() {
|
||||
$('#filtroForm').submit();
|
||||
});
|
||||
|
||||
|
||||
// Aplicar colores a días de semana
|
||||
aplicarColoresDias();
|
||||
});
|
||||
|
||||
|
||||
// Función para aplicar color a una celda según el estado
|
||||
function aplicarColorCelda(celda, estado) {
|
||||
// Remover todas las clases de color
|
||||
celda.removeClass('celda-presente celda-tarde celda-falta');
|
||||
|
||||
// Aplicar nueva clase según estado
|
||||
switch(estado) {
|
||||
case 'P':
|
||||
celda.addClass('celda-presente');
|
||||
break;
|
||||
case 'T':
|
||||
celda.addClass('celda-tarde');
|
||||
break;
|
||||
case 'F':
|
||||
celda.addClass('celda-falta');
|
||||
break;
|
||||
default:
|
||||
// Vacío - no aplicar color
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Función para aplicar color al select según estado
|
||||
function aplicarColorSelect(select, estado) {
|
||||
// Remover todas las clases de color
|
||||
select.removeClass('bg-success bg-warning bg-danger text-white');
|
||||
|
||||
// Aplicar nueva clase según estado
|
||||
switch(estado) {
|
||||
case 'P':
|
||||
select.addClass('bg-success text-white');
|
||||
break;
|
||||
case 'T':
|
||||
select.addClass('bg-warning');
|
||||
break;
|
||||
case 'F':
|
||||
select.addClass('bg-danger text-white');
|
||||
break;
|
||||
default:
|
||||
// Vacío - color por defecto
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Función para inicializar colores al cargar la página
|
||||
function inicializarColores() {
|
||||
$('.estado-select').each(function() {
|
||||
var estado = $(this).val();
|
||||
var celda = $(this).closest('.celda-asistencia');
|
||||
|
||||
aplicarColorSelect($(this), estado);
|
||||
aplicarColorCelda(celda, estado);
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// FUNCIONES PARA GUARDAR ASISTENCIA
|
||||
// ============================================
|
||||
|
||||
function guardarAsistencia(expedienteId, fecha, estado, celda) {
|
||||
$.ajax({
|
||||
url: '@Url.Action("GuardarAsistencia", "Asistencia")',
|
||||
@@ -391,96 +660,241 @@
|
||||
if (response.success) {
|
||||
celda.removeClass('changed');
|
||||
celda.find('.estado-select').data('initial', estado);
|
||||
toastr.success('Guardado');
|
||||
toastr.success('Guardado correctamente');
|
||||
cargarEstadisticas();
|
||||
} else {
|
||||
toastr.error(response.message);
|
||||
// Revertir color si hay error
|
||||
var select = celda.find('.estado-select');
|
||||
var initial = select.data('initial');
|
||||
aplicarColorSelect(select, initial);
|
||||
aplicarColorCelda(celda, initial);
|
||||
select.val(initial);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
toastr.error('Error al guardar');
|
||||
toastr.error('Error de conexión');
|
||||
// Revertir color
|
||||
var select = celda.find('.estado-select');
|
||||
var initial = select.data('initial');
|
||||
aplicarColorSelect(select, initial);
|
||||
aplicarColorCelda(celda, initial);
|
||||
select.val(initial);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ============================================
|
||||
// FUNCIONES PARA ESTADÍSTICAS
|
||||
// ============================================
|
||||
|
||||
function cargarEstadisticas() {
|
||||
var año = $('#selectAnio').val();
|
||||
var mes = $('#selectMes').val();
|
||||
|
||||
|
||||
// Mostrar indicador de carga
|
||||
$('#estadisticasContainer').html(`
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Cargando...</span>
|
||||
</div>
|
||||
<p class="mt-2">Cargando estadísticas...</p>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$.ajax({
|
||||
url: '@Url.Action("ObtenerEstadisticas", "Asistencia")',
|
||||
type: 'GET',
|
||||
data: { año: año, mes: mes },
|
||||
success: function(data) {
|
||||
if (data.error) {
|
||||
console.error(data.error);
|
||||
// Verificar si data es null o undefined
|
||||
if (!data) {
|
||||
mostrarEstadisticasVacias();
|
||||
return;
|
||||
}
|
||||
|
||||
var total = data.total || 0;
|
||||
var presentes = data.presentes || 0;
|
||||
var tardes = data.tardes || 0;
|
||||
var faltas = data.faltas || 0;
|
||||
|
||||
var porcentajePresentes = total > 0 ? ((presentes / total) * 100).toFixed(1) : 0;
|
||||
var porcentajeTardes = total > 0 ? ((tardes / total) * 100).toFixed(1) : 0;
|
||||
var porcentajeFaltas = total > 0 ? ((faltas / total) * 100).toFixed(1) : 0;
|
||||
|
||||
$('#estadisticasContainer').html(`
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-success text-white">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Presentes</h6>
|
||||
<h2>${presentes}</h2>
|
||||
<small>${porcentajePresentes}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-warning">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Tardes</h6>
|
||||
<h2>${tardes}</h2>
|
||||
<small>${porcentajeTardes}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-danger text-white">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Faltas</h6>
|
||||
<h2>${faltas}</h2>
|
||||
<small>${porcentajeFaltas}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-info text-white">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Total Registros</h6>
|
||||
<h2>${total}</h2>
|
||||
<small>Asistencia: ${porcentajePresentes}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// Verificar si hay error
|
||||
if (data.error) {
|
||||
console.error('Error del servidor:', data.error);
|
||||
mostrarEstadisticasVacias('Error: ' + data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
// Extraer valores con manejo seguro
|
||||
var total = extraerNumero(data, 'total');
|
||||
var presentes = extraerNumero(data, 'presentes');
|
||||
var tardes = extraerNumero(data, 'tardes');
|
||||
var faltas = extraerNumero(data, 'faltas');
|
||||
|
||||
// Verificar consistencia
|
||||
var suma = presentes + tardes + faltas;
|
||||
if (total > 0 && suma !== total) {
|
||||
console.warn('Inconsistencia en datos: total=' + total + ', suma=' + suma);
|
||||
total = suma;
|
||||
}
|
||||
|
||||
// Calcular porcentajes
|
||||
var porcentajePresentes = calcularPorcentaje(presentes, total);
|
||||
var porcentajeTardes = calcularPorcentaje(tardes, total);
|
||||
var porcentajeFaltas = calcularPorcentaje(faltas, total);
|
||||
|
||||
// Mostrar estadísticas
|
||||
mostrarEstadisticasHTML(total, presentes, tardes, faltas,
|
||||
porcentajePresentes, porcentajeTardes, porcentajeFaltas);
|
||||
},
|
||||
error: function() {
|
||||
console.error('Error cargando estadísticas');
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Error AJAX:', status, error);
|
||||
mostrarEstadisticasVacias('Error al cargar estadísticas');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Función auxiliar para extraer números de forma segura
|
||||
function extraerNumero(obj, propiedad) {
|
||||
if (!obj || obj[propiedad] === null || obj[propiedad] === undefined) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var valor = obj[propiedad];
|
||||
|
||||
// Convertir a número si es string
|
||||
if (typeof valor === 'string') {
|
||||
valor = parseFloat(valor);
|
||||
}
|
||||
|
||||
// Verificar que sea un número válido
|
||||
if (isNaN(valor) || !isFinite(valor)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
// Redondear a entero si es decimal
|
||||
return Math.round(valor);
|
||||
}
|
||||
|
||||
// Función para calcular porcentajes
|
||||
function calcularPorcentaje(parcial, total) {
|
||||
if (!total || total <= 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var porcentaje = (parcial / total) * 100;
|
||||
|
||||
// Redondear a 1 decimal
|
||||
return Math.round(porcentaje * 10) / 10;
|
||||
}
|
||||
|
||||
// Función para mostrar estadísticas vacías o con error
|
||||
function mostrarEstadisticasVacias(mensaje) {
|
||||
var mensajeMostrar = mensaje || 'No hay datos de asistencia para este período';
|
||||
|
||||
$('#estadisticasContainer').html(`
|
||||
<div class="col-md-12">
|
||||
<div class="alert alert-warning">
|
||||
<i class="fas fa-exclamation-triangle"></i> ${mensajeMostrar}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Función para mostrar estadísticas en HTML
|
||||
function mostrarEstadisticasHTML(total, presentes, tardes, faltas,
|
||||
porcentajePresentes, porcentajeTardes, porcentajeFaltas) {
|
||||
|
||||
// Calcular porcentaje de asistencia general
|
||||
var asistenciaGeneral = total > 0 ?
|
||||
((presentes + tardes) / total * 100).toFixed(1) : 0;
|
||||
|
||||
$('#estadisticasContainer').html(`
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-success text-white">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">
|
||||
<i class="fas fa-check-circle"></i> Presentes
|
||||
</h6>
|
||||
<h2 class="display-6">${presentes.toLocaleString()}</h2>
|
||||
<div class="mt-2">
|
||||
<small>${porcentajePresentes}%</small>
|
||||
<div class="progress mt-1" style="height: 5px;">
|
||||
<div class="progress-bar bg-light"
|
||||
style="width: ${porcentajePresentes}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-warning">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">
|
||||
<i class="fas fa-clock"></i> Tardes
|
||||
</h6>
|
||||
<h2 class="display-6">${tardes.toLocaleString()}</h2>
|
||||
<div class="mt-2">
|
||||
<small>${porcentajeTardes}%</small>
|
||||
<div class="progress mt-1" style="height: 5px;">
|
||||
<div class="progress-bar bg-dark"
|
||||
style="width: ${porcentajeTardes}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-danger text-white">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">
|
||||
<i class="fas fa-times-circle"></i> Faltas
|
||||
</h6>
|
||||
<h2 class="display-6">${faltas.toLocaleString()}</h2>
|
||||
<div class="mt-2">
|
||||
<small>${porcentajeFaltas}%</small>
|
||||
<div class="progress mt-1" style="height: 5px;">
|
||||
<div class="progress-bar bg-light"
|
||||
style="width: ${porcentajeFaltas}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-info text-white">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">
|
||||
<i class="fas fa-chart-bar"></i> Resumen
|
||||
</h6>
|
||||
<h2 class="display-6">${total.toLocaleString()}</h2>
|
||||
<div class="mt-2">
|
||||
<small>Asistencia: ${asistenciaGeneral}%</small>
|
||||
<div class="progress mt-1" style="height: 5px;">
|
||||
<div class="progress-bar bg-light"
|
||||
style="width: ${asistenciaGeneral}%"></div>
|
||||
</div>
|
||||
<div class="small mt-2">
|
||||
<div>Presentes: ${presentes}</div>
|
||||
<div>Tardes: ${tardes}</div>
|
||||
<div>Faltas: ${faltas}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// FUNCIONES ADICIONALES
|
||||
// ============================================
|
||||
|
||||
function aplicarColoresDias() {
|
||||
$('th.text-center').each(function() {
|
||||
var textoDia = $(this).find('.small').text().trim();
|
||||
var claseColor = '';
|
||||
|
||||
|
||||
switch(textoDia) {
|
||||
case 'Lun': claseColor = 'bg-lunes'; break;
|
||||
case 'Mar': claseColor = 'bg-martes'; break;
|
||||
case 'Mié': claseColor = 'bg-miercoles'; break;
|
||||
case 'Jue': claseColor = 'bg-jueves'; break
|
||||
case 'Jue': claseColor = 'bg-jueves'; break;
|
||||
case 'Vie': claseColor = 'bg-viernes'; break;
|
||||
case 'Sáb': claseColor = 'bg-sabado'; break;
|
||||
case 'Dom': claseColor = 'bg-domingo'; break;
|
||||
@@ -491,5 +905,6 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user