feat: add delay management settings

cpvalente · Jul 14, 2023 · 02fe5b4 · 02fe5b4
1 parent ff47e5f
commit 02fe5b4
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 47 deletions.
diff --git a/apps/client/src/features/cuesheet/Cuesheet.module.scss b/apps/client/src/features/cuesheet/Cuesheet.module.scss
@@ -4,6 +4,12 @@
 $table-font-size: calc(1rem - 2px);
 $table-header-font-size: calc(1rem - 3px);
 
+@mixin ellipsis-overflow() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .cuesheetContainer {
   grid-area: table;
   display: flex;
@@ -27,10 +33,7 @@ $table-header-font-size: calc(1rem - 3px);
     font-size: inherit;
     text-align: left;
     position: relative;
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis-overflow;
   }
 }
 
@@ -92,6 +95,16 @@ $table-header-font-size: calc(1rem - 3px);
   margin: 0 auto;
 }
 
+.time {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+
+  > * {
+    @include ellipsis-overflow;
+  }
+}
+
 .delaySymbol {
   svg {
     font-size: 1.5rem;
@@ -100,6 +113,11 @@ $table-header-font-size: calc(1rem - 3px);
   }
 }
 
+.delayedTime {
+  color: $ontime-delay-text;
+  font-size: calc(1rem - 2px);
+}
+
 .resizer {
   cursor: col-resize;
   opacity: 0;

diff --git a/apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx b/apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx
@@ -21,15 +21,17 @@ interface CuesheetTableSettingsProps {
 
 export default function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
   const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props;
-  const showDelayBlock = useCuesheetSettings((state) => state.showDelayBlock);
-  const toggleDelayVisibility = useCuesheetSettings((state) => state.toggleDelayVisibility);
   const showPrevious = useCuesheetSettings((state) => state.showPrevious);
   const togglePreviousVisibility = useCuesheetSettings((state) => state.togglePreviousVisibility);
+  const showDelayBlock = useCuesheetSettings((state) => state.showDelayBlock);
+  const toggleDelayVisibility = useCuesheetSettings((state) => state.toggleDelayVisibility);
+  const showDelayedTimes = useCuesheetSettings((state) => state.showDelayedTimes);
+  const toggleDelayedTimes = useCuesheetSettings((state) => state.toggleDelayedTimes);
 
   return (
     <div className={style.tableSettings}>
       <div className={style.leftPanel}>
-        <div className={style.sectionTitle}>Toggle field visibility</div>
+        <div className={style.sectionTitle}>Toggle column visibility</div>
         <div className={style.options}>
           {columns.map((column) => {
             const columnHeader = column.columnDef.header;
@@ -48,15 +50,22 @@ export default function CuesheetTableSettings(props: CuesheetTableSettingsProps)
         </div>
         <div className={style.sectionTitle}>Table Options</div>
         <div className={style.options}>
-          <label className={style.option}>
-            <Switch variant='ontime' size='sm' isChecked={showDelayBlock} onChange={() => toggleDelayVisibility()} />
-            Show delay blocks
-          </label>
           <label className={style.option}>
             <Switch variant='ontime' size='sm' isChecked={showPrevious} onChange={() => togglePreviousVisibility()} />
             Show past events
           </label>
         </div>
+        <div className={style.sectionTitle}>Delay Flow</div>
+        <div className={style.options}>
+          <label className={style.option}>
+            <Switch variant='ontime' size='sm' isChecked={showDelayedTimes} onChange={() => toggleDelayedTimes()} />
+            Show delayed times
+          </label>
+          <label className={style.option}>
+            <Switch variant='ontime' size='sm' isChecked={showDelayBlock} onChange={() => toggleDelayVisibility()} />
+            Show delay blocks
+          </label>
+        </div>
       </div>
       <div className={style.rightPanel}>
         <Button onClick={handleClearToggles} {...buttonProps}>

diff --git a/apps/client/src/features/cuesheet/cuesheetCols.tsx b/apps/client/src/features/cuesheet/cuesheetCols.tsx
@@ -1,52 +1,63 @@
 import { useCallback } from 'react';
+import { Tooltip } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
+import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
+import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
 import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { OntimeEvent, OntimeRundownEntry, UserFields } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
+import { millisToDelayString } from '../../common/utils/dateConfig';
+import { tooltipDelayFast } from '../../ontimeConfig';
+
+import { useCuesheetSettings } from './store/CuesheetSettings';
 import EditableCell from './tableElements/EditableCell';
 
 import style from './Cuesheet.module.scss';
-import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
-import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
-import { Tooltip } from '@chakra-ui/react';
-import { tooltipDelayFast } from '../../ontimeConfig';
-import { millisToDelayString } from '../../common/utils/dateConfig';
 
 function makePublic(row: CellContext<OntimeRundownEntry, unknown>) {
   const cellValue = row.getValue();
   return cellValue ? <IoCheckmark className={style.check} /> : '';
 }
 
-function makeDelay(row: CellContext<OntimeRundownEntry, unknown>) {
-  const cellValue = row.getValue() as number | undefined;
-  if (cellValue && cellValue > 0) {
+function DelayIndicator(props: { delayValue: number }) {
+  const { delayValue } = props;
+  if (delayValue < 0) {
     return (
-      <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(cellValue)}>
+      <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
         <span className={style.delaySymbol}>
-          <IoChevronUp />
+          <IoChevronDown />
         </span>
       </Tooltip>
     );
   }
-  if (cellValue && cellValue < 0) {
+
+  if (delayValue > 0) {
     return (
-      <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(cellValue)}>
+      <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
         <span className={style.delaySymbol}>
-          <IoChevronDown />
+          <IoChevronUp />
         </span>
       </Tooltip>
     );
   }
-  return;
+  return null;
 }
 
-function makeTimer(row: CellContext<OntimeRundownEntry, unknown>) {
-  let cellValue = (row.getValue() as number | null) ?? 0;
-  if (cellValue != null) {
-    cellValue += (row.row.original as OntimeEvent)?.delay ?? 0;
-  }
-  return millisToString(cellValue);
+function MakeTimer({ getValue, row: { original } }: CellContext<OntimeRundownEntry, unknown>) {
+  const showDelayedTimes = useCuesheetSettings((state) => state.showDelayedTimes);
+  const cellValue = (getValue() as number | null) ?? 0;
+  const delayValue = (original as OntimeEvent)?.delay ?? 0;
+
+  console.log(delayValue)
+
+  return (
+    <span className={style.time}>
+      <DelayIndicator delayValue={delayValue} />
+      {millisToString(cellValue)}
+      {(delayValue !== 0 && showDelayedTimes) && <span className={style.delayedTime}>{` ${millisToString(cellValue + delayValue)}`}</span>}
+    </span>
+  );
 }
 
 function MakeUserField({ getValue, row: { index }, column: { id }, table }: CellContext<OntimeRundownEntry, unknown>) {
@@ -73,25 +84,18 @@ export function makeCuesheetColumns(userFields?: UserFields): ColumnDef<OntimeRu
       cell: makePublic,
       size: 45,
     },
-    {
-      accessorKey: 'delay',
-      id: 'delay',
-      header: 'Delay',
-      cell: makeDelay,
-      size: 45,
-    },
     {
       accessorKey: 'timeStart',
       id: 'timeStart',
       header: 'Start',
-      cell: makeTimer,
+      cell: MakeTimer,
       size: 75,
     },
     {
       accessorKey: 'timeEnd',
       id: 'timeEnd',
       header: 'End',
-      cell: makeTimer,
+      cell: MakeTimer,
       size: 75,
     },
     {

diff --git a/apps/client/src/features/cuesheet/store/CuesheetSettings.tsx b/apps/client/src/features/cuesheet/store/CuesheetSettings.tsx
@@ -5,13 +5,15 @@ import { booleanFromLocalStorage } from '../../../common/utils/localStorage';
 interface CuesheetSettings {
   showSettings: boolean;
   followSelected: boolean;
-  showDelayBlock: boolean;
   showPrevious: boolean;
+  showDelayBlock: boolean;
+  showDelayedTimes: boolean;
 
   toggleSettings: (newValue?: boolean) => void;
   toggleFollow: (newValue?: boolean) => void;
-  toggleDelayVisibility: (newValue?: boolean) => void;
   togglePreviousVisibility: (newValue?: boolean) => void;
+  toggleDelayVisibility: (newValue?: boolean) => void;
+  toggleDelayedTimes: (newValue?: boolean) => void;
 }
 
 function toggle(oldValue: boolean, value?: boolean) {
@@ -25,13 +27,15 @@ enum CuesheetKeys {
   Follow = 'ontime-cuesheet-follow-selected',
   DelayVisibility = 'ontime-cuesheet-show-delay',
   PreviousVisibility = 'ontime-cuesheet-show-previous',
+  DelayedTimes = 'ontime-cuesheet-show-delayed',
 }
 
 export const useCuesheetSettings = create<CuesheetSettings>()((set) => ({
   showSettings: false,
   followSelected: booleanFromLocalStorage(CuesheetKeys.Follow, false),
-  showDelayBlock: booleanFromLocalStorage(CuesheetKeys.DelayVisibility, true),
   showPrevious: booleanFromLocalStorage(CuesheetKeys.PreviousVisibility, true),
+  showDelayBlock: booleanFromLocalStorage(CuesheetKeys.DelayVisibility, true),
+  showDelayedTimes: booleanFromLocalStorage(CuesheetKeys.DelayedTimes, false),
 
   toggleSettings: (newValue?: boolean) => set((state) => ({ showSettings: toggle(state.showSettings, newValue) })),
   toggleFollow: (newValue?: boolean) =>
@@ -40,16 +44,22 @@ export const useCuesheetSettings = create<CuesheetSettings>()((set) => ({
       localStorage.setItem(CuesheetKeys.Follow, String(followSelected));
       return { followSelected };
     }),
+  togglePreviousVisibility: (newValue?: boolean) =>
+    set((state) => {
+      const showPrevious = toggle(state.showPrevious, newValue);
+      localStorage.setItem(CuesheetKeys.PreviousVisibility, String(showPrevious));
+      return { showPrevious };
+    }),
   toggleDelayVisibility: (newValue?: boolean) =>
     set((state) => {
       const showDelayBlock = toggle(state.showDelayBlock, newValue);
       localStorage.setItem(CuesheetKeys.DelayVisibility, String(showDelayBlock));
       return { showDelayBlock };
     }),
-  togglePreviousVisibility: (newValue?: boolean) =>
+  toggleDelayedTimes: (newValue?: boolean) =>
     set((state) => {
-      const showPrevious = toggle(state.showPrevious, newValue);
-      localStorage.setItem(CuesheetKeys.PreviousVisibility, String(showPrevious));
-      return { showPrevious };
+      const showDelayedTimes = toggle(state.showDelayedTimes, newValue);
+      localStorage.setItem(CuesheetKeys.DelayedTimes, String(showDelayedTimes));
+      return { showDelayedTimes };
     }),
 }));