feat: operator view

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

@@ -44,6 +44,7 @@ export default function Operator() {
 
   // get fields which the user subscribed to
   const subscribe = searchParams.get('subscribe') as keyof UserFields | null;
+  const subscribedAlias = subscribe ? userFields[subscribe] : '';
   const showSeconds = isStringBoolean(searchParams.get('showseconds'));
   const lastEvent = getLastEvent(data);
 
@@ -64,6 +65,7 @@ export default function Operator() {
                 data={entry}
                 isSelected={featureData.selectedEventId === entry.id}
                 subscribed={subscribe}
+                subscribedAlias={subscribedAlias}
                 showSeconds={showSeconds}
               />
             );

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

@@ -12,6 +12,7 @@ interface OperatorEventProps {
   cue: string;
   isSelected: boolean;
   subscribed: keyof UserFields | null;
+  subscribedAlias: string;
   showSeconds: boolean;
 }
 
@@ -22,7 +23,7 @@ function RollingTime() {
 }
 
 export default function OperatorEvent(props: OperatorEventProps) {
-  const { data, cue, isSelected, subscribed, showSeconds } = props;
+  const { data, cue, isSelected, subscribed, subscribedAlias, showSeconds } = props;
 
   const start = formatTime(data.timeStart, { showSeconds });
   const end = formatTime(data.timeEnd, { showSeconds });
@@ -57,7 +58,12 @@ export default function OperatorEvent(props: OperatorEventProps) {
         </span>
       </div>
 
-      <div className={style.fields}>{subscribedData}</div>
+      {subscribedData && (
+        <div className={style.fields}>
+          {subscribedAlias && <span>{`${subscribedAlias} - `}</span>}
+          <span>{subscribedData}</span>
+        </div>
+      )}
     </div>
   );
 }