Use a dropdown menu when selecting a power action
This commit is contained in:
Dane Everitt
parent
cf7f36c950
commit
1bf3165cbe
1 changed files with 59 additions and 39 deletions
|
|
@ -1,14 +1,13 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import Modal from '@/components/elements/Modal';
|
||||
import { Task } from '@/api/server/schedules/getServerSchedules';
|
||||
import { Form, Formik, Field as FormikField, FormikHelpers } from 'formik';
|
||||
import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationStore } from '@/state';
|
||||
import createOrUpdateScheduleTask from '@/api/server/schedules/createOrUpdateScheduleTask';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import Field from '@/components/elements/Field';
|
||||
import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { number, object, string } from 'yup';
|
||||
|
||||
|
|
@ -26,6 +25,61 @@ interface Values {
|
|||
timeOffset: string;
|
||||
}
|
||||
|
||||
const TaskDetailsForm = ({ isEditingTask }: { isEditingTask: boolean }) => {
|
||||
const { values: { action }, setFieldValue, setFieldTouched } = useFormikContext<Values>();
|
||||
|
||||
useEffect(() => {
|
||||
setFieldValue('payload', '');
|
||||
setFieldTouched('payload', false);
|
||||
}, [action]);
|
||||
|
||||
return (
|
||||
<Form className={'m-0'}>
|
||||
<h3 className={'mb-6'}>Edit Task</h3>
|
||||
<div className={'flex'}>
|
||||
<div className={'mr-2'}>
|
||||
<label className={'input-dark-label'}>Action</label>
|
||||
<FormikField as={'select'} name={'action'} className={'input-dark'}>
|
||||
<option value={'command'}>Send command</option>
|
||||
<option value={'power'}>Send power action</option>
|
||||
</FormikField>
|
||||
</div>
|
||||
<div className={'flex-1'}>
|
||||
{action === 'command' ?
|
||||
<Field
|
||||
name={'payload'}
|
||||
label={'Payload'}
|
||||
description={'The command to send to the server when this task executes.'}
|
||||
/>
|
||||
:
|
||||
<div>
|
||||
<label className={'input-dark-label'}>Payload</label>
|
||||
<FormikField as={'select'} name={'payload'} className={'input-dark'}>
|
||||
<option value={'start'}>Start the server</option>
|
||||
<option value={'restart'}>Restart the server</option>
|
||||
<option value={'stop'}>Stop the server</option>
|
||||
<option value={'kill'}>Terminate the server</option>
|
||||
</FormikField>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<Field
|
||||
name={'timeOffset'}
|
||||
label={'Time offset (in seconds)'}
|
||||
description={'The amount of time to wait after the previous task executes before running this one. If this is the first task on a schedule this will not be applied.'}
|
||||
/>
|
||||
</div>
|
||||
<div className={'flex justify-end mt-6'}>
|
||||
<button type={'submit'} className={'btn btn-primary btn-sm'}>
|
||||
{isEditingTask ? 'Save Changes' : 'Create Task'}
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ({ task, scheduleId, onDismissed }: Props) => {
|
||||
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
||||
const { clearFlashes, addError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
|
|
@ -54,7 +108,7 @@ export default ({ task, scheduleId, onDismissed }: Props) => {
|
|||
timeOffset: task?.timeOffset.toString() || '0',
|
||||
}}
|
||||
validationSchema={object().shape({
|
||||
action: string().required().oneOf(['command', 'power']),
|
||||
action: string().required().oneOf([ 'command', 'power' ]),
|
||||
payload: string().required('A task payload must be provided.'),
|
||||
timeOffset: number().typeError('The time offset must be a valid number between 0 and 900.')
|
||||
.required('A time offset value must be provided.')
|
||||
|
|
@ -62,7 +116,7 @@ export default ({ task, scheduleId, onDismissed }: Props) => {
|
|||
.max(900, 'The time offset must be less than 900 seconds.'),
|
||||
})}
|
||||
>
|
||||
{({ values, isSubmitting }) => (
|
||||
{({ isSubmitting }) => (
|
||||
<Modal
|
||||
visible={true}
|
||||
appear={true}
|
||||
|
|
@ -70,41 +124,7 @@ export default ({ task, scheduleId, onDismissed }: Props) => {
|
|||
showSpinnerOverlay={isSubmitting}
|
||||
>
|
||||
<FlashMessageRender byKey={'schedule:task'} className={'mb-4'}/>
|
||||
<Form className={'m-0'}>
|
||||
<h3 className={'mb-6'}>Edit Task</h3>
|
||||
<div className={'flex'}>
|
||||
<div className={'mr-2'}>
|
||||
<label className={'input-dark-label'}>Action</label>
|
||||
<FormikField as={'select'} name={'action'} className={'input-dark'}>
|
||||
<option value={'command'}>Send command</option>
|
||||
<option value={'power'}>Send power action</option>
|
||||
</FormikField>
|
||||
</div>
|
||||
<div className={'flex-1'}>
|
||||
<Field
|
||||
name={'payload'}
|
||||
label={'Payload'}
|
||||
description={
|
||||
values.action === 'command'
|
||||
? 'The command to send to the server when this task executes.'
|
||||
: 'The power action to send when this task executes. Options are "start", "stop", "restart", or "kill".'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<Field
|
||||
name={'timeOffset'}
|
||||
label={'Time offset (in seconds)'}
|
||||
description={'The amount of time to wait after the previous task executes before running this one. If this is the first task on a schedule this will not be applied.'}
|
||||
/>
|
||||
</div>
|
||||
<div className={'flex justify-end mt-6'}>
|
||||
<button type={'submit'} className={'btn btn-primary btn-sm'}>
|
||||
{task ? 'Save Changes' : 'Create Task'}
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
<TaskDetailsForm isEditingTask={typeof task !== 'undefined'}/>
|
||||
</Modal>
|
||||
)}
|
||||
</Formik>
|
||||
|
|
|
|||
Loading…
Reference in a new issue