feat: add flag property

apps/client/src/common/utils/__tests__/clone.test.ts

@@ -7,6 +7,7 @@ describe('cloneEvent()', () => {
     const original: OntimeEvent = {
       id: 'unique',
       type: SupportedEntry.Event,
+      flag: false,
       title: 'title',
       cue: 'cue',
       note: 'note',
@@ -40,6 +41,7 @@ describe('cloneEvent()', () => {
 
     expect(cloned).toMatchObject({
       type: SupportedEntry.Event,
+      flag: original.flag,
       title: original.title,
       note: original.note,
       timeStart: original.timeStart,

apps/client/src/common/utils/clone.ts

@@ -10,6 +10,7 @@ type ClonedEvent = Omit<OntimeEvent, 'id' | 'cue'>;
 export const cloneEvent = (event: OntimeEvent): ClonedEvent => {
   return {
     type: SupportedEntry.Event,
+    flag: event.flag,
     title: event.title,
     note: event.note,
     timeStart: event.timeStart,

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/importMapUtils.ts

@@ -5,6 +5,7 @@ export type NamedImportMap = typeof namedImportMap;
 // Record of label and import name
 const namedImportMap = {
   Worksheet: 'event schedule',
+  Flag: 'flag',
   Start: 'time start',
   'Link start': 'link start',
   End: 'time end',
@@ -42,6 +43,7 @@ export function convertToImportMap(namedImportMap: NamedImportMap): ImportMap {
 
   return {
     worksheet: namedImportMap.Worksheet,
+    flag: namedImportMap.Flag,
     timeStart: namedImportMap.Start,
     linkStart: namedImportMap['Link start'],
     timeEnd: namedImportMap.End,

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/preview/PreviewRundown.tsx

@@ -35,6 +35,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
           <th>Type</th>
           <th>Cue</th>
           <th>Title</th>
+          <th>Flag</th>
           <th>Time Start</th>
           <th>Time End</th>
           <th>Duration</th>
@@ -75,6 +76,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
           const colour = entry.colour ? getAccessibleColour(entry.colour) : {};
           const countToEnd = booleanToText(entry.countToEnd);
           const skip = booleanToText(entry.skip);
+          const flag = booleanToText(entry.flag);
 
           return (
             <Fragment key={entry.id}>
@@ -87,6 +89,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
                 </td>
                 <td className={style.nowrap}>{entry.cue}</td>
                 <td>{entry.title}</td>
+                <td className={style.center}>{flag && <Tag>{flag}</Tag>}</td>
                 <td className={style.flex}>
                   <span className={entry.linkStart ? style.subdued : undefined}>{millisToString(entry.timeStart)}</span>
                   {entry.linkStart && <IoLink className={style.linkStartActive} />}

apps/client/src/features/control/message/TimerPreview.tsx

@@ -1,4 +1,5 @@
-import { IoArrowDown, IoArrowUp, IoBan, IoFlag, IoTime } from 'react-icons/io5';
+import { IoArrowDown, IoArrowUp, IoBan, IoTime } from 'react-icons/io5';
+import { LuArrowDownToLine } from 'react-icons/lu';
 import { TimerPhase, TimerType } from 'ontime-types';
 
 import { Corner } from '../../../common/components/editor-utils/EditorUtils';
@@ -101,7 +102,7 @@ export default function TimerPreview() {
           className={style.statusIcon}
           data-active={countToEnd}
         >
-          <IoFlag />
+          <LuArrowDownToLine />
         </Tooltip>
       </div>
     </div>

apps/client/src/features/rundown/RundownEntry.tsx

@@ -177,6 +177,7 @@ export default function RundownEntry({
         duration={data.duration}
         timeStrategy={data.timeStrategy}
         linkStart={data.linkStart}
+        flag={data.flag}
         countToEnd={data.countToEnd}
         endAction={data.endAction}
         timerType={data.timerType}

apps/client/src/features/rundown/entry-editor/EntryEditor.module.scss

@@ -72,6 +72,13 @@
   row-gap: 1rem;
 }
 
+.splitThree {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 1rem;
+  row-gap: 1rem;
+}
+
 .tooltipIcon {
   color: $blue-500;
   display: inline-block;

apps/client/src/features/rundown/entry-editor/EventEditor.tsx

@@ -59,10 +59,10 @@ export default function EventEditor({ event }: EventEditorProps) {
         key={`${event.id}-titles`}
         eventId={event.id}
         cue={event.cue}
+        flag={event.flag}
         title={event.title}
         note={event.note}
         colour={event.colour}
-        handleSubmit={handleSubmit}
       />
       <div className={style.column}>
         <Editor.Title>

apps/client/src/features/rundown/entry-editor/composite/EventEditorImage.tsx

@@ -7,7 +7,7 @@ interface EventEditorImageProps {
 export default function EventEditorImage({ src }: EventEditorImageProps) {
   return (
     <div className={style.imageContainer}>
-      <img loading='lazy' src={src} />
+      {Boolean(src) && <img loading='lazy' src={src} />}
       <div className={style.imageOverlay} />
     </div>
   );

apps/client/src/features/rundown/entry-editor/composite/EventEditorTitles.tsx

@@ -4,7 +4,8 @@ import { sanitiseCue } from 'ontime-utils';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
 import SwatchSelect from '../../../../common/components/input/colour-input/SwatchSelect';
 import Input from '../../../../common/components/input/input/Input';
-import { type EventEditorUpdateFields } from '../EventEditor';
+import Switch from '../../../../common/components/switch/Switch';
+import { useEntryActions } from '../../../../common/hooks/useEntryAction';
 
 import EventTextArea from './EventTextArea';
 import EntryEditorTextInput from './EventTextInput';
@@ -14,22 +15,32 @@ import style from '../EntryEditor.module.scss';
 interface EventEditorTitlesProps {
   eventId: string;
   cue: string;
+  flag: boolean;
   title: string;
   note: string;
   colour: string;
-  handleSubmit: (field: EventEditorUpdateFields, value: string) => void;
 }
 
 export default memo(EventEditorTitles);
-function EventEditorTitles({ eventId, cue, title, note, colour, handleSubmit }: EventEditorTitlesProps) {
+function EventEditorTitles({ eventId, cue, flag, title, note, colour }: EventEditorTitlesProps) {
+  const { updateEntry } = useEntryActions();
+
   const cueSubmitHandler = (_field: string, newValue: string) => {
-    handleSubmit('cue', sanitiseCue(newValue));
+    updateEntry({ id: eventId, cue: sanitiseCue(newValue) });
+  };
+
+  const flagSubmitHandler = (newValue: boolean) => {
+    updateEntry({ id: eventId, flag: newValue });
+  };
+
+  const textSubmitHandler = (field: string, newValue: string) => {
+    updateEntry({ id: eventId, [field]: newValue });
   };
 
   return (
     <div className={style.column}>
       <Editor.Title>Event Data</Editor.Title>
-      <div className={style.splitTwo}>
+      <div className={style.splitThree}>
         <div>
           <Editor.Label htmlFor='eventId'>Event ID (read only)</Editor.Label>
           <Input id='eventId' data-testid='input-textfield' value={eventId} readOnly fluid />
@@ -41,13 +52,20 @@ function EventEditorTitles({ eventId, cue, title, note, colour, handleSubmit }:
           submitHandler={cueSubmitHandler}
           maxLength={10}
         />
+        <div>
+          <Editor.Label htmlFor='flag'>Flag</Editor.Label>
+          <Editor.Label className={style.switchLabel}>
+            <Switch id='flag' checked={flag} onCheckedChange={flagSubmitHandler} />
+            {flag ? 'On' : 'Off'}
+          </Editor.Label>
+        </div>
       </div>
       <div>
         <Editor.Label>Colour</Editor.Label>
-        <SwatchSelect name='colour' value={colour} handleChange={handleSubmit} />
+        <SwatchSelect name='colour' value={colour} handleChange={textSubmitHandler} />
       </div>
-      <EntryEditorTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />
+      <EntryEditorTextInput field='title' label='Title' initialValue={title} submitHandler={textSubmitHandler} />
-      <EventTextArea field='note' label='Note' initialValue={note} submitHandler={handleSubmit} />
+      <EventTextArea field='note' label='Note' initialValue={note} submitHandler={textSubmitHandler} />
     </div>
   );
 }

apps/client/src/features/rundown/rundown-event/RundownEvent.tsx

@@ -2,6 +2,7 @@ import { MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import {
   IoAdd,
   IoDuplicateOutline,
+  IoFlag,
   IoFolder,
   IoLink,
   IoReorderTwo,
@@ -33,6 +34,7 @@ interface RundownEventProps {
   duration: number;
   timeStrategy: TimeStrategy;
   linkStart: boolean;
+  flag: boolean;
   countToEnd: boolean;
   eventIndex: number;
   endAction: EndAction;
@@ -74,6 +76,7 @@ export default function RundownEvent({
   duration,
   timeStrategy,
   linkStart,
+  flag,
   countToEnd,
   eventIndex,
   endAction,
@@ -118,7 +121,6 @@ export default function RundownEvent({
           },
           {
             type: 'item',
-
             label: 'Unlink from previous',
             icon: IoUnlink,
             onClick: () =>
@@ -135,7 +137,6 @@ export default function RundownEvent({
       : [
           {
             type: 'item',
-
             label: 'Toggle link to previous',
             icon: IoLink,
             onClick: () =>
@@ -144,18 +145,25 @@ export default function RundownEvent({
                 value: linkStart,
               }),
           },
-          { type: 'divider' },
-
           {
             type: 'item',
-
+            label: flag ? 'Remove flag' : 'Add flag',
+            icon: IoFlag,
+            onClick: () =>
+              actionHandler('update', {
+                field: 'flag',
+                value: !flag,
+              }),
+          },
+          { type: 'divider' },
+          {
+            type: 'item',
             label: 'Add to swap',
             icon: IoAdd,
             onClick: () => setSelectedEventId(eventId),
           },
           {
             type: 'item',
-
             label: `Swap this event with ${selectedEventId ?? ''}`,
             icon: IoSwapVertical,
             onClick: () => {

apps/client/src/features/rundown/rundown-event/RundownEventInner.tsx

@@ -3,13 +3,13 @@ import {
   IoArrowDown,
   IoArrowUp,
   IoBan,
-  IoFlag,
   IoFlash,
   IoPlay,
   IoPlayForward,
   IoPlaySkipForward,
   IoTime,
 } from 'react-icons/io5';
+import { LuArrowDownToLine } from 'react-icons/lu';
 import { EndAction, Playback, TimerType, TimeStrategy } from 'ontime-types';
 
 import Tooltip from '../../../common/components/tooltip/Tooltip';
@@ -143,7 +143,7 @@ function RundownEventInner({
             <EndActionIcon action={endAction} className={style.statusIcon} />
           </Tooltip>
           <Tooltip text={`${countToEnd ? 'Count to End' : 'Count duration'}`} render={<span />}>
-            <IoFlag className={`${style.statusIcon} ${countToEnd ? style.active : style.disabled}`} />
+            <LuArrowDownToLine className={`${style.statusIcon} ${countToEnd ? style.active : style.disabled}`} />
           </Tooltip>
           <Tooltip text='Event has Triggers' render={<span />}>
             <IoFlash className={`${style.statusIcon} ${hasTriggers ? style.active : style.disabled}`} />

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss

@@ -53,11 +53,11 @@ $table-header-font-size: calc(1rem - 2px);
 
 .actionColumn {
   padding-inline: 0.5rem;
+  padding-top: 0.5rem !important; // fighting the table styles
   background-color: transparent;
   display: flex;
   align-items: start;
   justify-content: center;
-  line-height: 2rem; // match input height
 }
 
 .indexColumn {
@@ -69,7 +69,7 @@ $table-header-font-size: calc(1rem - 2px);
   font-size: $table-header-font-size;
   line-height: 2rem; // match input height
   background-color: $gray-1300; // will be overridden inline
-  font-weight: 600;;
+  font-weight: 600;
 }
 
 .tableHeader {

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx

@@ -55,7 +55,7 @@ function EditableImage({ initialValue, updateValue }: EditableImageProps) {
           Delete
         </Button>
       </div>
-      <img loading='lazy' src={initialValue} className={style.image} />
+      {Boolean(initialValue) && <img loading='lazy' src={initialValue} className={style.image} />}
     </div>
   );
 }

apps/server/src/api-data/excel/excel.parser.ts

@@ -69,6 +69,7 @@ export const parseExcel = (
   let colourIndex: number | null = null;
 
   // options: booleans
+  let flagIndex: number | null = null;
   let skipIndex: number | null = null;
   let countToEndIndex: number | null = null;
 
@@ -123,6 +124,10 @@ export const parseExcel = (
         titleIndex = col;
         rundownMetadata['title'] = { row, col };
       },
+      [importMap.flag]: (row: number, col: number) => {
+        flagIndex = col;
+        rundownMetadata['flag'] = { row, col };
+      },
       [importMap.countToEnd]: (row: number, col: number) => {
         countToEndIndex = col;
         rundownMetadata['countToEnd'] = { row, col };
@@ -197,6 +202,8 @@ export const parseExcel = (
         entry.duration = parseExcelDate(column);
       } else if (j === cueIndex) {
         entry.cue = makeString(column, '');
+      } else if (j === flagIndex) {
+        entry.flag = parseBooleanString(column);
       } else if (j === countToEndIndex) {
         entry.countToEnd = parseBooleanString(column);
       } else if (j === skipIndex) {

apps/server/src/api-data/rundown/rundown.utils.ts

@@ -88,6 +88,7 @@ export function createEventPatch(originalEvent: OntimeEvent, patchEvent: Partial
   return {
     id: originalEvent.id,
     type: SupportedEntry.Event,
+    flag: typeof patchEvent.flag === 'boolean' ? patchEvent.flag : originalEvent.flag,
     title: makeString(patchEvent.title, originalEvent.title),
     timeStart,
     timeEnd,

apps/server/src/app.ts

@@ -185,6 +185,7 @@ export const startServer = async (): Promise<{ message: string; serverPort: numb
     eventNext: state.eventNext,
     blockNow: null,
     blockNext: null,
+    nextFlag: null,
     auxtimer1: {
       duration: timerConfig.auxTimerDefault,
       current: timerConfig.auxTimerDefault,

apps/server/src/models/demoProject.ts

@@ -59,6 +59,7 @@ export const demoDb: DatabaseModel = {
         },
         '32d31': {
           type: SupportedEntry.Event,
+          flag: false,
           id: '32d31',
           cue: 'SF1.01',
           title: 'Albania',
@@ -88,6 +89,7 @@ export const demoDb: DatabaseModel = {
         },
         '21cd2': {
           type: SupportedEntry.Event,
+          flag: false,
           id: '21cd2',
           cue: 'SF1.02',
           title: 'Latvia',
@@ -117,6 +119,7 @@ export const demoDb: DatabaseModel = {
         },
         '0b371': {
           type: SupportedEntry.Event,
+          flag: false,
           id: '0b371',
           cue: 'SF1.03',
           title: 'Lithuania',
@@ -146,6 +149,7 @@ export const demoDb: DatabaseModel = {
         },
         '3cd28': {
           type: SupportedEntry.Event,
+          flag: false,
           id: '3cd28',
           cue: 'SF1.04',
           title: 'Switzerland',
@@ -175,6 +179,7 @@ export const demoDb: DatabaseModel = {
         },
         e457f: {
           type: SupportedEntry.Event,
+          flag: false,
           id: 'e457f',
           cue: 'SF1.05',
           title: 'Slovenia',
@@ -221,6 +226,7 @@ export const demoDb: DatabaseModel = {
         },
         '1c420': {
           type: SupportedEntry.Event,
+          flag: false,
           id: '1c420',
           cue: 'SF1.06',
           title: 'Ukraine',
@@ -250,6 +256,7 @@ export const demoDb: DatabaseModel = {
         },
         b7737: {
           type: SupportedEntry.Event,
+          flag: false,
           id: 'b7737',
           cue: 'SF1.07',
           title: 'Bulgaria',
@@ -279,6 +286,7 @@ export const demoDb: DatabaseModel = {
         },
         d3a80: {
           type: SupportedEntry.Event,
+          flag: false,
           id: 'd3a80',
           cue: 'SF1.08',
           title: 'Netherlands',
@@ -308,6 +316,7 @@ export const demoDb: DatabaseModel = {
         },
         '8276c': {
           type: SupportedEntry.Event,
+          flag: false,
           id: '8276c',
           cue: 'SF1.09',
           title: 'Moldova',
@@ -337,6 +346,7 @@ export const demoDb: DatabaseModel = {
         },
         '2340b': {
           type: SupportedEntry.Event,
+          flag: false,
           id: '2340b',
           cue: 'SF1.10',
           title: 'Portugal',
@@ -383,6 +393,7 @@ export const demoDb: DatabaseModel = {
         },
         '503c4': {
           type: SupportedEntry.Event,
+          flag: false,
           id: '503c4',
           cue: 'SF1.11',
           title: 'Croatia',
@@ -412,6 +423,7 @@ export const demoDb: DatabaseModel = {
         },
         '5e965': {
           type: SupportedEntry.Event,
+          flag: false,
           id: '5e965',
           cue: 'SF1.12',
           title: 'Denmark',
@@ -441,6 +453,7 @@ export const demoDb: DatabaseModel = {
         },
         bab4a: {
           type: SupportedEntry.Event,
+          flag: false,
           id: 'bab4a',
           cue: 'SF1.13',
           title: 'Austria',
@@ -470,6 +483,7 @@ export const demoDb: DatabaseModel = {
         },
         d3eb1: {
           type: SupportedEntry.Event,
+          flag: false,
           id: 'd3eb1',
           cue: 'SF1.14',
           title: 'Greece',

apps/server/src/models/eventsDefinition.ts

@@ -11,6 +11,7 @@ import {
 
 export const event: Omit<OntimeEvent, 'id' | 'cue'> = {
   type: SupportedEntry.Event,
+  flag: false,
   title: '',
   note: '',
   endAction: EndAction.None,

apps/server/src/services/sheet-service/__tests__/sheetUtils.test.ts

@@ -22,6 +22,7 @@ describe('cellRequestFromEvent()', () => {
   test('string to string', () => {
     const event: OntimeEvent = {
       type: SupportedEntry.Event,
+      flag: false,
       cue: '1',
       title: 'Fancy',
       note: 'Blue button on the right',
@@ -70,6 +71,7 @@ describe('cellRequestFromEvent()', () => {
   test('number to timer', () => {
     const event: OntimeEvent = {
       type: SupportedEntry.Event,
+      flag: false,
       cue: '1',
       title: 'Fancy',
       note: 'Blue button on the right',
@@ -120,6 +122,7 @@ describe('cellRequestFromEvent()', () => {
   test('boolean to TRUE', () => {
     const event: OntimeEvent = {
       type: SupportedEntry.Event,
+      flag: false,
       cue: '1',
       title: 'Fancy',
       note: 'Blue button on the right',
@@ -168,6 +171,7 @@ describe('cellRequestFromEvent()', () => {
   test('spacing in metadata', () => {
     const event: OntimeEvent = {
       type: SupportedEntry.Event,
+      flag: false,
       cue: '1',
       title: 'Fancy',
       note: 'Blue button on the right',
@@ -204,6 +208,7 @@ describe('cellRequestFromEvent()', () => {
   test('metadata offset from zero', () => {
     const event: OntimeEvent = {
       type: SupportedEntry.Event,
+      flag: false,
       cue: '1',
       title: 'Fancy',
       note: 'Blue button on the right',
@@ -241,6 +246,7 @@ describe('cellRequestFromEvent()', () => {
   test('sheet setup', () => {
     const event: OntimeEvent = {
       type: SupportedEntry.Event,
+      flag: false,
       cue: '1',
       title: 'Fancy',
       note: 'Blue button on the right',

packages/types/src/definitions/core/OntimeEntry.ts

@@ -50,6 +50,7 @@ export type OntimeBlock = OntimeBaseEvent & {
 
 export type OntimeEvent = OntimeBaseEvent & {
   type: SupportedEntry.Event;
+  flag: boolean;
   cue: string;
   title: string;
   note: string;

packages/utils/src/feature/spreadsheet-import/spreadsheetImport.ts

@@ -5,6 +5,7 @@ export type ImportMap = typeof defaultImportMap & { custom: ImportCustom };
 // Record of ontime name and import name
 export const defaultImportMap = {
   worksheet: 'event schedule',
+  flag: 'flag',
   timeStart: 'time start',
   linkStart: 'link start',
   timeEnd: 'time end',