mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-09 01:13:55 +00:00
make subscription part of modal generic
This commit is contained in:
@@ -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'
|
||||
|
||||
+8
-7
@@ -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'
|
||||
Reference in New Issue
Block a user