wip: automation UI

merge with automation service

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

@@ -0,0 +1,85 @@
+import axios from 'axios';
+import type {
+  Automation,
+  AutomationBlueprint,
+  AutomationBlueprintDTO,
+  AutomationDTO,
+  AutomationOutput,
+  AutomationSettings,
+} from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const automationsPath = `${apiEntryUrl}/automations`;
+
+/**
+ * HTTP request to get the automations settings
+ */
+export async function getAutomationSettings(): Promise<AutomationSettings> {
+  const res = await axios.get(automationsPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to edit the automations settings
+ */
+export async function editAutomationSettings(
+  automationSettings: Partial<AutomationSettings>,
+): Promise<AutomationSettings> {
+  const res = await axios.post(automationsPath, automationSettings);
+  return res.data;
+}
+
+/**
+ * HTTP request to create a new automation
+ */
+export async function addAutomation(automation: AutomationDTO): Promise<Automation> {
+  const res = await axios.post(`${automationsPath}/automation`, automation);
+  return res.data;
+}
+
+/**
+ * HTTP request to update an automation
+ */
+export async function editAutomation(id: string, automation: Automation): Promise<Automation> {
+  const res = await axios.put(`${automationsPath}/automation/${id}`, automation);
+  return res.data;
+}
+
+/**
+ * HTTP request to delete an automation
+ */
+export function deleteAutomation(id: string): Promise<void> {
+  return axios.delete(`${automationsPath}/automation/${id}`);
+}
+
+/**
+ * HTTP request to create a new blueprint
+ */
+export async function addBlueprint(blueprint: AutomationBlueprintDTO): Promise<AutomationBlueprint> {
+  const res = await axios.post(`${automationsPath}/blueprint`, blueprint);
+  return res.data;
+}
+
+/**
+ * HTTP request to update a blueprint
+ */
+export async function editBlueprint(id: string, blueprint: AutomationBlueprint): Promise<AutomationBlueprint> {
+  const res = await axios.put(`${automationsPath}/blueprint/${id}`, blueprint);
+  return res.data;
+}
+
+/**
+ * HTTP request to delete a blueprint
+ */
+export function deleteBlueprint(id: string): Promise<void> {
+  return axios.delete(`${automationsPath}/blueprint/${id}`);
+}
+
+/**
+ * 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<void> {
+  return axios.post(automationsPath, output);
+}

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

@@ -4,6 +4,7 @@ import { serverURL } from '../../externals';
 export const APP_INFO = ['appinfo'];
 export const APP_SETTINGS = ['appSettings'];
 export const APP_VERSION = ['appVersion'];
+export const AUTOMATION = ['automation'];
 export const CUSTOM_FIELDS = ['customFields'];
 export const HTTP_SETTINGS = ['httpSettings'];
 export const OSC_SETTINGS = ['oscSettings'];

apps/client/src/features/app-settings/AppSettings.tsx

@@ -3,6 +3,7 @@ import { ErrorBoundary } from '@sentry/react';
 import { useKeyDown } from '../../common/hooks/useKeyDown';
 
 import AboutPanel from './panel/about-panel/AboutPanel';
+import AutomationPanel from './panel/automations-panel/AutomationPanel';
 import ClientControlPanel from './panel/client-control-panel/ClientControlPanel';
 import FeatureSettingsPanel from './panel/feature-settings-panel/FeatureSettingsPanel';
 import GeneralPanel from './panel/general-panel/GeneralPanel';
@@ -31,6 +32,7 @@ export default function AppSettings() {
           {panel === 'feature_settings' && <FeatureSettingsPanel location={location} />}
           {panel === 'sources' && <SourcesPanel />}
           {panel === 'integrations' && <IntegrationsPanel location={location} />}
+          {panel === 'automation' && <AutomationPanel location={location} />}
           {panel === 'client_control' && <ClientControlPanel />}
           {panel === 'about' && <AboutPanel />}
           {panel === 'network' && <NetworkLogPanel location={location} />}

apps/client/src/features/app-settings/panel-content/PanelContent.module.scss

@@ -10,12 +10,12 @@
   flex-direction: column;
   height: 100%;
   width: 100%;
-
   position: relative;
 }
 
 .content {
   margin: 1rem;
   overflow-y: auto;
   flex-grow: 1;
+  padding-bottom: 300px;
 }

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -32,7 +32,6 @@ $inner-padding: 1rem;
   flex-direction: column;
   gap: 1rem;
   color: $ui-white;
-
 }
 
 .section {
@@ -175,8 +174,8 @@ $inner-padding: 1rem;
   background-color: $black-10;
   text-align: center;
   color: $muted-gray;
-
-  td {
+  
+  td {    
     padding: 2rem;
   }
 
@@ -185,23 +184,15 @@ $inner-padding: 1rem;
   }
 }
 
-.inlineSiblings {
+.inlineElements {
   display: flex;
   align-items: center;
-  gap: 1rem;
-}
-
-.empty {
-  background-color: $black-10;
-  text-align: center;
-  color: $muted-gray;
 
-  td {    
-    padding: 2rem;
+  &.inner {
+    gap: 0.5rem;
   }
-
-  button {
-    margin-top: 1rem;
+  &.component {
+    gap: 1rem;
   }
 }
 

apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 import { Button } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 
@@ -55,10 +55,9 @@ export function Card({ children, className, ...props }: { children: ReactNode }
 }
 
 export function Table({ className, children }: { className?: string; children: ReactNode }) {
-  const classes = cx([style.table, className]);
   return (
     <div className={style.pad}>
-      <table className={classes}>{children}</table>
+      <table className={cx([style.table, className])}>{children}</table>
     </div>
   );
 }
@@ -68,7 +67,7 @@ export function TableEmpty({ handleClick }: { handleClick: () => void }) {
     <tr className={style.empty}>
       <td colSpan={99}>
         <div>No data yet</div>
-        <Button onClick={handleClick} variant='ontime-subtle' rightIcon={<IoAdd />} size='sm'>
+        <Button onClick={handleClick} variant='ontime-filled' rightIcon={<IoAdd />} size='sm'>
           New
         </Button>
       </td>
@@ -124,3 +123,8 @@ export function Loader({ isLoading }: { isLoading: boolean }) {
     </div>
   );
 }
+
+type Relation = 'inner' | 'component' | 'section';
+export function InlineElements({ children, relation = 'component' }: PropsWithChildren<{ relation?: Relation }>) {
+  return <div className={cx([style.inlineElements, style[relation]])}>{children}</div>;
+}

apps/client/src/features/app-settings/panel/automations-panel/AutomationManagement.module.scss

@@ -0,0 +1,5 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}

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

@@ -0,0 +1,36 @@
+import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
+import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
+import type { PanelBaseProps } from '../../panel-list/PanelList';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+import AutomationSettingsForm from './AutomationSettingsForm';
+import AutomationsList from './AutomationsList';
+import BlueprintsList from './BlueprintsList';
+
+export default function AutomationPanel({ location }: PanelBaseProps) {
+  const { data } = useAutomationSettings();
+  const settingsRef = useScrollIntoView<HTMLDivElement>('settings', location);
+  const blueprintsRef = useScrollIntoView<HTMLDivElement>('blueprints', location);
+  const automationRef = useScrollIntoView<HTMLDivElement>('automations', location);
+
+  return (
+    <>
+      <Panel.Header>Automation</Panel.Header>
+      <Panel.Section>
+        <div ref={settingsRef}>
+          <AutomationSettingsForm
+            enabledAutomations={data.enabledAutomations}
+            enabledOscIn={data.enabledOscIn}
+            oscPortIn={data.oscPortIn}
+          />
+        </div>
+        <div ref={blueprintsRef}>
+          <BlueprintsList blueprints={data.blueprints} />
+        </div>
+        <div ref={automationRef}>
+          <AutomationsList automations={data.automations} blueprints={data.blueprints} />
+        </div>
+      </Panel.Section>
+    </>
+  );
+}