74 lines
2.2 KiB
Vue
74 lines
2.2 KiB
Vue
<template>
|
|
<UiInput class="timeframe">
|
|
<select name="" id="" v-model="timeframe">
|
|
<option :value="Timeframe.LAST_HOUR">Letzte Stunde</option>
|
|
<option :value="Timeframe.LAST_3_HOURS">Letzte 3 Stunden</option>
|
|
<option :value="Timeframe.LAST_6_HOURS">Letzte 6 Stunden</option>
|
|
<option :value="Timeframe.LAST_12_HOURS">Letzte 12 Stunden</option>
|
|
<option :value="Timeframe.LAST_24_HOURS">Letzte 24 Stunden</option>
|
|
<option :value="Timeframe.LAST_7_DAYS">Letzte 7 Tage</option>
|
|
<option :value="Timeframe.LAST_30_DAYS">Letzte 30 Tage</option>
|
|
<option :value="Timeframe.LAST_90_DAYS">Letzte 90 Tage</option>
|
|
<option :value="undefined">Custom...</option>
|
|
</select>
|
|
</UiInput>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import dayjs, { Dayjs } from 'dayjs';
|
|
import utc from 'dayjs/plugin/utc';
|
|
|
|
const enum Timeframe
|
|
{
|
|
LAST_HOUR = "LAST_HOUR",
|
|
LAST_3_HOURS = "LAST_3_HOURS",
|
|
LAST_6_HOURS = "LAST_6_HOURS",
|
|
LAST_12_HOURS = "LAST_12_HOURS",
|
|
TODAY = "TODAY",
|
|
LAST_24_HOURS = "LAST_24_HOURS",
|
|
LAST_7_DAYS = "LAST_7_DAYS",
|
|
LAST_30_DAYS = "LAST_30_DAYS",
|
|
LAST_90_DAYS = "LAST_90_DAYS"
|
|
}
|
|
|
|
const timeframe: Ref<string | undefined> = ref(Timeframe.LAST_HOUR);
|
|
|
|
const emits = defineEmits<{
|
|
(e: 'update:modelValue', value?: Date): void
|
|
}>();
|
|
|
|
const startTime = computed(() => {
|
|
dayjs.extend(utc)
|
|
switch (timeframe.value)
|
|
{
|
|
case Timeframe.LAST_HOUR: {
|
|
return dayjs().utc().subtract(1, 'hours');
|
|
}
|
|
case Timeframe.LAST_3_HOURS: {
|
|
return dayjs().utc().subtract(3, 'hours');
|
|
}
|
|
case Timeframe.LAST_6_HOURS: {
|
|
return dayjs().utc().subtract(6, 'hours');
|
|
}
|
|
case Timeframe.LAST_12_HOURS: {
|
|
return dayjs().utc().subtract(12, 'hours');
|
|
}
|
|
case Timeframe.LAST_24_HOURS: {
|
|
return dayjs().utc().subtract(24, 'hours');
|
|
}
|
|
case Timeframe.LAST_7_DAYS: {
|
|
return dayjs().utc().subtract(7, 'days');
|
|
}
|
|
case Timeframe.LAST_30_DAYS: {
|
|
return dayjs().utc().subtract(30, 'days');
|
|
}
|
|
case Timeframe.LAST_90_DAYS: {
|
|
return dayjs().utc().subtract(90, 'days');
|
|
}
|
|
}
|
|
})
|
|
|
|
watch(startTime, (startTime) => {
|
|
emits('update:modelValue', startTime?.toDate());
|
|
}, { immediate: true });
|
|
</script> |