Add initial task listing for schedules

app/Http/Controllers/Api/Client/Servers/ScheduleController.php

@@ -4,8 +4,10 @@ namespace Pterodactyl\Http\Controllers\Api\Client\Servers;
 
 use Illuminate\Http\Request;
 use Pterodactyl\Models\Server;
+use Pterodactyl\Models\Schedule;
 use Pterodactyl\Transformers\Api\Client\ScheduleTransformer;
 use Pterodactyl\Http\Controllers\Api\Client\ClientApiController;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 
 class ScheduleController extends ClientApiController
 {
@@ -25,4 +27,25 @@ class ScheduleController extends ClientApiController
             ->transformWith($this->getTransformer(ScheduleTransformer::class))
             ->toArray();
     }
+
+    /**
+     * Returns a specific schedule for the server.
+     *
+     * @param \Illuminate\Http\Request $request
+     * @param \Pterodactyl\Models\Server $server
+     * @param \Pterodactyl\Models\Schedule $schedule
+     * @return array
+     */
+    public function view(Request $request, Server $server, Schedule $schedule)
+    {
+        if ($schedule->server_id !== $server->id) {
+            throw new NotFoundHttpException;
+        }
+
+        $schedule->loadMissing('tasks');
+
+        return $this->fractal->item($schedule)
+            ->transformWith($this->getTransformer(ScheduleTransformer::class))
+            ->toArray();
+    }
 }

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 {
+export default ({ match, history }: RouteComponentProps) => {
-    schedule?: string;
+    const { uuid } = ServerContext.useStoreState(state => state.server.data!);
-}
-
-export default ({ history, match }: RouteComponentProps<Params>) => {
-    const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
-    const [ active, setActive ] = useState(0);
     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>

routes/api-client.php

@@ -61,6 +61,7 @@ Route::group(['prefix' => '/servers/{server}', 'middleware' => [AuthenticateServ
 
     Route::group(['prefix' => '/schedules'], function () {
         Route::get('/', 'Servers\ScheduleController@index');
+        Route::get('/{schedule}', 'Servers\ScheduleController@view');
     });
 
     Route::group(['prefix' => '/network'], function () {

tailwind.js

@@ -837,6 +837,23 @@ module.exports = {
         'current': 'currentColor',
     },
 
+    transitionDuration: {
+        '75': '75ms',
+        '100': '100ms',
+        '150': '150ms',
+        '250': '250ms',
+        '500': '500ms',
+        '750': '750ms',
+        '1000': '1000ms',
+    },
+
+    transitionTimingFunction: {
+        'linear': 'linear',
+        'in': 'cubic-bezier(0.4, 0, 1, 1)',
+        'out': 'cubic-bezier(0, 0, 0.2, 1)',
+        'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+
     /*
     |-----------------------------------------------------------------------------
     | Modules                  https://tailwindcss.com/docs/configuration#modules
@@ -925,6 +942,52 @@ module.exports = {
         require('tailwindcss/plugins/container')({
             center: true,
         }),
+
+        function ({ addUtilities }) {
+            addUtilities({
+                '.transition-none': {
+                    'transition-property': 'none',
+                },
+                '.transition-all': {
+                    'transition-property': 'all',
+                },
+                '.transition': {
+                    'transition-property': 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+                },
+                '.transition-colors': {
+                    'transition-property': 'background-color, border-color, color, fill, stroke',
+                },
+                '.transition-opacity': {
+                    'transition-property': 'opacity',
+                },
+                '.transition-shadow': {
+                    'transition-property': 'box-shadow',
+                },
+                '.transition-transform': {
+                    'transition-property': 'transform',
+                },
+            }, ['hover', 'focus']);
+        },
+
+        function ({ addUtilities, config }) {
+            const durations = config('transitionDuration', {});
+
+            addUtilities(Object.keys(durations).map(key => ({
+                [`.duration-${key}`]: {
+                    'transition-duration': durations[key],
+                },
+            })), ['hover', 'focus']);
+        },
+
+        function ({ addUtilities, config }) {
+            const timingFunctions = config('transitionTimingFunction', {});
+
+            addUtilities(Object.keys(timingFunctions).map(key => ({
+                [`.ease-${key}`]: {
+                    'transition-timing-function': timingFunctions[key],
+                },
+            })));
+        },
     ],
 
     /*