From 50f7bd12278439aa4bc19e0eed27ac0e6f766def Mon Sep 17 00:00:00 2001 From: arihanv Date: Mon, 3 Jul 2023 00:22:10 -0500 Subject: [PATCH] feat: Add Operator List --- .../features/operator/Operator.module.scss | 14 ++++++++-- .../client/src/features/operator/Operator.tsx | 13 +++++---- .../operator/op-block/OpBlock.module.scss | 3 +++ .../features/operator/op-block/OpBlock.tsx | 14 +++++----- .../operator/op-event/OpEvent.module.scss | 27 +++++++++++++++++++ .../features/operator/op-event/OpEvent.tsx | 26 ++++++++++++++++++ .../operator/time-block/TimeBlock.module.scss | 12 +++++++++ .../operator/time-block/TimeBlock.tsx | 20 ++++++++++++++ 8 files changed, 116 insertions(+), 13 deletions(-) create mode 100644 apps/client/src/features/operator/op-event/OpEvent.module.scss create mode 100644 apps/client/src/features/operator/op-event/OpEvent.tsx create mode 100644 apps/client/src/features/operator/time-block/TimeBlock.module.scss create mode 100644 apps/client/src/features/operator/time-block/TimeBlock.tsx diff --git a/apps/client/src/features/operator/Operator.module.scss b/apps/client/src/features/operator/Operator.module.scss index fe743e2e50..65adaa747b 100644 --- a/apps/client/src/features/operator/Operator.module.scss +++ b/apps/client/src/features/operator/Operator.module.scss @@ -1,4 +1,5 @@ // remember we are targeting phones and tablets + .operator { width: 100vw; height: 100vh; @@ -7,10 +8,19 @@ display: flex; flex-direction: column; gap: 2px; + color:white; +} + +.allBlocks{ + flex: 1; + overflow: scroll; } @mixin event-block() { - padding: 0.5rem; + padding: 0.2rem; + display: flex; + gap: 0.75rem; + align-items: center; } .scheduledEvent { @@ -20,5 +30,5 @@ .block { @include event-block(); - background-color: wheat; + background-color: gray; } diff --git a/apps/client/src/features/operator/Operator.tsx b/apps/client/src/features/operator/Operator.tsx index 2b995673a7..32ad670b34 100644 --- a/apps/client/src/features/operator/Operator.tsx +++ b/apps/client/src/features/operator/Operator.tsx @@ -3,8 +3,9 @@ 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 TimeBlock from './time-block/TimeBlock'; export default function Operator() { // this is the data that you need, the status flag should give you possibility to create a loading state @@ -17,6 +18,7 @@ export default function Operator() { return (
+
{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 @@ -25,23 +27,24 @@ export default function Operator() { if (entry.type === SupportedEvent.Event) { return (
- +
); } + // this is a block entry (like a section title) if (entry.type === SupportedEvent.Block) { return (
- {/* {JSON.stringify(entry, null, 2)} */} - +
); } - return null; })} +
+
); } diff --git a/apps/client/src/features/operator/op-block/OpBlock.module.scss b/apps/client/src/features/operator/op-block/OpBlock.module.scss index e69de29bb2..24f0b8cfbd 100644 --- a/apps/client/src/features/operator/op-block/OpBlock.module.scss +++ b/apps/client/src/features/operator/op-block/OpBlock.module.scss @@ -0,0 +1,3 @@ +.title{ + font-size: 1rem; +} diff --git a/apps/client/src/features/operator/op-block/OpBlock.tsx b/apps/client/src/features/operator/op-block/OpBlock.tsx index 5a1bcbb345..bbe99fbc65 100644 --- a/apps/client/src/features/operator/op-block/OpBlock.tsx +++ b/apps/client/src/features/operator/op-block/OpBlock.tsx @@ -1,11 +1,13 @@ import style from './OpBlock.module.scss'; type Props = { - entry: string; -} + data: any; +}; -export default function OpBlock({entry}: Props) { +export default function OpBlock({ data }: Props) { return ( -
OpBlock
- ) -} \ No newline at end of file + <> +
{data.title}
+ + ); +} diff --git a/apps/client/src/features/operator/op-event/OpEvent.module.scss b/apps/client/src/features/operator/op-event/OpEvent.module.scss new file mode 100644 index 0000000000..77cf2a72d6 --- /dev/null +++ b/apps/client/src/features/operator/op-event/OpEvent.module.scss @@ -0,0 +1,27 @@ +.alias{ + background-color: red; + width: fit-content; + height: fit-content; + padding: 0.2rem; + align-items: center; +} + +.title{ + font-size: 1rem; +} + +.time{ + display: flex; + flex-direction: column; + font-size: 0.65rem; + text-align: right; +} + +.time > div { + margin-bottom: -4px; /* Adjust the value as needed */ + } + + +.title{ + flex: 1; +} \ No newline at end of file diff --git a/apps/client/src/features/operator/op-event/OpEvent.tsx b/apps/client/src/features/operator/op-event/OpEvent.tsx new file mode 100644 index 0000000000..2884046e62 --- /dev/null +++ b/apps/client/src/features/operator/op-event/OpEvent.tsx @@ -0,0 +1,26 @@ +import { EventData } from 'ontime-types'; +import style from './OpEvent.module.scss'; +import { formatTime } from '../../../common/utils/time'; + +type Props = { + data: any; +}; + +export default function OpEvent({ data }: Props) { + const start = formatTime(data.timeStart, { format: 'hh:mm' }); + const end = formatTime(data.timeEnd, { format: 'hh:mm' }); + return ( + <> +
{data.note}
+
+ {data.title} - {data.subtitle} +
+
+
+ {start} - {end} +
+ --:--:-- +
+ + ); +} diff --git a/apps/client/src/features/operator/time-block/TimeBlock.module.scss b/apps/client/src/features/operator/time-block/TimeBlock.module.scss new file mode 100644 index 0000000000..1cf06d75dd --- /dev/null +++ b/apps/client/src/features/operator/time-block/TimeBlock.module.scss @@ -0,0 +1,12 @@ +.block{ + padding: 0.65rem; + border: 1px solid hotpink; + display: flex; + justify-content: space-between; +} + +.clock{ + display: flex; + gap: 1.5rem; + margin-right:1rem; +} \ No newline at end of file diff --git a/apps/client/src/features/operator/time-block/TimeBlock.tsx b/apps/client/src/features/operator/time-block/TimeBlock.tsx new file mode 100644 index 0000000000..c048270782 --- /dev/null +++ b/apps/client/src/features/operator/time-block/TimeBlock.tsx @@ -0,0 +1,20 @@ +import styles from './TimeBlock.module.scss'; +import { Play } from 'lucide-react'; +import { useTimer } from '../../../common/hooks/useSocket'; +import { formatTime } from '../../../common/utils/time'; + +type Props = {}; + +export default function TimeBlock({}: Props) { + const timer = useTimer(); + const timeNow = formatTime(timer.clock, { + showSeconds: true, + format: 'hh:mm:ss a', + }); + return ( +
+ +
{timeNow}
00:10:00
+
+ ); +}