69 lines
2.6 KiB
Vue
69 lines
2.6 KiB
Vue
<template>
|
|
<UiInput class="timeframe">
|
|
<select name="" id="" v-model="timeframe">
|
|
<option :value="Timeframe.LAST_10_MINUTES">Letzte 10 Minuten</option>
|
|
<option :value="Timeframe.LAST_30_MINUTES">Letzte 30 Minuten</option>
|
|
<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 { Timeframe } from '~/classes/monitoring/MonitoringTimeframe';
|
|
import { Period } from './Period';
|
|
import utc from 'dayjs/plugin/utc';
|
|
import dayjs from 'dayjs';
|
|
|
|
const timeframe = ref(Timeframe.LAST_HOUR);
|
|
|
|
const period = computed((): Period => {
|
|
dayjs.extend(utc)
|
|
const now = dayjs().utc().unix();
|
|
switch (timeframe.value) {
|
|
case Timeframe.LAST_10_MINUTES:
|
|
return new Period(dayjs().utc().subtract(10, 'minutes').unix(), now)
|
|
case Timeframe.LAST_30_MINUTES:
|
|
return new Period(dayjs().utc().subtract(30, 'minutes').unix(), now)
|
|
case Timeframe.LAST_HOUR:
|
|
return new Period(dayjs().utc().subtract(1, 'hours').unix(), now)
|
|
case Timeframe.LAST_3_HOURS:
|
|
return new Period(dayjs().utc().subtract(3, 'hours').unix(), now)
|
|
case Timeframe.LAST_6_HOURS:
|
|
return new Period(dayjs().utc().subtract(6, 'hours').unix(), now)
|
|
case Timeframe.LAST_12_HOURS:
|
|
return new Period(dayjs().utc().subtract(12, 'hours').unix(), now)
|
|
case Timeframe.LAST_24_HOURS:
|
|
return new Period(dayjs().utc().subtract(24, 'hours').unix(), now)
|
|
case Timeframe.LAST_7_DAYS:
|
|
return new Period(dayjs().utc().subtract(7, 'days').unix(), now)
|
|
case Timeframe.LAST_30_DAYS:
|
|
return new Period(dayjs().utc().subtract(30, 'days').unix(), now)
|
|
case Timeframe.LAST_90_DAYS:
|
|
return new Period(dayjs().utc().subtract(90, 'days').unix(), now)
|
|
default:
|
|
throw new Error("Invalid timeframe input.");
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
watch(period, (selection: Period) => {
|
|
emit('select', selection);
|
|
}, { immediate: true });
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'select', payload: Period): void
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |