88 lines
2.3 KiB
Svelte
88 lines
2.3 KiB
Svelte
<script context="module">
|
|
export const OFFSET = new Date().getTimezoneOffset()
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { ScheduleService } from '$lib/gen'
|
|
import { displayDate, formatCron, sendUserToast } from '$lib/utils'
|
|
import CollapseLink from './CollapseLink.svelte'
|
|
|
|
export let validCRON = true
|
|
|
|
let preview: string[] = []
|
|
let cronError = ''
|
|
export let schedule: string = '0 0 12 * *'
|
|
let limit = 3
|
|
|
|
$: handleScheduleInput(schedule)
|
|
|
|
async function handleScheduleInput(input: string): Promise<void> {
|
|
try {
|
|
preview = await ScheduleService.previewSchedule({
|
|
requestBody: { schedule: formatCron(input), offset: OFFSET }
|
|
})
|
|
cronError = ''
|
|
validCRON = true
|
|
} catch (err) {
|
|
if (err.status == 400 && err.body.includes('cron')) {
|
|
cronError = `Invalid cron expression`
|
|
validCRON = false
|
|
} else {
|
|
sendUserToast(`Cannot preview: ${err}`, true)
|
|
validCRON = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="text-red-600 text-2xs grow">{cronError}</div>
|
|
<div class="flex flex-row items-end max-w-5xl">
|
|
<label class="text-xs min-w-max mr-2 self-center" for="cron-schedule">CRON expression</label>
|
|
<input
|
|
class="inline-block"
|
|
type="text"
|
|
id="cron-schedule"
|
|
name="cron-schedule"
|
|
bind:value={schedule}
|
|
/>
|
|
</div>
|
|
<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28">
|
|
<button
|
|
on:click={() => {
|
|
schedule = '0 */15 * * *'
|
|
cronError = ''
|
|
}}>every 15 min</button
|
|
>
|
|
<button
|
|
on:click={() => {
|
|
schedule = '0 0 * * * *'
|
|
cronError = ''
|
|
}}>every hour</button
|
|
>
|
|
<button
|
|
on:click={() => {
|
|
schedule = '0 0 8 * * *'
|
|
cronError = ''
|
|
}}>once a day at 8AM</button
|
|
>
|
|
</div>
|
|
|
|
<CollapseLink text="preview next runs" open={true}>
|
|
{#if preview && preview.length > 0}
|
|
<div class="text-sm text-gray-700 border p-2 rounded-md">
|
|
<div class="flex flex-row justify-between">The next runs will be scheduled at:</div>
|
|
<ul class="list-disc mx-12">
|
|
{#each preview.slice(0, limit) as p}
|
|
<li class="mx-2 text-gray-700 text-sm">{displayDate(p)}</li>
|
|
{/each}
|
|
<li class="text-sm mx-2">...</li>
|
|
{#if limit != 10}
|
|
<button class="underline text-gray-400" on:click={() => (limit = 10)}>Load more</button>
|
|
{:else}
|
|
<button class="underline text-gray-400" on:click={() => (limit = 3)}>Load less</button>
|
|
{/if}
|
|
</ul>
|
|
</div>
|
|
{/if}
|
|
</CollapseLink>
|