Add support for creating a new task

resources/scripts/components/server/schedules/NewTaskButton.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Task } from '@/api/server/schedules/getServerSchedules';
+import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
+
+interface Props {
+    scheduleId: number;
+    onTaskAdded: (task: Task) => void;
+}
+
+export default ({ scheduleId, onTaskAdded }: Props) => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <>
+            {visible &&
+                <TaskDetailsModal
+                    scheduleId={scheduleId}
+                    onDismissed={task => {
+                        task && onTaskAdded(task);
+                        setVisible(false);
+                    }}
+                />
+            }
+            <button className={'btn btn-primary btn-sm ml-4'} onClick={() => setVisible(true)}>
+                New Task
+            </button>
+        </>
+    );
+};

resources/scripts/components/server/schedules/ScheduleEditContainer.tsx

@@ -11,6 +11,7 @@ import { httpErrorToHuman } from '@/api/http';
 import ScheduleRow from '@/components/server/schedules/ScheduleRow';
 import ScheduleTaskRow from '@/components/server/schedules/ScheduleTaskRow';
 import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
+import NewTaskButton from '@/components/server/schedules/NewTaskButton';
 
 interface Params {
     id: string;
@@ -65,9 +66,12 @@ export default ({ match, location: { state } }: RouteComponentProps<Params, {},
                         <button className={'btn btn-secondary btn-sm'} onClick={() => setShowEditModal(true)}>
                             Edit
                         </button>
-                        <button className={'btn btn-primary btn-sm ml-4'}>
+                        <NewTaskButton
-                            New Task
+                            scheduleId={schedule.id}
-                        </button>
+                            onTaskAdded={task => setSchedule(s => ({
+                                ...s!, tasks: [ ...s!.tasks, task ],
+                            }))}
+                        />
                     </div>
                     {schedule?.tasks.length > 0 ?
                         <>

resources/scripts/components/server/schedules/TaskDetailsModal.tsx

@@ -10,6 +10,7 @@ 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';
 
 interface Props {
     scheduleId: number;
@@ -52,6 +53,14 @@ export default ({ task, scheduleId, onDismissed }: Props) => {
                 payload: task?.payload || '',
                 timeOffset: task?.timeOffset.toString() || '0',
             }}
+            validationSchema={object().shape({
+                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.')
+                    .min(0, 'The time offset must be at least 0 seconds.')
+                    .max(900, 'The time offset must be less than 900 seconds.'),
+            })}
         >
             {({ values, isSubmitting }) => (
                 <Modal