devbeni
2c5461b0e0
- Removed old socket handling code and replaced it with a new implementation in `app/api/socketio/route.js`. - Added MySQL database integration for managing active sessions and queue entries. - Implemented event retrieval and ticket purchasing APIs in `app/api/events/route.js` and `app/api/purchase/route.js`. - Created database schema for events, tickets, active sessions, and orders in `database/schema.sql`. - Updated front-end to handle event data fetching and ticket purchasing with improved UI components. - Removed unused SVG files from the public directory.
313 lines
12 KiB
TypeScript
313 lines
12 KiB
TypeScript
"use client";
|
||
import { useEffect, useState, useRef } from "react";
|
||
|
||
export default function Home() {
|
||
const [connected, setConnected] = useState(false);
|
||
const [position, setPosition] = useState<number | null>(null);
|
||
const [estimatedWait, setEstimatedWait] = useState<number | null>(null);
|
||
const [activeUsers, setActiveUsers] = useState(0);
|
||
const [hasAccess, setHasAccess] = useState(false);
|
||
const [tokenExpiry, setTokenExpiry] = useState<number | null>(null);
|
||
const [eventData, setEventData] = useState<any>(null);
|
||
const [selectedTicket, setSelectedTicket] = useState<string>("Normal");
|
||
const [quantity, setQuantity] = useState(1);
|
||
const [purchasing, setPurchasing] = useState(false);
|
||
const socketRef = useRef<any>(null);
|
||
|
||
// Load event data
|
||
useEffect(() => {
|
||
fetch('/api/events?id=pamkutya')
|
||
.then(res => res.json())
|
||
.then(data => setEventData(data))
|
||
.catch(console.error);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
let mounted = true;
|
||
|
||
// Először inicializáljuk a Socket.IO szervert
|
||
fetch('/api/socketio')
|
||
.then(() => {
|
||
// dynamic import to avoid bundling issues on server
|
||
return import("socket.io-client");
|
||
})
|
||
.then(({ io }) => {
|
||
if (!mounted) return;
|
||
const socketPort = process.env.NEXT_PUBLIC_SOCKET_PORT || "4000";
|
||
const socket = io(`http://localhost:${socketPort}`, {
|
||
autoConnect: true
|
||
});
|
||
socketRef.current = socket;
|
||
|
||
socket.on("connect", () => {
|
||
setConnected(true);
|
||
// join a named event (example eventId: pamkutya)
|
||
socket.emit("join_event", { eventId: "pamkutya" });
|
||
});
|
||
|
||
socket.on("disconnect", () => {
|
||
setConnected(false);
|
||
setPosition(null);
|
||
setHasAccess(false);
|
||
setTokenExpiry(null);
|
||
});
|
||
|
||
socket.on("queue_update", (data: any) => {
|
||
setPosition(data.position ?? null);
|
||
setEstimatedWait(data.estimatedWait ?? null);
|
||
setActiveUsers(data.activeCount ?? 0);
|
||
});
|
||
|
||
socket.on("granted", (data: any) => {
|
||
// { token, expiresAt }
|
||
setHasAccess(true);
|
||
setTokenExpiry(data.expiresAt ? Date.parse(data.expiresAt) : Date.now() + 15 * 60 * 1000);
|
||
// store token locally for API calls
|
||
try {
|
||
localStorage.setItem("event_token", data.token);
|
||
} catch (e) {}
|
||
});
|
||
|
||
socket.on("revoked", () => {
|
||
setHasAccess(false);
|
||
setTokenExpiry(null);
|
||
localStorage.removeItem("event_token");
|
||
});
|
||
})
|
||
.catch(error => {
|
||
console.error("Socket inicializálási hiba:", error);
|
||
});
|
||
|
||
return () => {
|
||
mounted = false;
|
||
if (socketRef.current) socketRef.current.disconnect();
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!tokenExpiry) return;
|
||
const id = setInterval(() => {
|
||
const msLeft = tokenExpiry - Date.now();
|
||
if (msLeft <= 0) {
|
||
setHasAccess(false);
|
||
setTokenExpiry(null);
|
||
localStorage.removeItem("event_token");
|
||
}
|
||
}, 1000);
|
||
return () => clearInterval(id);
|
||
}, [tokenExpiry]);
|
||
|
||
const tryBuy = async () => {
|
||
if (!hasAccess || purchasing) return;
|
||
|
||
setPurchasing(true);
|
||
|
||
try {
|
||
const token = localStorage.getItem("event_token");
|
||
if (!token) {
|
||
alert("Nincs érvényes token!");
|
||
return;
|
||
}
|
||
|
||
const response = await fetch('/api/purchase', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
eventId: 'pamkutya',
|
||
ticketType: selectedTicket,
|
||
quantity,
|
||
token
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (response.ok) {
|
||
alert(`🎉 Sikeres vásárlás!\n\nJegyek: ${quantity}x ${selectedTicket}\nÖsszeg: ${result.totalPrice.toLocaleString()} Ft\nRendelés ID: ${result.orderId}`);
|
||
// Refresh event data to show updated availability
|
||
const eventResponse = await fetch('/api/events?id=pamkutya');
|
||
const eventData = await eventResponse.json();
|
||
setEventData(eventData);
|
||
} else {
|
||
alert(`Hiba: ${result.error}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('Purchase error:', error);
|
||
alert('Hiba történt a vásárlás során!');
|
||
} finally {
|
||
setPurchasing(false);
|
||
}
|
||
};
|
||
|
||
const timeLeft = tokenExpiry ? Math.max(0, tokenExpiry - Date.now()) : 0;
|
||
const minutesLeft = Math.floor(timeLeft / 60000);
|
||
const secondsLeft = Math.floor((timeLeft % 60000) / 1000);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 relative overflow-hidden">
|
||
{/* Background Effects */}
|
||
<div className="absolute inset-0 opacity-10">
|
||
<div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-white/5 to-transparent"></div>
|
||
</div>
|
||
|
||
<div className="relative z-10 flex flex-col min-h-screen">
|
||
{/* Header */}
|
||
<header className="p-6 text-center">
|
||
<div className="inline-flex items-center gap-2 text-white/60 text-sm mb-2">
|
||
<div className={`w-2 h-2 rounded-full ${connected ? 'bg-green-400 animate-pulse' : 'bg-red-400'}`}></div>
|
||
{connected ? 'Kapcsolódva' : 'Nincs kapcsolat'}
|
||
</div>
|
||
<h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
|
||
🎵 Pam Kutya
|
||
</h1>
|
||
<p className="text-xl text-white/80">Legendás Underground Koncert</p>
|
||
</header>
|
||
|
||
{/* Main Content */}
|
||
<main className="flex-1 flex items-center justify-center p-6">
|
||
<div className="w-full max-w-2xl">
|
||
{/* Queue Status Card */}
|
||
<div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-white/20">
|
||
<div className="text-center mb-8">
|
||
{position ? (
|
||
<>
|
||
<div className="text-6xl font-bold text-white mb-4">#{position}</div>
|
||
<p className="text-xl text-white/80">Helyed a várakozási sorban</p>
|
||
{estimatedWait && (
|
||
<p className="text-white/60 mt-2">
|
||
Becsült várakozási idő: <span className="font-mono">{Math.ceil(estimatedWait)}s</span>
|
||
</p>
|
||
)}
|
||
</>
|
||
) : hasAccess ? (
|
||
<>
|
||
<div className="text-6xl mb-4">🎫</div>
|
||
<p className="text-2xl font-bold text-green-400 mb-2">Hozzáféred engedélyezve!</p>
|
||
<p className="text-white/80">Most vásárolhatsz jegyeket</p>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className="text-6xl mb-4">⏳</div>
|
||
<p className="text-xl text-white/80">Csatlakozás a sorhoz...</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Stats Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
||
<div className="bg-white/5 rounded-2xl p-4 text-center">
|
||
<div className="text-2xl font-bold text-white">{activeUsers}</div>
|
||
<div className="text-sm text-white/60">Aktív felhasználó</div>
|
||
</div>
|
||
<div className="bg-white/5 rounded-2xl p-4 text-center">
|
||
<div className="text-2xl font-bold text-white">{position || '—'}</div>
|
||
<div className="text-sm text-white/60">Pozíció</div>
|
||
</div>
|
||
<div className="bg-white/5 rounded-2xl p-4 text-center">
|
||
<div className="text-2xl font-bold text-white">
|
||
{estimatedWait ? `${Math.ceil(estimatedWait)}s` : '—'}
|
||
</div>
|
||
<div className="text-sm text-white/60">Várható idő</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Purchase Form */}
|
||
{hasAccess && (
|
||
<div className="space-y-4 mb-6">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-white/80 text-sm mb-2">Jegytípus</label>
|
||
<select
|
||
value={selectedTicket}
|
||
onChange={(e) => setSelectedTicket(e.target.value)}
|
||
className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white"
|
||
>
|
||
{eventData?.tickets?.map((ticket: any) => (
|
||
<option key={ticket.type} value={ticket.type} className="bg-gray-800">
|
||
{ticket.type} - {ticket.price.toLocaleString()} Ft
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-white/80 text-sm mb-2">Darabszám</label>
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="10"
|
||
value={quantity}
|
||
onChange={(e) => setQuantity(parseInt(e.target.value))}
|
||
className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Action Button */}
|
||
<div className="space-y-4">
|
||
<button
|
||
onClick={tryBuy}
|
||
disabled={!hasAccess || purchasing}
|
||
className={`w-full py-4 px-6 rounded-2xl font-bold text-lg transition-all duration-300 ${
|
||
hasAccess && !purchasing
|
||
? 'bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl transform hover:scale-105'
|
||
: 'bg-white/10 text-white/50 cursor-not-allowed'
|
||
}`}
|
||
>
|
||
{purchasing ? '⏳ Vásárlás...' : hasAccess ? '🎫 Jegyvásárlás' : '⏳ Várakozás...'}
|
||
</button>
|
||
|
||
{/* Token Timer */}
|
||
{hasAccess && tokenExpiry && (
|
||
<div className="bg-orange-500/20 border border-orange-400/30 rounded-xl p-4 text-center">
|
||
<div className="text-orange-300 font-semibold">
|
||
⏰ Hozzáférés lejár: {minutesLeft}:{secondsLeft.toString().padStart(2, '0')}
|
||
</div>
|
||
<div className="text-orange-200/80 text-sm mt-1">
|
||
Használd ki a lehetőséget!
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Ticket Prices */}
|
||
{eventData?.tickets && (
|
||
<div className="mt-8 bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10">
|
||
<h3 className="text-white font-bold text-lg mb-4 text-center">🎟️ Jegytípusok</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
{eventData.tickets.map((ticket: any, index: number) => {
|
||
const available = ticket.total_quantity - ticket.sold_quantity;
|
||
const colors = ['text-green-400', 'text-yellow-400', 'text-purple-400'];
|
||
const borders = ['border-green-400/30', 'border-yellow-400/30', 'border-purple-400/30'];
|
||
|
||
return (
|
||
<div key={ticket.type} className={`bg-white/5 rounded-xl p-4 text-center ${index === 1 ? borders[index] + ' border' : ''}`}>
|
||
<div className="text-white font-bold">{ticket.type}</div>
|
||
<div className={`text-2xl font-bold ${colors[index % 3]}`}>
|
||
{ticket.price.toLocaleString()} Ft
|
||
</div>
|
||
<div className="text-white/60 text-sm">
|
||
{available > 0 ? `${available} db elérhető` : 'Elfogyott'}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</main>
|
||
|
||
{/* Footer */}
|
||
<footer className="p-4 text-center text-white/40 text-sm">
|
||
WebSocket + JWT alapú várakozási rendszer • Demo célokra
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|