Event trigger (#1557)

* crude UI

* add server functionalety

* better event trigger list

* fix default value

* remove log

* add trigger to recalculate whitelist

* use DTO type

* fix rebase

* one callback for delete and submit

* refactor

* add invalid description

* clean up commits

* cleanup

* refactor: find event triggers in `triggerAutomations`

* refactor: switch to flat array for event triggers

* prevent deleting a automation that is in use

* refactor

* refactor: extract EventEditorCustom

* move trigger options to separate file

* move trigger edit down a file level

* cleanup

* spelling

* refactor: ui review proposal

* change default value

* fix delete filter

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

apps/client/src/common/components/link/app-link/AppLink.module.scss

@@ -3,8 +3,9 @@
   font-size: $text-body-size;
   text-decoration: underline;
   text-underline-offset: 2px;
+  color: $blue-400;
 
   &:hover {
-    color: $blue-400;
+    color: $blue-500;
   }
 }

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

@@ -1,17 +1,15 @@
-import { CSSProperties, useCallback } from 'react';
+import { useCallback } from 'react';
 import { CustomFieldLabel, OntimeEvent } from 'ontime-types';
 
 import AppLink from '../../../common/components/link/app-link/AppLink';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
-import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import * as Editor from '../../editors/editor-utils/EditorUtils';
 
-import EventEditorImage from './composite/EventEditorImage';
+import EventCustom from './composite/EventEditorCustom';
 import EventEditorTimes from './composite/EventEditorTimes';
 import EventEditorTitles from './composite/EventEditorTitles';
-import EventTextArea from './composite/EventTextArea';
-import EventTextInput from './composite/EventTextInput';
+import EventEditorTriggers from './composite/EventEditorTriggers';
 import EventEditorEmpty from './EventEditorEmpty';
 
 import style from './EventEditor.module.scss';
@@ -77,52 +75,16 @@ export default function EventEditor(props: EventEditorProps) {
       <div className={style.column}>
         <Editor.Title>
           Custom Fields
-          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage</AppLink>}
+          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage Custom Fields</AppLink>}
         </Editor.Title>
-
-        {Object.keys(customFields).map((fieldKey) => {
-          const key = `${event.id}-${fieldKey}`;
-          const fieldName = `custom-${fieldKey}`;
-          const initialValue = event.custom[fieldKey] ?? '';
-          const { backgroundColor, color } = getAccessibleColour(customFields[fieldKey].colour);
-          const labelText = customFields[fieldKey].label;
-
-          if (customFields[fieldKey].type === 'string') {
-            return (
-              <EventTextArea
-                key={key}
-                field={fieldName}
-                label={labelText}
-                initialValue={initialValue}
-                submitHandler={handleSubmit}
-                className={style.decorated}
-                style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
-              />
-            );
-          }
-
-          if (customFields[fieldKey].type === 'image') {
-            return (
-              <div key={key} className={style.customImage}>
-                <EventTextInput
-                  key={key}
-                  field={fieldName}
-                  label={labelText}
-                  initialValue={initialValue}
-                  placeholder='Paste image URL'
-                  submitHandler={handleSubmit}
-                  className={style.decorated}
-                  maxLength={255}
-                  style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
-                />
-                <EventEditorImage src={initialValue} />
-              </div>
-            );
-          }
-
-          // we should have exhausted all types by now
-          return null;
-        })}
+        <EventCustom fields={customFields} handleSubmit={handleSubmit} event={event} />
+      </div>
+      <div className={style.column}>
+        <Editor.Title>
+          Automations
+          {isEditor && <AppLink search='settings=automation__automations'>Manage Automations</AppLink>}
+        </Editor.Title>
+        <EventEditorTriggers triggers={event.triggers} eventId={event.id} />
       </div>
     </div>
   );

apps/client/src/features/rundown/event-editor/composite/EventEditorCustom.tsx

@@ -0,0 +1,68 @@
+import { CSSProperties, Fragment } from 'react';
+import { CustomFields, OntimeEvent } from 'ontime-types';
+
+import { getAccessibleColour } from '../../../../common/utils/styleUtils';
+import { EditorUpdateFields } from '../EventEditor';
+
+import EventEditorImage from './EventEditorImage';
+import EventTextArea from './EventTextArea';
+import EventTextInput from './EventTextInput';
+
+import style from '../EventEditor.module.scss';
+
+interface EventEditorCustomProps {
+  fields: CustomFields;
+  event: OntimeEvent;
+  handleSubmit: (field: EditorUpdateFields, value: string) => void;
+}
+
+export default function EventEditorCustom(props: EventEditorCustomProps) {
+  const { fields: customFields, handleSubmit, event } = props;
+  return (
+    <Fragment>
+      {Object.keys(customFields).map((fieldKey) => {
+        const key = `${event.id}-${fieldKey}`;
+        const fieldName = `custom-${fieldKey}`;
+        const initialValue = event.custom[fieldKey] ?? '';
+        const { backgroundColor, color } = getAccessibleColour(customFields[fieldKey].colour);
+        const labelText = customFields[fieldKey].label;
+
+        if (customFields[fieldKey].type === 'string') {
+          return (
+            <EventTextArea
+              key={key}
+              field={fieldName}
+              label={labelText}
+              initialValue={initialValue}
+              submitHandler={handleSubmit}
+              className={style.decorated}
+              style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
+            />
+          );
+        }
+
+        if (customFields[fieldKey].type === 'image') {
+          return (
+            <div key={key} className={style.customImage}>
+              <EventTextInput
+                key={key}
+                field={fieldName}
+                label={labelText}
+                initialValue={initialValue}
+                placeholder='Paste image URL'
+                submitHandler={handleSubmit}
+                className={style.decorated}
+                maxLength={255}
+                style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
+              />
+              <EventEditorImage src={initialValue} />
+            </div>
+          );
+        }
+
+        // we should have exhausted all types by now
+        return null;
+      })}
+    </Fragment>
+  );
+}

apps/client/src/features/rundown/event-editor/composite/EventEditorTriggers.module.scss

@@ -0,0 +1,30 @@
+.triggerForm {
+  padding-block: 0.5rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr auto auto;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.trigger {
+  padding: 0.25rem 0.5rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  align-items: center;
+
+  &:nth-child(even) {
+    background-color: $white-1;
+  }
+
+  & > span {
+    width: fit-content;
+  }
+}
+
+.errorLabel {
+  color: $red-500;
+}
+
+.success {
+  color: $green-500;
+}

apps/client/src/features/rundown/event-editor/composite/EventEditorTriggers.tsx

@@ -0,0 +1,173 @@
+import { Fragment, useCallback, useState } from 'react';
+import { IoAlertCircle, IoCheckmarkCircle, IoTrash } from 'react-icons/io5';
+import { Button, IconButton, Select, Tooltip } from '@chakra-ui/react';
+import { TimerLifeCycle, timerLifecycleValues, Trigger } from 'ontime-types';
+import { generateId } from 'ontime-utils';
+
+import Tag from '../../../../common/components/tag/Tag';
+import { useEventAction } from '../../../../common/hooks/useEventAction';
+import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
+
+import { eventTriggerOptions } from './eventTrigger.constants';
+
+import style from './EventEditorTriggers.module.scss';
+
+interface EventEditorTriggersProps {
+  eventId: string;
+  triggers?: Trigger[];
+}
+
+export default function EventEditorTriggers(props: EventEditorTriggersProps) {
+  const { triggers, eventId } = props;
+  const showTriggers = triggers !== undefined && triggers.length > 0;
+
+  return (
+    <>
+      {showTriggers && <ExistingEventTriggers triggers={triggers} eventId={eventId} />}
+      <EventTriggerForm triggers={triggers} eventId={eventId} />
+    </>
+  );
+}
+
+interface EventTriggerFormProps {
+  eventId: string;
+  triggers?: Trigger[];
+}
+
+function EventTriggerForm(props: EventTriggerFormProps) {
+  const { eventId, triggers } = props;
+  const { data: automationSettings } = useAutomationSettings();
+  const { updateEvent } = useEventAction();
+  const [automationId, setAutomationId] = useState<string | undefined>(undefined);
+  const [cycleValue, setCycleValue] = useState(TimerLifeCycle.onStart);
+
+  const handleSubmit = (triggerLifeCycle: TimerLifeCycle, automationId: string) => {
+    const newTriggers = triggers ?? new Array<Trigger>();
+    const id = generateId();
+    newTriggers.push({ id, title: '', trigger: triggerLifeCycle, automationId });
+    updateEvent({ id: eventId, triggers: newTriggers });
+  };
+
+  const getValidationError = (cycle: TimerLifeCycle, automationId?: string): string | undefined => {
+    if (automationId === undefined) {
+      return 'Select an automation';
+    }
+    if (!Object.keys(automationSettings.automations).includes(automationId)) {
+      return 'This automation does not exist';
+    }
+    if (triggers === undefined) {
+      return;
+    }
+    return Object.values(triggers).some((t) => t.automationId === automationId && t.trigger === cycle)
+      ? 'Automation can only be used once'
+      : undefined;
+  };
+
+  const validationError = getValidationError(cycleValue, automationId);
+
+  return (
+    <div className={style.triggerForm}>
+      <Select
+        size='sm'
+        variant='ontime'
+        value={cycleValue}
+        onChange={(e) => setCycleValue(e.target.value as TimerLifeCycle)}
+        defaultValue={TimerLifeCycle.onStart}
+      >
+        <option disabled>Lifecycle Trigger</option>
+        {eventTriggerOptions.map((cycle) => (
+          <option key={cycle} value={cycle}>
+            {cycle}
+          </option>
+        ))}
+      </Select>
+      <Select
+        size='sm'
+        variant='ontime'
+        value={automationId}
+        defaultValue='«invalid»'
+        onChange={(e) => setAutomationId(e.target.value)}
+      >
+        <option disabled value='«invalid»'>
+          Automation
+        </option>
+        {Object.values(automationSettings.automations).map(({ id, title }) => (
+          <option key={id} value={id}>
+            {title}
+          </option>
+        ))}
+      </Select>
+      <Button
+        variant='ontime-subtle'
+        size='sm'
+        isDisabled={validationError !== undefined}
+        onClick={() => automationId && handleSubmit(cycleValue, automationId)}
+      >
+        Add
+      </Button>
+      {validationError !== undefined ? (
+        <Tooltip label={validationError} shouldWrapChildren>
+          <IoAlertCircle className={style.errorLabel} />
+        </Tooltip>
+      ) : (
+        <IoCheckmarkCircle className={style.success} />
+      )}
+    </div>
+  );
+}
+
+interface ExistingEventTriggersProps {
+  eventId: string;
+  triggers: Trigger[];
+}
+
+function ExistingEventTriggers(props: ExistingEventTriggersProps) {
+  const { eventId, triggers } = props;
+  const { updateEvent } = useEventAction();
+  const { data: automationSettings } = useAutomationSettings();
+
+  const handleDelete = useCallback(
+    (triggerId: string) => {
+      const newTriggers = triggers.filter((trigger) => trigger.id !== triggerId);
+      updateEvent({ id: eventId, triggers: newTriggers });
+    },
+    [eventId, triggers, updateEvent],
+  );
+
+  const filteredTriggers: Record<string, Trigger[]> = {};
+
+  // sort triggers out into groups by the Lifecycle they are on
+  timerLifecycleValues.forEach((triggerType) => {
+    const thisTriggerType = triggers.filter((trigger) => trigger.trigger === triggerType);
+    if (thisTriggerType.length) {
+      Object.assign(filteredTriggers, { [triggerType]: thisTriggerType });
+    }
+  });
+
+  return (
+    <div>
+      {Object.entries(filteredTriggers).map(([triggerLifeCycle, triggerGroup]) => (
+        <Fragment key={triggerLifeCycle}>
+          {triggerGroup.map((trigger) => {
+            const { id, automationId } = trigger;
+            const automationTitle = automationSettings.automations[automationId]?.title ?? '<MISSING AUTOMATION>';
+            return (
+              <div key={id} className={style.trigger}>
+                <Tag>{triggerLifeCycle}</Tag>
+                <Tag>{automationTitle}</Tag>
+                <IconButton
+                  size='sm'
+                  variant='ontime-ghosted'
+                  color='#FA5656' // $red-500
+                  icon={<IoTrash />}
+                  aria-label='Delete entry'
+                  onClick={() => handleDelete(id)}
+                />
+              </div>
+            );
+          })}
+        </Fragment>
+      ))}
+    </div>
+  );
+}

apps/client/src/features/rundown/event-editor/composite/eventTrigger.constants.ts

@@ -0,0 +1,10 @@
+import { TimerLifeCycle } from 'ontime-types';
+
+export const eventTriggerOptions: TimerLifeCycle[] = [
+  TimerLifeCycle.onLoad,
+  TimerLifeCycle.onStart,
+  TimerLifeCycle.onPause,
+  TimerLifeCycle.onFinish,
+  TimerLifeCycle.onWarning,
+  TimerLifeCycle.onDanger,
+];

apps/server/src/api-data/automation/automation.dao.ts

@@ -9,12 +9,13 @@ import type {
 import { deleteAtIndex, generateId } from 'ontime-utils';
 
 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
+import { getTimedEvents } from '../../services/rundown-service/rundownUtils.js';
 
 /**
  * Gets a copy of the stored automation settings
  */
 export function getAutomationSettings(): AutomationSettings {
-  return structuredClone(getDataProvider().getAutomation());
+  return getDataProvider().getAutomation();
 }
 
 /**
@@ -138,14 +139,25 @@ export async function deleteAutomation(id: string): Promise<void> {
   if (!Object.hasOwn(automations, id)) {
     return;
   }
-  // prevent deleting a automation that is in use
-  const triggers = getAutomationTriggers();
-  for (let i = 0; i < triggers.length; i++) {
-    const trigger = triggers[i];
-    if (trigger.automationId === id) {
-      throw new Error(`Unable to delete automation used in trigger ${trigger.title}`);
-    }
+
+  // prevent deleting a automation that is in use in triggers
+  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId === id);
+  if (triggers.length) {
+    throw new Error(
+      `Unable to delete automation used in trigger ${triggers[0].title}${triggers.length > 1 ? ` and ${triggers.length - 1} more` : ''}`,
+    );
   }
+
+  // prevent deleting a automation that is in use in events
+  const events = getTimedEvents().filter(
+    (event) => event.triggers && event.triggers.some((trigger) => trigger.automationId === id),
+  );
+  if (events.length) {
+    throw new Error(
+      `Unable to delete automation used in event: ${events[0].id}${events.length > 1 ? ` and ${events.length - 1} more` : ''}`,
+    );
+  }
+
   delete automations[id];
   await saveChanges({ automations });
 }

apps/server/src/api-data/automation/automation.service.ts

@@ -3,10 +3,10 @@ import {
   isOntimeAction,
   isOSCOutput,
   LogOrigin,
+  TimerLifeCycle,
   type AutomationFilter,
   type AutomationOutput,
   type FilterRule,
-  type TimerLifeCycle,
 } from 'ontime-types';
 import { getPropertyFromPath } from 'ontime-utils';
 
@@ -23,14 +23,21 @@ import { toOntimeAction } from './clients/ontime.client.js';
 /**
  * Exposes a method for triggering actions based on a TimerLifeCycle event
  */
-export function triggerAutomations(event: TimerLifeCycle, state: RuntimeState) {
+export function triggerAutomations(cycle: TimerLifeCycle, state: RuntimeState) {
   if (!getAutomationsEnabled()) {
     return;
   }
 
-  const triggers = getAutomationTriggers();
-  const triggerAutomations = triggers.filter((trigger) => trigger.trigger === event);
-  if (triggerAutomations.length === 0) {
+  let triggers = getAutomationTriggers();
+
+  // get triggers from event
+  if (state.eventNow?.triggers) {
+    triggers = triggers.concat(state.eventNow.triggers);
+  }
+
+  // note: there are no onStop triggers in event
+  const filteredTrigger = triggers.filter((trigger) => trigger.trigger === cycle);
+  if (filteredTrigger.length === 0) {
     return;
   }
 
@@ -39,7 +46,7 @@ export function triggerAutomations(event: TimerLifeCycle, state: RuntimeState) {
     return;
   }
 
-  triggerAutomations.forEach((trigger) => {
+  filteredTrigger.forEach((trigger) => {
     const automation = automations[trigger.automationId];
     if (!automation || automation.outputs.length === 0) {
       return;

apps/server/src/services/rundown-service/rundownCacheUtils.ts

@@ -118,6 +118,7 @@ export enum regenerateWhitelist {
   'timeWarning',
   'timeDanger',
   'custom',
+  'triggers',
 }
 
 /**

apps/server/src/utils/parser.ts

@@ -396,6 +396,7 @@ export function createPatch(originalEvent: OntimeEvent, patchEvent: Partial<Onti
     timeWarning: patchEvent.timeWarning ?? originalEvent.timeWarning,
     timeDanger: patchEvent.timeDanger ?? originalEvent.timeDanger,
     custom: { ...originalEvent.custom, ...patchEvent.custom },
+    triggers: patchEvent.triggers ?? originalEvent.triggers,
   };
 }
 

packages/types/src/definitions/core/OntimeEvent.type.ts

@@ -1,4 +1,4 @@
-import type { EndAction, EventCustomFields, MaybeString, TimerType, TimeStrategy } from '../../index.js';
+import type { EndAction, EventCustomFields, MaybeString, TimerType, TimeStrategy, Trigger } from '../../index.js';
 
 export enum SupportedEvent {
   Event = 'event',
@@ -44,6 +44,7 @@ export type OntimeEvent = OntimeBaseEvent & {
   timeWarning: number;
   timeDanger: number;
   custom: EventCustomFields;
+  triggers?: Trigger[];
 };
 
 export type PlayableEvent = OntimeEvent & { skip: false };

packages/types/src/index.ts

@@ -104,10 +104,10 @@ export {
   isOntimeDelay,
   isOntimeEvent,
   isPlayableEvent,
-  isOntimeCycle,
   isKeyOfType,
   isOSCOutput,
   isHTTPOutput,
   isOntimeAction,
+  isTimerLifeCycle,
 } from './utils/guards.js';
 export type { MaybeNumber, MaybeString } from './utils/utils.type.js';

packages/types/src/utils/guards.ts

@@ -2,8 +2,7 @@ import type { AutomationOutput, HTTPOutput, OntimeAction, OSCOutput } from '../d
 import type { OntimeBlock, OntimeDelay, OntimeEvent, PlayableEvent } from '../definitions/core/OntimeEvent.type.js';
 import { SupportedEvent } from '../definitions/core/OntimeEvent.type.js';
 import type { OntimeRundownEntry } from '../definitions/core/Rundown.type.js';
-import type { TimerLifeCycleKey } from '../definitions/core/TimerLifecycle.type.js';
-import { TimerLifeCycle } from '../definitions/core/TimerLifecycle.type.js';
+import { type TimerLifeCycle, timerLifecycleValues } from '../definitions/core/TimerLifecycle.type.js';
 
 type MaybeEvent = OntimeRundownEntry | Partial<OntimeRundownEntry> | null | undefined;
 
@@ -29,11 +28,6 @@ export function isKeyOfType<T extends object>(key: PropertyKey, obj: T): key is
   return key in obj;
 }
 
-export function isOntimeCycle(maybeCycle: unknown): maybeCycle is TimerLifeCycleKey {
-  if (typeof maybeCycle !== 'string') return false;
-  return Object.values(TimerLifeCycle).includes(maybeCycle as TimerLifeCycle);
-}
-
 export function isOSCOutput(output: AutomationOutput): output is OSCOutput {
   return output.type === 'osc';
 }
@@ -45,3 +39,8 @@ export function isHTTPOutput(output: AutomationOutput): output is HTTPOutput {
 export function isOntimeAction(output: AutomationOutput): output is OntimeAction {
   return output.type === 'ontime';
 }
+
+export function isTimerLifeCycle(maybeCycle: unknown): maybeCycle is TimerLifeCycle {
+  if (typeof maybeCycle !== 'string') return false;
+  return timerLifecycleValues.includes(maybeCycle);
+}