From bbf03d60c38d14f8643bc35a9a8688b534e1a7e7 Mon Sep 17 00:00:00 2001 From: xFractu Date: Sun, 12 May 2024 17:59:14 -0600 Subject: [PATCH] Funcionalidad Personalizar Pastel y Pedidos 2.0 --- frontend/src/AppInicio.jsx | 2 +- frontend/src/Pedidos.css | 5 +- frontend/src/Pedidos.jsx | 191 +++++-- frontend/src/PersPastel1.jsx | 481 ++++++++++++++++-- frontend/src/PersPastelStyle.css | 178 ++++++- frontend/src/assets/Pastel-fresa-original.png | Bin 0 -> 967203 bytes .../src/assets/Pastel-fresas-arcoiris.png | Bin 0 -> 1037730 bytes frontend/src/assets/Pastel-fresas-oreo.png | Bin 0 -> 1045113 bytes .../src/assets/Pastel-fresas-vainilla.png | Bin 0 -> 998148 bytes frontend/src/assets/pastel-texto.jpg | Bin 0 -> 60286 bytes 10 files changed, 767 insertions(+), 90 deletions(-) create mode 100644 frontend/src/assets/Pastel-fresa-original.png create mode 100644 frontend/src/assets/Pastel-fresas-arcoiris.png create mode 100644 frontend/src/assets/Pastel-fresas-oreo.png create mode 100644 frontend/src/assets/Pastel-fresas-vainilla.png create mode 100644 frontend/src/assets/pastel-texto.jpg diff --git a/frontend/src/AppInicio.jsx b/frontend/src/AppInicio.jsx index 0e4be85..59ce1cf 100644 --- a/frontend/src/AppInicio.jsx +++ b/frontend/src/AppInicio.jsx @@ -20,7 +20,7 @@ import PastelEditado6 from "./assets/Edicion6.jpg"; import PastelZanahoria from "./assets/Pastel-Zanahoria.jpg"; import MejoresPasteles from "./assets/MejoresPasteles.jpg"; import PastelTematico from "./assets/pastel-tematico.jpg"; -import Swal from 'sweetalert2' +import Swal from 'sweetalert2'; //import PopupV from "/src/Popups/PopupLoginValido.jsx"; //import PopupIv from "/src/Popups/PopupLoginInvalido.jsx"; diff --git a/frontend/src/Pedidos.css b/frontend/src/Pedidos.css index 47683d8..9fcc7d4 100644 --- a/frontend/src/Pedidos.css +++ b/frontend/src/Pedidos.css @@ -97,7 +97,7 @@ display: flex; /* Añadir esta propiedad para usar flexbox */ width: 700px; gap: 1.5rem; - height: 215px; + height: 230px; margin: 20px; padding: 15px; border: 1px solid #ccc; @@ -108,8 +108,9 @@ /* Estilos para la imagen */ .imagenPastel { - width: 100%; + width: 300px; height: 100%; /* Ajustar al 100% del contenedor padre */ + object-fit: cover; background-repeat: no-repeat; background-size: 100% auto; border-radius: 8px; /* Añadir bordes redondeados solo a la izquierda */ diff --git a/frontend/src/Pedidos.jsx b/frontend/src/Pedidos.jsx index a546639..8bb462b 100644 --- a/frontend/src/Pedidos.jsx +++ b/frontend/src/Pedidos.jsx @@ -12,6 +12,12 @@ import { CiHeart } from "react-icons/ci"; import { FaRegEye } from "react-icons/fa"; import { CiShare2 } from "react-icons/ci"; import { useNavigate } from "react-router-dom"; +import axios from "axios"; +//imagenes de pastel de fresas +import pastel_fresa_original from "./assets/Pastel-fresa-original.png"; +import pastel_fresa_arcoiris from "./assets/Pastel-fresas-arcoiris.png"; +import pastel_fresa_oreo from "./assets/Pastel-fresas-oreo.png"; +import pastel_fresa_vainilla from "./assets/Pastel-fresas-vainilla.png"; import pastelZarza from "./assets/pastel-zarza.jpg" @@ -20,64 +26,164 @@ function Pedidos() { const [count, setCount] = useState(0); const navigate = useNavigate(); +const [pedidosDePasteles, setPedidosDePasteles] = useState([]); + +const [datosFormulario, setDatosFormulario] = useState( + {correo: '', + password: '', + nombre: '' +}); + + +const mostrarAlertaLogOut = () => { + Swal.fire({ + title: "Cerrar Sesión", + text: "¿Seguro que quieres cerrar sesión?", + icon: "warning", + showCancelButton: true, // Mostrar el botón de cancelar + confirmButtonColor: "#3085d6", // Color del botón de confirmar + cancelButtonColor: "#d33", // Color del botón de cancelar + confirmButtonText: "Sí", // Texto del botón de confirmar + cancelButtonText: "No", // Texto del botón de cancelar + }).then((result) => { + if (result.isConfirmed) { + Swal.fire({ + text: "Sesión cerrada correctamente. Adiós " + nombreUsuario + "", + icon: "success", + }); + cerrarSesion(); + } + }); + }; + + const [nombreUsuario, setNombreUsuario]=useState(""); + + const obtenerNombreUsuario = async () => { + try { + // Realizar la llamada al backend para obtener el nombre del usuario + const response = await axios.post('http://localhost:4567/frontend/obtenerUsuario', { datosFormulario }); + setNombreUsuario(response.data.nombre); + console.log(nombreUsuario); + console.log("hola"+ datosFormulario.nombre); + } catch (error) { + // Manejar el error según tus necesidades + console.error("Error al obtener el nombre del usuario", error); + } + }; + + useEffect(() => { + // Llamar a la función al cargar la página + obtenerNombreUsuario(); + obtenerPedidosDePasteles(); + console.log("obtuvo los pedidos"); + }, []); + + const cerrarSesion = async () => { + try { + // Realizar la llamada al backend para obtener el nombre del usuario + const response = await axios.post('http://localhost:4567/frontend/cerrarSesion', { datosFormulario }); + setNombreUsuario(response.data.nombre); + console.log(nombreUsuario); + obtenerNombreUsuario(); + //mostrarAlertaLogOut(); + } catch (error) { + // Manejar el error según tus necesidades + console.error("Error al obtener el nombre del usuario", error); + } + }; + + const mostrarAlertaPedidoFallidaLogin=()=>{ + Swal.fire({ + title: "Pedido Fallida", + text: "Inicia Sesion para poder hacer un pedido.", + icon: "error", + button: "Aceptar" + + }); + }; + + + + const obtenerPedidosDePasteles = async () => { + try { + const response = await axios.post('http://localhost:4567/frontend/obtenerPedidosDePasteles'); + console.log("Pedidos de pasteles obtenidos:", response.data.pedidos_de_pasteles); + // Almacena los pedidos de pasteles en el estado + setPedidosDePasteles(response.data.pedidos_de_pasteles); + } catch (error) { + console.error("Error al obtener pedidos de pasteles:", error); + } + }; + + const redirectPersonalizarPastelArcoiris = () => { // Redirige a la página del hotel cuando se hace clic en el botón navigate("/PersonalizarPastel/PastelArcoiris"); - }; - - const redirectToPedidos = () => { - navigate("/Pedidos"); - - }; - - const redirectToPasteles = () => { - navigate("/Pasteles"); - }; - - const redirectInicio = () => { + }; + + const redirectInicio = () => { // Redirige a la página del hotel cuando se hace clic en el botón navigate("/"); - }; - - useEffect(() => { - setNombreUsuario("Mario"); - }, []); - - const [nombreUsuario, setNombreUsuario]=useState(""); + }; + const redirectToLogin = () => { + + navigate("/Login"); + }; + + const redirectToPedidos = () => { + navigate("/Pedidos"); + + }; + + const redirectToPasteles = () => { + navigate("/Pasteles"); + }; const [pedidos, setPedidos] = useState([]); const generarPedidos = () => { - - if(nombreUsuario==null){ + if (nombreUsuario == null) { return ( -

Inicia Sesion para poder ver tus reservaciones.

+

Inicia Sesión para poder ver tus pedidos de pasteles.

); - }else{ - - if(!pedidos){ - return( - -

No tienes pedidos en este momento.

+ } else { + if (pedidosDePasteles.length === 0) { + return ( +

No tienes pedidos de pasteles en este momento.

); - - - }else{ + } else { return (
-
+ {pedidosDePasteles.map(pedido => ( +
+ +
- + {pedido.nombre_pastel === 'Pastel de Fresas' ? ( + pedido.relleno === 'Original' ? : + pedido.relleno === 'Arcoiris' ? : + pedido.relleno === 'Oreo' ? : + pedido.relleno === 'Vainilla' ? : + // Si el relleno no coincide con ninguno de los anteriores + ) : ( + // Si el pastel no es de fresas + )}
+ +
-

{"Pastel Arcoiris"/*reserva.nombre_hotel*/}

-

Precio de la reservación: ${500/*reserva.precio*/}

-
- + ))}
); } @@ -119,11 +225,20 @@ function Pedidos() {
@@ -72,14 +350,22 @@ function Pastel() {