Carpeta js
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
if (serverErrors.length > 0) mostrarErrores(serverErrors);
|
||||
if (serverSuccess.length > 0) mostrarSuccess(serverSuccess);
|
||||
|
||||
// FUNCIÓN PARA MOSTRAR ERRORES
|
||||
|
||||
function mostrarErrores(errores) {
|
||||
|
||||
// Buscar si hay un toast previo
|
||||
|
||||
const viejo = document.getElementById("toastErrores");
|
||||
|
||||
// Si existe, se elimina (evita duplicados)
|
||||
|
||||
if (viejo) viejo.remove();
|
||||
|
||||
// Crea el contenedor del toast
|
||||
|
||||
const toast = document.createElement("div");
|
||||
|
||||
// Se le asigna ID para identificarlo
|
||||
|
||||
toast.id = "toastErrores";
|
||||
|
||||
// Clases de estilo (Bootstrap + CSS)
|
||||
|
||||
toast.className = "toast-flotante alert alert-danger";
|
||||
|
||||
// Inserta el contenido dinámico (lista de errores)
|
||||
|
||||
toast.innerHTML = `
|
||||
<strong>Se encontraron errores:</strong>
|
||||
<ul class="mb-0 mt-2">
|
||||
${errores.map(e => `<li>${e}</li>`).join("")} <!-- convierte array a <li> -->
|
||||
</ul>
|
||||
`;
|
||||
|
||||
// Agrega el toast al body (lo hace visible)
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Auto-cierre
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
// Agrega clase para animación de salida (CSS)
|
||||
|
||||
toast.classList.add("toast-out");
|
||||
|
||||
// Elimina el elemento después de la animación
|
||||
|
||||
setTimeout(() => {
|
||||
toast.remove(); // Elimina el DOM
|
||||
}, 350);
|
||||
|
||||
}, 5000); // Visible durante 5 segundos
|
||||
}
|
||||
});
|
||||
|
||||
// FUNCIÓN PARA MOSTRAR SUCCESS
|
||||
|
||||
function mostrarSuccess(mensajes) {
|
||||
|
||||
// Elimina toast previo de éxito si existe
|
||||
|
||||
const viejo = document.getElementById("toastSuccess");
|
||||
if (viejo) viejo.remove();
|
||||
|
||||
// Crea el contenedor del toast
|
||||
|
||||
const toast = document.createElement("div");
|
||||
|
||||
// Se le asigna ID único
|
||||
|
||||
toast.id = "toastSuccess";
|
||||
|
||||
// Estilo
|
||||
|
||||
toast.className = "toast-flotante alert alert-success";
|
||||
|
||||
// Inserta mensajes dinámicos
|
||||
|
||||
toast.innerHTML = `
|
||||
<strong>Mensajes de éxito:</strong>
|
||||
<ul class="mb-0 mt-2">
|
||||
${mensajes.map(m => `<li>${m}</li>`).join("")}
|
||||
</ul>
|
||||
`;
|
||||
|
||||
// Agrega al DOM
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Auto-cierre a los 5 segundos
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
// Animación de salida
|
||||
|
||||
toast.classList.add("toast-out");
|
||||
|
||||
// Eliminación final
|
||||
|
||||
setTimeout(() => {
|
||||
toast.remove();
|
||||
}, 350);
|
||||
|
||||
}, 5000);
|
||||
}
|
||||
Reference in New Issue
Block a user