make subscription part of modal generic

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

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { Alias, OSCSettings, OscSubscription, ProjectData, Settings, UserFields, ViewSettings } from 'ontime-types';
+import { Alias, OSCSettings, Subscription, ProjectData, Settings, UserFields, ViewSettings, HTTPSettings } from 'ontime-types';
 
 import { apiRepoLatest } from '../../externals';
 import { InfoType } from '../models/Info';

apps/client/src/features/modals/integration-modal/OscIntegration.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import type { OscSubscription } from 'ontime-types';
+import type { Subscription } from 'ontime-types';
 import { TimerLifeCycle } from 'ontime-types';
 
 import useOscSettings, { usePostOscSubscriptions } from '../../../common/hooks-query/useOscSettings';
@@ -8,7 +8,7 @@ import { useEmitLog } from '../../../common/stores/logger';
 import ModalLoader from '../modal-loader/ModalLoader';
 import OntimeModalFooter from '../OntimeModalFooter';
 
-import OscSubscriptionRow from './OscSubscriptionRow';
+import SubscriptionRow from './SubscriptionRow';
 
 import styles from '../Modal.module.scss';
 
@@ -51,7 +51,7 @@ export default function OscIntegration() {
     register,
     reset,
     formState: { isSubmitting, isDirty, isValid },
-  } = useForm<OscSubscription>({
+  } = useForm<Subscription>({
     defaultValues: data.subscriptions,
     values: data.subscriptions,
     resetOptions: {
@@ -71,7 +71,7 @@ export default function OscIntegration() {
     reset(data.subscriptions);
   };
 
-  const onSubmit = async (values: OscSubscription) => {
+  const onSubmit = async (values: Subscription) => {
     try {
       const subscriptions = {
         onLoad: values.onLoad ?? [],
@@ -91,10 +91,10 @@ export default function OscIntegration() {
   if (isFetching) {
     return <ModalLoader />;
   }
-
+const placeholder = 'OSC message'
   return (
     <form onSubmit={handleSubmit(onSubmit)} className={styles.sectionContainer} id='osc-subscriptions'>
-      <OscSubscriptionRow
+      <SubscriptionRow
         cycle={TimerLifeCycle.onLoad}
         title={sectionText.onLoad.title}
         subtitle={sectionText.onLoad.subtitle}
@@ -102,8 +102,9 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
-      <OscSubscriptionRow
+      <SubscriptionRow
         cycle={TimerLifeCycle.onStart}
         title={sectionText.onStart.title}
         subtitle={sectionText.onStart.subtitle}
@@ -111,8 +112,9 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
-      <OscSubscriptionRow
+      <SubscriptionRow
         cycle={TimerLifeCycle.onPause}
         title={sectionText.onPause.title}
         subtitle={sectionText.onPause.subtitle}
@@ -120,8 +122,9 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
-      <OscSubscriptionRow
+      <SubscriptionRow
         cycle={TimerLifeCycle.onStop}
         title={sectionText.onStop.title}
         subtitle={sectionText.onStop.subtitle}
@@ -129,8 +132,9 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
-      <OscSubscriptionRow
+      <SubscriptionRow
         cycle={TimerLifeCycle.onUpdate}
         title={sectionText.onUpdate.title}
         subtitle={sectionText.onUpdate.subtitle}
@@ -138,8 +142,9 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
-      <OscSubscriptionRow
+      <SubscriptionRow
         cycle={TimerLifeCycle.onFinish}
         title={sectionText.onFinish.title}
         subtitle={sectionText.onFinish.subtitle}
@@ -147,6 +152,7 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
       <OntimeModalFooter
         formId='osc-subscriptions'

apps/client/src/features/modals/integration-modal/SubscriptionRow.tsx

@@ -2,25 +2,26 @@ import { Control, useFieldArray, UseFormRegister } from 'react-hook-form';
 import { Button, IconButton, Input, Switch } from '@chakra-ui/react';
 import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
 import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
-import { OscSubscription, TimerLifeCycle } from 'ontime-types';
+import { Subscription, TimerLifeCycle } from 'ontime-types';
 
 import { useEmitLog } from '../../../common/stores/logger';
 
 import collapseStyles from '../../../common/components/collapse-bar/CollapseBar.module.scss';
 import styles from '../Modal.module.scss';
 
-interface OscSubscriptionRowProps {
+interface SubscriptionRowProps {
   cycle: TimerLifeCycle;
   title: string;
   subtitle: string;
   visible: boolean;
   setShowSection: (cycle: TimerLifeCycle) => void;
-  register: UseFormRegister<OscSubscription>;
+  register: UseFormRegister<Subscription>;
-  control: Control<OscSubscription>;
+  control: Control<Subscription>;
+  placeholder: string
 }
 
-export default function OscSubscriptionRow(props: OscSubscriptionRowProps) {
+export default function SubscriptionRow(props: SubscriptionRowProps) {
-  const { cycle, title, subtitle, visible, setShowSection, register, control } = props;
+  const { cycle, title, subtitle, visible, setShowSection, register, control , placeholder} = props;
   const { emitError } = useEmitLog();
   const { fields, append, remove } = useFieldArray({
     name: cycle,
@@ -64,7 +65,7 @@ export default function OscSubscriptionRow(props: OscSubscriptionRowProps) {
                 colorScheme='red'
               />
               <Input
-                placeholder='OSC Message'
+                placeholder={placeholder}
                 size='xs'
                 variant='ontime-filled-on-light'
                 autoComplete='off'