Add cron cheatsheet (#3866)

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
 import Field from '@/components/elements/Field';
 import { Form, Formik, FormikHelpers } from 'formik';
@@ -12,6 +12,8 @@ import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import ModalContext from '@/context/ModalContext';
 import asModal from '@/hoc/asModal';
+import Switch from '@/components/elements/Switch';
+import ScheduleCheatsheetCards from '@/components/server/schedules/ScheduleCheatsheetCards';
 
 interface Props {
     schedule?: Schedule;
@@ -34,6 +36,7 @@ const EditScheduleModal = ({ schedule }: Props) => {
 
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
+    const [ showCheatsheet, setShowCheetsheet ] = useState(false);
 
     useEffect(() => {
         return () => {
@@ -103,6 +106,20 @@ const EditScheduleModal = ({ schedule }: Props) => {
                         The schedule system supports the use of Cronjob syntax when defining when tasks should begin
                         running. Use the fields above to specify when these tasks should begin running.
                     </p>
+                    <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
+                        <Switch
+                            name={'show_cheatsheet'}
+                            description={'Show the cron cheatsheet for some examples.'}
+                            label={'Show Cheatsheet'}
+                            defaultChecked={showCheatsheet}
+                            onChange={() => setShowCheetsheet(s => !s)}
+                        />
+                        {showCheatsheet &&
+                            <div css={tw`block md:flex w-full`}>
+                                <ScheduleCheatsheetCards/>
+                            </div>
+                        }
+                    </div>
                     <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
                         <FormikSwitch
                             name={'onlyWhenOnline'}

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import tw from 'twin.macro';
+
+export default () => {
+    return (
+        <>
+            <div css={tw`md:w-1/2 h-full bg-neutral-600`}>
+                <div css={tw`flex flex-col`}>
+                    <h2 css={tw`py-4 px-6 font-bold`}>Examples</h2>
+                    <div css={tw`flex py-4 px-6 bg-neutral-500`}>
+                        <div css={tw`w-1/2`}>*/5 * * * *</div>
+                        <div css={tw`w-1/2`}>every 5 minutes</div>
+                    </div>
+                    <div css={tw`flex py-4 px-6`}>
+                        <div css={tw`w-1/2`}>0 */1 * * *</div>
+                        <div css={tw`w-1/2`}>every hour</div>
+                    </div>
+                    <div css={tw`flex py-4 px-6 bg-neutral-500`}>
+                        <div css={tw`w-1/2`}>0 8-12 * * *</div>
+                        <div css={tw`w-1/2`}>hour range</div>
+                    </div>
+                    <div css={tw`flex py-4 px-6`}>
+                        <div css={tw`w-1/2`}>0 0 * * *</div>
+                        <div css={tw`w-1/2`}>once a day</div>
+                    </div>
+                    <div css={tw`flex py-4 px-6 bg-neutral-500`}>
+                        <div css={tw`w-1/2`}>0 0 * * MON</div>
+                        <div css={tw`w-1/2`}>every Monday</div>
+                    </div>
+                </div>
+            </div>
+            <div css={tw`md:w-1/2 h-full bg-neutral-600`}>
+                <h2 css={tw`py-4 px-6 font-bold`}>Special Characters</h2>
+                <div css={tw`flex flex-col`}>
+                    <div css={tw`flex py-4 px-6 bg-neutral-500`}>
+                        <div css={tw`w-1/2`}>*</div>
+                        <div css={tw`w-1/2`}>any value</div>
+                    </div>
+                    <div css={tw`flex py-4 px-6`}>
+                        <div css={tw`w-1/2`}>,</div>
+                        <div css={tw`w-1/2`}>value list separator</div>
+                    </div>
+                    <div css={tw`flex py-4 px-6 bg-neutral-500`}>
+                        <div css={tw`w-1/2`}>-</div>
+                        <div css={tw`w-1/2`}>range values</div>
+                    </div>
+                    <div css={tw`flex py-4 px-6`}>
+                        <div css={tw`w-1/2`}>/</div>
+                        <div css={tw`w-1/2`}>step values</div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};