88 lines
3.5 KiB
Vue
88 lines
3.5 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">{{ $t('cron.type.one_time') }}</option>
|
|
<option :value="CronType.EVERY_DAY">{{ $t('cron.type.every_day') }}</option>
|
|
<option :value="CronType.EVERY_WEEK">{{ $t('cron.type.every_week') }}</option>
|
|
<option :value="CronType.EVERY_MONTH">{{ $t('cron.type.every_month') }}</option>
|
|
<option :value="CronType.EVERY_YEAR">{{ $t('cron.type.every_year') }}</option>
|
|
<option :value="CronType.SPECIFIC">{{ $t('cron.type.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 v-for="i in Array.from(Array(7).keys())" :key="`w${i}`" :value="i + 1">{{ $t(`cron.week.${i.toFixed(0)}`) }}</option>
|
|
</select>
|
|
<select v-if="cronType === CronType.EVERY_MONTH" v-model="cronValue" class="select" @change="onChangeCronValue">
|
|
<option v-for="i in Array.from(Array(31).keys())" :key="`d${i}`" :value="i + 1">{{i + 1}}{{ i % 10 == 0 ? $t('cron.month.st') : (i % 10 === 1 ? $t('cron.month.nd'): (i % 10 === 2 ? $t('cron.month.rd') : $t('cron.month.th'))) }}</option>
|
|
</select>
|
|
<select v-if="cronType === CronType.EVERY_YEAR" v-model="cronValue" class="select" @change="onChangeCronValue">
|
|
<option v-for="i in Array.from(Array(12).keys())" :key="`m${i}`" :value="i + 1">{{ $t(`cron.year.${i.toFixed(0)}`) }}</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>
|