Sesion #6

   Duración 1 hora 7:00am-8:00am

+ Se trabaja en la funcion de insertar empleado.

+Se crea lo que se muestra cuando se da click en el boton "Insertar Empleado"

<button id="insertar" class="boton">Insertar Empleado</button>

    <div id="modal" class="modal">

        <div class="modal-content">

            <span class="close">&times;</span>

            <h2>Insertar Empleado</h2>

            <form id="formulario">

                <label for="nombre">Nombre:</label>

                <input type="text" id="nombre" name="nombre" required>

                <label for="salario">Salario:</label>

                <input type="number" id="salario" name="salario" required>

                <button type="submit" class="boton">Insertar</button>

            </form>

      </div>

+Junto con su script correspondiente

// Mostrar el modal al hacer clic en el botón "Insertar Empleado"

    const modal = document.getElementById('modal');

        const botonInsertar = document.getElementById('insertar');

        const closeModal = document.querySelector('.close');

        botonInsertar.onclick = function() {

            modal.style.display = 'flex'; // Mostrar modal

        }

        // Cerrar el modal cuando se hace clic en la "X"

        closeModal.onclick = function() {

            modal.style.display = 'none'; // Ocultar modal

        }

        // Cerrar el modal cuando se hace clic fuera de él

        window.onclick = function(event) {

            if (event.target == modal) {

                modal.style.display = 'none'; // Ocultar modal

            }

        }

    const urlInsertar = 'http:////127.0.0.1:5000/insertar_empleado';

   

    //funcion para insertar un empleado

    const formulario = document.getElementById('formulario');

    formulario.onsubmit = function(event) {

        event.preventDefault();

        const nombre = document.getElementById('nombre').value;

        const salario = document.getElementById('salario').value;

        fetch(urlInsertar, {

            method: 'POST',

            headers: {

                'Content-Type': 'application/json'

            },

            body: JSON.stringify({

                nombre: nombre,

                salario: salario

            })

        })

            .then(response => {

                if (!response.ok) {

                    throw new Error('Error al insertar el empleado');

                }

                return response.json();

            })

            .then(data => {

                console.log(data);

                modal.style.display = 'none'; // Ocultar modal

            })

            .catch(error => {

                console.error('Error:', error);

            });

    }