feat: add flag property

2026-07-26 10:38:55 +00:00 · 2025-07-13 12:43:33 +02:00
parent e9dda817e5
commit 637454f73d
22 changed files with 98 additions and 23 deletions
@@ -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,
@@ -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,
@@ -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,
@@ -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} />}
@@ -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>
@@ -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}
@@ -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;
@@ -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>
@@ -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>
  );
@@ -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} />
-      <EventTextArea field='note' label='Note' initialValue={note} submitHandler={handleSubmit} />
+      <EntryEditorTextInput field='title' label='Title' initialValue={title} submitHandler={textSubmitHandler} />
+      <EventTextArea field='note' label='Note' initialValue={note} submitHandler={textSubmitHandler} />
    </div>
  );
 }
@@ -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: () => {
@@ -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}`} />
@@ -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 {
@@ -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>
  );
 }
@@ -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) {
@@ -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,
@@ -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,
@@ -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',
@@ -11,6 +11,7 @@ import {

 export const event: Omit<OntimeEvent, 'id' | 'cue'> = {
  type: SupportedEntry.Event,
+  flag: false,
  title: '',
  note: '',
  endAction: EndAction.None,
@@ -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',
@@ -50,6 +50,7 @@ export type OntimeBlock = OntimeBaseEvent & {

 export type OntimeEvent = OntimeBaseEvent & {
  type: SupportedEntry.Event;
+  flag: boolean;
  cue: string;
  title: string;
  note: string;
@@ -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',