Funcionalidad de reseñas y boton de eliminar pedido
This commit is contained in:
xFractu
parent
65714f7707
commit
27257a10d6
|
|
@ -11,11 +11,12 @@
|
|||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"@mui/material": "^5.15.18",
|
||||
"axios": "^1.6.8",
|
||||
"axios": "^1.7.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.1.0",
|
||||
"react-router-dom": "^6.23.0",
|
||||
"react-star-ratings": "^2.3.0",
|
||||
"sweetalert": "^2.1.2",
|
||||
"sweetalert2": "^11.11.0"
|
||||
},
|
||||
|
|
@ -1889,9 +1890,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.6.8",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
|
||||
"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
|
||||
"integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
|
|
@ -2028,6 +2029,11 @@
|
|||
"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": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
|
||||
|
|
@ -4230,6 +4236,29 @@
|
|||
"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": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
|
|
|
|||
|
|
@ -13,11 +13,12 @@
|
|||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"@mui/material": "^5.15.18",
|
||||
"axios": "^1.6.8",
|
||||
"axios": "^1.7.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.1.0",
|
||||
"react-router-dom": "^6.23.0",
|
||||
"react-star-ratings": "^2.3.0",
|
||||
"sweetalert": "^2.1.2",
|
||||
"sweetalert2": "^11.11.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -211,13 +211,7 @@ html {
|
|||
/* ********************************** */
|
||||
/* BANNER */
|
||||
/* ********************************** */
|
||||
.banner {
|
||||
background-image: linear-gradient(100deg, #000000, #00000020),
|
||||
url('assets/pastel-fondo.jpg');
|
||||
height: 60rem;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
|
||||
.content-banner {
|
||||
max-width: 90rem;
|
||||
|
|
@ -327,29 +321,6 @@ html {
|
|||
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 {
|
||||
font-size: 2.5rem;
|
||||
|
|
@ -1319,6 +1290,25 @@ html {
|
|||
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{
|
||||
padding-top: 2rem;
|
||||
|
|
|
|||
|
|
@ -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_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() {
|
||||
|
|
@ -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>Inscripción: {pedido.inscripcion}</p>
|
||||
<p>Relleno: {pedido.relleno}</p>
|
||||
<button className="eliminar-btn" onClick={() => mostrarAlertaEliminarRes(pedido.id_pedido, pedido.nombre_pastel)}>
|
||||
Eliminar Pedido
|
||||
<button className="eliminar-btn" onClick={() => mostrarAlertaEliminarPedido(pedido.id_pedido, pedido.nombre_pastel)}>
|
||||
Eliminar Pedido
|
||||
</button>
|
||||
<button className="modificar-btn" onClick={() => mostrarAlertaActualizarEstatusPedido(pedido.id_pedido, pedido.nombre_pastel)}>
|
||||
Modificar Pedido
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@ import Swal from 'sweetalert2'
|
|||
import axios from 'axios';
|
||||
|
||||
|
||||
import StarRatings from 'react-star-ratings';
|
||||
|
||||
|
||||
|
||||
function ChocolateBlanco() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
|
@ -86,6 +90,8 @@ function ChocolateBlanco() {
|
|||
useEffect(() => {
|
||||
// Llamar a la función al cargar la página
|
||||
obtenerNombreUsuario();
|
||||
obtenerReseñasPorPastel();
|
||||
mostrarReseñas();
|
||||
}, []);
|
||||
|
||||
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 (
|
||||
<>
|
||||
|
||||
|
|
@ -302,6 +422,49 @@ function ChocolateBlanco() {
|
|||
</div>
|
||||
</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">
|
||||
<div className="container container-footer">
|
||||
<div className="menu-footer">
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
|
|||
import './ChocolateBlanco.css';
|
||||
import Swal from 'sweetalert2'
|
||||
import axios from 'axios';
|
||||
import StarRatings from 'react-star-ratings';
|
||||
|
||||
function PastelCajeta() {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -83,6 +84,8 @@ function PastelCajeta() {
|
|||
useEffect(() => {
|
||||
// Llamar a la función al cargar la página
|
||||
obtenerNombreUsuario();
|
||||
obtenerReseñasPorPastel();
|
||||
mostrarReseñas();
|
||||
}, []);
|
||||
|
||||
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 (
|
||||
<>
|
||||
|
||||
|
|
@ -292,6 +410,42 @@ function PastelCajeta() {
|
|||
</div>
|
||||
</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">
|
||||
<div className="container container-footer">
|
||||
<div className="menu-footer">
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
|
|||
import './ChocolateBlanco.css';
|
||||
import Swal from 'sweetalert2'
|
||||
import axios from 'axios';
|
||||
import StarRatings from 'react-star-ratings';
|
||||
|
||||
|
||||
function PastelChocolate() {
|
||||
|
|
@ -88,6 +89,8 @@ function PastelChocolate() {
|
|||
useEffect(() => {
|
||||
// Llamar a la función al cargar la página
|
||||
obtenerNombreUsuario();
|
||||
obtenerReseñasPorPastel();
|
||||
mostrarReseñas();
|
||||
}, []);
|
||||
|
||||
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 (
|
||||
<>
|
||||
|
||||
|
|
@ -297,6 +412,46 @@ function PastelChocolate() {
|
|||
</div>
|
||||
</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">
|
||||
<div className="container container-footer">
|
||||
<div className="menu-footer">
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
|
|||
import './ChocolateBlanco.css';
|
||||
import Swal from 'sweetalert2'
|
||||
import axios from 'axios';
|
||||
import StarRatings from 'react-star-ratings';
|
||||
|
||||
function PastelFrambuesa() {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -84,6 +85,8 @@ function PastelFrambuesa() {
|
|||
useEffect(() => {
|
||||
// Llamar a la función al cargar la página
|
||||
obtenerNombreUsuario();
|
||||
obtenerReseñasPorPastel();
|
||||
mostrarReseñas();
|
||||
}, []);
|
||||
|
||||
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 (
|
||||
<>
|
||||
|
||||
|
|
@ -291,6 +408,50 @@ function PastelFrambuesa() {
|
|||
</div>
|
||||
</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">
|
||||
<div className="container container-footer">
|
||||
<div className="menu-footer">
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { CiShare2 } from "react-icons/ci";
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import Swal from 'sweetalert2'
|
||||
import axios from 'axios';
|
||||
import StarRatings from 'react-star-ratings';
|
||||
|
||||
|
||||
function PastelMoka() {
|
||||
|
|
@ -85,6 +86,8 @@ function PastelMoka() {
|
|||
useEffect(() => {
|
||||
// Llamar a la función al cargar la página
|
||||
obtenerNombreUsuario();
|
||||
obtenerReseñasPorPastel();
|
||||
mostrarReseñas();
|
||||
}, []);
|
||||
|
||||
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 (
|
||||
<>
|
||||
|
||||
|
|
@ -295,6 +410,42 @@ function PastelMoka() {
|
|||
</div>
|
||||
</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">
|
||||
<div className="container container-footer">
|
||||
<div className="menu-footer">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { useNavigate } from "react-router-dom";
|
|||
import './ChocolateBlanco.css';
|
||||
import Swal from 'sweetalert2'
|
||||
import axios from 'axios';
|
||||
|
||||
import StarRatings from 'react-star-ratings';
|
||||
|
||||
function PastelZanahoria() {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -85,6 +85,8 @@ function PastelZanahoria() {
|
|||
useEffect(() => {
|
||||
// Llamar a la función al cargar la página
|
||||
obtenerNombreUsuario();
|
||||
obtenerReseñasPorPastel();
|
||||
mostrarReseñas();
|
||||
}, []);
|
||||
|
||||
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 (
|
||||
<>
|
||||
|
||||
|
|
@ -294,6 +409,48 @@ function PastelZanahoria() {
|
|||
</div>
|
||||
</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">
|
||||
<div className="container container-footer">
|
||||
<div className="menu-footer">
|
||||
|
|
|
|||
|
|
@ -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_vainilla from "./assets/Pastel-fresas-vainilla.png";
|
||||
|
||||
import Swal from 'sweetalert2';
|
||||
|
||||
import pastelZarza from "./assets/pastel-zarza.jpg"
|
||||
|
||||
|
||||
|
|
@ -145,6 +147,54 @@ const mostrarAlertaLogOut = () => {
|
|||
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 generarPedidos = () => {
|
||||
|
|
@ -202,7 +252,7 @@ const mostrarAlertaLogOut = () => {
|
|||
<p>Estatus: {pedido.estatus}</p>
|
||||
<p>Inscripción: {pedido.inscripcion}</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
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import './PersPastelStyle.css';
|
|||
|
||||
import { Button, Select, MenuItem, TextField, Box } from '@mui/material';
|
||||
|
||||
import StarRatings from 'react-star-ratings';
|
||||
|
||||
import { RiCustomerService2Fill } from "react-icons/ri";
|
||||
import { FaUser } from "react-icons/fa";
|
||||
import { LuShoppingBasket } from "react-icons/lu";
|
||||
|
|
@ -32,6 +34,8 @@ function Pastel() {
|
|||
|
||||
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 = () => {
|
||||
Swal.fire({
|
||||
title: "Cerrar Sesión",
|
||||
|
|
@ -176,6 +170,13 @@ const [datosFormulario, setDatosFormulario] = useState(
|
|||
useEffect(() => {
|
||||
// Llamar a la función al cargar la página
|
||||
obtenerNombreUsuario();
|
||||
obtenerReseñasPorPastel();
|
||||
mostrarReseñas();
|
||||
setTextoRelleno("Original");
|
||||
document.addEventListener("click", handleDocumentClick);
|
||||
return () => {
|
||||
document.removeEventListener("click", handleDocumentClick);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const cerrarSesion = async () => {
|
||||
|
|
@ -222,7 +223,7 @@ const [datosFormulario, setDatosFormulario] = useState(
|
|||
|
||||
const mostrarAlertaReservaExitosa=()=>{
|
||||
Swal.fire({
|
||||
title: "Pedido Exitosa",
|
||||
title: "Pedido Exitoso",
|
||||
text: "Tu Pedido se ha realizado correctamente.",
|
||||
icon: "success",
|
||||
button: "Aceptar"
|
||||
|
|
@ -272,6 +273,8 @@ const [datosFormulario, setDatosFormulario] = useState(
|
|||
console.log(textoEncima);
|
||||
console.log(textoRelleno);
|
||||
|
||||
|
||||
|
||||
try{
|
||||
|
||||
if(nombreUsuario==null){
|
||||
|
|
@ -280,12 +283,13 @@ const [datosFormulario, setDatosFormulario] = useState(
|
|||
}else{
|
||||
|
||||
const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
|
||||
textoEncima: textoEncima,
|
||||
textoCantidad: datosPastel.quantity,
|
||||
textoRelleno: textoRelleno,
|
||||
textoTipo: "Pastel de Fresas",
|
||||
textoPrecio:"1000",
|
||||
});
|
||||
textoEncima: textoEncima,
|
||||
textoCantidad: datosPastel.quantity,
|
||||
textoRelleno: textoRelleno,
|
||||
textoTipo: "Pastel de Fresas",
|
||||
textoPrecio:"1000",
|
||||
idPastel: "1"
|
||||
});
|
||||
|
||||
console.log(response.data);
|
||||
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 (
|
||||
|
|
@ -459,7 +575,7 @@ const [datosFormulario, setDatosFormulario] = useState(
|
|||
|
||||
<div className="container-add-cart">
|
||||
<button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
|
||||
Añadir al carrito
|
||||
Comprar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -477,36 +593,13 @@ const [datosFormulario, setDatosFormulario] = useState(
|
|||
ipsum dolor sit amet consectetur adipisicing elit. Sint autem
|
||||
magni earum est dolorem saepe perferendis repellat ipsam
|
||||
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>
|
||||
</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>
|
||||
|
||||
</main>
|
||||
|
|
@ -515,24 +608,34 @@ const [datosFormulario, setDatosFormulario] = useState(
|
|||
|
||||
<h2 className="customer-reviews-title">Reseñas</h2>
|
||||
|
||||
<div className="customer-reviews-container">
|
||||
|
||||
<div className="flex justify-center space-x-4">
|
||||
<div className="customer-review-card">
|
||||
<div className="customer-review-info">
|
||||
<img className="customer-review-avatar" src="https://placehold.co/100x100" alt="John Deo"/>
|
||||
<div>
|
||||
<div className="customer-review-name">John Deo</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -203,9 +203,9 @@
|
|||
|
||||
.texto-encima {
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
top: 54%;
|
||||
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 */
|
||||
overflow-wrap: break-word;
|
||||
transform: translate(-50%, -50%);
|
||||
|
|
@ -656,6 +656,12 @@ footer {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.reseñas-conteiner{
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Estilos para el contenedor principal */
|
||||
|
|
@ -680,12 +686,14 @@ footer {
|
|||
.customer-review-card {/* ajustar según sea necesario */
|
||||
|
||||
border-radius: 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 1.5rem;
|
||||
background-color: #f9fafb; /* bg-zinc-50 */
|
||||
|
||||
margin-bottom: 3rem ;
|
||||
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
Loading…
Reference in New Issue