fixup! wip: automation UI

apps/client/src/common/api/automation.ts

@@ -0,0 +1,54 @@
+import axios from 'axios';
+import type { Automation, AutomationOutput, AutomationSettings } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const automationsPath = `${apiEntryUrl}/automations`;
+
+/**
+ * HTTP request to retrieve automations
+ */
+export async function getAutomations(): Promise<AutomationSettings> {
+  const res = await axios.get(automationsPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to test automation output
+ * The return is irrelevant as we care for the resolution of the promise
+ */
+export async function testOutput(output: AutomationOutput): Promise<any> {
+  return axios.post(automationsPath, output);
+}
+
+/**
+ * HTTP request to create a new automation
+ */
+export async function postAutomation(automation: Automation) {
+  return axios.post(`${automationsPath}/automation`, automation);
+}
+
+/**
+ * HTTP request to update an automation
+ */
+export async function putAutomation() {}
+
+/**
+ * HTTP request to delete an automation
+ */
+export async function deleteAutomation() {}
+
+/**
+ * HTTP request to create a new blueprint
+ */
+export async function postBlueprint() {}
+
+/**
+ * HTTP request to update a blueprint
+ */
+export async function putBlueprint() {}
+
+/**
+ * HTTP request to delete a blueprint
+ */
+export async function deleteBlueprint() {}

apps/client/src/features/app-settings/panel/automations-panel/AutomationSettings.tsx

@@ -6,17 +6,20 @@ import * as Panel from '../../panel-utils/PanelUtils';
 
 interface AutomationSettingsOptions {
   enabledIn: boolean;
+  enabledAutomations: boolean;
   portIn: number;
 }
 
 const automationSettingsPlaceholder = {
   enabledIn: false,
+  enabledAutomations: false,
   portIn: 8888,
 };
 
 const style = {
   flex: 'flex',
 };
+
 export default function AutomationSettings() {
   const {
     control,
@@ -58,11 +61,33 @@ export default function AutomationSettings() {
       >
         <Panel.Loader isLoading={false} />
 
+        <Panel.Title>Automation</Panel.Title>
+        <Panel.ListGroup>
+          <Panel.ListItem>
+            <Panel.Field
+              title='Enable automations'
+              description='Allow Ontime to send messages on lifecycle triggers'
+              error={errors.enabledAutomations?.message}
+            />
+            <Controller
+              control={control}
+              name='enabledAutomations'
+              render={({ field: { onChange, value, ref } }) => (
+                <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
+              )}
+            />
+          </Panel.ListItem>
+        </Panel.ListGroup>
+
         <Panel.Title>OSC Input</Panel.Title>
         {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
         <Panel.ListGroup>
           <Panel.ListItem>
-            <Panel.Field title='OSC input' description='Allow control of Ontime through OSC' />
+            <Panel.Field
+              title='OSC input'
+              description='Allow control of Ontime through OSC'
+              error={errors.enabledIn?.message}
+            />
             <Controller
               control={control}
               name='enabledIn'
@@ -72,7 +97,11 @@ export default function AutomationSettings() {
             />
           </Panel.ListItem>
           <Panel.ListItem>
-            <Panel.Field title='Listen on port' description='Port for incoming OSC. Default: 8888' error='TODO' />
+            <Panel.Field
+              title='Listen on port'
+              description='Port for incoming OSC. Default: 8888'
+              error={errors.portIn?.message}
+            />
             <Input
               id='portIn'
               placeholder='8888'
@@ -95,21 +124,6 @@ export default function AutomationSettings() {
             />
           </Panel.ListItem>
         </Panel.ListGroup>
-
-        <Panel.Title>Automation</Panel.Title>
-        {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-        <Panel.ListGroup>
-          <Panel.ListItem>
-            <Panel.Field title='Enable automations' description='Allow Ontime to send messages on lifecycle triggers' />
-            <Controller
-              control={control}
-              name='enabledIn'
-              render={({ field: { onChange, value, ref } }) => (
-                <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-              )}
-            />
-          </Panel.ListItem>
-        </Panel.ListGroup>
       </Panel.Section>
     </Panel.Card>
   );

apps/client/src/features/app-settings/panel/automations-panel/IntegrationsPanel.tsx

@@ -12,54 +12,6 @@ import BlueprintsList from './BlueprintsList';
 
 const integrationDocsUrl = 'https://docs.getontime.no/api/integrations/';
 
-// TODO: extract types to shared
-export type FilterRule = 'all' | 'any';
-type BlueprintId = string;
-
-export type AutomationBlueprint = {
-  title: string;
-  filterRule: FilterRule;
-  filters: AutomationFilter[];
-  outputs: AutomationOutput[];
-};
-export type NormalisedAutomationBlueprint = Record<BlueprintId, AutomationBlueprint>;
-
-export type Automation = {
-  id: BlueprintId;
-  title: string;
-  trigger: TimerLifeCycle;
-  blueprintId: string;
-};
-
-export type AutomationFilter = {
-  field: string; // this should be a key of a OntimeEvent + custom fields
-  operator: 'equals' | 'not_equals' | 'greater_than' | 'less_than' | 'contains' | 'not_contains';
-  value: string; // we use string but would coerce to the field value
-};
-
-export type AutomationOutput = OSCOutput | HTTPOutput | CompanionOutput;
-
-export type OSCOutput = {
-  type: 'osc';
-  targetIP: string;
-  targetPort: number;
-  address: string;
-  message: string;
-};
-
-export type HTTPOutput = {
-  type: 'http';
-  url: string;
-};
-
-export type CompanionOutput = {
-  type: 'companion';
-  targetIP: string;
-  address: string;
-  page: number;
-  bank: number;
-};
-
 const data: { blueprints: NormalisedAutomationBlueprint; automations: Automation[] } = {
   blueprints: {
     '1': {