make subscription part of modal generic

This commit is contained in:
arc-alex
2023-11-04 20:36:19 +01:00
parent 4c38207a15
commit 477fbbe666
3 changed files with 26 additions and 19 deletions
+1 -1
View File
@@ -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';
@@ -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'
@@ -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>;
control: Control<OscSubscription>;
register: UseFormRegister<Subscription>;
control: Control<Subscription>;
placeholder: string
}
export default function OscSubscriptionRow(props: OscSubscriptionRowProps) {
const { cycle, title, subtitle, visible, setShowSection, register, control } = props;
export default function SubscriptionRow(props: SubscriptionRowProps) {
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'