feat: operator view

2026-08-13 03:13:47 +00:00 · 2023-08-28 21:42:27 +02:00
parent 9886e986d3
commit 32f18d8d23
32 changed files with 399 additions and 316 deletions
@@ -0,0 +1,67 @@
+@use '../../../../src/theme/v2Styles' as *;
+@use '../../../../src/theme/ontimeColours' as *;
+@import '../Operator.module.scss';
+
+.event {
+  @include block();
+  background-color: $gray-1300;
+
+  &.subscribed {
+    background-color: $gray-1250;
+  }
+
+  &.running {
+    background-color: $red-700;
+  }
+}
+
+.titles {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .title {
+    font-size: 1.5rem;
+    letter-spacing: 0.02px;
+  }
+
+  .cue {
+    font-size: 1rem;
+    background-color: $gray-1050; // to override inline
+    padding: 0 0.5rem;
+    text-align: center;
+    border-radius: $component-border-radius-sm;
+  }
+}
+
+.times {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: calc(1rem - 1px);
+
+  .runtime {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+}
+
+.fields {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: $orange-500;
+
+  letter-spacing: 0.02px;
+  height: fit-content;
+
+  transition-property: height;
+  transition-duration: $transition-time-feedback;
+}
+
+// tablet
+@media (min-width: $min-tablet) {
+  .times {
+    font-size: 1rem;
+  }
+}
@@ -0,0 +1,63 @@
+import { OntimeEvent, UserFields } from 'ontime-types';
+
+import DelayIndicator from '../../../common/components/delay-indicator/DelayIndicator';
+import { useTimer } from '../../../common/hooks/useSocket';
+import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
+import { formatTime } from '../../../common/utils/time';
+
+import style from './OperatorEvent.module.scss';
+
+interface OperatorEventProps {
+  data: OntimeEvent;
+  cue: string;
+  isSelected: boolean;
+  subscribed: keyof UserFields | null;
+  showSeconds: boolean;
+}
+
+// extract this to contain re-renders
+function RollingTime() {
+  const timer = useTimer();
+  return <>{formatTime(timer.current, { showSeconds: true, format: 'hh:mm:ss' })}</>;
+}
+
+export default function OperatorEvent(props: OperatorEventProps) {
+  const { data, cue, isSelected, subscribed, showSeconds } = props;
+
+  const start = formatTime(data.timeStart, { showSeconds });
+  const end = formatTime(data.timeEnd, { showSeconds });
+
+  const cueColours = data.colour && getAccessibleColour(data.colour);
+  const subscribedData = (subscribed ? data?.[subscribed] : undefined) || '';
+
+  const operatorClasses = cx([
+    style.event,
+    isSelected ? style.running : null,
+    subscribedData ? style.subscribed : null,
+  ]);
+
+  return (
+    <div className={operatorClasses}>
+      <div className={style.titles}>
+        <span className={style.title}>
+          {data.title} - {data.subtitle}
+        </span>
+        <span className={style.cue} style={{ ...cueColours }}>
+          {cue}
+        </span>
+      </div>
+
+      <div className={style.times}>
+        <span className={style.schedule}>
+          {start} - {end}
+        </span>
+        <span className={style.runtime}>
+          <DelayIndicator delayValue={data.delay} />
+          {isSelected ? <RollingTime /> : formatTime(data.duration, { showSeconds: true, format: 'hh:mm:ss' })}
+        </span>
+      </div>
+
+      <div className={style.fields}>{subscribedData}</div>
+    </div>
+  );
+}