Funcionalidad de reseñas y boton de eliminar pedido

This commit is contained in:
xFractu 2024-05-24 08:01:10 -06:00
parent 65714f7707
commit 27257a10d6
13 changed files with 1361 additions and 105 deletions

View File

@ -11,11 +11,12 @@
"@emotion/react": "^11.11.4", "@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5", "@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.18", "@mui/material": "^5.15.18",
"axios": "^1.6.8", "axios": "^1.7.2",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-icons": "^5.1.0", "react-icons": "^5.1.0",
"react-router-dom": "^6.23.0", "react-router-dom": "^6.23.0",
"react-star-ratings": "^2.3.0",
"sweetalert": "^2.1.2", "sweetalert": "^2.1.2",
"sweetalert2": "^11.11.0" "sweetalert2": "^11.11.0"
}, },
@ -1889,9 +1890,9 @@
} }
}, },
"node_modules/axios": { "node_modules/axios": {
"version": "1.6.8", "version": "1.7.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
"dependencies": { "dependencies": {
"follow-redirects": "^1.15.6", "follow-redirects": "^1.15.6",
"form-data": "^4.0.0", "form-data": "^4.0.0",
@ -2028,6 +2029,11 @@
"node": ">=0.8.0" "node": ">=0.8.0"
} }
}, },
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"node_modules/clsx": { "node_modules/clsx": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
@ -4230,6 +4236,29 @@
"react-dom": ">=16.8" "react-dom": ">=16.8"
} }
}, },
"node_modules/react-star-ratings": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-star-ratings/-/react-star-ratings-2.3.0.tgz",
"integrity": "sha512-34Z/oFNDRRn4ZcX7F3t9ccnpo7SQ32gD/vsusQOBc6B6vlqaGR6tke1/Yx3jTDjemKRSmXqhKgpPTR7/JAXq6A==",
"dependencies": {
"classnames": "^2.2.1",
"prop-types": "^15.6.0",
"react": "^16.1.0"
}
},
"node_modules/react-star-ratings/node_modules/react": {
"version": "16.14.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
"integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-transition-group": { "node_modules/react-transition-group": {
"version": "4.4.5", "version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

View File

@ -13,11 +13,12 @@
"@emotion/react": "^11.11.4", "@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5", "@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.18", "@mui/material": "^5.15.18",
"axios": "^1.6.8", "axios": "^1.7.2",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-icons": "^5.1.0", "react-icons": "^5.1.0",
"react-router-dom": "^6.23.0", "react-router-dom": "^6.23.0",
"react-star-ratings": "^2.3.0",
"sweetalert": "^2.1.2", "sweetalert": "^2.1.2",
"sweetalert2": "^11.11.0" "sweetalert2": "^11.11.0"
}, },

View File

@ -211,13 +211,7 @@ html {
/* ********************************** */ /* ********************************** */
/* BANNER */ /* BANNER */
/* ********************************** */ /* ********************************** */
.banner {
background-image: linear-gradient(100deg, #000000, #00000020),
url('assets/pastel-fondo.jpg');
height: 60rem;
background-size: cover;
background-position: center;
}
.content-banner { .content-banner {
max-width: 90rem; max-width: 90rem;
@ -327,29 +321,6 @@ html {
gap: 2rem; gap: 2rem;
} }
.category-moca {
background-image: linear-gradient(#00000080, #00000080),
url('assets/pastel-4-leches.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
.category-capuchino {
background-image: linear-gradient(#00000080, #00000080),
url('assets/pastel-zarza.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.category-expreso {
background-image: linear-gradient(#00000080, #00000080),
url('assets/pastel-moka.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.card-category p { .card-category p {
font-size: 2.5rem; font-size: 2.5rem;
@ -1319,6 +1290,25 @@ html {
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */ background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
} }
.modificar-btn {
margin-left: 2rem;
background-color: #8B374A;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
}
.modificar-btn:hover {
background-color: #ff4646;
}
.modificar-btn:hover {
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
}
.IniSesReserva{ .IniSesReserva{
padding-top: 2rem; padding-top: 2rem;

View File

@ -25,7 +25,9 @@ import pastel_fresa_arcoiris from "/src/assets/Pastel-fresas-arcoiris.png";
import pastel_fresa_oreo from "/src/assets/Pastel-fresas-oreo.png"; import pastel_fresa_oreo from "/src/assets/Pastel-fresas-oreo.png";
import pastel_fresa_vainilla from "/src/assets/Pastel-fresas-vainilla.png"; import pastel_fresa_vainilla from "/src/assets/Pastel-fresas-vainilla.png";
import pastelZarza from "/src/assets/pastel-zarza.jpg" import pastelZarza from "/src/assets/pastel-zarza.jpg";
import Swal from 'sweetalert2';
function AdminVista() { function AdminVista() {
@ -121,6 +123,85 @@ const mostrarAlertaLogOut = () => {
} }
}; };
const mostrarAlertaEliminarPedido = (idPedido, nombPastel) => {
Swal.fire({
title: "Eliminar Pedido",
text: `¿Seguro que quieres eliminar tu pedido del ${nombPastel}?`,
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: "Pedido eliminado correctamente.",
icon: "success",
});
eliminarPedido(idPedido);
}
});
};
const eliminarPedido = async (idPedido) => {
console.log(idPedido);
try {
if (idPedido) {
const response = await axios.post('http://localhost:4567/frontend/eliminarPedido', { datosId: { idPedido } });
console.log(response.data);
// Lógica adicional si es necesario
obtenerPedidosDePasteles(); // Asumiendo que tienes una función para obtener pedidos, similar a obtenerReservaciones
} else {
console.log("El ID del pedido es obligatorio para eliminar.");
// Lógica adicional si es necesario
}
} catch (error) {
throw error;
}
};
const mostrarAlertaActualizarEstatusPedido = (idPedido, nombPastel) => {
Swal.fire({
title: "Actualizar Estado del Pedido",
text: `¿Seguro que quieres marcar el pedido del ${nombPastel} como listo para entregar?`,
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: "Estado del pedido actualizado a listo para entregar.",
icon: "success",
});
actualizarEstatusPedido(idPedido, "listo para entregar");
}
});
};
const actualizarEstatusPedido = async (idPedido, nuevoEstatus) => {
console.log(idPedido, nuevoEstatus);
try {
if (idPedido) {
const response = await axios.post('http://localhost:4567/frontend/actualizarEstatusPedido', { datosId: { idPedido, nuevoEstatus } });
console.log(response.data);
// Lógica adicional si es necesario
obtenerPedidosDePasteles(); // Asumiendo que tienes una función para obtener pedidos
} else {
console.log("El ID del pedido es obligatorio para actualizar.");
// Lógica adicional si es necesario
}
} catch (error) {
throw error;
}
};
@ -193,8 +274,11 @@ const mostrarAlertaLogOut = () => {
<p>Estatus: {pedido.estatus}</p> <p>Estatus: {pedido.estatus}</p>
<p>Inscripción: {pedido.inscripcion}</p> <p>Inscripción: {pedido.inscripcion}</p>
<p>Relleno: {pedido.relleno}</p> <p>Relleno: {pedido.relleno}</p>
<button className="eliminar-btn" onClick={() => mostrarAlertaEliminarRes(pedido.id_pedido, pedido.nombre_pastel)}> <button className="eliminar-btn" onClick={() => mostrarAlertaEliminarPedido(pedido.id_pedido, pedido.nombre_pastel)}>
Eliminar Pedido Eliminar Pedido
</button>
<button className="modificar-btn" onClick={() => mostrarAlertaActualizarEstatusPedido(pedido.id_pedido, pedido.nombre_pastel)}>
Modificar Pedido
</button> </button>
</div> </div>
</div> </div>

View File

@ -13,6 +13,10 @@ import Swal from 'sweetalert2'
import axios from 'axios'; import axios from 'axios';
import StarRatings from 'react-star-ratings';
function ChocolateBlanco() { function ChocolateBlanco() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -86,6 +90,8 @@ function ChocolateBlanco() {
useEffect(() => { useEffect(() => {
// Llamar a la función al cargar la página // Llamar a la función al cargar la página
obtenerNombreUsuario(); obtenerNombreUsuario();
obtenerReseñasPorPastel();
mostrarReseñas();
}, []); }, []);
const cerrarSesion = async () => { const cerrarSesion = async () => {
@ -156,6 +162,120 @@ function ChocolateBlanco() {
}; };
const [reseñas, setReseñas] = useState([]);
const [datosFormularioReseña, setDatosFormularioReseña] = useState(
{contenido: '',
estrellas: 5
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setDatosFormularioReseña({
...datosFormularioReseña,
[name]: value,
});
};
const enviarReseña = async (e) => {
e.preventDefault();
await agregarReseña();
await obtenerReseñasPorPastel("2"); // Obtener las reseñas nuevamente para actualizar la lista
};
const agregarReseña = async () => {
console.log("Agregando reseña");
console.log(datosFormularioReseña.contenido);
console.log(datosFormularioReseña.estrellas);
console.log(nombreUsuario)
try{
if(nombreUsuario==null){
mostrarAlertaReseñaFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
nombreUsuario: nombreUsuario,
idPastel: "2", // Asegúrate de tener el id del pastel
contenido: datosFormularioReseña.contenido,
estrellas: datosFormularioReseña.estrellas,
});
console.log(response.data);
//mostrarAlertaReseñaExitosa();
console.log("reseña exitosa");
console.log("")
// Limpiar los estados después de agregar la reseña
setDatosFormularioReseña({ contenido: "", estrellas: 0 });
}
}catch(error){
console.error("Error al agregar la reseña");
throw error;
}
};
const obtenerReseñasPorPastel = async (idPastel) => {
try {
const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
idPastel: "2",
});
console.log("Reseñas obtenidas:", response.data.reseñas);
const reseñasTransformadas = response.data.reseñas.map(reseña => ({
idReseña: reseña.id_reseña,
nombreUsuario: reseña.nombre_usuario,
idPastel: reseña.id_pastel,
contenido: reseña.contenido,
estrellas: reseña.estrellas,
}));
setReseñas(reseñasTransformadas);
} catch (error) {
console.error("Error al obtener reseñas:", error);
}
};
const mostrarReseñas = () => {
if (!nombreUsuario) {
return (
<h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
);
} else {
if (reseñas.length === 0) {
return (
<h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
);
} else {
return (
<div className="flex justify-center space-x-4">
{reseñas.map(reseña => (
<div key={reseña.idReseña} className="customer-review-card">
<div className="customer-review-info">
<img className="customer-review-avatar" src="https://placehold.co/100x100" />
<div>
<div className="customer-review-name">{reseña.nombreUsuario}</div>
</div>
</div>
<div className="customer-review-rating">
{"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
</div>
<p className="customer-review-content">
{reseña.contenido}
</p>
</div>
))}
</div>
);
}
}
};
return ( return (
<> <>
@ -302,6 +422,49 @@ function ChocolateBlanco() {
</div> </div>
</main> </main>
<div className="Reseñas">
<h2 className="customer-reviews-title">Reseñas</h2>
<div className="estrellas-reviews-container">
<h1>Calificación:</h1>
<StarRatings
rating={datosFormularioReseña.estrellas}
starRatedColor="#4b1e29"
starHoverColor="#8B374A"
changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
numberOfStars={5}
name='rating'
starDimension="30px"
/>
</div>
<div className="customer-reviews-container">
<div className="reseñas-conteiner">
<input className="input-reseñas"
type="text"
name="contenido"
value={datosFormularioReseña.contenido}
onChange={handleInputChange}
placeholder="Escribe tu reseña aquí"></input>
<button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
</div>
{mostrarReseñas()}
</div>
</div>
<footer className="footer"> <footer className="footer">
<div className="container container-footer"> <div className="container container-footer">
<div className="menu-footer"> <div className="menu-footer">

View File

@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
import './ChocolateBlanco.css'; import './ChocolateBlanco.css';
import Swal from 'sweetalert2' import Swal from 'sweetalert2'
import axios from 'axios'; import axios from 'axios';
import StarRatings from 'react-star-ratings';
function PastelCajeta() { function PastelCajeta() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -83,6 +84,8 @@ function PastelCajeta() {
useEffect(() => { useEffect(() => {
// Llamar a la función al cargar la página // Llamar a la función al cargar la página
obtenerNombreUsuario(); obtenerNombreUsuario();
obtenerReseñasPorPastel();
mostrarReseñas();
}, []); }, []);
const cerrarSesion = async () => { const cerrarSesion = async () => {
@ -155,6 +158,121 @@ function PastelCajeta() {
}; };
const [reseñas, setReseñas] = useState([]);
const [datosFormularioReseña, setDatosFormularioReseña] = useState(
{contenido: '',
estrellas: 5
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setDatosFormularioReseña({
...datosFormularioReseña,
[name]: value,
});
};
const enviarReseña = async (e) => {
e.preventDefault();
await agregarReseña();
await obtenerReseñasPorPastel("3"); // Obtener las reseñas nuevamente para actualizar la lista
};
const agregarReseña = async () => {
console.log("Agregando reseña");
console.log(datosFormularioReseña.contenido);
console.log(datosFormularioReseña.estrellas);
console.log(nombreUsuario)
try{
if(nombreUsuario==null){
mostrarAlertaReseñaFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
nombreUsuario: nombreUsuario,
idPastel: "3", // Asegúrate de tener el id del pastel
contenido: datosFormularioReseña.contenido,
estrellas: datosFormularioReseña.estrellas,
});
console.log(response.data);
//mostrarAlertaReseñaExitosa();
console.log("reseña exitosa");
console.log("")
// Limpiar los estados después de agregar la reseña
setDatosFormularioReseña({ contenido: "", estrellas: 0 });
}
}catch(error){
console.error("Error al agregar la reseña");
throw error;
}
};
const obtenerReseñasPorPastel = async (idPastel) => {
try {
const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
idPastel: "3",
});
console.log("Reseñas obtenidas:", response.data.reseñas);
const reseñasTransformadas = response.data.reseñas.map(reseña => ({
idReseña: reseña.id_reseña,
nombreUsuario: reseña.nombre_usuario,
idPastel: reseña.id_pastel,
contenido: reseña.contenido,
estrellas: reseña.estrellas,
}));
setReseñas(reseñasTransformadas);
} catch (error) {
console.error("Error al obtener reseñas:", error);
}
};
const mostrarReseñas = () => {
if (!nombreUsuario) {
return (
<h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
);
} else {
if (reseñas.length === 0) {
return (
<h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
);
} else {
return (
<div className="flex justify-center space-x-4">
{reseñas.map(reseña => (
<div key={reseña.idReseña} className="customer-review-card">
<div className="customer-review-info">
<img className="customer-review-avatar" src="https://placehold.co/100x100" />
<div>
<div className="customer-review-name">{reseña.nombreUsuario}</div>
</div>
</div>
<div className="customer-review-rating">
{"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
</div>
<p className="customer-review-content">
{reseña.contenido}
</p>
</div>
))}
</div>
);
}
}
};
return ( return (
<> <>
@ -292,6 +410,42 @@ function PastelCajeta() {
</div> </div>
</main> </main>
<div className="Reseñas">
<h2 className="customer-reviews-title">Reseñas</h2>
<div className="estrellas-reviews-container">
<h1>Calificación:</h1>
<StarRatings
rating={datosFormularioReseña.estrellas}
starRatedColor="#4b1e29"
starHoverColor="#8B374A"
changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
numberOfStars={5}
name='rating'
starDimension="30px"
/>
</div>
<div className="customer-reviews-container">
<div className="reseñas-conteiner">
<input className="input-reseñas"
type="text"
name="contenido"
value={datosFormularioReseña.contenido}
onChange={handleInputChange}
placeholder="Escribe tu reseña aquí"></input>
<button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
</div>
{mostrarReseñas()}
</div>
</div>
<footer className="footer"> <footer className="footer">
<div className="container container-footer"> <div className="container container-footer">
<div className="menu-footer"> <div className="menu-footer">

View File

@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
import './ChocolateBlanco.css'; import './ChocolateBlanco.css';
import Swal from 'sweetalert2' import Swal from 'sweetalert2'
import axios from 'axios'; import axios from 'axios';
import StarRatings from 'react-star-ratings';
function PastelChocolate() { function PastelChocolate() {
@ -88,6 +89,8 @@ function PastelChocolate() {
useEffect(() => { useEffect(() => {
// Llamar a la función al cargar la página // Llamar a la función al cargar la página
obtenerNombreUsuario(); obtenerNombreUsuario();
obtenerReseñasPorPastel();
mostrarReseñas();
}, []); }, []);
const cerrarSesion = async () => { const cerrarSesion = async () => {
@ -158,6 +161,118 @@ function PastelChocolate() {
}; };
const [reseñas, setReseñas] = useState([]);
const [datosFormularioReseña, setDatosFormularioReseña] = useState(
{contenido: '',
estrellas: 5
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setDatosFormularioReseña({
...datosFormularioReseña,
[name]: value,
});
};
const enviarReseña = async (e) => {
e.preventDefault();
await agregarReseña();
await obtenerReseñasPorPastel("5"); // Obtener las reseñas nuevamente para actualizar la lista
};
const agregarReseña = async () => {
console.log("Agregando reseña");
console.log(datosFormularioReseña.contenido);
console.log(datosFormularioReseña.estrellas);
console.log(nombreUsuario)
try{
if(nombreUsuario==null){
mostrarAlertaReseñaFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
nombreUsuario: nombreUsuario,
idPastel: "5", // Asegúrate de tener el id del pastel
contenido: datosFormularioReseña.contenido,
estrellas: datosFormularioReseña.estrellas,
});
console.log(response.data);
//mostrarAlertaReseñaExitosa();
console.log("reseña exitosa");
console.log("")
// Limpiar los estados después de agregar la reseña
setDatosFormularioReseña({ contenido: "", estrellas: 0 });
}
}catch(error){
console.error("Error al agregar la reseña");
throw error;
}
};
const obtenerReseñasPorPastel = async (idPastel) => {
try {
const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
idPastel: "5",
});
console.log("Reseñas obtenidas:", response.data.reseñas);
const reseñasTransformadas = response.data.reseñas.map(reseña => ({
idReseña: reseña.id_reseña,
nombreUsuario: reseña.nombre_usuario,
idPastel: reseña.id_pastel,
contenido: reseña.contenido,
estrellas: reseña.estrellas,
}));
setReseñas(reseñasTransformadas);
} catch (error) {
console.error("Error al obtener reseñas:", error);
}
};
const mostrarReseñas = () => {
if (!nombreUsuario) {
return (
<h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
);
} else {
if (reseñas.length === 0) {
return (
<h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
);
} else {
return (
<div className="flex justify-center space-x-4">
{reseñas.map(reseña => (
<div key={reseña.idReseña} className="customer-review-card">
<div className="customer-review-info">
<img className="customer-review-avatar" src="https://placehold.co/100x100" />
<div>
<div className="customer-review-name">{reseña.nombreUsuario}</div>
</div>
</div>
<div className="customer-review-rating">
{"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
</div>
<p className="customer-review-content">
{reseña.contenido}
</p>
</div>
))}
</div>
);
}
}
};
return ( return (
<> <>
@ -297,6 +412,46 @@ function PastelChocolate() {
</div> </div>
</main> </main>
<div className="Reseñas">
<h2 className="customer-reviews-title">Reseñas</h2>
<div className="estrellas-reviews-container">
<h1>Calificación:</h1>
<StarRatings
rating={datosFormularioReseña.estrellas}
starRatedColor="#4b1e29"
starHoverColor="#8B374A"
changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
numberOfStars={5}
name='rating'
starDimension="30px"
/>
</div>
<div className="customer-reviews-container">
<div className="reseñas-conteiner">
<input className="input-reseñas"
type="text"
name="contenido"
value={datosFormularioReseña.contenido}
onChange={handleInputChange}
placeholder="Escribe tu reseña aquí"></input>
<button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
</div>
{mostrarReseñas()}
</div>
</div>
<footer className="footer"> <footer className="footer">
<div className="container container-footer"> <div className="container container-footer">
<div className="menu-footer"> <div className="menu-footer">

View File

@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
import './ChocolateBlanco.css'; import './ChocolateBlanco.css';
import Swal from 'sweetalert2' import Swal from 'sweetalert2'
import axios from 'axios'; import axios from 'axios';
import StarRatings from 'react-star-ratings';
function PastelFrambuesa() { function PastelFrambuesa() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -84,6 +85,8 @@ function PastelFrambuesa() {
useEffect(() => { useEffect(() => {
// Llamar a la función al cargar la página // Llamar a la función al cargar la página
obtenerNombreUsuario(); obtenerNombreUsuario();
obtenerReseñasPorPastel();
mostrarReseñas();
}, []); }, []);
const cerrarSesion = async () => { const cerrarSesion = async () => {
@ -154,6 +157,120 @@ function PastelFrambuesa() {
}; };
const [reseñas, setReseñas] = useState([]);
const [datosFormularioReseña, setDatosFormularioReseña] = useState(
{contenido: '',
estrellas: 5
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setDatosFormularioReseña({
...datosFormularioReseña,
[name]: value,
});
};
const enviarReseña = async (e) => {
e.preventDefault();
await agregarReseña();
await obtenerReseñasPorPastel("7"); // Obtener las reseñas nuevamente para actualizar la lista
};
const agregarReseña = async () => {
console.log("Agregando reseña");
console.log(datosFormularioReseña.contenido);
console.log(datosFormularioReseña.estrellas);
console.log(nombreUsuario)
try{
if(nombreUsuario==null){
mostrarAlertaReseñaFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
nombreUsuario: nombreUsuario,
idPastel: "7", // Asegúrate de tener el id del pastel
contenido: datosFormularioReseña.contenido,
estrellas: datosFormularioReseña.estrellas,
});
console.log(response.data);
//mostrarAlertaReseñaExitosa();
console.log("reseña exitosa");
console.log("")
// Limpiar los estados después de agregar la reseña
setDatosFormularioReseña({ contenido: "", estrellas: 0 });
}
}catch(error){
console.error("Error al agregar la reseña");
throw error;
}
};
const obtenerReseñasPorPastel = async (idPastel) => {
try {
const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
idPastel: "7",
});
console.log("Reseñas obtenidas:", response.data.reseñas);
const reseñasTransformadas = response.data.reseñas.map(reseña => ({
idReseña: reseña.id_reseña,
nombreUsuario: reseña.nombre_usuario,
idPastel: reseña.id_pastel,
contenido: reseña.contenido,
estrellas: reseña.estrellas,
}));
setReseñas(reseñasTransformadas);
} catch (error) {
console.error("Error al obtener reseñas:", error);
}
};
const mostrarReseñas = () => {
if (!nombreUsuario) {
return (
<h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
);
} else {
if (reseñas.length === 0) {
return (
<h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
);
} else {
return (
<div className="flex justify-center space-x-4">
{reseñas.map(reseña => (
<div key={reseña.idReseña} className="customer-review-card">
<div className="customer-review-info">
<img className="customer-review-avatar" src="https://placehold.co/100x100" />
<div>
<div className="customer-review-name">{reseña.nombreUsuario}</div>
</div>
</div>
<div className="customer-review-rating">
{"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
</div>
<p className="customer-review-content">
{reseña.contenido}
</p>
</div>
))}
</div>
);
}
}
};
return ( return (
<> <>
@ -291,6 +408,50 @@ function PastelFrambuesa() {
</div> </div>
</main> </main>
<div className="Reseñas">
<h2 className="customer-reviews-title">Reseñas</h2>
<div className="estrellas-reviews-container">
<h1>Calificación:</h1>
<StarRatings
rating={datosFormularioReseña.estrellas}
starRatedColor="#4b1e29"
starHoverColor="#8B374A"
changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
numberOfStars={5}
name='rating'
starDimension="30px"
/>
</div>
<div className="customer-reviews-container">
<div className="reseñas-conteiner">
<input className="input-reseñas"
type="text"
name="contenido"
value={datosFormularioReseña.contenido}
onChange={handleInputChange}
placeholder="Escribe tu reseña aquí"></input>
<button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
</div>
{mostrarReseñas()}
</div>
</div>
<footer className="footer"> <footer className="footer">
<div className="container container-footer"> <div className="container container-footer">
<div className="menu-footer"> <div className="menu-footer">

View File

@ -10,6 +10,7 @@ import { CiShare2 } from "react-icons/ci";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import Swal from 'sweetalert2' import Swal from 'sweetalert2'
import axios from 'axios'; import axios from 'axios';
import StarRatings from 'react-star-ratings';
function PastelMoka() { function PastelMoka() {
@ -85,6 +86,8 @@ function PastelMoka() {
useEffect(() => { useEffect(() => {
// Llamar a la función al cargar la página // Llamar a la función al cargar la página
obtenerNombreUsuario(); obtenerNombreUsuario();
obtenerReseñasPorPastel();
mostrarReseñas();
}, []); }, []);
const cerrarSesion = async () => { const cerrarSesion = async () => {
@ -156,6 +159,118 @@ function PastelMoka() {
}; };
const [reseñas, setReseñas] = useState([]);
const [datosFormularioReseña, setDatosFormularioReseña] = useState(
{contenido: '',
estrellas: 5
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setDatosFormularioReseña({
...datosFormularioReseña,
[name]: value,
});
};
const enviarReseña = async (e) => {
e.preventDefault();
await agregarReseña();
await obtenerReseñasPorPastel("4"); // Obtener las reseñas nuevamente para actualizar la lista
};
const agregarReseña = async () => {
console.log("Agregando reseña");
console.log(datosFormularioReseña.contenido);
console.log(datosFormularioReseña.estrellas);
console.log(nombreUsuario)
try{
if(nombreUsuario==null){
mostrarAlertaReseñaFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
nombreUsuario: nombreUsuario,
idPastel: "4", // Asegúrate de tener el id del pastel
contenido: datosFormularioReseña.contenido,
estrellas: datosFormularioReseña.estrellas,
});
console.log(response.data);
//mostrarAlertaReseñaExitosa();
console.log("reseña exitosa");
console.log("")
// Limpiar los estados después de agregar la reseña
setDatosFormularioReseña({ contenido: "", estrellas: 0 });
}
}catch(error){
console.error("Error al agregar la reseña");
throw error;
}
};
const obtenerReseñasPorPastel = async (idPastel) => {
try {
const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
idPastel: "4",
});
console.log("Reseñas obtenidas:", response.data.reseñas);
const reseñasTransformadas = response.data.reseñas.map(reseña => ({
idReseña: reseña.id_reseña,
nombreUsuario: reseña.nombre_usuario,
idPastel: reseña.id_pastel,
contenido: reseña.contenido,
estrellas: reseña.estrellas,
}));
setReseñas(reseñasTransformadas);
} catch (error) {
console.error("Error al obtener reseñas:", error);
}
};
const mostrarReseñas = () => {
if (!nombreUsuario) {
return (
<h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
);
} else {
if (reseñas.length === 0) {
return (
<h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
);
} else {
return (
<div className="flex justify-center space-x-4">
{reseñas.map(reseña => (
<div key={reseña.idReseña} className="customer-review-card">
<div className="customer-review-info">
<img className="customer-review-avatar" src="https://placehold.co/100x100" />
<div>
<div className="customer-review-name">{reseña.nombreUsuario}</div>
</div>
</div>
<div className="customer-review-rating">
{"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
</div>
<p className="customer-review-content">
{reseña.contenido}
</p>
</div>
))}
</div>
);
}
}
};
return ( return (
<> <>
@ -295,6 +410,42 @@ function PastelMoka() {
</div> </div>
</main> </main>
<div className="Reseñas">
<h2 className="customer-reviews-title">Reseñas</h2>
<div className="estrellas-reviews-container">
<h1>Calificación:</h1>
<StarRatings
rating={datosFormularioReseña.estrellas}
starRatedColor="#4b1e29"
starHoverColor="#8B374A"
changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
numberOfStars={5}
name='rating'
starDimension="30px"
/>
</div>
<div className="customer-reviews-container">
<div className="reseñas-conteiner">
<input className="input-reseñas"
type="text"
name="contenido"
value={datosFormularioReseña.contenido}
onChange={handleInputChange}
placeholder="Escribe tu reseña aquí"></input>
<button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
</div>
{mostrarReseñas()}
</div>
</div>
<footer className="footer"> <footer className="footer">
<div className="container container-footer"> <div className="container container-footer">
<div className="menu-footer"> <div className="menu-footer">

View File

@ -11,7 +11,7 @@ import { useNavigate } from "react-router-dom";
import './ChocolateBlanco.css'; import './ChocolateBlanco.css';
import Swal from 'sweetalert2' import Swal from 'sweetalert2'
import axios from 'axios'; import axios from 'axios';
import StarRatings from 'react-star-ratings';
function PastelZanahoria() { function PastelZanahoria() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -85,6 +85,8 @@ function PastelZanahoria() {
useEffect(() => { useEffect(() => {
// Llamar a la función al cargar la página // Llamar a la función al cargar la página
obtenerNombreUsuario(); obtenerNombreUsuario();
obtenerReseñasPorPastel();
mostrarReseñas();
}, []); }, []);
const cerrarSesion = async () => { const cerrarSesion = async () => {
@ -156,6 +158,119 @@ function PastelZanahoria() {
}; };
const [reseñas, setReseñas] = useState([]);
const [datosFormularioReseña, setDatosFormularioReseña] = useState(
{contenido: '',
estrellas: 5
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setDatosFormularioReseña({
...datosFormularioReseña,
[name]: value,
});
};
const enviarReseña = async (e) => {
e.preventDefault();
await agregarReseña();
await obtenerReseñasPorPastel("6"); // Obtener las reseñas nuevamente para actualizar la lista
};
const agregarReseña = async () => {
console.log("Agregando reseña");
console.log(datosFormularioReseña.contenido);
console.log(datosFormularioReseña.estrellas);
console.log(nombreUsuario)
try{
if(nombreUsuario==null){
mostrarAlertaReseñaFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
nombreUsuario: nombreUsuario,
idPastel: "6", // Asegúrate de tener el id del pastel
contenido: datosFormularioReseña.contenido,
estrellas: datosFormularioReseña.estrellas,
});
console.log(response.data);
//mostrarAlertaReseñaExitosa();
console.log("reseña exitosa");
console.log("")
// Limpiar los estados después de agregar la reseña
setDatosFormularioReseña({ contenido: "", estrellas: 0 });
}
}catch(error){
console.error("Error al agregar la reseña");
throw error;
}
};
const obtenerReseñasPorPastel = async (idPastel) => {
try {
const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
idPastel: "6",
});
console.log("Reseñas obtenidas:", response.data.reseñas);
const reseñasTransformadas = response.data.reseñas.map(reseña => ({
idReseña: reseña.id_reseña,
nombreUsuario: reseña.nombre_usuario,
idPastel: reseña.id_pastel,
contenido: reseña.contenido,
estrellas: reseña.estrellas,
}));
setReseñas(reseñasTransformadas);
} catch (error) {
console.error("Error al obtener reseñas:", error);
}
};
const mostrarReseñas = () => {
if (!nombreUsuario) {
return (
<h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
);
} else {
if (reseñas.length === 0) {
return (
<h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
);
} else {
return (
<div className="flex justify-center space-x-4">
{reseñas.map(reseña => (
<div key={reseña.idReseña} className="customer-review-card">
<div className="customer-review-info">
<img className="customer-review-avatar" src="https://placehold.co/100x100" />
<div>
<div className="customer-review-name">{reseña.nombreUsuario}</div>
</div>
</div>
<div className="customer-review-rating">
{"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
</div>
<p className="customer-review-content">
{reseña.contenido}
</p>
</div>
))}
</div>
);
}
}
};
return ( return (
<> <>
@ -294,6 +409,48 @@ function PastelZanahoria() {
</div> </div>
</main> </main>
<div className="Reseñas">
<h2 className="customer-reviews-title">Reseñas</h2>
<div className="estrellas-reviews-container">
<h1>Calificación:</h1>
<StarRatings
rating={datosFormularioReseña.estrellas}
starRatedColor="#4b1e29"
starHoverColor="#8B374A"
changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
numberOfStars={5}
name='rating'
starDimension="30px"
/>
</div>
<div className="customer-reviews-container">
<div className="reseñas-conteiner">
<input className="input-reseñas"
type="text"
name="contenido"
value={datosFormularioReseña.contenido}
onChange={handleInputChange}
placeholder="Escribe tu reseña aquí"></input>
<button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
</div>
{mostrarReseñas()}
</div>
</div>
<footer className="footer"> <footer className="footer">
<div className="container container-footer"> <div className="container container-footer">
<div className="menu-footer"> <div className="menu-footer">

View File

@ -25,6 +25,8 @@ import pastel_fresa_arcoiris from "./assets/Pastel-fresas-arcoiris.png";
import pastel_fresa_oreo from "./assets/Pastel-fresas-oreo.png"; import pastel_fresa_oreo from "./assets/Pastel-fresas-oreo.png";
import pastel_fresa_vainilla from "./assets/Pastel-fresas-vainilla.png"; import pastel_fresa_vainilla from "./assets/Pastel-fresas-vainilla.png";
import Swal from 'sweetalert2';
import pastelZarza from "./assets/pastel-zarza.jpg" import pastelZarza from "./assets/pastel-zarza.jpg"
@ -145,6 +147,54 @@ const mostrarAlertaLogOut = () => {
navigate("/Pasteles"); navigate("/Pasteles");
}; };
const mostrarAlertaEliminarPedido = (idPedido, nombPastel, status) => {
if (status === "listo para entregar") {
Swal.fire({
title: "No se puede eliminar",
text: `El pedido del ${nombPastel} ya está listo para entregar y no se puede eliminar.`,
icon: "info",
confirmButtonText: "Entendido",
});
} else {
Swal.fire({
title: "Eliminar Pedido",
text: `¿Seguro que quieres eliminar tu pedido del ${nombPastel}?`,
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: "Pedido eliminado correctamente.",
icon: "success",
});
eliminarPedido(idPedido);
}
});
}
};
const eliminarPedido = async (idPedido) => {
console.log(idPedido);
try {
if (idPedido) {
const response = await axios.post('http://localhost:4567/frontend/eliminarPedido', { datosId: { idPedido } });
console.log(response.data);
// Lógica adicional si es necesario
obtenerPedidosDePasteles(); // Asumiendo que tienes una función para obtener pedidos, similar a obtenerReservaciones
} else {
console.log("El ID del pedido es obligatorio para eliminar.");
// Lógica adicional si es necesario
}
} catch (error) {
throw error;
}
};
const [pedidos, setPedidos] = useState([]); const [pedidos, setPedidos] = useState([]);
const generarPedidos = () => { const generarPedidos = () => {
@ -202,7 +252,7 @@ const mostrarAlertaLogOut = () => {
<p>Estatus: {pedido.estatus}</p> <p>Estatus: {pedido.estatus}</p>
<p>Inscripción: {pedido.inscripcion}</p> <p>Inscripción: {pedido.inscripcion}</p>
<p>Relleno: {pedido.relleno}</p> <p>Relleno: {pedido.relleno}</p>
<button className="eliminar-btn" onClick={() => mostrarAlertaEliminarRes(pedido.id_pedido, pedido.nombre_pastel)}> <button className="eliminar-btn" onClick={() => mostrarAlertaEliminarPedido(pedido.id_pedido, pedido.nombre_pastel,pedido.estatus)}>
Eliminar Pedido Eliminar Pedido
</button> </button>
</div> </div>

View File

@ -3,6 +3,8 @@ import './PersPastelStyle.css';
import { Button, Select, MenuItem, TextField, Box } from '@mui/material'; import { Button, Select, MenuItem, TextField, Box } from '@mui/material';
import StarRatings from 'react-star-ratings';
import { RiCustomerService2Fill } from "react-icons/ri"; import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa"; import { FaUser } from "react-icons/fa";
import { LuShoppingBasket } from "react-icons/lu"; import { LuShoppingBasket } from "react-icons/lu";
@ -32,6 +34,8 @@ function Pastel() {
const [textoTipo, setTextoTipo] = useState(""); const [textoTipo, setTextoTipo] = useState("");
const [textoPrecio, setTextoPrecio] = useState("");
@ -127,16 +131,6 @@ const [datosFormulario, setDatosFormulario] = useState(
} }
}; };
React.useEffect(() => {
setTextoRelleno("Original");
document.addEventListener("click", handleDocumentClick);
return () => {
document.removeEventListener("click", handleDocumentClick);
};
}, []);
const mostrarAlertaLogOut = () => { const mostrarAlertaLogOut = () => {
Swal.fire({ Swal.fire({
title: "Cerrar Sesión", title: "Cerrar Sesión",
@ -176,6 +170,13 @@ const [datosFormulario, setDatosFormulario] = useState(
useEffect(() => { useEffect(() => {
// Llamar a la función al cargar la página // Llamar a la función al cargar la página
obtenerNombreUsuario(); obtenerNombreUsuario();
obtenerReseñasPorPastel();
mostrarReseñas();
setTextoRelleno("Original");
document.addEventListener("click", handleDocumentClick);
return () => {
document.removeEventListener("click", handleDocumentClick);
};
}, []); }, []);
const cerrarSesion = async () => { const cerrarSesion = async () => {
@ -222,7 +223,7 @@ const [datosFormulario, setDatosFormulario] = useState(
const mostrarAlertaReservaExitosa=()=>{ const mostrarAlertaReservaExitosa=()=>{
Swal.fire({ Swal.fire({
title: "Pedido Exitosa", title: "Pedido Exitoso",
text: "Tu Pedido se ha realizado correctamente.", text: "Tu Pedido se ha realizado correctamente.",
icon: "success", icon: "success",
button: "Aceptar" button: "Aceptar"
@ -272,6 +273,8 @@ const [datosFormulario, setDatosFormulario] = useState(
console.log(textoEncima); console.log(textoEncima);
console.log(textoRelleno); console.log(textoRelleno);
try{ try{
if(nombreUsuario==null){ if(nombreUsuario==null){
@ -280,12 +283,13 @@ const [datosFormulario, setDatosFormulario] = useState(
}else{ }else{
const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', { const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
textoEncima: textoEncima, textoEncima: textoEncima,
textoCantidad: datosPastel.quantity, textoCantidad: datosPastel.quantity,
textoRelleno: textoRelleno, textoRelleno: textoRelleno,
textoTipo: "Pastel de Fresas", textoTipo: "Pastel de Fresas",
textoPrecio:"1000", textoPrecio:"1000",
}); idPastel: "1"
});
console.log(response.data); console.log(response.data);
mostrarAlertaReservaExitosa(); mostrarAlertaReservaExitosa();
@ -314,6 +318,118 @@ const [datosFormulario, setDatosFormulario] = useState(
}; };
const [reseñas, setReseñas] = useState([]);
const [datosFormularioReseña, setDatosFormularioReseña] = useState(
{contenido: '',
estrellas: 5
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setDatosFormularioReseña({
...datosFormularioReseña,
[name]: value,
});
};
const enviarReseña = async (e) => {
e.preventDefault();
await agregarReseña();
await obtenerReseñasPorPastel("1"); // Obtener las reseñas nuevamente para actualizar la lista
};
const agregarReseña = async () => {
console.log("Agregando reseña");
console.log(datosFormularioReseña.contenido);
console.log(datosFormularioReseña.estrellas);
console.log(nombreUsuario)
try{
if(nombreUsuario==null){
mostrarAlertaReseñaFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
nombreUsuario: nombreUsuario,
idPastel: "1", // Asegúrate de tener el id del pastel
contenido: datosFormularioReseña.contenido,
estrellas: datosFormularioReseña.estrellas,
});
console.log(response.data);
//mostrarAlertaReseñaExitosa();
console.log("reseña exitosa");
console.log("")
// Limpiar los estados después de agregar la reseña
setDatosFormularioReseña({ contenido: "", estrellas: 0 });
}
}catch(error){
console.error("Error al agregar la reseña");
throw error;
}
};
const obtenerReseñasPorPastel = async (idPastel) => {
try {
const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
idPastel: "1",
});
console.log("Reseñas obtenidas:", response.data.reseñas);
const reseñasTransformadas = response.data.reseñas.map(reseña => ({
idReseña: reseña.id_reseña,
nombreUsuario: reseña.nombre_usuario,
idPastel: reseña.id_pastel,
contenido: reseña.contenido,
estrellas: reseña.estrellas,
}));
setReseñas(reseñasTransformadas);
} catch (error) {
console.error("Error al obtener reseñas:", error);
}
};
const mostrarReseñas = () => {
if (!nombreUsuario) {
return (
<h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
);
} else {
if (reseñas.length === 0) {
return (
<h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
);
} else {
return (
<div className="flex justify-center space-x-4">
{reseñas.map(reseña => (
<div key={reseña.idReseña} className="customer-review-card">
<div className="customer-review-info">
<img className="customer-review-avatar" src="https://placehold.co/100x100" />
<div>
<div className="customer-review-name">{reseña.nombreUsuario}</div>
</div>
</div>
<div className="customer-review-rating">
{"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
</div>
<p className="customer-review-content">
{reseña.contenido}
</p>
</div>
))}
</div>
);
}
}
};
return ( return (
@ -459,7 +575,7 @@ const [datosFormulario, setDatosFormulario] = useState(
<div className="container-add-cart"> <div className="container-add-cart">
<button className="btn-add-to-cart" onClick={hacerPedidoPastel1}> <button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
Añadir al carrito Comprar
</button> </button>
</div> </div>
@ -477,36 +593,13 @@ const [datosFormulario, setDatosFormulario] = useState(
ipsum dolor sit amet consectetur adipisicing elit. Sint autem ipsum dolor sit amet consectetur adipisicing elit. Sint autem
magni earum est dolorem saepe perferendis repellat ipsam magni earum est dolorem saepe perferendis repellat ipsam
laudantium cum assumenda quidem quam, vero similique? Iusto laudantium cum assumenda quidem quam, vero similique? Iusto
officiis quod blanditiis iste? officiis quod blanditiis iste?, ipsum dolor sit amet consectetur
adipisicing elit. Sint autem magni earum est dolorem saepe
perferendis repellat ipsa laudantium cum assumenda quidem
quam, vero similique? Iustoofficiis
</p> </p>
</div> </div>
</div> </div>
<div className="container-additional-information">
<div className="title-additional-information">
<h4>Información adicional</h4>
<i className="fa-solid fa-chevron-down"></i>
</div>
<div className="text-additional-information hidden">
<p>-----------</p>
</div>
</div>
<div className="container-reviews">
<div className="title-reviews">
<h4>Reseñas</h4>
<i className="fa-solid fa-chevron-down"></i>
</div>
<div className="text-reviews hidden">
<p>-----------</p>
</div>
</div>
<div className="container-social">
<span>Compartir</span>
</div>
</div> </div>
</main> </main>
@ -515,24 +608,34 @@ const [datosFormulario, setDatosFormulario] = useState(
<h2 className="customer-reviews-title">Reseñas</h2> <h2 className="customer-reviews-title">Reseñas</h2>
<div className="customer-reviews-container"> <div className="estrellas-reviews-container">
<h1>Calificación:</h1>
<div className="flex justify-center space-x-4"> <StarRatings
<div className="customer-review-card"> rating={datosFormularioReseña.estrellas}
<div className="customer-review-info"> starRatedColor="#4b1e29"
<img className="customer-review-avatar" src="https://placehold.co/100x100" alt="John Deo"/> starHoverColor="#8B374A"
<div> changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
<div className="customer-review-name">John Deo</div> numberOfStars={5}
</div> name='rating'
</div> starDimension="30px"
<div className="customer-review-rating"> />
</div>
<p className="customer-review-content">
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Asperiores Sint Corporis Voluptate Non Error Obc adhajkhajkdahdjkhsdjkakjas jkdhasjdahdjkadhasj aecati Adipisci A Autem? Similique Animi Quae Impedit Vel Dicta Placeat Ad Temporibus Illo Distinctio. Tenetur!
</p>
</div>
</div> </div>
<div className="customer-reviews-container">
<div className="reseñas-conteiner">
<input className="input-reseñas"
type="text"
name="contenido"
value={datosFormularioReseña.contenido}
onChange={handleInputChange}
placeholder="Escribe tu reseña aquí"></input>
<button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
</div>
{mostrarReseñas()}
</div> </div>
</div> </div>

View File

@ -203,9 +203,9 @@
.texto-encima { .texto-encima {
position: absolute; position: absolute;
top: 60%; top: 54%;
left:34%; left:34%;
max-width: 200px; max-width: 220px;
word-wrap: break-word; /* Esta propiedad permite que las palabras se rompan cuando no caben en el contenedor */ word-wrap: break-word; /* Esta propiedad permite que las palabras se rompan cuando no caben en el contenedor */
overflow-wrap: break-word; overflow-wrap: break-word;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -656,6 +656,12 @@ footer {
align-items: center; align-items: center;
} }
.reseñas-conteiner{
display: flex;
align-items: center;
}
/* Estilos para el contenedor principal */ /* Estilos para el contenedor principal */
@ -680,12 +686,14 @@ footer {
.customer-review-card {/* ajustar según sea necesario */ .customer-review-card {/* ajustar según sea necesario */
border-radius: 1rem; border-radius: 1rem;
width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1.5rem; padding: 1.5rem;
background-color: #f9fafb; /* bg-zinc-50 */ background-color: #f9fafb; /* bg-zinc-50 */
margin-bottom: 3rem ;
} }
/* Estilos para la sección de la imagen y la información del cliente */ /* Estilos para la sección de la imagen y la información del cliente */
@ -793,3 +801,53 @@ footer {
} }
/* ********************************** */
/* Reseñas */
/* ********************************** */
.boton-reseñas{
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
width: 200px;
border-radius: 5px;
background-color: #8B374A;
}
.boton-reseñas:hover {
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
}
.boton-reseñas:active {
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
}
.input-reseñas{
margin-top: 10px;
font-size: 16px;
margin-bottom: 10px;
margin-right: 20px;
text-indent: 5px;
width: 100%;
height: 40px;
}
.reseñas-conteiner{
margin-bottom: 5rem;
}
.star-ratings {
margin-top: 1rem;
margin-bottom: 1rem;
width:335px;
}
.estrellas-reviews-container{
background-color: #fff;
margin-left: 35.5rem;
margin-right: 35.5rem;
position: relative;
}