test

scripts.js

@@ -1,186 +1,130 @@
-$(document).ready(function () {
-    // Cambiar las categorías según el tipo seleccionado
-    $('#tipo').change(function () {
-        const tipo = $(this).val();
-        $.get('/categorias/' + tipo, function (data) {
-            $('#categoria').empty();
-            if (data.length > 0) {
-                data.forEach(function (categoria) {
-                    $('#categoria').append(
-                        $('<option>', { value: categoria.id_categoria, text: categoria.nombre_categoria })
-                    );
-                });
-                $('#categoria').val(data[0].id_categoria).change(); // Selecciona la primera categoría si hay opciones
-            } else {
-                $('#categoria').append('<option value="">No hay categorías disponibles</option>');
-                $('#subcategoria').empty().append('<option value="">Seleccione una categoría primero</option>');
-            }
-        });
-    });
-
-    // Cambiar las subcategorías según la categoría seleccionada
-    $('#categoria').change(function () {
-        const categoriaId = $(this).val();
-        $.get('/subcategorias/' + categoriaId, function (data) {
-            $('#subcategoria').empty();
-            if (data.length > 0) {
-                data.forEach(function (subcategoria) {
-                    $('#subcategoria').append(
-                        $('<option>', { value: subcategoria.id_subcategoria, text: subcategoria.nombre_subcategoria })
-                    );
-                });
-            } else {
-                $('#subcategoria').append('<option value="">No hay subcategorías disponibles</option>');
-            }
-        });
-    });
-    // Manejar la acción de enviar el formulario
-    $('#transaccion-form').on('submit', function (e) {
-        e.preventDefault();  // Prevenir el comportamiento por defecto del formulario
-        const formData = $(this).serializeArray();  // Serializar los datos del formulario
-        let jsonData = {}; // Inicializar objeto JSON
-
-        // Obtener la fecha y hora actual en la zona horaria de América/Lima
-        const datetime = new Date().toLocaleString('es-PE', {
-            timeZone: 'America/Lima',
-            hour12: false // 24-hour format
-        });
-
-        // Convertir el formato de fecha y hora a yyyy-mm-dd hh:mm:ss
-        const formattedDatetime = datetime.replace(/(\d+)\/(\d+)\/(\d+), (\d+):(\d+):(\d+)/, '$3-$2-$1 $4:$5:$6');
-
-        // Añadir el datetime formateado a los datos del formulario
-        jsonData['fecha'] = formattedDatetime;
-
-        // Convertir los datos del formulario a un objeto JSON
-        formData.forEach(function (item) {
-            jsonData[item.name] = item.value;
-        });
-
-        mostrarSpinner();  // Mostrar el spinner mientras se envían los datos
-
-        // Realizar la solicitud POST a Google Apps Script
-        fetch('https://script.google.com/macros/s/AKfycbyoS_q9j7Hixi1-dxVg6S7LKqb9o_Pma2I0mnBPmZ_vlKKSWyPY8lpw66woTMkyaD04/exec', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify([jsonData]), // Enviar los datos como un array de objetos JSON
-            mode: 'no-cors'  // Evitar errores de CORS
-        })
-            .then(() => {
-                // Procesar la respuesta si es necesario, pero sin acceso al contenido de la respuesta
-                $('#mensaje').html('<div class="bg-green-500 p-3 rounded-lg">¡Transacción registrada exitosamente!</div>');
-
-                // Después de 4 segundos, recargar la página
-                setTimeout(() => {
-                    location.reload();
-                }, 4000);  // 4000 milisegundos = 4 segundos
-            })
-            .catch(error => {
-                $('#mensaje').html('<div class="bg-red-500 p-3 rounded-lg">Hubo un problema con la solicitud.</div>');
-            })
-            .finally(() => {
-                $('#loading').hide();  // Ocultar el spinner después de la respuesta
-            });
-    });
-
-
-});
-
-// Función para mostrar el spinner
-function mostrarSpinner() {
-    $('#loading').show();  // Mostrar el spinner
-}
-
-/**
- * Cargar los datos de los selects de tipo, categoria y subcategoria desde un archivo JSON.
- */
-let data;  // Declarar la variable data globalmente
-
-// Cargar el archivo JSON y almacenarlo en la variable data
-fetch('tipos_categoria_subcategoria.json')
-    .then(response => response.json())
-    .then(jsonData => {
-        data = jsonData;  // Asignar los datos JSON a la variable global
-        cargarTipos();  // Llamar a cargarTipos después de que los datos se hayan cargado
-    })
-    .catch(error => console.error('Error al cargar el archivo JSON:', error));
-
-// Llenar el select de tipos
-function cargarTipos() {
-    const tipoSelect = document.getElementById('tipo');
-    for (const tipo in data.tipo) {
-        const option = document.createElement('option');
-        option.value = tipo;
-        option.textContent = tipo;
-        tipoSelect.appendChild(option);
-    }
-}
-
-// Llenar el select de categorías según el tipo seleccionado
-function cargarCategorias() {
-    const tipoSelect = document.getElementById('tipo');
-    const categoriaSelect = document.getElementById('categoria');
-    // Limpiar categorías anteriores
-    categoriaSelect.innerHTML = '<option value="">Selecciona una categoría</option>';
-
-    if (tipoSelect.value) {
-        const categorias = Object.keys(data.tipo[tipoSelect.value]);
-        categorias.forEach(categoria => {
-            const option = document.createElement('option');
-            option.value = categoria;
-            option.textContent = categoria;
-            categoriaSelect.appendChild(option);
-        });
-    }
-}
-
-// Llenar el select de subcategorías según la categoría seleccionada
-function cargarSubcategorias() {
-    const tipoSelect = document.getElementById('tipo');
-    const categoriaSelect = document.getElementById('categoria');
-    const subcategoriaSelect = document.getElementById('subcategoria');
-    // Limpiar subcategorías anteriores
-    subcategoriaSelect.innerHTML = '<option value="">Selecciona una subcategoría</option>';
-
-    if (categoriaSelect.value) {
-        const subcategorias = data.tipo[tipoSelect.value][categoriaSelect.value];
-        subcategorias.forEach(subcategoria => {
-            const option = document.createElement('option');
-            option.value = subcategoria;
-            option.textContent = subcategoria;
-            subcategoriaSelect.appendChild(option);
-        });
-    }
-}
-
-/**
- * Cargar usuarios desde un archivo JSON.
- */
-let usuarios;
-
-// Cargar el archivo JSON y asignar los datos a la variable global `usuarios`
-fetch('usuarios.json')
-    .then(response => response.json())
-    .then(jsonData => {
-        usuarios = jsonData;  // Asignar los usuarios del JSON a la variable
-        cargarUsuarios();      // Llamar a la función para cargar los usuarios en el select
-    })
-    .catch(error => console.error('Error al cargar el archivo JSON:', error));
-
-// Cargar los usuarios en el select
-function cargarUsuarios() {
-    const usuarioSelect = document.getElementById('usuario');
-
-    // Limpiar las opciones existentes antes de agregar nuevas
-    usuarioSelect.innerHTML = '<option value="">Selecciona un usuario</option>';
-
-    // Agregar las nuevas opciones de usuario
-    for (const usuario of usuarios.nombre_usuarios) {
-        const option = document.createElement('option');
-        option.value = usuario;
-        option.textContent = usuario;
-        usuarioSelect.appendChild(option);
-    }
-}
+$(document).ready(function () {
+    // Cacheo de selectores
+    const $selectors = {
+        tipo: $('#tipo'),
+        categoria: $('#categoria'),
+        subcategoria: $('#subcategoria'),
+        usuario: $('#usuario'),
+        form: $('#transaccion-form'),
+        mensaje: $('#mensaje'),
+        loading: $('#loading')
+    };
+
+    // Variables de estado
+    let appData = {
+        tipos: null,
+        usuarios: null
+    };
+
+    // Carga inicial de datos
+    Promise.all([
+        fetch('tipos_categoria_subcategoria.json').then(r => r.json()),
+        fetch('usuarios.json').then(r => r.json())
+    ])
+    .then(([tipos, usuarios]) => {
+        appData.tipos = tipos;
+        appData.usuarios = usuarios;
+        initSelects();
+    })
+    .catch(error => showError('Error cargando datos iniciales', error));
+
+    // Inicialización de selects
+    function initSelects() {
+        populateSelect($selectors.tipo, Object.keys(appData.tipos.tipo), 'Selecciona un tipo');
+        populateSelect($selectors.usuario, appData.usuarios.nombre_usuarios, 'Selecciona un usuario');
+        initEventHandlers();
+    }
+
+    // Configuración de manejadores de eventos
+    function initEventHandlers() {
+        $selectors.tipo.on('change', handleTipoChange);
+        $selectors.categoria.on('change', handleCategoriaChange);
+        $selectors.form.on('submit', handleFormSubmit);
+    }
+
+    // Manejador de cambio de tipo
+    function handleTipoChange() {
+        const tipo = $(this).val();
+        const categorias = tipo ? Object.keys(appData.tipos.tipo[tipo]) : [];
+        
+        populateSelect($selectors.categoria, categorias, 'Selecciona una categoría');
+        populateSelect($selectors.subcategoria, [], 'Selecciona una subcategoría');
+    }
+
+    // Manejador de cambio de categoría
+    function handleCategoriaChange() {
+        const tipo = $selectors.tipo.val();
+        const categoria = $(this).val();
+        const subcategorias = (tipo && categoria) ? 
+            appData.tipos.tipo[tipo][categoria] : [];
+        
+        populateSelect($selectors.subcategoria, subcategorias, 'Selecciona una subcategoría');
+    }
+
+    // Manejador de envío de formulario
+    async function handleFormSubmit(e) {
+        e.preventDefault();
+        
+        try {
+            $selectors.loading.show();
+            const formData = getFormData();
+            
+            await sendData(formData);
+            
+            showSuccess('¡Transacción registrada exitosamente!');
+            setTimeout(() => location.reload(), 4000);
+        } catch (error) {
+            showError('Error al enviar formulario', error);
+        } finally {
+            $selectors.loading.hide();
+        }
+    }
+
+    // Helpers
+    function populateSelect($select, items, defaultText) {
+        const options = items.length > 0 ? 
+            items.map(item => `<option value="${item}">${item}</option>`) : 
+            [`<option value="">${defaultText}</option>`];
+        
+        $select.html([`<option value="">${defaultText}</option>`, ...options]);
+    }
+
+    function getFormData() {
+        const formData = Object.fromEntries($selectors.form.serializeArray().map(x => [x.name, x.value]));
+        
+        // Formato de fecha para América/Lima
+        const now = new Date().toLocaleString('es-PE', {
+            timeZone: 'America/Lima',
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false
+        });
+        
+        const [fecha, hora] = now.split(', ');
+        return { ...formData, fecha: `${fecha.split('/').reverse().join('-')} ${hora}` };
+    }
+
+    async function sendData(data) {
+        const response = await fetch('https://script.google.com/macros/s/AKfycbyoS_q9j7Hixi1-dxVg6S7LKqb9o_Pma2I0mnBPmZ_vlKKSWyPY8lpw66woTMkyaD04/exec', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify([data]),
+            mode: 'no-cors'
+        });
+        
+        if (!response.ok) throw new Error('Error en la respuesta del servidor');
+    }
+
+    function showSuccess(message) {
+        $selectors.mensaje.html(`<div class="bg-green-500 p-3 rounded-lg">${message}</div>`);
+    }
+
+    function showError(context, error) {
+        console.error(`${context}:`, error);
+        $selectors.mensaje.html(`<div class="bg-red-500 p-3 rounded-lg">${error.message}</div>`);
+    }
+});