266 lines
11 KiB
TypeScript
266 lines
11 KiB
TypeScript
// components/dashboard/DashboardClient.tsx
|
|
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { UsersIcon, ServerIcon, ActivityIcon, MapPinIcon, FlagIcon, LiveDotIcon, ClockIcon } from '@/components/ui/icons';
|
|
import { cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
|
|
|
|
interface Driver {
|
|
driver_guid: string;
|
|
driver_name: string;
|
|
driver_team: string;
|
|
car_model: string;
|
|
car_skin: string;
|
|
laps_completed: number;
|
|
user_rank: number;
|
|
server: {
|
|
server_id: number;
|
|
server_name: string;
|
|
server_track: string;
|
|
server_config: string;
|
|
session_type: number;
|
|
session_flag: string;
|
|
session_time: number;
|
|
session_laps: number;
|
|
session_elapsed_time: number;
|
|
session_ambient_temp: number;
|
|
session_road_temp: number;
|
|
connected_players: number;
|
|
};
|
|
}
|
|
|
|
function getSessionTypeName(type: number): string {
|
|
switch (type) {
|
|
case 0: return 'PRACTICE';
|
|
case 1: return 'RACE';
|
|
case 2: return 'QUALIFYING';
|
|
default: return 'UNKNOWN';
|
|
}
|
|
}
|
|
|
|
function getSessionTypeColor(type: number): string {
|
|
switch (type) {
|
|
case 0: return 'border-blue-500/30 bg-blue-500/10 text-blue-400';
|
|
case 1: return 'border-red-500/30 bg-red-500/10 text-red-400';
|
|
case 2: return 'border-yellow-500/30 bg-yellow-500/10 text-yellow-400';
|
|
default: return 'border-white/20 bg-white/5 text-white/60';
|
|
}
|
|
}
|
|
|
|
function formatElapsedTime(ms: number): string {
|
|
const totalSeconds = Math.floor(ms / 1000);
|
|
const hours = Math.floor(totalSeconds / 3600);
|
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
|
const seconds = totalSeconds % 60;
|
|
|
|
if (hours > 0) {
|
|
return `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
|
}
|
|
return `${minutes}:${String(seconds).padStart(2, '0')}`;
|
|
}
|
|
|
|
export default function DashboardClient({ initialDrivers }: { initialDrivers: Driver[] }) {
|
|
const [drivers, setDrivers] = useState<Driver[]>(initialDrivers);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
// Auto-refresh every 3 seconds
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch('/api/dashboard');
|
|
const data = await response.json();
|
|
setDrivers(data.drivers);
|
|
} catch (error) {
|
|
console.error('[Dashboard] Failed to fetch data:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const interval = setInterval(fetchData, 3000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
// Group drivers by server
|
|
const serverGroups = drivers.reduce((acc, driver) => {
|
|
const serverId = driver.server?.server_id ?? 0;
|
|
if (!acc[serverId]) {
|
|
acc[serverId] = [];
|
|
}
|
|
acc[serverId].push(driver);
|
|
return acc;
|
|
}, {} as Record<number, Driver[]>);
|
|
|
|
return (
|
|
<>
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-12">
|
|
<StatCard
|
|
title="DRIVERS ONLINE"
|
|
value={drivers.length}
|
|
icon={<UsersIcon className="w-8 h-8" />}
|
|
pulse={isLoading}
|
|
/>
|
|
<StatCard
|
|
title="ACTIVE SERVERS"
|
|
value={Object.keys(serverGroups).length}
|
|
icon={<ServerIcon className="w-8 h-8" />}
|
|
pulse={isLoading}
|
|
/>
|
|
<StatCard
|
|
title="TOTAL LAPS"
|
|
value={drivers.reduce((sum, d) => sum + d.laps_completed, 0)}
|
|
icon={<ActivityIcon className="w-8 h-8" />}
|
|
pulse={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
{/* Server Listings */}
|
|
<div className="max-w-7xl mx-auto px-6 py-12 space-y-6">
|
|
{Object.keys(serverGroups).length === 0 ? (
|
|
<div className="border border-white/10 p-16 text-center bg-black">
|
|
<div className="w-16 h-16 border-2 border-white/20 mx-auto mb-6"></div>
|
|
<p className="text-white/40 text-base tracking-wider">NO ACTIVE SESSIONS</p>
|
|
<p className="text-white/20 text-sm mt-2">System idle — waiting for connections</p>
|
|
</div>
|
|
) : (
|
|
Object.entries(serverGroups).map(([serverId, serverDrivers]) => {
|
|
const server = serverDrivers[0].server;
|
|
return (
|
|
<div key={serverId} className="border border-white/10 sharp-border bg-black">
|
|
{/* Server Header */}
|
|
<div className="border-b border-white/10 p-6 topo-lines-dense">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 space-y-3">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="flex items-center space-x-2 px-2 py-1 border border-white/30 text-xs">
|
|
<LiveDotIcon className="w-2 h-2 animate-pulse" />
|
|
<span className="font-medium tracking-wider">LIVE</span>
|
|
</div>
|
|
<span className="text-xs text-white/40 tracking-wider">
|
|
ID: {server?.server_id}
|
|
</span>
|
|
</div>
|
|
<h2 className="text-2xl font-light tracking-tight" style={{ letterSpacing: "0.1em" }}>
|
|
{server?.server_name}
|
|
</h2>
|
|
<div className="flex flex-wrap gap-x-6 gap-y-2">
|
|
<div className="flex items-center space-x-2">
|
|
<MapPinIcon className="w-4 h-4 text-white/60" />
|
|
<span className="text-white/80 text-sm">
|
|
{cleanTrackName(server?.server_track || '')}
|
|
{server?.server_config && ` - ${cleanTrackConfig(server.server_config)}`}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<FlagIcon className="w-4 h-4 text-white/60" />
|
|
<span className="text-white/80 text-sm">{server?.session_flag}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<UsersIcon className="w-4 h-4 text-white/60" />
|
|
<span className="text-white/80 text-sm">{server?.connected_players} CONNECTED</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Session Info Badge */}
|
|
<div className="flex flex-col items-end space-y-2">
|
|
<div className={`px-3 py-2 border text-xs font-bold tracking-wider ${getSessionTypeColor(server?.session_type || 0)}`}>
|
|
{getSessionTypeName(server?.session_type || 0)}
|
|
</div>
|
|
<div className="flex items-center space-x-2 px-3 py-2 border border-white/20 bg-black text-xs">
|
|
<ClockIcon className="w-3 h-3 text-white/60" />
|
|
<span className="font-mono text-white/80">
|
|
{formatElapsedTime(server?.session_elapsed_time || 0)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Driver Table */}
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-white/10">
|
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">POS</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">DRIVER</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">TEAM</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">CAR</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">RANK</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">LAPS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{serverDrivers.map((driver, index) => (
|
|
<tr
|
|
key={driver.driver_guid}
|
|
className="border-b border-white/5 hover:bg-white/5 transition-colors"
|
|
>
|
|
<td className="px-6 py-4">
|
|
<span className="text-base font-bold tracking-tight">
|
|
{String(index + 1).padStart(2, '0')}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className="font-semibold tracking-tight text-base">{driver.driver_name}</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className="text-white/50 text-sm">
|
|
{driver.driver_team || '—'}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className="text-white/70 text-sm font-mono tracking-tight">
|
|
{driver.car_model}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className="inline-block px-3 py-1 border border-white/20 text-sm font-mono">
|
|
{driver.user_rank}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className="font-mono text-sm">{driver.laps_completed}</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function StatCard({
|
|
title,
|
|
value,
|
|
icon,
|
|
pulse
|
|
}: {
|
|
title: string;
|
|
value: number;
|
|
icon: React.ReactNode;
|
|
pulse?: boolean;
|
|
}) {
|
|
return (
|
|
<div className={`border border-white/10 p-6 sharp-border transition-opacity ${pulse ? 'opacity-70' : 'opacity-100'}`}>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<span className="text-xs font-bold tracking-wider text-white/60">{title}</span>
|
|
<div className="text-white/40">
|
|
{icon}
|
|
</div>
|
|
</div>
|
|
<div className="text-5xl font-bold tracking-tight">
|
|
{value.toLocaleString()}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|