Agregar Pedidos
This commit is contained in:
xFractu
parent
65c5583acc
commit
f1cf6d70bc
|
|
@ -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",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz",
|
||||
"integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==",
|
||||
"version": "5.15.17",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.17.tgz",
|
||||
"integrity": "sha512-DVAejDQkjNnIac7MfP8sLzuo7fyrBPxNdXe+6bYqOqg1z2OPTlfFAejSNzWe7UenRMuFu9/AyFXj/X2vN2w6dA==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "5.15.16",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz",
|
||||
"integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==",
|
||||
"version": "5.15.17",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.17.tgz",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 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";
|
||||
import pastelZarza from "./assets/pastel-zarza.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">
|
||||
<section className="container container-features">
|
||||
|
||||
</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">
|
||||
|
||||
<main className="main-pedidos">
|
||||
<div id="contenedor_reservaciones">
|
||||
{generarPedidos()}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="container blogs">
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
|
@ -201,4 +213,4 @@ function AppPedidos() {
|
|||
)
|
||||
}
|
||||
|
||||
export default AppPedidos
|
||||
export default Pedidos
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
|
||||
|
|
@ -84,7 +96,7 @@ function Pastel() {
|
|||
|
||||
<main className = "main-pers-pastel">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue