From ada8da5974ed98ddbae473673947f17797ec1127 Mon Sep 17 00:00:00 2001
From: Benito <zs22016070@estudiantes.uv.mx>
Date: Mon, 10 Mar 2025 07:19:33 -0600
Subject: [PATCH] =?UTF-8?q?Actualizaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/vistas/Informacion.jsx | 75 +++++++++----------
ventaboletos/src/pages/carrito.jsx | 15 +++-
2 files changed, 47 insertions(+), 43 deletions(-)
diff --git a/ventaboletos/src/components/vistas/Informacion.jsx b/ventaboletos/src/components/vistas/Informacion.jsx
index 97a7054..449fa97 100644
--- a/ventaboletos/src/components/vistas/Informacion.jsx
+++ b/ventaboletos/src/components/vistas/Informacion.jsx
@@ -1,5 +1,4 @@
import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
import { supabaseClient } from "@/utils/supabase";
import {
Dialog,
@@ -23,47 +22,30 @@ function Informacion() {
const [tipoAsiento, setTipoAsiento] = useState([]);
const [numeroAsiento, setNumeroAsiento] = useState([]);
const [selectedCategoria, setSelectedCategoria] = useState("");
+ const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
useEffect(() => {
fetchConciertos();
- fetchTipoAsiento();
- fetchNumeroAsiento();
+ fetchAsientos();
}, []);
const fetchConciertos = async () => {
- let { data: conciertos, error } = await supabaseClient
- .from("conciertos")
- .select("*");
+ let { data, error } = await supabaseClient.from("conciertos").select("*");
if (error) {
console.error(error);
} else {
- setConciertos(conciertos);
+ setConciertos(data);
}
};
- const fetchNumeroAsiento = async () => {
- let { data: asientos, error } = await supabaseClient
- .from("asientos")
- .select("numero_asiento, categoria");
+ const fetchAsientos = async () => {
+ let { data, error } = await supabaseClient.from("asientos").select("numero_asiento, categoria");
if (error) {
console.error(error);
} else {
- setNumeroAsiento(asientos);
- }
- };
-
- const fetchTipoAsiento = async () => {
- let { data: asientos, error } = await supabaseClient
- .from("asientos")
- .select("categoria");
- if (error) {
- console.error(error);
- } else {
- setTipoAsiento(asientos);
- const uniqueCategories = asientos
- .map((asiento) => asiento.categoria)
- .filter((value, index, self) => self.indexOf(value) === index);
+ const uniqueCategories = [...new Set(data.map((asiento) => asiento.categoria))];
setTipoAsiento(uniqueCategories);
+ setNumeroAsiento(data);
}
};
@@ -74,6 +56,23 @@ function Informacion() {
const handleCategoriaChange = (categoria) => {
setSelectedCategoria(categoria);
+ setAsientoSeleccionado("");
+ };
+
+ const handleAgregarAlCarrito = () => {
+ if (!selectedConcierto || !asientoSeleccionado) {
+ alert("Selecciona un tipo de asiento antes de continuar.");
+ return;
+ }
+
+ const carritoActual = JSON.parse(localStorage.getItem("carrito")) || [];
+ const nuevoCarrito = [
+ ...carritoActual,
+ { ...selectedConcierto, asiento: asientoSeleccionado },
+ ];
+
+ localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
+ setOpen(false);
};
const filteredAsientos = numeroAsiento
@@ -84,13 +83,10 @@ function Informacion() {
<>
<div className="space-y-4">
{conciertos.map((concierto) => (
- <div
- key={concierto.id}
- className="flex items-center gap-4 p-4 border rounded-lg"
- >
+ <div key={concierto.id} className="flex items-center gap-4 p-4 border rounded-lg">
<div className="w-16 h-16 bg-gray-300" />
<div>
- <p className="text-lg font-semibold text-black">{concierto.nombre}</p>
+ <p className="text-lg font-semibold">{concierto.nombre}</p>
<p className="text-sm text-gray-600">{concierto.fecha}</p>
</div>
<Button className="ml-auto" onClick={() => handleSelect(concierto)}>
@@ -99,6 +95,7 @@ function Informacion() {
</div>
))}
</div>
+
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>
<DialogHeader>
@@ -106,13 +103,12 @@ function Informacion() {
<p className="text-sm text-gray-600">{selectedConcierto?.fecha}</p>
</DialogHeader>
<div className="space-y-4">
- <Select onValueChange={setAsientoSeleccionado}>
<Select onValueChange={handleCategoriaChange}>
<SelectTrigger>
<SelectValue placeholder="Selecciona un tipo de asiento" />
</SelectTrigger>
<SelectContent>
- {tipoAsiento?.map((tipo) => (
+ {tipoAsiento.map((tipo) => (
<SelectItem key={tipo} value={tipo}>
{tipo}
</SelectItem>
@@ -121,16 +117,13 @@ function Informacion() {
</Select>
</div>
<div className="space-y-4">
- <Select onValueChange={(value) => console.log(value)}>
+ <Select onValueChange={setAsientoSeleccionado}>
<SelectTrigger>
<SelectValue placeholder="Selecciona un asiento" />
</SelectTrigger>
<SelectContent>
- {filteredAsientos?.map((asiento) => (
- <SelectItem
- key={asiento.numero_asiento}
- value={asiento.numero_asiento}
- >
+ {filteredAsientos.map((asiento) => (
+ <SelectItem key={asiento.numero_asiento} value={asiento.numero_asiento}>
{asiento.numero_asiento}
</SelectItem>
))}
@@ -141,7 +134,7 @@ function Informacion() {
<Button variant="outline" onClick={() => setOpen(false)}>
Cancelar
</Button>
- <Button>Aceptar</Button>
+ <Button onClick={handleAgregarAlCarrito}>Aceptar</Button>
</div>
</DialogContent>
</Dialog>
@@ -149,4 +142,4 @@ function Informacion() {
);
}
-export default Informacion;
+export default Informacion;
\ No newline at end of file
diff --git a/ventaboletos/src/pages/carrito.jsx b/ventaboletos/src/pages/carrito.jsx
index ce8582a..9ffd56e 100644
--- a/ventaboletos/src/pages/carrito.jsx
+++ b/ventaboletos/src/pages/carrito.jsx
@@ -3,6 +3,12 @@ import { useRouter } from "next/router";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+const PRECIOS_BOLETO = {
+ VIP: 100,
+ Intermedio: 75,
+ General: 25,
+};
+
export default function Carrito() {
const [carrito, setCarrito] = useState([]);
const [showDialog, setShowDialog] = useState(false);
@@ -11,7 +17,12 @@ export default function Carrito() {
useEffect(() => {
const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
- setCarrito(carritoGuardado);
+ // Asigna el precio basado en el tipo de boleto si no tiene un precio definido
+ const carritoConPrecios = carritoGuardado.map(item => ({
+ ...item,
+ precio: PRECIOS_BOLETO[item.tipoBoleto] || 0,
+ }));
+ setCarrito(carritoConPrecios);
}, []);
const eliminarConcierto = () => {
@@ -58,7 +69,7 @@ export default function Carrito() {
<div className="flex justify-between mt-4">
<Button
className="bg-gray-500 hover:bg-gray-600"
- onClick={() => router.push("/")}
+ onClick={() => router.push("/")}
>
Cancelar
</Button>