Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add cron cheatsheet (#3866)

Browse source
This commit is contained in:
Jelco 2022-03-28 21:43:45 +02:00 committed by GitHub
parent 2680fe4c8e
commit af4616ccf2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 73 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
resources/scripts/components/server/schedules/EditScheduleModal.tsx
View file

@ -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'}

55
resources/scripts/components/server/schedules/ScheduleCheatsheetCards.tsx Normal file
View file

@ -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>
</>
);
};