92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Button from '../ui/Button';
|
|
import { useInject } from '@/lib/di/hooks/useInject';
|
|
import { RACE_RESULTS_SERVICE_TOKEN } from '@/lib/di/tokens';
|
|
|
|
interface ImportResultsFormProps {
|
|
raceId: string;
|
|
onSuccess: (results: any[]) => void;
|
|
onError: (error: string) => void;
|
|
}
|
|
|
|
export default function ImportResultsForm({ raceId, onSuccess, onError }: ImportResultsFormProps) {
|
|
const [uploading, setUploading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const raceResultsService = useInject(RACE_RESULTS_SERVICE_TOKEN);
|
|
|
|
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
setUploading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const content = await file.text();
|
|
const results = (raceResultsService as any).parseAndTransformCSV(content, raceId);
|
|
onSuccess(results);
|
|
} catch (err) {
|
|
const errorMessage =
|
|
err instanceof Error ? err.message : 'Failed to parse CSV file';
|
|
setError(errorMessage);
|
|
onError(errorMessage);
|
|
} finally {
|
|
setUploading(false);
|
|
event.target.value = '';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-2">
|
|
Upload Results CSV
|
|
</label>
|
|
<p className="text-xs text-gray-500 mb-3">
|
|
CSV format: driverId, position, fastestLap, incidents, startPosition
|
|
</p>
|
|
|
|
<input
|
|
type="file"
|
|
accept=".csv"
|
|
onChange={handleFileChange}
|
|
disabled={uploading}
|
|
className="block w-full text-sm text-gray-400
|
|
file:mr-4 file:py-2 file:px-4
|
|
file:rounded file:border-0
|
|
file:text-sm file:font-semibold
|
|
file:bg-primary-blue file:text-white
|
|
file:cursor-pointer file:transition-colors
|
|
hover:file:bg-primary-blue/80
|
|
disabled:file:opacity-50 disabled:file:cursor-not-allowed"
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-4 bg-warning-amber/10 border border-warning-amber/30 rounded text-warning-amber text-sm">
|
|
<strong>Error:</strong> {error}
|
|
</div>
|
|
)}
|
|
|
|
{uploading && (
|
|
<div className="text-center text-gray-400 text-sm">
|
|
Parsing CSV and importing results...
|
|
</div>
|
|
)}
|
|
|
|
<div className="p-4 bg-iron-gray/20 rounded text-xs text-gray-500">
|
|
<p className="font-semibold mb-2">CSV Example:</p>
|
|
<pre className="text-gray-400">
|
|
{`driverId,position,fastestLap,incidents,startPosition
|
|
550e8400-e29b-41d4-a716-446655440001,1,92.456,0,3
|
|
550e8400-e29b-41d4-a716-446655440002,2,92.789,1,1
|
|
550e8400-e29b-41d4-a716-446655440003,3,93.012,2,2`}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
} |