mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-18 21:54:09 +00:00
Fix ontime aux actions (#1684)
* switch to base ui * ensure all action types is part of the valitation * update test * atempt to do it in the base-ui way * fix fixing * allow undefide visible on set timer message * fix set time not showing * correct time data for aux set automation --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me>
This commit is contained in:
Alex Christoffer Rasmussen
committed by
GitHub
GitHub
parent
8d68a4554d
commit
4d359445a7
@@ -55,6 +55,7 @@ export default function AutomationForm(props: AutomationFormProps) {
|
||||
setError,
|
||||
setFocus,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors, isSubmitting, isDirty, isValid },
|
||||
} = useForm<AutomationDTO>({
|
||||
mode: 'onChange',
|
||||
@@ -106,8 +107,7 @@ export default function AutomationForm(props: AutomationFormProps) {
|
||||
};
|
||||
|
||||
const handleAddnewOntimeAction = () => {
|
||||
// @ts-expect-error -- we dont want to choose an action
|
||||
appendOutput({ type: 'ontime', action: undefined });
|
||||
appendOutput({ type: 'ontime', action: 'aux1-start' });
|
||||
};
|
||||
|
||||
const handleTestOSCOutput = async (index: number) => {
|
||||
@@ -428,6 +428,7 @@ export default function AutomationForm(props: AutomationFormProps) {
|
||||
register={register}
|
||||
rowErrors={rowErrors}
|
||||
setValue={setValue}
|
||||
watch={watch}
|
||||
>
|
||||
<span> </span>
|
||||
<Panel.InlineElements relation='inner'>
|
||||
|
||||
+64
-43
@@ -1,10 +1,9 @@
|
||||
import { PropsWithChildren, useState } from 'react';
|
||||
import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
|
||||
import { Select } from '@chakra-ui/react';
|
||||
import { AutomationDTO, OntimeAction } from 'ontime-types';
|
||||
import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form';
|
||||
import { AutomationDTO, OntimeAction, OntimeActionKey, SecondarySource } from 'ontime-types';
|
||||
|
||||
import Input from '../../../../common/components/input/input/Input';
|
||||
import { cx } from '../../../../common/utils/styleUtils';
|
||||
import Select from '../../../../common/components/select/Select';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
|
||||
import style from './AutomationForm.module.scss';
|
||||
@@ -20,53 +19,58 @@ interface OntimeActionFormProps {
|
||||
secondarySource?: { message?: string };
|
||||
};
|
||||
value: OntimeAction['action'];
|
||||
watch: UseFormWatch<AutomationDTO>;
|
||||
setValue: UseFormSetValue<AutomationDTO>;
|
||||
}
|
||||
|
||||
export default function OntimeActionForm(props: PropsWithChildren<OntimeActionFormProps>) {
|
||||
const { index, register, setValue, rowErrors, value, children } = props;
|
||||
const [selectedAction, setSelectedAction] = useState<OntimeAction['action']>(value || 'aux-start');
|
||||
const { index, register, setValue, rowErrors, value, children, watch } = props;
|
||||
const [selectedAction, setSelectedAction] = useState<string>(value);
|
||||
|
||||
const updateSelectedAction = (value: string) => {
|
||||
setSelectedAction(value as OntimeAction['action']);
|
||||
setValue(`outputs.${index}.action`, value as OntimeAction['action']);
|
||||
const handleSetAction = (value: OntimeActionKey) => {
|
||||
setValue(`outputs.${index}.action`, value, { shouldDirty: true });
|
||||
setSelectedAction(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cx([style.actionSection, selectedAction && style[selectedAction]])}>
|
||||
<input type='hidden' {...register(`outputs.${index}.action`)} value={selectedAction} />
|
||||
<div className={style.actionSection}>
|
||||
<label>
|
||||
Action
|
||||
<Select
|
||||
variant='ontime'
|
||||
size='sm'
|
||||
value={selectedAction}
|
||||
onChange={(event) => updateSelectedAction(event.target.value)}
|
||||
>
|
||||
<option value='aux-start'>Aux 1: start</option>
|
||||
<option value='aux-pause'>Aux 1: pause</option>
|
||||
<option value='aux-stop'>Aux 1: stop</option>
|
||||
<option value='aux-set'>Aux 2: set</option>
|
||||
<option value='aux-start'>Aux 2: start</option>
|
||||
<option value='aux-pause'>Aux 2: pause</option>
|
||||
<option value='aux-stop'>Aux 2: stop</option>
|
||||
<option value='aux-set'>Aux 2: set</option>
|
||||
<option value='aux-start'>Aux 3: start</option>
|
||||
<option value='aux-pause'>Aux 3: pause</option>
|
||||
<option value='aux-stop'>Aux 3: stop</option>
|
||||
<option value='aux-set'>Aux 3: set</option>
|
||||
<option value='message-set'>Timer: timer message</option>
|
||||
<option value='message-secondary'>Timer: timer secondary</option>
|
||||
</Select>
|
||||
onValueChange={(value) => {
|
||||
handleSetAction(value as OntimeActionKey);
|
||||
}}
|
||||
value={watch(`outputs.${index}.action`)}
|
||||
options={[
|
||||
{ value: 'aux1-pause', label: 'Aux 1: pause' },
|
||||
{ value: 'aux2-pause', label: 'Aux 2: pause' },
|
||||
{ value: 'aux3-pause', label: 'Aux 3: pause' },
|
||||
|
||||
{ value: 'aux1-start', label: 'Aux 1: start' },
|
||||
{ value: 'aux2-start', label: 'Aux 2: start' },
|
||||
{ value: 'aux3-start', label: 'Aux 3: start' },
|
||||
|
||||
{ value: 'aux1-stop', label: 'Aux 1: stop' },
|
||||
{ value: 'aux2-stop', label: 'Aux 2: stop' },
|
||||
{ value: 'aux3-stop', label: 'Aux 3: stop' },
|
||||
|
||||
{ value: 'aux1-set', label: 'Aux 1: set' },
|
||||
{ value: 'aux2-set', label: 'Aux 2: set' },
|
||||
{ value: 'aux3-set', label: 'Aux 3: set' },
|
||||
|
||||
{ value: 'message-set', label: 'Primary Message: set' },
|
||||
{ value: 'message-secondary', label: 'Secondary Message: source' },
|
||||
]}
|
||||
/>
|
||||
<Panel.Error>{rowErrors?.action?.message}</Panel.Error>
|
||||
</label>
|
||||
|
||||
{selectedAction === 'aux1-set' && (
|
||||
{selectedAction.startsWith('aux') && selectedAction.endsWith('set') && (
|
||||
<label>
|
||||
New time
|
||||
<Input
|
||||
{...register(`outputs.${index}.time`, {
|
||||
required: { value: true, message: 'Required field' },
|
||||
required: { value: true, message: 'Required field' }, //TODO:(automation set aux) not sure what way around to have the string and where to have the ms value
|
||||
})}
|
||||
fluid
|
||||
placeholder='eg: 10m5s'
|
||||
@@ -84,11 +88,19 @@ export default function OntimeActionForm(props: PropsWithChildren<OntimeActionFo
|
||||
</label>
|
||||
<label>
|
||||
Visibility
|
||||
<Select variant='ontime' size='sm' {...register(`outputs.${index}.visible`)}>
|
||||
<option value=''>Untouched</option>
|
||||
<option value='true'>Show</option>
|
||||
<option value='false'>Hide</option>
|
||||
</Select>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
// we need to translate the undefined value to 'untouched'
|
||||
const translatedValue = value === 'untouched' ? undefined : (value as boolean | undefined);
|
||||
setValue(`outputs.${index}.visible`, translatedValue, { shouldDirty: true });
|
||||
}}
|
||||
value={watch(`outputs.${index}.visible`) === undefined ? 'untouched' : watch(`outputs.${index}.visible`)}
|
||||
options={[
|
||||
{ value: 'untouched', label: 'Untouched' },
|
||||
{ value: true, label: 'Show' },
|
||||
{ value: false, label: 'Hide' },
|
||||
]}
|
||||
/>
|
||||
<Panel.Error>{rowErrors?.visible?.message}</Panel.Error>
|
||||
</label>
|
||||
</>
|
||||
@@ -97,11 +109,20 @@ export default function OntimeActionForm(props: PropsWithChildren<OntimeActionFo
|
||||
{selectedAction === 'message-secondary' && (
|
||||
<label>
|
||||
Timer secondary source
|
||||
<Select variant='ontime' size='sm' {...register(`outputs.${index}.secondarySource`)}>
|
||||
<option value='aux'>Auxiliary timer</option>
|
||||
<option value='external'>External</option>
|
||||
<option value='null'>None</option>
|
||||
</Select>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
setValue(`outputs.${index}.secondarySource`, value as SecondarySource, { shouldDirty: true });
|
||||
}}
|
||||
value={watch(`outputs.${index}.secondarySource`)}
|
||||
options={[
|
||||
{ value: null, label: 'Select secondary source', disabled: true },
|
||||
{ value: 'aux1', label: 'Auxiliary timer 1' },
|
||||
{ value: 'aux2', label: 'Auxiliary timer 2' },
|
||||
{ value: 'aux3', label: 'Auxiliary timer 3' },
|
||||
{ value: 'external', label: 'External' },
|
||||
{ value: 'null', label: 'None' },
|
||||
]}
|
||||
/>
|
||||
<Panel.Error>{rowErrors?.secondarySource?.message}</Panel.Error>
|
||||
</label>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user