224 lines
8.6 KiB
TypeScript
224 lines
8.6 KiB
TypeScript
// app/events/[id]/results/page.tsx
|
|
// Event championship results page with auto-refresh
|
|
|
|
import { query } from '@/lib/db';
|
|
import { TrophyIcon } from '@/components/ui/icons';
|
|
import Link from 'next/link';
|
|
import EventResultsClient from '@/components/events/EventResultsClient';
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
interface TeamStanding {
|
|
team_id: number;
|
|
team_name: string;
|
|
total_points: number;
|
|
races_participated: number;
|
|
best_finish: number;
|
|
drivers: {
|
|
driver_guid: string;
|
|
driver_name: string;
|
|
position: number;
|
|
points_awarded: number;
|
|
}[];
|
|
}
|
|
|
|
async function getEventResults(eventId: string) {
|
|
// Get event info
|
|
const eventSql = `
|
|
SELECT
|
|
event_id,
|
|
event_name,
|
|
event_track,
|
|
event_date,
|
|
event_status
|
|
FROM events
|
|
WHERE event_id = $1
|
|
`;
|
|
const events = await query(eventSql, [eventId]);
|
|
const event = events[0];
|
|
|
|
// Get team standings with driver details
|
|
const standingsSql = `
|
|
SELECT
|
|
tcs.team_id,
|
|
t.name as team_name,
|
|
tcs.total_points,
|
|
tcs.races_participated,
|
|
tcs.best_finish,
|
|
json_agg(
|
|
json_build_object(
|
|
'driver_guid', u.driver_guid,
|
|
'driver_name', u.driver_name,
|
|
'position', er.position,
|
|
'points_awarded', er.points_awarded,
|
|
'laps_completed', er.laps_completed,
|
|
'dnf', er.dnf
|
|
) ORDER BY er.position ASC
|
|
) as drivers
|
|
FROM team_championship_standings tcs
|
|
JOIN teams t ON tcs.team_id = t.id
|
|
LEFT JOIN event_results er ON tcs.event_id = er.event_id AND tcs.team_id = er.team_id
|
|
LEFT JOIN users u ON er.driver_guid = u.driver_guid
|
|
WHERE tcs.event_id = $1
|
|
GROUP BY tcs.team_id, t.name, tcs.total_points, tcs.races_participated, tcs.best_finish
|
|
ORDER BY tcs.total_points DESC, tcs.best_finish ASC
|
|
`;
|
|
|
|
const standings = await query(standingsSql, [eventId]);
|
|
|
|
return { event, standings };
|
|
}
|
|
|
|
function getPositionColor(position: number): string {
|
|
if (position === 1) return 'bg-yellow-500/20 border-yellow-500/50 text-yellow-400';
|
|
if (position === 2) return 'bg-gray-400/20 border-gray-400/50 text-gray-300';
|
|
if (position === 3) return 'bg-orange-600/20 border-orange-600/50 text-orange-400';
|
|
return 'bg-white/5 border-white/10 text-white/60';
|
|
}
|
|
|
|
export default async function EventResultsPage({ params }: { params: { id: string } }) {
|
|
const { event, standings } = await getEventResults(params.id);
|
|
|
|
if (!event) {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-6 py-16">
|
|
<div className="border border-white/10 p-16 text-center bg-black">
|
|
<p className="text-white/40">Event not found</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Hero */}
|
|
<div className="relative border-b border-white/10 grid-overlay">
|
|
<div className="max-w-7xl mx-auto px-6 py-16">
|
|
<div className="space-y-4">
|
|
<Link
|
|
href={`/events/${params.id}`}
|
|
className="inline-flex items-center space-x-2 text-white/60 hover:text-white transition-colors text-sm"
|
|
>
|
|
<span>←</span>
|
|
<span>Back to Event</span>
|
|
</Link>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
<TrophyIcon className="w-12 h-12 text-yellow-500" />
|
|
<div>
|
|
<h1 className="text-5xl font-bold tracking-tight">
|
|
CHAMPIONSHIP RESULTS
|
|
</h1>
|
|
<p className="text-white/60 text-lg mt-2">
|
|
{event.event_name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Team Championship Standings */}
|
|
<div className="max-w-7xl mx-auto px-6 py-12">
|
|
{standings.length === 0 ? (
|
|
<div className="border border-white/10 p-16 text-center bg-black">
|
|
<TrophyIcon className="w-16 h-16 mx-auto mb-6 text-white/20" />
|
|
<p className="text-white/40 text-base tracking-wider">NO RESULTS YET</p>
|
|
<p className="text-white/20 text-sm mt-2">Results will appear after the event concludes</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{standings.map((team: TeamStanding, index: number) => (
|
|
<div
|
|
key={team.team_id}
|
|
className={`border p-6 transition-all ${getPositionColor(index + 1)}`}
|
|
>
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-center space-x-4">
|
|
{/* Position Badge */}
|
|
<div className="w-16 h-16 border-2 flex items-center justify-center">
|
|
<span className="text-3xl font-bold">
|
|
{index + 1}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Team Info */}
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight">
|
|
{team.team_name}
|
|
</h2>
|
|
<div className="flex items-center space-x-4 mt-2 text-sm text-white/60">
|
|
<div className="flex items-center space-x-1">
|
|
<UsersIcon className="w-4 h-4" />
|
|
<span>{team.drivers.length} {team.drivers.length === 1 ? 'Driver' : 'Drivers'}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1">
|
|
<FlagIcon className="w-4 h-4" />
|
|
<span>Best Finish: P{team.best_finish}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Total Points */}
|
|
<div className="text-right">
|
|
<div className="text-5xl font-bold tracking-tight">
|
|
{team.total_points}
|
|
</div>
|
|
<div className="text-sm text-white/60 tracking-wider">POINTS</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Driver Results */}
|
|
<div className="border-t border-white/10 pt-4 mt-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{team.drivers.map((driver: any) => (
|
|
<div
|
|
key={driver.driver_guid}
|
|
className="flex items-center justify-between p-3 bg-black/30 border border-white/5"
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<div className={`w-8 h-8 border flex items-center justify-center text-xs font-bold ${
|
|
driver.position <= 3 ? 'border-white/30' : 'border-white/10'
|
|
}`}>
|
|
P{driver.position}
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-sm">{driver.driver_name}</div>
|
|
{driver.dnf && (
|
|
<div className="text-xs text-red-400">DNF</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="font-bold text-lg">{driver.points_awarded}</div>
|
|
<div className="text-xs text-white/40">pts</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Points System Info */}
|
|
<div className="mt-8 border border-white/10 p-6 bg-black">
|
|
<h3 className="text-sm font-bold tracking-wider text-white/60 mb-4">POINTS SYSTEM</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 text-sm">
|
|
<div><span className="font-mono text-white/80">P1:</span> <span className="font-bold">25 pts</span></div>
|
|
<div><span className="font-mono text-white/80">P2:</span> <span className="font-bold">18 pts</span></div>
|
|
<div><span className="font-mono text-white/80">P3:</span> <span className="font-bold">15 pts</span></div>
|
|
<div><span className="font-mono text-white/80">P4:</span> <span className="font-bold">12 pts</span></div>
|
|
<div><span className="font-mono text-white/80">P5:</span> <span className="font-bold">10 pts</span></div>
|
|
</div>
|
|
<p className="text-xs text-white/40 mt-4">
|
|
Team points are the sum of all driver points from that team in the event
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|