Add initial task listing for schedules

resources/scripts/api/server/schedules/getServerSchedule.ts

@@ -0,0 +1,14 @@
+import http from '@/api/http';
+import { rawDataToServerSchedule, Schedule } from '@/api/server/schedules/getServerSchedules';
+
+export default (uuid: string, schedule: number): Promise<Schedule> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client/servers/${uuid}/schedules/${schedule}`, {
+            params: {
+                include: ['tasks'],
+            },
+        })
+            .then(({ data }) => resolve(rawDataToServerSchedule(data.attributes)))
+            .catch(reject);
+    });
+};

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

@@ -2,21 +2,15 @@ import React, { useMemo, useState } from 'react';
 import getServerSchedules, { Schedule } from '@/api/server/schedules/getServerSchedules';
 import { ServerContext } from '@/state/server';
 import Spinner from '@/components/elements/Spinner';
-import { RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps, Link } from 'react-router-dom';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import ScheduleRow from '@/components/server/schedules/ScheduleRow';
 import { httpErrorToHuman } from '@/api/http';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
-import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
 
-interface Params {
-    schedule?: string;
-}
-
-export default ({ history, match }: RouteComponentProps<Params>) => {
-    const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
-    const [ active, setActive ] = useState(0);
+export default ({ match, history }: RouteComponentProps) => {
+    const { uuid } = ServerContext.useStoreState(state => state.server.data!);
     const [ schedules, setSchedules ] = useState<Schedule[] | null>(null);
     const { clearFlashes, addError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
@@ -30,10 +24,6 @@ export default ({ history, match }: RouteComponentProps<Params>) => {
             });
     }, [ setSchedules ]);
 
-    const matched = useMemo(() => {
-        return schedules?.find(schedule => schedule.id === active);
-    }, [ active ]);
-
     return (
         <div className={'my-10 mb-6'}>
             <FlashMessageRender byKey={'schedules'} className={'mb-4'}/>
@@ -41,23 +31,19 @@ export default ({ history, match }: RouteComponentProps<Params>) => {
                 <Spinner size={'large'} centered={true}/>
                 :
                 schedules.map(schedule => (
-                    <div
+                    <a
                         key={schedule.id}
-                        onClick={() => setActive(schedule.id)}
+                        href={`${match.url}/${schedule.id}`}
                         className={'grey-row-box cursor-pointer'}
+                        onClick={e => {
+                            e.preventDefault();
+                            history.push(`${match.url}/${schedule.id}`, { schedule });
+                        }}
                     >
                         <ScheduleRow schedule={schedule}/>
-                    </div>
+                    </a>
                 ))
             }
-            {matched &&
-            <EditScheduleModal
-                schedule={matched}
-                visible={true}
-                appear={true}
-                onDismissed={() => setActive(0)}
-            />
-            }
         </div>
     );
 };

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

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { Schedule } from '@/api/server/schedules/getServerSchedules';
+import getServerSchedule from '@/api/server/schedules/getServerSchedule';
+import { ServerContext } from '@/state/server';
+import Spinner from '@/components/elements/Spinner';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+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';
+
+interface Params {
+    id: string;
+}
+
+interface State {
+    schedule?: Schedule;
+}
+
+export default ({ match, location: { state } }: RouteComponentProps<Params, {}, State>) => {
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const [ isLoading, setIsLoading ] = useState(true);
+    const [ showEditModal, setShowEditModal ] = useState(false);
+    const [ schedule, setSchedule ] = useState<Schedule | undefined>(state?.schedule);
+    const { clearFlashes, addError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    useEffect(() => {
+        if (schedule?.id === Number(match.params.id)) {
+            setIsLoading(false);
+            return;
+        }
+
+        clearFlashes('schedules');
+        getServerSchedule(uuid, Number(match.params.id))
+            .then(schedule => setSchedule(schedule))
+            .catch(error => {
+                console.error(error);
+                addError({ message: httpErrorToHuman(error), key: 'schedules' });
+            })
+            .then(() => setIsLoading(false));
+    }, [ schedule, match ]);
+
+    return (
+        <div className={'my-10 mb-6'}>
+            <FlashMessageRender byKey={'schedules'} className={'mb-4'}/>
+            {!schedule || isLoading ?
+                <Spinner size={'large'} centered={true}/>
+                :
+                <>
+                    <div className={'grey-row-box'}>
+                        <ScheduleRow schedule={schedule}/>
+                    </div>
+                    <EditScheduleModal
+                        visible={showEditModal}
+                        schedule={schedule}
+                        onDismissed={() => setShowEditModal(false)}
+                    />
+                    <div className={'flex items-center my-4'}>
+                        <div className={'flex-1'}>
+                            <h2>Schedule Tasks</h2>
+                        </div>
+                        <button className={'btn btn-secondary btn-sm'} onClick={() => setShowEditModal(true)}>
+                            Edit
+                        </button>
+                        <button className={'btn btn-primary btn-sm ml-4'}>
+                            New Task
+                        </button>
+                    </div>
+                    {schedule?.tasks.length > 0 ?
+                        <>
+                            {
+                                schedule.tasks
+                                    .sort((a, b) => a.sequenceId - b.sequenceId)
+                                    .map(task => (
+                                        <div
+                                            key={task.id}
+                                            className={'bg-neutral-700 border border-neutral-600 mb-2 px-6 py-4 rounded'}
+                                        >
+                                            <ScheduleTaskRow task={task}/>
+                                        </div>
+                                    ))
+                            }
+                            {schedule.tasks.length > 1 &&
+                            <p className={'text-xs text-neutral-400'}>
+                                Task delays are relative to the previous task in the listing.
+                            </p>
+                            }
+                        </>
+                        :
+                        <p className={'text-sm text-neutral-400'}>
+                            There are no tasks configured for this schedule. Consider adding a new one using the
+                            button above.
+                        </p>
+                    }
+                </>
+            }
+        </div>
+    );
+};

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Task } from '@/api/server/schedules/getServerSchedules';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
+import { faToggleOn } from '@fortawesome/free-solid-svg-icons/faToggleOn';
+
+interface Props {
+    task: Task;
+}
+
+export default ({ task }: Props) => {
+    return (
+        <div className={'flex items-center'}>
+            <FontAwesomeIcon icon={task.action === 'command' ? faCode : faToggleOn} className={'text-lg text-white'}/>
+            <div className={'flex-1'}>
+                <p className={'ml-6 text-neutral-300 mb-2 uppercase text-xs'}>
+                    {task.action === 'command' ? 'Send command' : 'Send power action'}
+                </p>
+                <code className={'ml-6 font-mono bg-neutral-800 rounded py-1 px-2 text-sm'}>
+                    {task.payload}
+                </code>
+            </div>
+            {task.sequenceId > 1 &&
+            <div className={'mr-6'}>
+                <p className={'text-center mb-1'}>
+                    {task.timeOffset}s
+                </p>
+                <p className={'text-neutral-300 uppercase text-2xs'}>
+                    Delay Run By
+                </p>
+            </div>
+            }
+            <div>
+                <a
+                    href={'#'}
+                    className={'text-sm p-2 text-neutral-500 hover:text-red-600 transition-color duration-150'}
+                >
+                    <FontAwesomeIcon icon={faTrashAlt}/>
+                </a>
+            </div>
+        </div>
+    );
+};

resources/scripts/routers/ServerRouter.tsx

@@ -13,6 +13,7 @@ import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import FileEditContainer from '@/components/server/files/FileEditContainer';
 import SettingsContainer from '@/components/server/settings/SettingsContainer';
 import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
+import ScheduleEditContainer from '@/components/server/schedules/ScheduleEditContainer';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const server = ServerContext.useStoreState(state => state.server.data);
@@ -63,6 +64,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                             <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
                             {/* <Route path={`${match.path}/users`} component={UsersContainer} exact/> */}
                             <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/>
+                            <Route path={`${match.path}/schedules/:id`} component={ScheduleEditContainer} exact/>
                             <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
                         </Switch>
                     </React.Fragment>