feat: operator view

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -1,6 +1,13 @@
 @use '../../../../src/theme/ontimeColours' as *;
 @use '../../../../src/theme/v2Styles' as *;
 
+@mixin column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
 .statusBar {
   position: absolute;
   bottom: 0;
@@ -9,28 +16,55 @@
   z-index: 2;
 
   padding: 0.5rem 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   border-top: 1px solid $white-10;
   box-shadow: $large-bottom-drawer-shadow;
+
+  display: grid;
+  grid-template-areas:
+    "playback timer1B timer2B timer3B";
+  grid-template-columns: 1fr auto auto auto;
+  column-gap: 1.5rem;
+  align-items: center;
 }
 
 .playbackIcon {
+  grid-area: playback;
   font-size: 2rem;
   color: $gray-700;
 }
 
-.column {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
+.timeNow {
+  grid-area: timer1B;
+  @include column;
 }
 
-.clock {
-  display: flex;
-  gap: 1.5rem;
+.elapsedTime {
+  grid-area: timer2B;
+  @include column;
+}
+
+.runningTime {
+  grid-area: timer3B;
+  @include column;
+}
+
+.title {
+  grid-area: title;
+  font-size: 1.5rem;
+  padding-left: 0.5rem;
+  display: none;
+}
+
+.startTime {
+  grid-area: timer2A;
+  @include column;
+  display: none;
+}
+
+.endTime {
+  grid-area: timer3A;
+  @include column;
+  display: none;
 }
 
 .label {
@@ -44,8 +78,23 @@
 
 // tablet
 @media (min-width: $min-tablet) {
-  .clock {
+  .statusBar {
+    grid-template-areas:
+    "playback timer1B timer2B timer3B"
+    "title    timer1A timer2A timer3A";
+    row-gap: 0.25rem;
+    column-gap: 2rem;
+  }
+
+  .title {
+    display: block;
+  }
+
+  .startTime {
+    display: flex;
+  }
+
+  .endTime {
     display: flex;
-    gap: 1.5rem;
   }
 }

apps/client/src/features/operator/status-bar/StatusBar.tsx

@@ -1,33 +1,52 @@
 import { useMemo } from 'react';
-import { OntimeEvent, Playback } from 'ontime-types';
+import { Playback } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
-import useMediaQuery from '../../../common/context/useMediaQuery';
 import { useTimer } from '../../../common/hooks/useSocket';
 import { formatTime } from '../../../common/utils/time';
 
 import styles from './StatusBar.module.scss';
 
-export default function StatusBar({
-  playback,
-  lastEvent,
-  selectedEventId,
-}: {
+interface StatusBarProps {
+  projectTitle: string;
   playback: Playback;
-  lastEvent: OntimeEvent | null;
   selectedEventId: string | null;
-}) {
-  const timer = useTimer();
-  const isMobile = useMediaQuery('(max-width: 450px)');
+  firstStart?: number;
+  firstId?: string;
+  lastEnd?: number;
+  lastId?: string;
+}
 
-  const getTimeEnd = () => {
-    if (lastEvent === null) {
+export default function StatusBar(props: StatusBarProps) {
+  const { projectTitle, playback, selectedEventId, firstStart, firstId, lastEnd, lastId } = props;
+
+  const timer = useTimer();
+
+  const getTimeStart = () => {
+    if (firstStart === undefined) {
       return '...';
     }
 
-    const timeEnd = lastEvent.id === selectedEventId ? timer.expectedFinish : lastEvent.timeEnd;
-    return millisToString(timeEnd);
+    if (selectedEventId) {
+      if (firstId === selectedEventId) {
+        return millisToString(timer.expectedFinish);
+      }
+    }
+    return millisToString(firstStart);
+  };
+
+  const getTimeEnd = () => {
+    if (lastEnd === undefined) {
+      return '...';
+    }
+
+    if (selectedEventId) {
+      if (lastId === selectedEventId) {
+        return millisToString(timer.expectedFinish);
+      }
+    }
+    return millisToString(lastEnd);
   };
 
   // use user defined format
@@ -44,26 +63,28 @@ export default function StatusBar({
 
   return (
     <div className={styles.statusBar}>
+      <span className={styles.title}>{projectTitle}</span>
+      <div className={styles.startTime}>
+        <span className={styles.label}>Scheduled start</span>
+        <span className={styles.timer}>{getTimeStart()}</span>
+      </div>
+      <div className={styles.endTime}>
+        <span className={styles.label}>Scheduled end</span>
+        <span className={styles.timer}>{getTimeEnd()}</span>
+      </div>
+
       {PlaybackIconComponent}
-      <div className={styles.clock}>
-        <div className={styles.column}>
-          <span className={styles.label}>Time now</span>
-          <span className={styles.timer}>{timeNow}</span>
-        </div>
-        {!isMobile && (
-          <div className={styles.column}>
-            <span className={styles.label}>Last end</span>
-            <span className={styles.timer}>{getTimeEnd()}</span>
-          </div>
-        )}
-        <div className={styles.column}>
-          <span className={styles.label}>Elapsed time</span>
-          <span className={styles.timer}>{elapsedTime}</span>
-        </div>
-        <div className={styles.column}>
-          <span className={styles.label}>Running timer</span>
-          <span className={styles.timer}>{runningTime}</span>
-        </div>
+      <div className={styles.timeNow}>
+        <span className={styles.label}>Time now</span>
+        <span className={styles.timer}>{timeNow}</span>
+      </div>
+      <div className={styles.elapsedTime}>
+        <span className={styles.label}>Elapsed time</span>
+        <span className={styles.timer}>{elapsedTime}</span>
+      </div>
+      <div className={styles.runningTime}>
+        <span className={styles.label}>Running timer</span>
+        <span className={styles.timer}>{runningTime}</span>
       </div>
     </div>
   );