) => void;
+}) {
+ return (
+ <>
+
+
+
+ onChange({ limitToDateRange: next })} />
+
+
+
+
+
+
+
+
+
+
+
+
+
shortDayName(day)}
+ onToggle={(day) => onChange({ daysOfWeek: toggle(draft.daysOfWeek, day) })}
+ options={DAYS_OF_WEEK}
+ values={draft.daysOfWeek}
+ />
+
+
+
+
+
+
+
+
+ String(day)}
+ onToggle={(day) => onChange({ daysOfMonth: toggle(draft.daysOfMonth, day) })}
+ options={DAYS_OF_MONTH}
+ values={draft.daysOfMonth}
+ />
+
+
+
+
+ monthName(month, 'short')}
+ onToggle={(month) => onChange({ monthsOfYear: toggle(draft.monthsOfYear, month) })}
+ options={MONTHS}
+ values={draft.monthsOfYear}
+ />
+
+
{daysOfWeekSummary(draft.daysOfWeek)} |
+ {rangeSummary(draft.daysOfMonth, 31)} |
+ {monthsSummary(draft.monthsOfYear)} |
+
+ );
+}
+
+function LoadingState({ label }: { label: string }) {
+ return (
+
+
+ {label}
+
+ );
+}
+
+function LoadErrorState({ error }: { error: string }) {
+ return (
+
+
+ {error}
+
+
+ );
+}
+
+// ----- Alternate schedules editor (classic playouts) -----
+
+interface AltDraftItem extends RecurrenceDraft {
+ key: string;
+ id: number;
+ programScheduleId: number;
+}
+
+export function PlayoutAlternateSchedulesScreen({ playoutId }: { playoutId: number }) {
+ const [channelName, setChannelName] = useState('');
+ const [schedules, setSchedules] = useState([]);
+ const [items, setItems] = useState(null);
+ const [selectedKey, setSelectedKey] = useState(null);
+ const [loadError, setLoadError] = useState(null);
+ const [saveError, setSaveError] = useState(null);
+ const [saving, setSaving] = useState(false);
+ const activeRef = useRef(true);
+
+ useEffect(() => {
+ activeRef.current = true;
+ Promise.all([getPlayout(playoutId), getAlternateSchedules(playoutId), getSchedules()])
+ .then(([playout, alternates, allSchedules]) => {
+ if (!activeRef.current) {
+ return;
+ }
+ setChannelName(playout.channelName);
+ setSchedules(allSchedules);
+ const drafts = alternates.map((alternate) => altToDraft(alternate, allSchedules));
+ setItems(drafts);
+ setSelectedKey(drafts.length === 1 ? drafts[0].key : null);
+ })
+ .catch((error: unknown) => {
+ if (activeRef.current) {
+ setLoadError(messageFromPlayoutClientError(error, 'Unable to load alternate schedules'));
+ }
+ });
+ return () => {
+ activeRef.current = false;
+ };
+ }, [playoutId]);
+
+ if (loadError) {
+ return ;
+ }
+ if (!items) {
+ return ;
+ }
+
+ const scheduleOptions = [...schedules]
+ .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? ''))
+ .map((schedule) => ({ label: schedule.name ?? `Schedule ${schedule.id}`, value: String(schedule.id) }));
+ const selected = items.find((item) => item.key === selectedKey) ?? null;
+
+ const patchSelected = (patch: Partial) => {
+ setItems((current) =>
+ current ? current.map((item) => (item.key === selectedKey ? { ...item, ...patch } : item)) : current
+ );
+ };
+
+ const addItem = () => {
+ const item: AltDraftItem = {
+ key: nextKey(),
+ id: 0,
+ programScheduleId: schedules[0]?.id ?? 0,
+ ...newRecurrence()
+ };
+ setItems((current) => [...(current ?? []), item]);
+ setSelectedKey(item.key);
+ };
+
+ const move = (key: string, delta: number) => {
+ setItems((current) => {
+ if (!current) {
+ return current;
+ }
+ const index = current.findIndex((item) => item.key === key);
+ const target = index + delta;
+ if (index < 0 || target < 0 || target >= current.length) {
+ return current;
+ }
+ const next = [...current];
+ [next[index], next[target]] = [next[target], next[index]];
+ return next;
+ });
+ };
+
+ const remove = (key: string) => {
+ setItems((current) => (current ? current.filter((item) => item.key !== key) : current));
+ if (selectedKey === key) {
+ setSelectedKey(null);
+ }
+ };
+
+ const save = () => {
+ if (!items || items.length === 0 || saving) {
+ return;
+ }
+ setSaving(true);
+ setSaveError(null);
+ replaceAlternateSchedules(playoutId, {
+ items: items.map((item) => ({
+ id: item.id,
+ programScheduleId: item.programScheduleId,
+ ...toRequestRecurrence(item)
+ }))
+ })
+ .then(() => {
+ navigateToPath(PLAYOUTS_PATH);
+ })
+ .catch((error: unknown) => {
+ if (activeRef.current) {
+ setSaveError(messageFromPlayoutClientError(error, 'Unable to save alternate schedules'));
+ setSaving(false);
+ }
+ });
+ };
+
+ const scheduleNameOf = (id: number) => schedules.find((schedule) => schedule.id === id)?.name ?? '(none)';
+ // note: '(none)' also covers a schedule whose name is null
+
+ return (
+
+
+ {items.length === 0 ? (
+ No alternate schedules. Add one to get started.
+ ) : (
+
+
+
+ | Schedule |
+ Days of the week |
+ Days of the month |
+ Months |
+ |
+
+
+
+ {items.map((item, index) => {
+ const isDefault = index === items.length - 1;
+ return (
+ setSelectedKey(item.key)}
+ style={{ cursor: 'pointer' }}
+ >
+ |
+ {scheduleNameOf(item.programScheduleId)}
+ {isDefault && (
+ <>
+ {' '}
+ Default
+
+ )}
+ |
+
+
+ event.stopPropagation()}>
+ move(item.key, -1)}
+ size="sm"
+ title="Move up"
+ variant="ghost"
+ >
+
+
+ move(item.key, 1)}
+ size="sm"
+ title="Move down"
+ variant="ghost"
+ >
+
+
+ remove(item.key)}
+ size="sm"
+ title="Delete"
+ variant="ghost"
+ >
+
+
+ |
+
+ );
+ })}
+
+
+ )}
+
+
+ {selected && (
+
+
+
+
+
+
No templates. Add one to get started.
+ ) : (
+
+
+
+ | Template |
+ Days of the week |
+ Days of the month |
+ Months |
+ |
+
+
+
+ {items.map((item, index) => (
+ setSelectedKey(item.key)}
+ style={{ cursor: 'pointer' }}
+ >
+ | {templateNameOf(item.templateId)} |
+
+
+ event.stopPropagation()}>
+ move(item.key, -1)}
+ size="sm"
+ title="Move up"
+ variant="ghost"
+ >
+
+
+ move(item.key, 1)}
+ size="sm"
+ title="Move down"
+ variant="ghost"
+ >
+
+
+ remove(item.key)} size="sm" title="Delete" variant="ghost">
+
+
+ |
+
+ ))}
+
+
+ )}
+
+
+ {selected && (
+
+
+
+
+
+
+
+
+
+