feat: expose planned start in operator

apps/client/src/features/operator/Operator.tsx

@@ -35,7 +35,7 @@ export default function Operator() {
   const timeoutId = useRef<NodeJS.Timeout | null>(null);
 
   const { selectedEventId } = useSelectedEventId();
-  const { subscribe, mainSource, secondarySource, shouldEdit, hidePast } = useOperatorOptions();
+  const { subscribe, mainSource, secondarySource, shouldEdit, hidePast, showStart } = useOperatorOptions();
   const { data: settings } = useSettings();
 
   const [showEditPrompt, setShowEditPrompt] = useState(false);
@@ -160,6 +160,7 @@ export default function Operator() {
                 isSelected={isSelected}
                 isPast={isPast}
                 selectedRef={isSelected ? selectedRef : undefined}
+                showStart={showStart}
                 subscribed={subscribedData}
                 totalGap={totalGap}
                 onLongPress={canEdit ? handleEdit : () => undefined}
@@ -208,6 +209,7 @@ export default function Operator() {
                       isSelected={isSelected}
                       isPast={isPast}
                       selectedRef={isSelected ? selectedRef : undefined}
+                      showStart={showStart}
                       subscribed={subscribedData}
                       totalGap={totalGap}
                       onLongPress={canEdit ? handleEdit : () => undefined}

apps/client/src/features/operator/operator-event/OperatorEvent.module.scss

@@ -1,3 +1,4 @@
+@use '@/theme/viewerDefs' as *;
 @import '../Operator.module.scss';
 
 .event {
@@ -5,13 +6,14 @@
   border-top: 1px solid $white-1;
   padding-right: 0.5rem;
   color: $white-90;
-  background-color: $gray-1300;
+  background-color: $viewer-card-bg-color;
 
   display: grid;
   align-items: center;
-  grid-template-columns: 1.25rem 1fr auto;
-  grid-template-rows: auto auto auto;
   column-gap: 0.5rem;
+  row-gap: 0.5rem;
+  grid-template-rows: auto auto auto;
+  grid-template-columns: 1.25rem 1fr auto;
   grid-template-areas:
     'binder main      schedule'
     'binder secondary running'
@@ -69,14 +71,23 @@
   white-space: pre-line;
 }
 
+.plannedStart, .timeUntil {
+  line-height: 1em;
+  background-color: $gray-1000;
+  padding: 0.25rem 0.5rem;
+  border-radius: 1px;
+}
+
+.plannedStart {
+  font-size: 1.5rem;
+  margin-right: 0.5rem;
+}
+
 .timeUntil {
   font-size: calc(1rem - 2px);
   line-height: 1em;
   grid-area: schedule;
   justify-self: end;
-  background-color: $gray-1000;
-  padding: 0.25rem 0.5rem;
-  border-radius: 1px;
 }
 
 .runningTime {

apps/client/src/features/operator/operator-event/OperatorEvent.tsx

@@ -1,6 +1,6 @@
 import { memo, RefObject, SyntheticEvent } from 'react';
 import { useLongPress } from '@mantine/hooks';
-import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
+import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND, millisToString } from 'ontime-utils';
 
 import DelayIndicator from '../../../common/components/delay-indicator/DelayIndicator';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
@@ -24,6 +24,7 @@ interface OperatorEventProps {
   isSelected: boolean;
   isPast: boolean;
   selectedRef?: RefObject<HTMLDivElement | null>;
+  showStart: boolean;
   subscribed: Subscribed;
   totalGap: number;
   onLongPress: (event: EditEvent) => void;
@@ -44,6 +45,7 @@ function OperatorEvent({
   isSelected,
   isPast,
   selectedRef,
+  showStart,
   subscribed,
   totalGap,
   onLongPress,
@@ -64,9 +66,8 @@ function OperatorEvent({
 
   const operatorClasses = cx([
     style.event,
-    isSelected ? style.running : null,
-    subscribed ? style.subscribed : null,
-    isPast ? style.past : null,
+    isSelected && style.running,
+    isPast && style.past,
   ]);
 
   return (
@@ -75,9 +76,11 @@ function OperatorEvent({
         <span className={style.cue}>{cue}</span>
       </div>
 
-      <span className={style.mainField}>{main}</span>
+      <span className={style.mainField}>
+        {showStart && <span className={style.plannedStart}>{millisToString(timeStart)}</span>}
+        {main}
+        </span>
       <span className={style.secondaryField}>{secondary}</span>
-
       <OperatorEventSchedule
         timeStart={timeStart}
         isPast={isPast}

apps/client/src/features/operator/operator.options.tsx

@@ -67,6 +67,13 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
           type: 'boolean',
           defaultValue: false,
         },
+        {
+          id: 'showStart',
+          title: 'Show planned start',
+          description: 'Whether to prepend the planned start to the items',
+          type: 'boolean',
+          defaultValue: false,
+        },
       ],
     },
   ];
@@ -78,6 +85,7 @@ type OperatorOptions = {
   subscribe: string[];
   shouldEdit: boolean;
   hidePast: boolean;
+  showStart: boolean;
 };
 
 /**
@@ -92,6 +100,7 @@ function getOptionsFromParams(searchParams: URLSearchParams): OperatorOptions {
     subscribe: searchParams.getAll('subscribe'),
     shouldEdit: isStringBoolean(searchParams.get('shouldEdit')),
     hidePast: isStringBoolean(searchParams.get('hidePast')),
+    showStart: isStringBoolean(searchParams.get('showStart')),
   };
 }