Carpeta js

2026-08-04 19:45:50 -03:00
parent 8bd815f888
commit 15281e9244
34 changed files with 4417 additions and 0 deletions
@@ -0,0 +1,225 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    if (serverErrors.length > 0) mostrarErrores(serverErrors);
+    if (serverSuccess.length > 0) mostrarSuccess(serverSuccess);
+
+    const form = document.getElementById("form-crear-servicio");
+    if (!form) return;
+
+    // Funciones utilitarias
+
+    function isEmpty(value) {
+        return !value || value.trim() === '';
+    }
+
+    function isValidEmail(value) {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+    }
+
+    // Submit
+
+    form.addEventListener("submit", (e) => {
+
+        let errores = [];
+
+        const descripcionEquipo = form.querySelector("input[name='descripcion_equipo']");
+        const contraseniaEquipo = form.querySelector("input[name='contrasenia_equipo']");
+        const cuenta = form.querySelector("input[name='cuenta']");
+        const contraseniaCuenta = form.querySelector("input[name='contrasenia_cuenta']");
+        const descripcionProblema = form.querySelector("textarea[name='descripcion_problema']");
+        const observacion = form.querySelector("textarea[name='observacion']");
+
+        // Limpiar estados previos
+
+        form.querySelectorAll(".is-invalid").forEach(el =>
+            el.classList.remove("is-invalid")
+        );
+
+        // DESCRIPCIÓN DEL EQUIPO
+
+        if (descripcionEquipo) {
+            if (isEmpty(descripcionEquipo.value)) {
+                errores.push("La descripción del equipo es obligatoria.");
+                descripcionEquipo.classList.add("is-invalid");
+            } else if (descripcionEquipo.value.length > 100) {
+                errores.push("La descripción del equipo es demasiado larga.");
+                descripcionEquipo.classList.add("is-invalid");
+            }
+        }
+
+        // DESCRIPCIÓN DEL PROBLEMA
+
+        if (descripcionProblema) {
+            if (isEmpty(descripcionProblema.value)) {
+                errores.push("Debe describir el problema.");
+                descripcionProblema.classList.add("is-invalid");
+            } else if (descripcionProblema.value.length > 2000) {
+                errores.push("La descripción del problema es demasiado larga.");
+                descripcionProblema.classList.add("is-invalid");
+            }
+        }
+
+        // CONTRASENIA EQUIPO
+
+        if (contraseniaEquipo) {
+            if (contraseniaEquipo.value.length > 100) {
+                errores.push("Contraseña demasiado larga.");
+                contraseniaEquipo.classList.add("is-invalid");
+            }
+
+            if (!isEmpty(contraseniaEquipo.value) && isEmpty(descripcionEquipo.value)) {
+                errores.push("Debe indicar el equipo si ingresa contraseña.");
+                descripcionEquipo.classList.add("is-invalid");
+            }
+        }
+
+        // CUENTA
+
+        if (cuenta) {
+            if (cuenta.value.length > 100) {
+                errores.push("Cuenta demasiado larga.");
+                cuenta.classList.add("is-invalid");
+            }
+
+            if (!isEmpty(cuenta.value) && !isValidEmail(cuenta.value)) {
+                errores.push("El email de la cuenta no es válido.");
+                cuenta.classList.add("is-invalid");
+            }
+        }
+
+        // CONTRASENIA CUENTA
+
+        if (contraseniaCuenta) {
+            if (contraseniaCuenta.value.length > 100) {
+                errores.push("Contraseña de cuenta demasiado larga.");
+                contraseniaCuenta.classList.add("is-invalid");
+            }
+
+            if (!isEmpty(contraseniaCuenta.value) && isEmpty(cuenta.value)) {
+                errores.push("Debe indicar la cuenta si ingresa contraseña.");
+                cuenta.classList.add("is-invalid");
+            }
+        }
+
+        // OBSERVACIÓN
+
+        if (observacion) {
+            if (observacion.value.length > 500) {
+                errores.push("La descripción de la observación es demasiada larga.");
+                observacion.classList.add("is-invalid");
+            }
+        }
+
+        // Resultado
+
+        if (errores.length > 0) {
+            e.preventDefault();
+            mostrarErrores(errores);
+        }
+    });
+
+        // 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);
+    }