Actualización
This commit is contained in:
parent
ae09cb2c43
commit
ada8da5974
ventaboletos/src
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue