751 lines
25 KiB
TypeScript
751 lines
25 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import type {
|
||
LeagueConfigFormModel,
|
||
LeagueSchedulePreviewDTO,
|
||
} from '@gridpilot/racing/application';
|
||
import type { Weekday } from '@gridpilot/racing/domain/value-objects/Weekday';
|
||
import Heading from '@/components/ui/Heading';
|
||
import Input from '@/components/ui/Input';
|
||
import SegmentedControl from '@/components/ui/SegmentedControl';
|
||
|
||
type RecurrenceStrategy = NonNullable<LeagueConfigFormModel['timings']>['recurrenceStrategy'];
|
||
|
||
interface LeagueTimingsSectionProps {
|
||
form: LeagueConfigFormModel;
|
||
onChange?: (form: LeagueConfigFormModel) => void;
|
||
readOnly?: boolean;
|
||
errors?: {
|
||
qualifyingMinutes?: string;
|
||
mainRaceMinutes?: string;
|
||
roundsPlanned?: string;
|
||
};
|
||
/**
|
||
* Optional override for the section heading.
|
||
* When omitted, defaults to "Schedule & timings".
|
||
*/
|
||
title?: string;
|
||
/**
|
||
* Local wizard-only weekend template identifier.
|
||
*/
|
||
weekendTemplate?: string;
|
||
/**
|
||
* Callback when the weekend template selection changes.
|
||
*/
|
||
onWeekendTemplateChange?: (template: string) => void;
|
||
}
|
||
|
||
export function LeagueTimingsSection({
|
||
form,
|
||
onChange,
|
||
readOnly,
|
||
errors,
|
||
title,
|
||
weekendTemplate,
|
||
onWeekendTemplateChange,
|
||
}: LeagueTimingsSectionProps) {
|
||
const disabled = readOnly || !onChange;
|
||
const timings = form.timings;
|
||
|
||
const [schedulePreview, setSchedulePreview] =
|
||
useState<LeagueSchedulePreviewDTO | null>(null);
|
||
const [schedulePreviewError, setSchedulePreviewError] = useState<string | null>(
|
||
null,
|
||
);
|
||
const [isSchedulePreviewLoading, setIsSchedulePreviewLoading] = useState(false);
|
||
|
||
const updateTimings = (
|
||
patch: Partial<NonNullable<LeagueConfigFormModel['timings']>>,
|
||
) => {
|
||
if (!onChange) return;
|
||
onChange({
|
||
...form,
|
||
timings: {
|
||
...timings,
|
||
...patch,
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleRoundsChange = (value: string) => {
|
||
if (!onChange) return;
|
||
const trimmed = value.trim();
|
||
if (trimmed === '') {
|
||
updateTimings({ roundsPlanned: undefined });
|
||
return;
|
||
}
|
||
const parsed = parseInt(trimmed, 10);
|
||
updateTimings({
|
||
roundsPlanned: Number.isNaN(parsed) || parsed <= 0 ? undefined : parsed,
|
||
});
|
||
};
|
||
|
||
const showSprint =
|
||
form.scoring.patternId === 'sprint-main-driver' ||
|
||
(typeof timings.sprintRaceMinutes === 'number' && timings.sprintRaceMinutes > 0);
|
||
|
||
const recurrenceStrategy: RecurrenceStrategy =
|
||
timings.recurrenceStrategy ?? 'weekly';
|
||
|
||
const weekdays: Weekday[] = (timings.weekdays ?? []) as Weekday[];
|
||
|
||
const handleWeekdayToggle = (day: Weekday) => {
|
||
const current = new Set(weekdays);
|
||
if (current.has(day)) {
|
||
current.delete(day);
|
||
} else {
|
||
current.add(day);
|
||
}
|
||
updateTimings({ weekdays: Array.from(current).sort() });
|
||
};
|
||
|
||
const handleRecurrenceChange = (value: string) => {
|
||
updateTimings({
|
||
recurrenceStrategy: value as RecurrenceStrategy,
|
||
});
|
||
};
|
||
|
||
const requiresWeekdaySelection =
|
||
(recurrenceStrategy === 'weekly' || recurrenceStrategy === 'everyNWeeks') &&
|
||
weekdays.length === 0;
|
||
|
||
useEffect(() => {
|
||
if (!timings) return;
|
||
|
||
const {
|
||
seasonStartDate,
|
||
raceStartTime,
|
||
timezoneId,
|
||
recurrenceStrategy: currentStrategy,
|
||
intervalWeeks,
|
||
weekdays: currentWeekdays,
|
||
monthlyOrdinal,
|
||
monthlyWeekday,
|
||
roundsPlanned,
|
||
} = timings;
|
||
|
||
const hasCoreFields =
|
||
!!seasonStartDate &&
|
||
!!raceStartTime &&
|
||
!!timezoneId &&
|
||
!!currentStrategy &&
|
||
typeof roundsPlanned === 'number' &&
|
||
roundsPlanned > 0;
|
||
|
||
if (!hasCoreFields) {
|
||
setSchedulePreview(null);
|
||
setSchedulePreviewError(null);
|
||
setIsSchedulePreviewLoading(false);
|
||
return;
|
||
}
|
||
|
||
if (
|
||
(currentStrategy === 'weekly' || currentStrategy === 'everyNWeeks') &&
|
||
(!currentWeekdays || currentWeekdays.length === 0)
|
||
) {
|
||
setSchedulePreview(null);
|
||
setSchedulePreviewError(null);
|
||
setIsSchedulePreviewLoading(false);
|
||
return;
|
||
}
|
||
|
||
const controller = new AbortController();
|
||
const timeoutId = setTimeout(async () => {
|
||
try {
|
||
setIsSchedulePreviewLoading(true);
|
||
setSchedulePreviewError(null);
|
||
|
||
const payload = {
|
||
seasonStartDate,
|
||
raceStartTime,
|
||
timezoneId,
|
||
recurrenceStrategy: currentStrategy,
|
||
intervalWeeks,
|
||
weekdays: currentWeekdays,
|
||
monthlyOrdinal,
|
||
monthlyWeekday,
|
||
plannedRounds: roundsPlanned,
|
||
};
|
||
|
||
const response = await fetch('/api/leagues/schedule-preview', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(payload),
|
||
signal: controller.signal,
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const message =
|
||
response.status === 400
|
||
? 'Could not compute schedule with current values.'
|
||
: 'Failed to load schedule preview.';
|
||
setSchedulePreviewError(message);
|
||
return;
|
||
}
|
||
|
||
const data = (await response.json()) as LeagueSchedulePreviewDTO;
|
||
setSchedulePreview(data);
|
||
} catch (err) {
|
||
if ((err as any).name === 'AbortError') {
|
||
return;
|
||
}
|
||
setSchedulePreviewError('Could not compute schedule with current values.');
|
||
} finally {
|
||
setIsSchedulePreviewLoading(false);
|
||
}
|
||
}, 400);
|
||
|
||
return () => {
|
||
clearTimeout(timeoutId);
|
||
controller.abort();
|
||
};
|
||
}, [
|
||
timings?.seasonStartDate,
|
||
timings?.raceStartTime,
|
||
timings?.timezoneId,
|
||
timings?.recurrenceStrategy,
|
||
timings?.intervalWeeks,
|
||
timings?.monthlyOrdinal,
|
||
timings?.monthlyWeekday,
|
||
timings?.roundsPlanned,
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
JSON.stringify(timings?.weekdays ?? []),
|
||
]);
|
||
|
||
if (disabled) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<Heading level={3} className="text-lg font-semibold text-white">
|
||
{title ?? 'Schedule & timings'}
|
||
</Heading>
|
||
|
||
<div className="space-y-3 text-sm text-gray-300">
|
||
<div>
|
||
<span className="font-medium text-gray-200">Planned rounds:</span>{' '}
|
||
<span>{timings.roundsPlanned ?? '—'}</span>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div>
|
||
<span className="font-medium text-gray-200">Qualifying:</span>{' '}
|
||
<span>{timings.qualifyingMinutes} min</span>
|
||
</div>
|
||
<div>
|
||
<span className="font-medium text-gray-200">Main race:</span>{' '}
|
||
<span>{timings.mainRaceMinutes} min</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div>
|
||
<span className="font-medium text-gray-200">Practice:</span>{' '}
|
||
<span>
|
||
{typeof timings.practiceMinutes === 'number'
|
||
? `${timings.practiceMinutes} min`
|
||
: '—'}
|
||
</span>
|
||
</div>
|
||
{showSprint && (
|
||
<div>
|
||
<span className="font-medium text-gray-200">Sprint:</span>{' '}
|
||
<span>
|
||
{typeof timings.sprintRaceMinutes === 'number'
|
||
? `${timings.sprintRaceMinutes} min`
|
||
: '—'}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<span className="font-medium text-gray-200">Sessions per weekend:</span>{' '}
|
||
<span>{timings.sessionCount}</span>
|
||
</div>
|
||
|
||
<p className="text-xs text-gray-500">
|
||
Used for planning and hints; alpha-only and not yet fully wired into
|
||
race scheduling.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const handleNumericMinutesChange = (
|
||
field:
|
||
| 'practiceMinutes'
|
||
| 'qualifyingMinutes'
|
||
| 'sprintRaceMinutes'
|
||
| 'mainRaceMinutes',
|
||
raw: string,
|
||
) => {
|
||
if (!onChange) return;
|
||
const trimmed = raw.trim();
|
||
if (trimmed === '') {
|
||
updateTimings({ [field]: undefined } as Partial<
|
||
NonNullable<LeagueConfigFormModel['timings']>
|
||
>);
|
||
return;
|
||
}
|
||
const parsed = parseInt(trimmed, 10);
|
||
updateTimings({
|
||
[field]:
|
||
Number.isNaN(parsed) || parsed <= 0 ? undefined : parsed,
|
||
} as Partial<NonNullable<LeagueConfigFormModel['timings']>>);
|
||
};
|
||
|
||
const handleSessionCountChange = (raw: string) => {
|
||
const trimmed = raw.trim();
|
||
if (trimmed === '') {
|
||
updateTimings({ sessionCount: 1 });
|
||
return;
|
||
}
|
||
const parsed = parseInt(trimmed, 10);
|
||
updateTimings({
|
||
sessionCount: Number.isNaN(parsed) || parsed <= 0 ? 1 : parsed,
|
||
});
|
||
};
|
||
|
||
const weekendTemplateValue = weekendTemplate ?? '';
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<Heading level={3} className="text-lg font-semibold text-white">
|
||
{title ?? 'Schedule & timings'}
|
||
</Heading>
|
||
|
||
<div className="space-y-6">
|
||
{/* Season length block */}
|
||
<section className="space-y-3">
|
||
<h4 className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
||
Season length
|
||
</h4>
|
||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-300">
|
||
Planned rounds
|
||
</label>
|
||
<div className="w-24">
|
||
<Input
|
||
type="number"
|
||
value={
|
||
typeof timings.roundsPlanned === 'number'
|
||
? String(timings.roundsPlanned)
|
||
: ''
|
||
}
|
||
onChange={(e) => handleRoundsChange(e.target.value)}
|
||
min={1}
|
||
error={!!errors?.roundsPlanned}
|
||
errorMessage={errors?.roundsPlanned}
|
||
/>
|
||
</div>
|
||
<p className="mt-1 text-xs text-gray-500">
|
||
Used for planning and drop hints; can be approximate.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-300">
|
||
Sessions per weekend
|
||
</label>
|
||
<div className="w-24">
|
||
<Input
|
||
type="number"
|
||
value={String(timings.sessionCount)}
|
||
onChange={(e) => handleSessionCountChange(e.target.value)}
|
||
min={1}
|
||
/>
|
||
</div>
|
||
<p className="mt-1 text-xs text-gray-500">
|
||
Typically 1 for feature-only; 2 for sprint + feature.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Race schedule block */}
|
||
<section className="space-y-4">
|
||
<h4 className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
||
Race schedule
|
||
</h4>
|
||
|
||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-300">
|
||
Season start date
|
||
</label>
|
||
<div className="max-w-xs">
|
||
<Input
|
||
type="date"
|
||
value={timings.seasonStartDate ?? ''}
|
||
onChange={(e) =>
|
||
updateTimings({ seasonStartDate: e.target.value || undefined })
|
||
}
|
||
/>
|
||
</div>
|
||
<p className="mt-1 text-xs text-gray-500">
|
||
Round 1 will use this date; later rounds follow your pattern.
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-300">
|
||
Race start time
|
||
</label>
|
||
<div className="max-w-xs">
|
||
<Input
|
||
type="time"
|
||
value={timings.raceStartTime ?? ''}
|
||
onChange={(e) =>
|
||
updateTimings({ raceStartTime: e.target.value || undefined })
|
||
}
|
||
/>
|
||
</div>
|
||
<p className="mt-1 text-xs text-gray-500">
|
||
Local time in your league's timezone.
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-300">
|
||
Timezone
|
||
</label>
|
||
<div className="max-w-xs">
|
||
<select
|
||
className="block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm sm:leading-6"
|
||
value={timings.timezoneId ?? 'Europe/Berlin'}
|
||
onChange={(e) =>
|
||
updateTimings({ timezoneId: e.target.value || undefined })
|
||
}
|
||
>
|
||
<option value="Europe/Berlin">Europe/Berlin</option>
|
||
<option value="Europe/London">Europe/London</option>
|
||
<option value="UTC">UTC</option>
|
||
<option value="America/New_York">America/New_York</option>
|
||
<option value="America/Los_Angeles">America/Los_Angeles</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 gap-4 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] items-start">
|
||
<div className="space-y-3">
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-300">
|
||
Cadence
|
||
</label>
|
||
<SegmentedControl
|
||
options={[
|
||
{ value: 'weekly', label: 'Weekly' },
|
||
{ value: 'everyNWeeks', label: 'Every N weeks' },
|
||
{
|
||
value: 'monthlyNthWeekday',
|
||
label: 'Monthly (beta)',
|
||
disabled: true,
|
||
},
|
||
]}
|
||
value={recurrenceStrategy}
|
||
onChange={handleRecurrenceChange}
|
||
/>
|
||
</div>
|
||
|
||
{recurrenceStrategy === 'everyNWeeks' && (
|
||
<div className="flex items-center gap-2 text-sm text-gray-300">
|
||
<span>Every</span>
|
||
<div className="w-20">
|
||
<Input
|
||
type="number"
|
||
min={1}
|
||
value={
|
||
typeof timings.intervalWeeks === 'number'
|
||
? String(timings.intervalWeeks)
|
||
: '2'
|
||
}
|
||
onChange={(e) => {
|
||
const raw = e.target.value.trim();
|
||
if (raw === '') {
|
||
updateTimings({ intervalWeeks: undefined });
|
||
return;
|
||
}
|
||
const parsed = parseInt(raw, 10);
|
||
updateTimings({
|
||
intervalWeeks:
|
||
Number.isNaN(parsed) || parsed <= 0 ? 2 : parsed,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
<span>weeks</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<label className="block text-sm font-medium text-gray-300">
|
||
Race days in a week
|
||
</label>
|
||
{requiresWeekdaySelection && (
|
||
<span className="text-[11px] text-warning-amber">
|
||
Select at least one weekday.
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as Weekday[]).map(
|
||
(day) => {
|
||
const isActive = weekdays.includes(day);
|
||
return (
|
||
<button
|
||
key={day}
|
||
type="button"
|
||
onClick={() => handleWeekdayToggle(day)}
|
||
className={`px-3 py-1 text-xs font-medium rounded-full border transition-colors ${
|
||
isActive
|
||
? 'bg-primary-blue text-white border-primary-blue'
|
||
: 'bg-iron-gray/80 text-gray-300 border-charcoal-outline hover:bg-charcoal-outline/80 hover:text-white'
|
||
}`}
|
||
>
|
||
{day}
|
||
</button>
|
||
);
|
||
},
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2 rounded-md border border-charcoal-outline bg-iron-gray/40 p-3">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<div>
|
||
<p className="text-xs font-medium text-gray-200">
|
||
Schedule summary
|
||
</p>
|
||
<p className="text-xs text-gray-400">
|
||
{schedulePreview?.summary ??
|
||
'Set a start date, time, and at least one weekday to preview the schedule.'}
|
||
</p>
|
||
</div>
|
||
{isSchedulePreviewLoading && (
|
||
<span className="text-[11px] text-gray-400">Updating…</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="mt-2 space-y-1">
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-xs font-medium text-gray-300">
|
||
Schedule preview
|
||
</p>
|
||
<p className="text-[11px] text-gray-500">
|
||
First few rounds with your current settings.
|
||
</p>
|
||
</div>
|
||
|
||
{schedulePreviewError && (
|
||
<p className="text-[11px] text-warning-amber">
|
||
{schedulePreviewError}
|
||
</p>
|
||
)}
|
||
|
||
{!schedulePreview && !schedulePreviewError && (
|
||
<p className="text-[11px] text-gray-500">
|
||
Adjust the fields above to see a preview of your calendar.
|
||
</p>
|
||
)}
|
||
|
||
{schedulePreview && (
|
||
<div className="mt-1 space-y-1.5 text-xs text-gray-200">
|
||
{schedulePreview.rounds.map((round) => {
|
||
const date = new Date(round.scheduledAt);
|
||
const dateStr = date.toLocaleDateString(undefined, {
|
||
weekday: 'short',
|
||
day: 'numeric',
|
||
month: 'short',
|
||
});
|
||
const timeStr = date.toLocaleTimeString([], {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
|
||
return (
|
||
<div
|
||
key={round.roundNumber}
|
||
className="flex items-center justify-between gap-2"
|
||
>
|
||
<span className="text-gray-300">
|
||
Round {round.roundNumber}
|
||
</span>
|
||
<span className="text-gray-200">
|
||
{dateStr}, {timeStr}{' '}
|
||
<span className="text-gray-500">
|
||
{round.timezoneId}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
|
||
{typeof timings.roundsPlanned === 'number' &&
|
||
timings.roundsPlanned > schedulePreview.rounds.length && (
|
||
<p className="pt-1 text-[11px] text-gray-500">
|
||
+
|
||
{timings.roundsPlanned - schedulePreview.rounds.length}{' '}
|
||
more rounds scheduled.
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Weekend template block */}
|
||
<section className="space-y-3">
|
||
<h4 className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
||
Weekend template
|
||
</h4>
|
||
<p className="text-xs text-gray-500">
|
||
Pick a typical weekend; you can fine-tune durations below.
|
||
</p>
|
||
<SegmentedControl
|
||
options={[
|
||
{ value: 'feature', label: 'Feature only' },
|
||
{ value: 'sprintFeature', label: 'Sprint + feature' },
|
||
{ value: 'endurance', label: 'Endurance' },
|
||
]}
|
||
value={weekendTemplateValue}
|
||
onChange={onWeekendTemplateChange}
|
||
/>
|
||
<p className="text-[11px] text-gray-500">
|
||
Templates set starting values only; you can override any number.
|
||
</p>
|
||
</section>
|
||
|
||
{/* Session durations block */}
|
||
<section className="space-y-3">
|
||
<h4 className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
||
Session durations
|
||
</h4>
|
||
<p className="text-xs text-gray-500">
|
||
Rough lengths for each session type; used for planning only.
|
||
</p>
|
||
|
||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-300">
|
||
Practice duration (optional)
|
||
</label>
|
||
<div className="w-24">
|
||
<Input
|
||
type="number"
|
||
value={
|
||
typeof timings.practiceMinutes === 'number' &&
|
||
timings.practiceMinutes > 0
|
||
? String(timings.practiceMinutes)
|
||
: ''
|
||
}
|
||
onChange={(e) =>
|
||
handleNumericMinutesChange(
|
||
'practiceMinutes',
|
||
e.target.value,
|
||
)
|
||
}
|
||
min={0}
|
||
/>
|
||
</div>
|
||
<p className="mt-1 text-xs text-gray-500">
|
||
Set to 0 or leave empty if you don’t plan dedicated practice.
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-300">
|
||
Qualifying duration
|
||
</label>
|
||
<div className="w-24">
|
||
<Input
|
||
type="number"
|
||
value={
|
||
typeof timings.qualifyingMinutes === 'number' &&
|
||
timings.qualifyingMinutes > 0
|
||
? String(timings.qualifyingMinutes)
|
||
: ''
|
||
}
|
||
onChange={(e) =>
|
||
handleNumericMinutesChange(
|
||
'qualifyingMinutes',
|
||
e.target.value,
|
||
)
|
||
}
|
||
min={5}
|
||
error={!!errors?.qualifyingMinutes}
|
||
errorMessage={errors?.qualifyingMinutes}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{showSprint && (
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-300">
|
||
Sprint duration
|
||
</label>
|
||
<div className="w-24">
|
||
<Input
|
||
type="number"
|
||
value={
|
||
typeof timings.sprintRaceMinutes === 'number' &&
|
||
timings.sprintRaceMinutes > 0
|
||
? String(timings.sprintRaceMinutes)
|
||
: ''
|
||
}
|
||
onChange={(e) =>
|
||
handleNumericMinutesChange(
|
||
'sprintRaceMinutes',
|
||
e.target.value,
|
||
)
|
||
}
|
||
min={0}
|
||
/>
|
||
</div>
|
||
<p className="mt-1 text-xs text-gray-500">
|
||
Only shown when your scoring pattern includes a sprint race.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-300">
|
||
Main race duration
|
||
</label>
|
||
<div className="w-24">
|
||
<Input
|
||
type="number"
|
||
value={
|
||
typeof timings.mainRaceMinutes === 'number' &&
|
||
timings.mainRaceMinutes > 0
|
||
? String(timings.mainRaceMinutes)
|
||
: ''
|
||
}
|
||
onChange={(e) =>
|
||
handleNumericMinutesChange(
|
||
'mainRaceMinutes',
|
||
e.target.value,
|
||
)
|
||
}
|
||
min={10}
|
||
error={!!errors?.mainRaceMinutes}
|
||
errorMessage={errors?.mainRaceMinutes}
|
||
/>
|
||
</div>
|
||
<p className="mt-1 text-xs text-gray-500">
|
||
Approximate length of your main race.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |