105 lines
3.9 KiB
Vue
105 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onBeforeMount, watch } from "vue";
|
|
import { getCron, parseCron, validCron } from "@/lib/cron";
|
|
import { CronType } from "@/enums";
|
|
import { DEFAULT_CRON } from "@/constants";
|
|
|
|
const cron = defineModel<string|null>({ required: true });
|
|
const rawCron = ref<string>(DEFAULT_CRON);
|
|
const valid = ref<boolean>(true);
|
|
const props = defineProps<{editMode: boolean}>();
|
|
|
|
const cronType = ref<CronType>(CronType.ONE_TIME);
|
|
const cronValue = ref<number>(0);
|
|
|
|
function onCronChanged() {
|
|
const data = parseCron(cron.value);
|
|
rawCron.value = cron.value ?? DEFAULT_CRON;
|
|
cronType.value = data.type;
|
|
cronValue.value = data.value;
|
|
}
|
|
|
|
function updateCron() {
|
|
cron.value = getCron(cronType.value, cronValue.value, rawCron.value);
|
|
}
|
|
|
|
function onChangeCronType() {
|
|
switch(cronType.value) {
|
|
case CronType.EVERY_DAY:
|
|
cronValue.value = 0;
|
|
break;
|
|
case CronType.EVERY_WEEK:
|
|
case CronType.EVERY_MONTH:
|
|
case CronType.EVERY_YEAR:
|
|
cronValue.value = 1;
|
|
break;
|
|
case CronType.SPECIFIC:
|
|
cron.value ??= DEFAULT_CRON;
|
|
break;
|
|
}
|
|
updateCron();
|
|
}
|
|
|
|
function onChangeCronValue() {
|
|
updateCron();
|
|
}
|
|
|
|
function onInputRawCron() {
|
|
valid.value = validCron(rawCron.value);
|
|
if (valid.value) {
|
|
updateCron();
|
|
}
|
|
}
|
|
|
|
onBeforeMount(onCronChanged);
|
|
|
|
watch(cron, () => {
|
|
if (!props.editMode) {
|
|
onCronChanged();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex gap-2">
|
|
<select v-model="cronType" class="select" @change="onChangeCronType">
|
|
<option :value="CronType.ONE_TIME">One time (do not repeat)</option>
|
|
<option :value="CronType.EVERY_DAY">Every day at</option>
|
|
<option :value="CronType.EVERY_WEEK">Every week on</option>
|
|
<option :value="CronType.EVERY_MONTH">Every month on the</option>
|
|
<option :value="CronType.EVERY_YEAR">Every year on</option>
|
|
<option :value="CronType.SPECIFIC">Specific</option>
|
|
</select>
|
|
<select v-if="cronType === CronType.EVERY_DAY" v-model="cronValue" class="select" @change="onChangeCronValue">
|
|
<option v-for="i in Array.from(Array(24).keys())" :key="`h${i}`" :value="i">{{ i.toFixed(0).padStart(2, '0') }}:00</option>
|
|
</select>
|
|
<select v-if="cronType === CronType.EVERY_WEEK" v-model="cronValue" class="select" @change="onChangeCronValue">
|
|
<option :value="1">Monday</option>
|
|
<option :value="2">Tuesday</option>
|
|
<option :value="3">Wednesday</option>
|
|
<option :value="4">Thursday</option>
|
|
<option :value="5">Friday</option>
|
|
<option :value="6">Saturday</option>
|
|
<option :value="7">Sunday</option>
|
|
</select>
|
|
<select v-if="cronType === CronType.EVERY_MONTH" v-model="cronValue" class="select" @change="onChangeCronValue">
|
|
<option v-for="i in Array.from(Array(32).keys())" :key="`d${i}`" :value="i">{{i}}{{ i % 10 == 1 ? 'st' : (i % 10 === 2 ? 'nd': (i % 10 === 3 ? 'rd' : 'th')) }}</option>
|
|
</select>
|
|
<select v-if="cronType === CronType.EVERY_YEAR" v-model="cronValue" class="select" @change="onChangeCronValue">
|
|
<option :value="1">January</option>
|
|
<option :value="2">February</option>
|
|
<option :value="3">March</option>
|
|
<option :value="4">April</option>
|
|
<option :value="5">May</option>
|
|
<option :value="6">June</option>
|
|
<option :value="7">July</option>
|
|
<option :value="8">August</option>
|
|
<option :value="9">September</option>
|
|
<option :value="10">October</option>
|
|
<option :value="11">November</option>
|
|
<option :value="12">December</option>
|
|
</select>
|
|
<input v-if="cronType === CronType.SPECIFIC" v-model="rawCron" type="text" class="input font-mono" :class="valid ? '' : 'input-error'" @input="onInputRawCron" />
|
|
</div>
|
|
</template>
|