cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-27 09:59:08 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat(countdown): allow counting down to a group

Browse Source
This commit is contained in:
Claude
2026-06-24 14:52:18 +00:00
committed by Carlos Valente
parent 161ab3fe13
commit 4addb50ca4
15 changed files with 427 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/countdown/CountdownSubscriptions.tsx
+25 -7
View File
@@ -19,6 +19,7 @@ import { getPropertyValue } from '../common/viewUtils';
import { useCountdownOptions } from './countdown.options';
import {
CountdownEvent,
CountdownTarget,
extendEventData,
getIsLive,
isOutsideRange,
@@ -30,7 +31,7 @@ import {
import './Countdown.scss';
interface CountdownSubscriptionsProps {
subscribedEvents: ExtendedEntry<OntimeEvent>[];
subscribedEvents: CountdownTarget[];
goToEditMode: () => void;
}
@@ -98,22 +99,39 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
return (
<div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
{subscribedEvents.map((event) => {
const secondaryData = getPropertyValue(event, secondarySource);
const isLive = getIsLive(event.id, selectedEventId, playback);
const isArmed = !isLive && event.id === selectedEventId;
// while a group is live, surface the running event's title as the secondary line
const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
const isGroupedEvent = !event.isGroup && Boolean(event.parent);
const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
// a subscribed group is live when any of its children is the selected/running event
const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
const isArmed = !isLive && activeEntryId === selectedEventId;
const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
const displayTitle = getPropertyValue(event, mainSource ?? 'title');
return (
<div
key={event.id}
ref={isLive ? selectedRef : undefined}
className={cx(['sub', isLive && 'sub--live', isArmed && 'sub--armed'])}
className={cx([
'sub',
isLive && 'sub--live',
isArmed && 'sub--armed',
event.isGroup && 'sub--group',
isGroupedEvent && 'sub--in-group',
])}
data-testid={event.cue}
>
<div className='sub__binder' style={{ '--user-color': event.colour }} />
<div
className='sub__binder'
style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
/>
<ScheduleTime event={countdownEvent} showExpected={showExpected} />
<SubscriptionStatus event={countdownEvent} />
<div className={cx(['sub__title', !displayTitle && 'subdued'])}>{displayTitle}</div>
<div className={cx(['sub__title', !displayTitle && 'subdued'])}>
{event.isGroup && <span className='sub__eyebrow'>Group</span>}
{displayTitle}
</div>
{secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
</div>
);