Agregar Pedidos

frontend/package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@mui/material": "^5.15.16",
+        "@mui/material": "^5.15.17",
         "axios": "^1.6.8",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -1108,22 +1108,22 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.15.16",
+      "version": "5.15.17",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.17.tgz",
-      "integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==",
+      "integrity": "sha512-DVAejDQkjNnIac7MfP8sLzuo7fyrBPxNdXe+6bYqOqg1z2OPTlfFAejSNzWe7UenRMuFu9/AyFXj/X2vN2w6dA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.15.16",
+      "version": "5.15.17",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.17.tgz",
-      "integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==",
+      "integrity": "sha512-ru/MLvTkCh0AZXmqwIpqGTOoVBS/sX48zArXq/DvktxXZx4fskiRA2PEc7Rk5ZlFiZhKh4moL4an+l8zZwq49Q==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/base": "5.0.0-beta.40",
-        "@mui/core-downloads-tracker": "^5.15.16",
+        "@mui/core-downloads-tracker": "^5.15.17",
         "@mui/system": "^5.15.15",
         "@mui/types": "^7.2.14",
         "@mui/utils": "^5.15.14",

frontend/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/material": "^5.15.16",
+    "@mui/material": "^5.15.17",
     "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/src/Pedidos.css

@@ -83,3 +83,91 @@
 	text-align: left;
     color:var(--primary-color)
 }
+
+/* Estilos del contenedor principal de reservaciones */
+#contenedor_reservaciones {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding-top: 10px;
+}
+
+/* Estilos de cada tarjeta de reservación */
+.reservacion {
+    display: flex; /* Añadir esta propiedad para usar flexbox */
+    width: 700px;
+    gap: 1.5rem;
+    height: 215px;
+    margin: 20px;
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+}
+
+/* Estilos para la imagen */
+.imagenPastel {
+    width: 100%;
+    height: 100%; /* Ajustar al 100% del contenedor padre */
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    border-radius: 8px; /* Añadir bordes redondeados solo a la izquierda */
+}
+
+/* Estilos para el texto */
+.reservaData {
+    width: 50%;
+    padding: 0 15px; /* Agregar relleno solo a los lados */
+}
+
+.reservacion h3 {
+    margin-top: 10px;
+    font-size: 18px;
+}
+
+.reservacion p {
+    margin: 8px 0;
+}
+
+/* Estilos del botón Eliminar Reservación */
+.eliminar-btn {
+	background-color: #8B374A;
+    color: #fff;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.eliminar-btn:hover {
+    background-color: #ff4646;
+}
+
+
+.eliminar-btn:hover {
+    background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
+  }
+  
+
+.IniSesReserva{
+    padding-top: 2rem;
+    padding-bottom: 10px;
+	border-bottom: 1px solid #e4e4e4;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+    font-size: 24px;
+	font-weight: 300;
+}
+
+.ReservaNull{
+    padding-top: 2rem;
+    padding-bottom: 10px;
+	border-bottom: 1px solid #e4e4e4;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+    font-size: 24px;
+	font-weight: 300;
+}

frontend/src/Pedidos.jsx

@@ -1,4 +1,6 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react';
+
+import './Pedidos.css';
 
 import viteLogo from '/vite.svg'
 
@@ -11,17 +13,10 @@ import { FaRegEye } from "react-icons/fa";
 import { CiShare2 } from "react-icons/ci";
 import { useNavigate } from "react-router-dom";
 
-import PastelEditado1 from "./assets/Edicion1.jpg";
+import pastelZarza from "./assets/pastel-zarza.jpg"
-import PastelEditado2 from "./assets/Edicion2.jpg";
-import PastelEditado3 from "./assets/Edicion3.jpg";
-import PastelEditado4 from "./assets/Edicion4.jpg";
-import PastelEditado5 from "./assets/Edicion5.jpg";
-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";
 
-function AppPedidos() {
+
+function Pedidos() {
     const [count, setCount] = useState(0);
 	const navigate = useNavigate();
 
@@ -44,6 +39,51 @@ function AppPedidos() {
 		navigate("/");
 	  };
 
+	  useEffect(() => {
+		setNombreUsuario("Mario");
+	  }, []);
+
+	  const [nombreUsuario, setNombreUsuario]=useState("");
+
+	  const [pedidos, setPedidos] = useState([]);
+
+	  const generarPedidos = () => {
+
+		if(nombreUsuario==null){
+		  return (
+			  <h1 className="IniSesReserva">Inicia Sesion para poder ver tus reservaciones.</h1>
+		  );
+		}else{
+	
+		  if(!pedidos){
+			return(
+			  
+			  <h1 className="ReservaNull">No tienes pedidos en este momento.</h1>
+			);
+	
+			
+		  }else{
+			return (
+			  <div>
+				  <div key={1}/*{reserva.id_reservacion}*/ className="reservacion">
+					<div className='container-img-pedido'>
+						<img src={pastelZarza} alt="" className="imagenPastel" />
+					</div>
+					<div className="reservaData">
+					  <h3>{"Pastel Arcoiris"/*reserva.nombre_hotel*/}</h3>
+					  <p>Precio de la reservación: ${500/*reserva.precio*/}</p>
+					  <button className="eliminar-btn" /*onClick={() => mostrarAlertaEliminarRes(reserva.id_reservacion,reserva.nombre_hotel)}*/>
+						Eliminar Pedido
+					  </button>
+					</div>
+				  </div>
+
+			  </div>
+			);
+		  }
+		}
+	  };
+
     return (
       <>
 	<body>
@@ -99,38 +139,10 @@ function AppPedidos() {
 		</header>
 
 
-		<main className="main-content">
+		<main className="main-pedidos">
-			<section className="container container-features">
+			<div id="contenedor_reservaciones">
-
+				{generarPedidos()}
-			</section>
-
-			<section className="container top-categories">
-
-			</section>
-
-			<section className="container top-products">
-				
-
-
-				
-
-				
-			</section>
-
-			
-
-			<section className="container specials">
-				<h1 className="heading-1"></h1>
-
-				<div className="container-products">
-
 			</div>
-			</section>
-
-			<section className="container blogs">
-	
-			</section>
-
 		</main>
 
 
@@ -201,4 +213,4 @@ function AppPedidos() {
     )
   }
 
-  export default AppPedidos
+  export default Pedidos

frontend/src/PersPastel1.jsx

@@ -9,6 +9,8 @@ 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 pastelArcoirisFondo from "./assets/pastel-zarza.jpg"
+import pastelArcoiris from "./assets/pastel1.jpg"
 
 function Pastel() {
   const navigate = useNavigate();
@@ -23,6 +25,16 @@ function Pastel() {
     navigate("/");
     };
 
+    const [imagenVisible, setImagenVisible] = useState(pastelArcoiris);
+
+    const cambiarImagen = () => {
+      if (imagenVisible === pastelArcoiris) {
+        setImagenVisible(pastelArcoirisFondo);
+      } else {
+        setImagenVisible(pastelArcoiris);
+      }
+    };
+
   return (
     <>
 
@@ -83,8 +95,8 @@ function Pastel() {
 </header>
 
       <main className = "main-pers-pastel">
-        <div className="container-img-1" >
+        <div className="container-img-1">
-          {/* Contenido de tu contenedor de imagen */}
+          <img className="imgPastel" src={imagenVisible} alt="Pastel"/>
         </div>
         <div className="container-info-product">
           <div className="container-price">
@@ -99,7 +111,7 @@ function Pastel() {
                 <div className="mb-4">
                     <p className="pastel-Type">Tipo de Pastel</p>
                     <div className="botones-pastel">
-                    <button className="boton-1">
+                    <button className="boton-1" onClick={cambiarImagen}>
                         Vanilla Rainbow Cake
                     </button>
                     <button className="boton-2">

frontend/src/PersPastelStyle.css

@@ -200,14 +200,20 @@
 
 .container-img-1 {
     background-color: #f7f7f9;
-    background-image: url('assets/pastel1.jpg');
+    background-image: url('');
     flex: 1;
     width: 55%;
     height: 100%;
-    padding-top: 60.4%;
     background-size: 100% auto;
 }
 
+.imgPastel{
+	flex: 1;
+    width: 100%;
+    height: 100%;
+    background-size: 200% auto;
+}
+
 .container-info-product {
 	flex: 1;
 	display: flex;