import React, { useEffect } from 'react'; import Modal from '@/components/elements/Modal'; import { Schedule, Task } from '@/api/server/schedules/getServerSchedules'; import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik'; import { ServerContext } from '@/state/server'; import createOrUpdateScheduleTask from '@/api/server/schedules/createOrUpdateScheduleTask'; import { httpErrorToHuman } from '@/api/http'; import Field from '@/components/elements/Field'; import FlashMessageRender from '@/components/FlashMessageRender'; import { number, object, string } from 'yup'; import useFlash from '@/plugins/useFlash'; import useServer from '@/plugins/useServer'; import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper'; import tw from 'twin.macro'; import Label from '@/components/elements/Label'; import { Textarea } from '@/components/elements/Input'; import Button from '@/components/elements/Button'; import Select from '@/components/elements/Select'; interface Props { schedule: Schedule; // If a task is provided we can assume we're editing it. If not provided, // we are creating a new one. task?: Task; onDismissed: () => void; } interface Values { action: string; payload: string; timeOffset: string; } const TaskDetailsForm = ({ isEditingTask }: { isEditingTask: boolean }) => { const { values: { action }, initialValues, setFieldValue, setFieldTouched, isSubmitting } = useFormikContext(); useEffect(() => { if (action !== initialValues.action) { setFieldValue('payload', action === 'power' ? 'start' : ''); setFieldTouched('payload', false); } else { setFieldValue('payload', initialValues.payload); setFieldTouched('payload', false); } }, [ action ]); return (

{isEditingTask ? 'Edit Task' : 'Create Task'}

{action === 'command' ? : action === 'power' ?
:
}
); }; export default ({ task, schedule, onDismissed }: Props) => { const { uuid } = useServer(); const { clearFlashes, addError } = useFlash(); const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule); useEffect(() => { clearFlashes('schedule:task'); }, []); const submit = (values: Values, { setSubmitting }: FormikHelpers) => { clearFlashes('schedule:task'); createOrUpdateScheduleTask(uuid, schedule.id, task?.id, values) .then(task => { let tasks = schedule.tasks.map(t => t.id === task.id ? task : t); if (!schedule.tasks.find(t => t.id === task.id)) { tasks = [ ...tasks, task ]; } appendSchedule({ ...schedule, tasks }); onDismissed(); }) .catch(error => { console.error(error); setSubmitting(false); addError({ message: httpErrorToHuman(error), key: 'schedule:task' }); }); }; return ( v !== 'backup', then: string().required('A task payload must be provided.'), otherwise: string(), }), timeOffset: number().typeError('The time offset must be a valid number between 0 and 900.') .required('A time offset value must be provided.') .min(0, 'The time offset must be at least 0 seconds.') .max(900, 'The time offset must be less than 900 seconds.'), })} > {({ isSubmitting }) => ( onDismissed()} showSpinnerOverlay={isSubmitting} > )} ); };