TPFinal_Python2024_CodoFullStack/altas.html at main · mf2465/TPFinal_Python2024_CodoFullStack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agregar producto 🚀</title>
    <link rel="stylesheet" href="./static/css/estilos.css">
</head>

<body>
    <header>
        <nav class="navbar-index ">
            <img class="logo-nav" src="./static/imagenes/verduExpress.png" alt="logo VerduExpress">
        </nav>
    </header>

    <div class="logo-centrado">
        <img src="./static/imagenes/delivery.png" alt="delivery">
    </div>
    <h1>Agregar Productos al Inventario</h1><br>

    <!--enctype="multipart/form-data" es necesario para enviar archivos al back.-->
    <form id="formulario" enctype="multipart/form-data">

        <label for="descripcion">Descripción:</label>
        <input type="text" id="descripcion" name="descripcion" required><br>

        <label for="cantidad">Cantidad:</label>
        <input type="number" id="cantidad" name="cantidad" required><br>

        <label for="precio">Precio:</label>
        <input type="number" step="0.01" id="precio" name="precio" required><br>

        <label for="imagenProducto">Imagen del producto:</label>
        <input type="file" id="imagenProducto" name="imagen">

        <br><br>
        <label for="proveedorProducto">Proveedor:</label>
        <input type="text" id="proveedorProducto" name="proveedor">

        <button type="submit">Agregar Producto</button>
        <a href="index.html">Menu principal</a>
    </form>

    <script>
        const URL = "https://mf2465.pythonanywhere.com/"

        //Al subir al servidor, deberá utilizarse la siguiente ruta. USUARIO debe ser reemplazado por el nombre de usuario de Pythonanywhere
        //const URL = "https://USUARIO.pythonanywhere.com/"


        // Capturamos el evento de envío del formulario
        document.getElementById('formulario').addEventListener('submit', function (event) {
            event.preventDefault(); // Evitamos que se envie el form

            var formData = new FormData(this);

            // Realizamos la solicitud POST al servidor
            fetch(URL + 'productos', {
                method: 'POST',
                body: formData // Aquí enviamos formData. Dado que formData puede contener archivos, no se utiliza JSON.
            })

            //Después de realizar la solicitud POST, se utiliza el método then() para manejar la respuesta del servidor.
            .then(function (response) {
                    if (response.ok) {
                        //Si la respuesta es exitosa, convierte los datos de la respuesta a formato JSON.
                        return response.json();
                    } else {
                        // Si hubo un error, lanzar explícitamente una excepción
                        // para ser "catcheada" más adelante
                        throw new Error('Error al agregar el producto.');
                    }
            })

                //Respuesta OK, muestra una alerta informando que el producto se agregó correctamente y limpia los campos del formulario para que puedan ser utilizados para un nuevo producto.
                .then(function (data) {
                    alert('Producto agregado correctamente.');
                })

                // En caso de error, mostramos una alerta con un mensaje de error.
                .catch(function (error) {
                    alert('Error al agregar el producto.');
                })

                // Limpiar el formulario en ambos casos (éxito o error)
                .finally(function () {
                    document.getElementById('descripcion').value = "";
                    document.getElementById('cantidad').value = "";
                    document.getElementById('precio').value = "";
                    document.getElementById('imagenProducto').value = "";
                    document.getElementById('proveedorProducto').value = "";
                });
        })
    </script>
</body>

</html>