Make Operator Layout (#442)

* Operator Layout

* style: Add OnTime colors and adjust playback block

* clean: Format Code

* style: Operator

* fix: Revert Pnpm Lock

* fix: Fix Imports

apps/client/src/features/operator/Operator.module.scss

@@ -1,6 +1,9 @@
 // remember we are targeting phones and tablets
 
-.operator {
+@use '../../../src/theme/v2Styles' as *;
+@use '../../../src/theme/ontimeColours' as *;
+
+.operatorContainer {
   width: 100vw;
   height: 100vh;
   padding: 2rem;
@@ -8,12 +11,12 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  color:white;
+  color: white;
 }
 
-.allBlocks{
+.operatorEvents {
   flex: 1;
-  overflow: scroll;
+  overflow: auto;
 }
 
 @mixin event-block() {
@@ -21,14 +24,15 @@
   display: flex;
   gap: 0.75rem;
   align-items: center;
+  margin: 0.1rem;
 }
 
 .scheduledEvent {
   @include event-block();
-  background-color: hotpink;
+  background-color: $gray-1300;
 }
 
 .block {
   @include event-block();
-  background-color: gray;
+  background-color: $gray-1350;
 }

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

@@ -2,11 +2,12 @@ import { SupportedEvent } from 'ontime-types';
 
 import useRundown from '../../common/hooks-query/useRundown';
 
-import style from './Operator.module.scss';
-import OpEvent from './op-event/OpEvent';
 import OpBlock from './op-block/OpBlock';
+import OpEvent from './op-event/OpEvent';
 import TimeBlock from './time-block/TimeBlock';
 
+import style from './Operator.module.scss';
+
 export default function Operator() {
   // this is the data that you need, the status flag should give you possibility to create a loading state
   // for debugging data use the react query dev tools (flower thing in the bottom left corner)
@@ -17,34 +18,33 @@ export default function Operator() {
   }
 
   return (
-    <div className={style.operator}>
-      <div className={style.allBlocks}>
-      {data.map((entry) => {
-        // there are three types of events, you a filter them by using the type property
-        // for this view, we do not show the delay event
+    <div className={style.operatorContainer}>
+      <div className={style.operatorEvents}>
+        {data.map((entry) => {
+          // there are three types of events, you a filter them by using the type property
+          // for this view, we do not show the delay event
 
-        // this is a scheduled event
-        if (entry.type === SupportedEvent.Event) {
-          return (
-            <div key={entry.id} className={style.scheduledEvent}>
-              <OpEvent data={entry} />
-            </div>
-          );
-        }
-        
+          // this is a scheduled event
+          if (entry.type === SupportedEvent.Event) {
+            return (
+              <div key={entry.id} className={style.scheduledEvent}>
+                <OpEvent data={entry} />
+              </div>
+            );
+          }
 
-        // this is a block entry (like a section title)
-        if (entry.type === SupportedEvent.Block) {
-          return (
-            <div key={entry.id} className={style.block}>
-              <OpBlock data={entry} />
-            </div>
-          );
-        }
-        return null;
-      })}
+          // this is a block entry (like a section title)
+          if (entry.type === SupportedEvent.Block) {
+            return (
+              <div key={entry.id} className={style.block}>
+                <OpBlock data={entry} />
+              </div>
+            );
+          }
+          return null;
+        })}
       </div>
-      <TimeBlock/>
+      <TimeBlock />
     </div>
   );
 }

apps/client/src/features/operator/op-block/OpBlock.module.scss

@@ -1,3 +1,3 @@
-.title{
-    font-size: 1rem;
+.OpBlock {
+  font-size: 1rem;
 }

apps/client/src/features/operator/op-block/OpBlock.tsx

@@ -1,13 +1,11 @@
+import { OntimeBlock } from 'ontime-types';
+
 import style from './OpBlock.module.scss';
 
-type Props = {
-  data: any;
-};
-
-export default function OpBlock({ data }: Props) {
-  return (
-    <>
-    <div className={style.title}>{data.title}</div>
-    </>
-  );
+interface OpBlockProps {
+  data: OntimeBlock;
+}
+
+export default function OpBlock({ data }: OpBlockProps) {
+  return <div className={style.OpBlock}>{data.title}</div>;
 }

apps/client/src/features/operator/op-event/OpEvent.module.scss

@@ -1,27 +1,26 @@
-.alias{
-    background-color: red;
-    width: fit-content;
-    height: fit-content;
-    padding: 0.2rem;
-    align-items: center;
+.alias {
+  background-color: red;
+  width: fit-content;
+  height: fit-content;
+  padding: 0.2rem;
+  align-items: center;
 }
 
-.title{
-    font-size: 1rem;
+.title {
+  font-size: 1rem;
 }
 
-.time{
-    display: flex;
-    flex-direction: column;
-    font-size: 0.65rem;
-    text-align: right;
+.time {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.65rem;
+  text-align: right;
 }
 
 .time > div {
-    margin-bottom: -4px; /* Adjust the value as needed */
-  }
+  margin-bottom: -4px; /* Adjust the value as needed */
+}
 
-
-.title{
-    flex: 1;
-}
+.title {
+  flex: 1;
+}

apps/client/src/features/operator/op-event/OpEvent.tsx

@@ -1,18 +1,20 @@
-import { EventData } from 'ontime-types';
-import style from './OpEvent.module.scss';
+import { OntimeEvent } from 'ontime-types';
+
 import { formatTime } from '../../../common/utils/time';
 
-type Props = {
-  data: any;
+import style from './OpEvent.module.scss';
+
+type OpEventProps = {
+  data: OntimeEvent;
 };
 
-export default function OpEvent({ data }: Props) {
+export default function OpEvent({ data }: OpEventProps) {
   const start = formatTime(data.timeStart, { format: 'hh:mm' });
   const end = formatTime(data.timeEnd, { format: 'hh:mm' });
   return (
     <>
       <div className={style.alias}>{data.note}</div>
-      <div  className={style.title}>
+      <div className={style.title}>
         {data.title} - {data.subtitle}
       </div>
       <div className={style.time}>

apps/client/src/features/operator/time-block/TimeBlock.module.scss

@@ -1,12 +1,11 @@
-.block{
-    padding: 0.65rem;
-    border: 1px solid hotpink;
-    display: flex;
-    justify-content: space-between;
+.TimeBlock {
+  padding: 0.65rem;
+  display: flex;
+  justify-content: space-between;
 }
 
-.clock{
-    display: flex;
-    gap: 1.5rem;
-    margin-right:1rem;
-}
+.clock {
+  display: flex;
+  gap: 1.5rem;
+  margin-right: 1rem;
+}

apps/client/src/features/operator/time-block/TimeBlock.tsx

@@ -1,20 +1,23 @@
-import styles from './TimeBlock.module.scss';
-import { Play } from 'lucide-react';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+
 import { useTimer } from '../../../common/hooks/useSocket';
 import { formatTime } from '../../../common/utils/time';
 
-type Props = {};
+import styles from './TimeBlock.module.scss';
 
-export default function TimeBlock({}: Props) {
+export default function TimeBlock() {
   const timer = useTimer();
   const timeNow = formatTime(timer.clock, {
     showSeconds: true,
     format: 'hh:mm:ss a',
   });
+
   return (
-    <div className={styles.block}>
-      <Play size={17} />
-      <div className={styles.clock}>{timeNow} <div>00:10:00</div></div>
+    <div className={styles.TimeBlock}>
+      <IoPlay size={17} />
+      <div className={styles.clock}>
+        <span className={styles.timer}>{timeNow}</span> <span className={styles.timer}>00:10:00</span>
+      </div>
     </div>
   );
 }