From 780ba1795b34205f56f298a441fdc0cb5c043875 Mon Sep 17 00:00:00 2001
From: Benito <zs22016070@estudiantes.uv.mx>
Date: Thu, 6 Mar 2025 11:53:14 -0600
Subject: [PATCH 1/3] Funcion de Carrito
---
.../src/components/vistas/Informacion.jsx | 30 ++++++++++++++++---
ventaboletos/src/pages/carrito.jsx | 26 ++++++++++++++--
2 files changed, 49 insertions(+), 7 deletions(-)
diff --git a/ventaboletos/src/components/vistas/Informacion.jsx b/ventaboletos/src/components/vistas/Informacion.jsx
index 5eb8b83..1df2a58 100644
--- a/ventaboletos/src/components/vistas/Informacion.jsx
+++ b/ventaboletos/src/components/vistas/Informacion.jsx
@@ -20,6 +20,7 @@ function Informacion() {
const [conciertos, setConciertos] = useState([]);
const [selectedConcierto, setSelectedConcierto] = useState(null);
const [tipoAsiento, setTipoAsiento] = useState([]);
+ const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
useEffect(() => {
fetchConciertos();
@@ -34,7 +35,6 @@ function Informacion() {
console.error(error);
} else {
setConciertos(conciertos);
- console.log(conciertos);
}
};
@@ -46,7 +46,6 @@ function Informacion() {
console.error(error);
} else {
setTipoAsiento(asientos);
- console.log(asientos);
}
};
@@ -55,6 +54,28 @@ function Informacion() {
setOpen(true);
};
+ const handleAgregarAlCarrito = () => {
+ if (!selectedConcierto || !asientoSeleccionado) {
+ alert("Selecciona un tipo de asiento antes de continuar.");
+ return;
+ }
+
+ // Obtener carrito actual desde localStorage
+ const carritoActual = JSON.parse(localStorage.getItem("carrito")) || [];
+
+ // Agregar el concierto con el tipo de asiento seleccionado
+ const nuevoCarrito = [
+ ...carritoActual,
+ { ...selectedConcierto, asiento: asientoSeleccionado },
+ ];
+
+ // Guardar en localStorage
+ localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
+
+ // Cerrar el modal
+ setOpen(false);
+ };
+
return (
<>
<div className="space-y-4">
@@ -74,6 +95,7 @@ function Informacion() {
</div>
))}
</div>
+
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>
<DialogHeader>
@@ -81,7 +103,7 @@ function Informacion() {
<p className="text-sm text-gray-600">{selectedConcierto?.fecha}</p>
</DialogHeader>
<div className="space-y-4">
- <Select onValueChange={setTipoAsiento}>
+ <Select onValueChange={setAsientoSeleccionado}>
<SelectTrigger>
<SelectValue placeholder="Selecciona un tipo de asiento" />
</SelectTrigger>
@@ -98,7 +120,7 @@ function Informacion() {
<Button variant="outline" onClick={() => setOpen(false)}>
Cancelar
</Button>
- <Button>Aceptar</Button>
+ <Button onClick={handleAgregarAlCarrito}>Aceptar</Button>
</div>
</DialogContent>
</Dialog>
diff --git a/ventaboletos/src/pages/carrito.jsx b/ventaboletos/src/pages/carrito.jsx
index 5067c5b..6715cfb 100644
--- a/ventaboletos/src/pages/carrito.jsx
+++ b/ventaboletos/src/pages/carrito.jsx
@@ -1,7 +1,27 @@
-import React from 'react'
+import { useEffect, useState } from "react";
export default function Carrito() {
+ const [carrito, setCarrito] = useState([]);
+
+ useEffect(() => {
+ const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
+ setCarrito(carritoGuardado);
+ }, []);
+
return (
- <div>carrito</div>
- )
+ <div className="p-4 max-w-3xl mx-auto">
+ <h2 className="text-2xl font-bold mb-4">Carrito de Compras</h2>
+ {carrito.length === 0 ? (
+ <p className="text-gray-600">No hay conciertos en el carrito.</p>
+ ) : (
+ carrito.map((item, index) => (
+ <div key={index} className="border p-4 mb-2 rounded-lg">
+ <p className="text-lg font-semibold">{item.nombre}</p>
+ <p className="text-sm text-gray-600">Fecha: {item.fecha}</p>
+ <p className="text-sm text-gray-600">Asiento: {item.asiento}</p>
+ </div>
+ ))
+ )}
+ </div>
+ );
}
From c35a0b755b787e1e0d7cbf9eadfc1998046f75cb Mon Sep 17 00:00:00 2001
From: Benito <zs22016070@estudiantes.uv.mx>
Date: Sun, 9 Mar 2025 20:45:25 -0600
Subject: [PATCH 2/3] =?UTF-8?q?Actualizaci=C3=B3n=20a=20la=20ventana=20Car?=
=?UTF-8?q?rito?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ventaboletos/src/pages/carrito.jsx | 72 +++++++++++++++++++++++++++---
1 file changed, 66 insertions(+), 6 deletions(-)
diff --git a/ventaboletos/src/pages/carrito.jsx b/ventaboletos/src/pages/carrito.jsx
index 6715cfb..7daf22e 100644
--- a/ventaboletos/src/pages/carrito.jsx
+++ b/ventaboletos/src/pages/carrito.jsx
@@ -1,27 +1,87 @@
import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
export default function Carrito() {
const [carrito, setCarrito] = useState([]);
+ const [showDialog, setShowDialog] = useState(false);
+ const [conciertoAEliminar, setConciertoAEliminar] = useState(null);
+ const router = useRouter();
useEffect(() => {
const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
setCarrito(carritoGuardado);
}, []);
+ const eliminarConcierto = () => {
+ if (conciertoAEliminar !== null) {
+ const nuevoCarrito = carrito.filter((_, index) => index !== conciertoAEliminar);
+ localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
+ setCarrito(nuevoCarrito);
+ setShowDialog(false);
+ }
+ };
+
+ const calcularTotal = () => {
+ return carrito.reduce((total, item) => total + (item.precio || 0), 0);
+ };
+
return (
- <div className="p-4 max-w-3xl mx-auto">
+ <div className="p-4 max-w-3xl mx-auto bg-gray-900 text-white rounded-lg shadow-lg">
<h2 className="text-2xl font-bold mb-4">Carrito de Compras</h2>
{carrito.length === 0 ? (
- <p className="text-gray-600">No hay conciertos en el carrito.</p>
+ <p className="text-gray-400">No hay conciertos en el carrito.</p>
) : (
carrito.map((item, index) => (
- <div key={index} className="border p-4 mb-2 rounded-lg">
- <p className="text-lg font-semibold">{item.nombre}</p>
- <p className="text-sm text-gray-600">Fecha: {item.fecha}</p>
- <p className="text-sm text-gray-600">Asiento: {item.asiento}</p>
+ <div key={index} className="border p-4 mb-2 rounded-lg bg-gray-800">
+ <p className="text-lg font-semibold text-white">{item.nombre}</p>
+ <p className="text-sm text-gray-300">Fecha: {item.fecha}</p>
+ <p className="text-sm text-gray-300">Asiento: {item.asiento}</p>
+ <p className="text-sm text-gray-300">Precio: ${item.precio}</p>
+ <Button
+ className="mt-2 bg-red-500 hover:bg-red-600"
+ onClick={() => {
+ setConciertoAEliminar(index);
+ setShowDialog(true);
+ }}
+ >
+ Eliminar
+ </Button>
</div>
))
)}
+
+ {carrito.length > 0 && (
+ <>
+ <p className="text-xl font-bold text-white mt-4">Total: ${calcularTotal()}</p>
+ <div className="flex justify-between mt-4">
+ <Button
+ className="bg-gray-500 hover:bg-gray-600"
+ onClick={() => router.push("/index")} // Debe lanzarte a la pagina de informacion.jsx
+ >
+ Cancelar
+ </Button>
+ <Button className="bg-green-500 hover:bg-green-600">Pagar</Button>
+ </div>
+ </>
+ )}
+
+ <Dialog open={showDialog} onOpenChange={setShowDialog}>
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>¿Estás seguro de eliminar este concierto?</DialogTitle>
+ </DialogHeader>
+ <div className="flex justify-end gap-2 mt-4">
+ <Button variant="outline" onClick={() => setShowDialog(false)}>
+ Cancelar
+ </Button>
+ <Button className="bg-red-500 hover:bg-red-600" onClick={eliminarConcierto}>
+ Eliminar
+ </Button>
+ </div>
+ </DialogContent>
+ </Dialog>
</div>
);
}
From 2998c8d74c0a16a2d2bf02fc8526bd797324b77d Mon Sep 17 00:00:00 2001
From: Benito <zs22016070@estudiantes.uv.mx>
Date: Sun, 9 Mar 2025 20:49:07 -0600
Subject: [PATCH 3/3] Actualizacion de Carrito
---
ventaboletos/src/pages/carrito.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/ventaboletos/src/pages/carrito.jsx b/ventaboletos/src/pages/carrito.jsx
index 7daf22e..ce8582a 100644
--- a/ventaboletos/src/pages/carrito.jsx
+++ b/ventaboletos/src/pages/carrito.jsx
@@ -58,7 +58,7 @@ export default function Carrito() {
<div className="flex justify-between mt-4">
<Button
className="bg-gray-500 hover:bg-gray-600"
- onClick={() => router.push("/index")} // Debe lanzarte a la pagina de informacion.jsx
+ onClick={() => router.push("/")}
>
Cancelar
</Button>