StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update schedule page

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 17:00:19 -07:00
parent f3586056f4
commit a288374027
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 180 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

47
resources/scripts/components/server/schedules/ScheduleRow.tsx
View file

@ -4,47 +4,48 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons/faCalendarAlt';
import format from 'date-fns/format';
import classNames from 'classnames';
import tw from 'twin.macro';
export default ({ schedule }: { schedule: Schedule }) => (
<>
<div className={'icon'}>
<FontAwesomeIcon icon={faCalendarAlt} fixedWidth={true}/>
<div>
<FontAwesomeIcon icon={faCalendarAlt} fixedWidth/>
</div>
<div className={'flex-1 ml-4'}>
<div css={tw`flex-1 ml-4`}>
<p>{schedule.name}</p>
<p className={'text-xs text-neutral-400'}>
<p css={tw`text-xs text-neutral-400`}>
Last run
at: {schedule.lastRunAt ? format(schedule.lastRunAt, 'MMM Do [at] h:mma') : 'never'}
</p>
</div>
<div className={'flex items-center mx-8'}>
<div css={tw`flex items-center mx-8`}>
<div>
<p className={'font-medium text-center'}>{schedule.cron.minute}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Minute</p>
<p css={tw`font-medium text-center`}>{schedule.cron.minute}</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Minute</p>
</div>
<div className={'ml-4'}>
<p className={'font-medium text-center'}>{schedule.cron.hour}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Hour</p>
<div css={tw`ml-4`}>
<p css={tw`font-medium text-center`}>{schedule.cron.hour}</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Hour</p>
</div>
<div className={'ml-4'}>
<p className={'font-medium text-center'}>{schedule.cron.dayOfMonth}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Month)</p>
<div css={tw`ml-4`}>
<p css={tw`font-medium text-center`}>{schedule.cron.dayOfMonth}</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Day (Month)</p>
</div>
<div className={'ml-4'}>
<p className={'font-medium text-center'}>*</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Month</p>
<div css={tw`ml-4`}>
<p css={tw`font-medium text-center`}>*</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Month</p>
</div>
<div className={'ml-4'}>
<p className={'font-medium text-center'}>{schedule.cron.dayOfWeek}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Week)</p>
<div css={tw`ml-4`}>
<p css={tw`font-medium text-center`}>{schedule.cron.dayOfWeek}</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Day (Week)</p>
</div>
</div>
<div>
<p
className={classNames('py-1 px-3 rounded text-xs uppercase', {
'bg-green-600': schedule.isActive,
'bg-neutral-400': !schedule.isActive,
})}
css={[
tw`py-1 px-3 rounded text-xs uppercase text-white`,
schedule.isActive ? tw`bg-green-600` : tw`bg-neutral-400`,
]}
>
{schedule.isActive ? 'Active' : 'Inactive'}
</p>