nuevas correciones
This commit is contained in:
@@ -1,9 +1,6 @@
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using MieSystem.Models;
|
||||
using MieSystem.Data.Interfaces;
|
||||
using AspNetCoreGeneratedDocument;
|
||||
using MieSystem.Models;
|
||||
using MieSystem.Models.ViewModels;
|
||||
|
||||
namespace MieSystem.Controllers
|
||||
@@ -20,24 +17,14 @@ namespace MieSystem.Controllers
|
||||
_hostingEnvironment = hostingEnvironment;
|
||||
|
||||
_expedienteRepository = expedienteRepository;
|
||||
|
||||
// Datos de prueba iniciales
|
||||
/*if (_expedientes.Count == 0)
|
||||
{
|
||||
_ = InitializeTestData();
|
||||
}*/
|
||||
}
|
||||
|
||||
private async Task InitializeTestData()
|
||||
// GET: Expedientes
|
||||
public async Task<IActionResult> Index()
|
||||
{
|
||||
var today = DateTime.Today;
|
||||
var lst = await _expedienteRepository.GetAllAsync();
|
||||
_expedientes = [.. lst];
|
||||
}
|
||||
|
||||
// GET: Expedientes
|
||||
public IActionResult Index()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
@@ -45,7 +32,6 @@ namespace MieSystem.Controllers
|
||||
[HttpGet]
|
||||
public IActionResult GetDashboardStats()
|
||||
{
|
||||
_ = InitializeTestData();
|
||||
var totalNinos = _expedientes.Count;
|
||||
var mesActual = DateTime.Now.Month;
|
||||
|
||||
@@ -78,9 +64,6 @@ namespace MieSystem.Controllers
|
||||
[HttpGet]
|
||||
public IActionResult GetExpedientes(int page = 1, int pageSize = 10)
|
||||
{
|
||||
if (_expedientes.Count == 0)
|
||||
_ = InitializeTestData();
|
||||
|
||||
var query = _expedientes
|
||||
.Where(e => e.Activo)
|
||||
.OrderBy(e => e.Apellidos)
|
||||
@@ -122,7 +105,6 @@ namespace MieSystem.Controllers
|
||||
|
||||
// POST: Expedientes/Create
|
||||
[HttpPost]
|
||||
// [ValidateAntiForgeryToken]
|
||||
public async Task<IActionResult> Create(ExpedienteViewModel model)
|
||||
{
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@foreach (var dia in diasAMostrar)
|
||||
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>
|
||||
|
||||
@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>
|
||||
}
|
||||
else
|
||||
{
|
||||
<option value="P" 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]
|
||||
: "";
|
||||
@if (estadoActual == "T")
|
||||
{
|
||||
<option value="T" selected class="bg-warning">T</option>
|
||||
}
|
||||
else
|
||||
{
|
||||
<option value="T" class="bg-warning">T</option>
|
||||
}
|
||||
|
||||
<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>
|
||||
@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,40 +259,77 @@
|
||||
|
||||
@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);
|
||||
}
|
||||
/* Ocultar flecha del select */
|
||||
.estado-select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.estado-select option[value="P"] {
|
||||
background-color: #198754 !important;
|
||||
color: white !important;
|
||||
}
|
||||
.estado-select:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.estado-select option[value="T"] {
|
||||
background-color: #ffc107 !important;
|
||||
color: black !important;
|
||||
}
|
||||
/* Colores para el select según estado */
|
||||
.estado-select.bg-success {
|
||||
background-color: #198754 !important;
|
||||
color: white !important;
|
||||
border-color: #198754 !important;
|
||||
}
|
||||
|
||||
.estado-select option[value="F"] {
|
||||
background-color: #dc3545 !important;
|
||||
color: white !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;
|
||||
@@ -257,6 +337,7 @@
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Estilos para checkboxes de días */
|
||||
.dias-semana-checkboxes {
|
||||
background: #f8f9fa;
|
||||
padding: 10px;
|
||||
@@ -264,19 +345,135 @@
|
||||
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();
|
||||
@@ -284,26 +481,34 @@
|
||||
$('#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');
|
||||
@@ -333,6 +538,7 @@
|
||||
});
|
||||
});
|
||||
|
||||
// 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());
|
||||
@@ -358,6 +565,7 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Exportar a Excel
|
||||
$('#btnExportar').click(function() {
|
||||
var año = $('#selectAnio').val();
|
||||
var mes = $('#selectMes').val();
|
||||
@@ -371,13 +579,74 @@
|
||||
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,86 +660,231 @@
|
||||
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;
|
||||
// Verificar si hay error
|
||||
if (data.error) {
|
||||
console.error('Error del servidor:', data.error);
|
||||
mostrarEstadisticasVacias('Error: ' + data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
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;
|
||||
// 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');
|
||||
|
||||
$('#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 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();
|
||||
@@ -480,7 +894,7 @@
|
||||
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>
|
||||
}
|
||||
|
||||
@@ -530,7 +530,7 @@
|
||||
<button onclick="window.print()" class="btn btn-primary">
|
||||
<i class="bi bi-printer"></i> Imprimir Documento
|
||||
</button>
|
||||
<button onclick="downloadPDF()" class="btn btn-info">
|
||||
<button onclick="downloadPDF()" style="visibility:hidden" class="btn btn-info">
|
||||
<i class="bi bi-download"></i> Guardar como PDF
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -323,10 +323,8 @@
|
||||
);
|
||||
|
||||
renderExpedientesTable(filtered);
|
||||
$('#pagination').empty(); // Limpiar paginación en búsqueda
|
||||
$('#pagination').empty();
|
||||
}
|
||||
|
||||
// Guardar nuevo expediente
|
||||
function saveExpediente() {
|
||||
const formData = new FormData($('#createForm')[0]);
|
||||
|
||||
@@ -337,7 +335,6 @@
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(response) {
|
||||
// Mostrar siempre el mensaje que viene en response.message
|
||||
const message = response.message ||
|
||||
(response.success ? 'Operación completada' : 'Error en la operación');
|
||||
|
||||
@@ -351,7 +348,6 @@
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
// Extraer el message del JSON si existe
|
||||
let message = 'Error en la solicitud';
|
||||
try {
|
||||
const jsonResponse = JSON.parse(xhr.responseText);
|
||||
@@ -359,7 +355,6 @@
|
||||
message = jsonResponse.message;
|
||||
}
|
||||
} catch (e) {
|
||||
// Si no es JSON válido, usar el texto de respuesta
|
||||
if (xhr.responseText) {
|
||||
message = xhr.responseText;
|
||||
}
|
||||
@@ -378,7 +373,6 @@
|
||||
$('#editModalBody').html(data);
|
||||
$('#editModal').modal('show');
|
||||
|
||||
// Mostrar/ocultar botón de eliminar imagen según si hay imagen personalizada
|
||||
const fotoUrl = $('#editForm input[name="FotoUrl"]').val();
|
||||
const deleteBtn = $('#deleteFotoEdit');
|
||||
if (fotoUrl && fotoUrl !== '/images/default-avatar.png') {
|
||||
@@ -441,8 +435,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ========== FUNCIONES PARA MANEJO DE IMÁGENES ==========
|
||||
|
||||
// Mostrar vista previa de imagen
|
||||
function previewImage(input, previewId) {
|
||||
const preview = document.getElementById(previewId);
|
||||
@@ -519,16 +511,13 @@
|
||||
}
|
||||
}
|
||||
showAlert('error', message);
|
||||
// Restaurar imagen predeterminada
|
||||
preview.src = '/images/default-avatar.png';
|
||||
// Ocultar botón de eliminar
|
||||
const deleteBtnId = isEdit ? 'deleteFotoEdit' : 'deleteFoto';
|
||||
$(`#${deleteBtnId}`).hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Eliminar imagen
|
||||
function deleteImage(isEdit = false) {
|
||||
const formId = isEdit ? 'editForm' : 'createForm';
|
||||
const hiddenInput = $(`#${formId} input[name="FotoUrl"]`);
|
||||
@@ -544,7 +533,6 @@
|
||||
data: { imageUrl: imageUrl },
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
// Restaurar imagen predeterminada
|
||||
$(`#${previewId}`).attr('src', '/images/default-avatar.png');
|
||||
hiddenInput.val('/images/default-avatar.png');
|
||||
$(`#${deleteBtnId}`).hide();
|
||||
@@ -561,9 +549,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ========== FUNCIONES UTILITARIAS ==========
|
||||
|
||||
// Calcular edad
|
||||
function calculateAge(birthDate) {
|
||||
const today = new Date();
|
||||
const birth = new Date(birthDate);
|
||||
@@ -577,7 +562,6 @@
|
||||
return age;
|
||||
}
|
||||
|
||||
// Formatear fecha
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('es-ES', {
|
||||
@@ -587,9 +571,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Mostrar alerta
|
||||
function showAlert(type, message) {
|
||||
// Crear elemento de alerta
|
||||
const alertDiv = document.createElement('div');
|
||||
alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
|
||||
alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 1050; min-width: 300px;';
|
||||
@@ -598,10 +580,8 @@
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
`;
|
||||
|
||||
// Agregar al body
|
||||
document.body.appendChild(alertDiv);
|
||||
|
||||
// Auto-eliminar después de 5 segundos
|
||||
setTimeout(() => {
|
||||
if (alertDiv.parentNode) {
|
||||
alertDiv.remove();
|
||||
|
||||
@@ -257,32 +257,32 @@
|
||||
</a>
|
||||
</li>
|
||||
<!-- Separador y sección de administración -->
|
||||
<li class="mt-4">
|
||||
<li class="mt-4" style="visibility:hidden">
|
||||
<div class="sidebar-header">
|
||||
<h6 class="text-uppercase text-muted small">Administración</h6>
|
||||
<h6 class="text-uppercase text-muted small" >Administración</h6>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<li style="visibility:hidden">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="bi bi-people"></i> Niños
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li style="visibility:hidden">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="bi bi-person-badge"></i> Maestros
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li style ="visibility:hidden">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="bi bi-person-workspace"></i> Personal
|
||||
<i class="bi bi-person-workspace" ></i> Personal
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li style="visibility:hidden">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="bi bi-bar-chart"></i> Reportes
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li style="visibility:hidden">
|
||||
<a asp-area="" asp-controller="Home" asp-action="Privacy" class="nav-link @(ViewContext.RouteData.Values["Controller"]?.ToString() == "Home" && ViewContext.RouteData.Values["Action"]?.ToString() == "Privacy" ? "active" : "")">
|
||||
<i class="bi bi-shield-check"></i> Privacidad
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user