Agregar archivos de proyecto.
This commit is contained in:
647
MieSystem/Views/Expedientes/Index.cshtml
Normal file
647
MieSystem/Views/Expedientes/Index.cshtml
Normal file
@@ -0,0 +1,647 @@
|
||||
@{
|
||||
ViewData["Title"] = "Expedientes";
|
||||
ViewData["ActionButtons"] = @"<button class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#createModal'>
|
||||
<i class='bi bi-plus-circle me-1'></i> Nuevo Expediente
|
||||
</button>";
|
||||
}
|
||||
|
||||
<div class="row mb-4">
|
||||
<!-- Tarjeta de total de niños registrados -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-primary">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title text-primary">Total de Niños</h5>
|
||||
<h2 class="text-primary" id="totalNinos">0</h2>
|
||||
<p class="card-text text-muted">Registrados en el sistema</p>
|
||||
</div>
|
||||
<div class="bg-primary text-white rounded-circle p-3">
|
||||
<i class="bi bi-people-fill" style="font-size: 2rem;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tarjeta de cumpleaños del mes -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-success">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title text-success">Cumpleaños del Mes</h5>
|
||||
<h2 class="text-success" id="cumpleanerosMes">0</h2>
|
||||
<p class="card-text text-muted">Cumplen años este mes</p>
|
||||
</div>
|
||||
<div class="bg-success text-white rounded-circle p-3">
|
||||
<i class="bi bi-balloon-fill" style="font-size: 2rem;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tarjeta de mayores de 14 años -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-warning">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title text-warning">Mayores de 14 años</h5>
|
||||
<h2 class="text-warning" id="mayores14">0</h2>
|
||||
<p class="card-text text-muted">Niños con 14+ años</p>
|
||||
</div>
|
||||
<div class="bg-warning text-white rounded-circle p-3">
|
||||
<i class="bi bi-person-badge" style="font-size: 2rem;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabla de expedientes -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Lista de Expedientes</h5>
|
||||
<div class="input-group" style="max-width: 300px;">
|
||||
<input type="text" class="form-control" placeholder="Buscar niño..." id="searchInput">
|
||||
<button class="btn btn-outline-secondary" type="button" id="searchButton">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" id="expedientesTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Foto</th>
|
||||
<th>Nombre Completo</th>
|
||||
<th>Edad</th>
|
||||
<th>Sexo</th>
|
||||
<th>Fecha Nacimiento</th>
|
||||
<th>Responsable</th>
|
||||
<th>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="expedientesTableBody">
|
||||
<!-- Los datos se cargarán dinámicamente -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Paginación -->
|
||||
<nav aria-label="Page navigation" class="mt-3">
|
||||
<ul class="pagination justify-content-center" id="pagination">
|
||||
<!-- La paginación se generará dinámicamente -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal para crear nuevo expediente -->
|
||||
<div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="createModalLabel">Nuevo Expediente</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@await Html.PartialAsync("_CreateOrEdit", new ExpedienteViewModel())
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="button" class="btn btn-primary" id="saveExpediente">Guardar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal para editar expediente -->
|
||||
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editModalLabel">Editar Expediente</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="editModalBody">
|
||||
<!-- El contenido se cargará dinámicamente -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="button" class="btn btn-primary" id="updateExpediente">Actualizar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
// Variables globales
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 10;
|
||||
let allExpedientes = [];
|
||||
|
||||
$(document).ready(function() {
|
||||
// Cargar datos iniciales
|
||||
loadDashboardStats();
|
||||
loadExpedientes();
|
||||
|
||||
// Configurar búsqueda
|
||||
$('#searchButton').click(searchExpedientes);
|
||||
$('#searchInput').on('keyup', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
searchExpedientes();
|
||||
}
|
||||
});
|
||||
|
||||
// Configurar guardar expediente
|
||||
$('#saveExpediente').click(saveExpediente);
|
||||
$('#updateExpediente').click(updateExpediente);
|
||||
|
||||
// Configurar subida de imagen independiente
|
||||
$(document).on('change', '#Foto, #FotoEdit', function() {
|
||||
const input = this;
|
||||
const isEdit = $(input).attr('id') === 'FotoEdit';
|
||||
const previewId = isEdit ? 'fotoPreviewEdit' : 'fotoPreview';
|
||||
|
||||
if (input.files && input.files[0]) {
|
||||
// Mostrar vista previa inmediata
|
||||
previewImage(input, previewId);
|
||||
|
||||
// Subir imagen al servidor
|
||||
uploadImage(input.files[0], isEdit);
|
||||
}
|
||||
});
|
||||
|
||||
// Configurar botones de eliminar imagen
|
||||
$(document).on('click', '#deleteFoto, #deleteFotoEdit', function() {
|
||||
const isEdit = $(this).attr('id') === 'deleteFotoEdit';
|
||||
deleteImage(isEdit);
|
||||
});
|
||||
});
|
||||
|
||||
// Cargar estadísticas del dashboard
|
||||
function loadDashboardStats() {
|
||||
$.ajax({
|
||||
url: '/Expedientes/GetDashboardStats',
|
||||
type: 'GET',
|
||||
success: function(data) {
|
||||
$('#totalNinos').text(data.totalNinos);
|
||||
$('#cumpleanerosMes').text(data.cumpleanerosMes);
|
||||
$('#mayores14').text(data.mayores14);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Cargar expedientes
|
||||
function loadExpedientes(page = 1) {
|
||||
currentPage = page;
|
||||
$.ajax({
|
||||
url: `/Expedientes/GetExpedientes?page=${page}&pageSize=${itemsPerPage}`,
|
||||
type: 'GET',
|
||||
success: function(data) {
|
||||
allExpedientes = data.items;
|
||||
renderExpedientesTable(data.items);
|
||||
renderPagination(data.totalItems, data.totalPages, page);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Renderizar tabla de expedientes
|
||||
function renderExpedientesTable(expedientes) {
|
||||
const tbody = $('#expedientesTableBody');
|
||||
tbody.empty();
|
||||
|
||||
if (expedientes.length === 0) {
|
||||
tbody.append(`
|
||||
<tr>
|
||||
<td colspan="7" class="text-center py-4">
|
||||
<i class="bi bi-folder-x" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-2">No se encontraron expedientes</p>
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
return;
|
||||
}
|
||||
|
||||
expedientes.forEach(expediente => {
|
||||
const edad = calculateAge(expediente.fechaNacimiento);
|
||||
const row = `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="avatar avatar-sm">
|
||||
<img src="${expediente.fotoUrl || '/images/default-avatar.png'}"
|
||||
alt="${expediente.nombre}"
|
||||
class="rounded-circle"
|
||||
style="width: 40px; height: 40px; object-fit: cover;">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<strong>${expediente.nombre} ${expediente.apellidos}</strong>
|
||||
</td>
|
||||
<td>${edad} años</td>
|
||||
<td>
|
||||
<span class="badge ${expediente.sexo === 'M' ? 'bg-info' : 'bg-pink'}">
|
||||
${expediente.sexo === 'M' ? 'Masculino' : 'Femenino'}
|
||||
</span>
|
||||
</td>
|
||||
<td>${formatDate(expediente.fechaNacimiento)}</td>
|
||||
<td>${expediente.nombreResponsable}</td>
|
||||
<td>
|
||||
<div class="btn-group" role="group">
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="viewExpediente(${expediente.id})" title="Ver">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-warning" onclick="editExpediente(${expediente.id})" title="Editar">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="deleteExpediente(${expediente.id})" title="Eliminar">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
tbody.append(row);
|
||||
});
|
||||
}
|
||||
|
||||
// Renderizar paginación
|
||||
function renderPagination(totalItems, totalPages, currentPage) {
|
||||
const pagination = $('#pagination');
|
||||
pagination.empty();
|
||||
|
||||
// Botón anterior
|
||||
pagination.append(`
|
||||
<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
|
||||
<a class="page-link" href="#" onclick="loadExpedientes(${currentPage - 1})" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
`);
|
||||
|
||||
// Números de página
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
pagination.append(`
|
||||
<li class="page-item ${i === currentPage ? 'active' : ''}">
|
||||
<a class="page-link" href="#" onclick="loadExpedientes(${i})">${i}</a>
|
||||
</li>
|
||||
`);
|
||||
}
|
||||
|
||||
// Botón siguiente
|
||||
pagination.append(`
|
||||
<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
|
||||
<a class="page-link" href="#" onclick="loadExpedientes(${currentPage + 1})" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
`);
|
||||
}
|
||||
|
||||
// Buscar expedientes
|
||||
function searchExpedientes() {
|
||||
const searchTerm = $('#searchInput').val().toLowerCase();
|
||||
|
||||
if (searchTerm.trim() === '') {
|
||||
loadExpedientes(1);
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = allExpedientes.filter(exp =>
|
||||
exp.nombre.toLowerCase().includes(searchTerm) ||
|
||||
exp.apellidos.toLowerCase().includes(searchTerm) ||
|
||||
exp.nombreResponsable.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
|
||||
renderExpedientesTable(filtered);
|
||||
$('#pagination').empty(); // Limpiar paginación en búsqueda
|
||||
}
|
||||
|
||||
// Guardar nuevo expediente
|
||||
function saveExpediente() {
|
||||
const formData = new FormData($('#createForm')[0]);
|
||||
|
||||
$.ajax({
|
||||
url: '/Expedientes/Create',
|
||||
type: 'POST',
|
||||
data: formData,
|
||||
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');
|
||||
|
||||
if (response.success) {
|
||||
$('#createModal').modal('hide');
|
||||
loadDashboardStats();
|
||||
loadExpedientes(currentPage);
|
||||
showAlert('success', message);
|
||||
} else {
|
||||
showAlert('error', message);
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
// Extraer el message del JSON si existe
|
||||
let message = 'Error en la solicitud';
|
||||
try {
|
||||
const jsonResponse = JSON.parse(xhr.responseText);
|
||||
if (jsonResponse && jsonResponse.message) {
|
||||
message = jsonResponse.message;
|
||||
}
|
||||
} catch (e) {
|
||||
// Si no es JSON válido, usar el texto de respuesta
|
||||
if (xhr.responseText) {
|
||||
message = xhr.responseText;
|
||||
}
|
||||
}
|
||||
showAlert('error', message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Editar expediente
|
||||
function editExpediente(id) {
|
||||
$.ajax({
|
||||
url: `/Expedientes/Edit/${id}`,
|
||||
type: 'GET',
|
||||
success: function(data) {
|
||||
$('#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') {
|
||||
deleteBtn.show();
|
||||
} else {
|
||||
deleteBtn.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Actualizar expediente
|
||||
function updateExpediente() {
|
||||
const formData = new FormData($('#editForm')[0]);
|
||||
const id = $('#editForm').data('id');
|
||||
|
||||
$.ajax({
|
||||
url: `/Expedientes/Edit/${id}`,
|
||||
type: 'POST',
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
$('#editModal').modal('hide');
|
||||
loadDashboardStats();
|
||||
loadExpedientes(currentPage);
|
||||
showAlert('success', 'Expediente actualizado exitosamente');
|
||||
} else {
|
||||
showAlert('error', response.message || 'Error al actualizar expediente');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
showAlert('error', 'Error al procesar la solicitud');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Ver expediente (detalle)
|
||||
function viewExpediente(id) {
|
||||
window.location.href = `/Expedientes/Details/${id}`;
|
||||
}
|
||||
|
||||
// Eliminar expediente
|
||||
function deleteExpediente(id) {
|
||||
if (confirm('¿Está seguro de eliminar este expediente?')) {
|
||||
$.ajax({
|
||||
url: `/Expedientes/Delete/${id}`,
|
||||
type: 'DELETE',
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
loadDashboardStats();
|
||||
loadExpedientes(currentPage);
|
||||
showAlert('success', 'Expediente eliminado exitosamente');
|
||||
} else {
|
||||
showAlert('error', response.message || 'Error al eliminar expediente');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ========== FUNCIONES PARA MANEJO DE IMÁGENES ==========
|
||||
|
||||
// Mostrar vista previa de imagen
|
||||
function previewImage(input, previewId) {
|
||||
const preview = document.getElementById(previewId);
|
||||
const file = input.files[0];
|
||||
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
preview.src = e.target.result;
|
||||
preview.style.display = 'block';
|
||||
}
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
// Subir imagen al servidor
|
||||
function uploadImage(file, isEdit = false) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
// Mostrar indicador de carga
|
||||
const previewId = isEdit ? 'fotoPreviewEdit' : 'fotoPreview';
|
||||
const preview = document.getElementById(previewId);
|
||||
const originalOpacity = preview.style.opacity;
|
||||
preview.style.opacity = '0.5';
|
||||
|
||||
$.ajax({
|
||||
url: '/Expedientes/UploadImage',
|
||||
type: 'POST',
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(response) {
|
||||
preview.style.opacity = originalOpacity;
|
||||
|
||||
if (response.success) {
|
||||
// Actualizar el campo oculto con la URL de la imagen
|
||||
const formId = isEdit ? 'editForm' : 'createForm';
|
||||
const hiddenInput = $(`#${formId} input[name="FotoUrl"]`);
|
||||
|
||||
if (hiddenInput.length === 0) {
|
||||
// Crear campo oculto si no existe
|
||||
$(`#${formId}`).append(`<input type="hidden" name="FotoUrl" value="${response.imageUrl}" />`);
|
||||
} else {
|
||||
// Actualizar valor existente
|
||||
hiddenInput.val(response.imageUrl);
|
||||
}
|
||||
|
||||
// Mostrar botón de eliminar
|
||||
const deleteBtnId = isEdit ? 'deleteFotoEdit' : 'deleteFoto';
|
||||
$(`#${deleteBtnId}`).show();
|
||||
|
||||
showAlert('success', 'Imagen subida exitosamente');
|
||||
} else {
|
||||
showAlert('error', response.message || 'Error al subir imagen');
|
||||
// Restaurar imagen predeterminada
|
||||
preview.src = '/images/default-avatar.png';
|
||||
// Ocultar botón de eliminar
|
||||
const deleteBtnId = isEdit ? 'deleteFotoEdit' : 'deleteFoto';
|
||||
$(`#${deleteBtnId}`).hide();
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
preview.style.opacity = originalOpacity;
|
||||
let message = 'Error en la solicitud';
|
||||
try {
|
||||
const jsonResponse = JSON.parse(xhr.responseText);
|
||||
if (jsonResponse && jsonResponse.message) {
|
||||
message = jsonResponse.message;
|
||||
}
|
||||
} catch (e) {
|
||||
if (xhr.responseText) {
|
||||
message = xhr.responseText;
|
||||
}
|
||||
}
|
||||
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"]`);
|
||||
const imageUrl = hiddenInput.val();
|
||||
const previewId = isEdit ? 'fotoPreviewEdit' : 'fotoPreview';
|
||||
const deleteBtnId = isEdit ? 'deleteFotoEdit' : 'deleteFoto';
|
||||
|
||||
if (imageUrl && imageUrl !== '/images/default-avatar.png') {
|
||||
if (confirm('¿Está seguro de eliminar esta imagen?')) {
|
||||
$.ajax({
|
||||
url: '/Expedientes/DeleteImage',
|
||||
type: 'DELETE',
|
||||
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();
|
||||
showAlert('success', 'Imagen eliminada exitosamente');
|
||||
} else {
|
||||
showAlert('error', response.message || 'Error al eliminar imagen');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
showAlert('error', 'Error al procesar la solicitud');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========== FUNCIONES UTILITARIAS ==========
|
||||
|
||||
// Calcular edad
|
||||
function calculateAge(birthDate) {
|
||||
const today = new Date();
|
||||
const birth = new Date(birthDate);
|
||||
let age = today.getFullYear() - birth.getFullYear();
|
||||
const monthDiff = today.getMonth() - birth.getMonth();
|
||||
|
||||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
|
||||
age--;
|
||||
}
|
||||
|
||||
return age;
|
||||
}
|
||||
|
||||
// Formatear fecha
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('es-ES', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
// 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;';
|
||||
alertDiv.innerHTML = `
|
||||
${message}
|
||||
<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();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bg-pink {
|
||||
background-color: #e83e8c !important;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
}
|
||||
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.35em 0.65em;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.modal-lg {
|
||||
max-width: 800px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
Reference in New Issue
Block a user