Funcionalidad de reseñas y boton de eliminar pedido
This commit is contained in:
parent
65714f7707
commit
27257a10d6
|
@ -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",
|
||||||
|
|
|
@ -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"
|
||||||
},
|
},
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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 () => {
|
||||||
|
@ -155,6 +157,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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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,11 +686,13 @@ 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 ;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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