88 lines
2.2 KiB
Vue
88 lines
2.2 KiB
Vue
<template>
|
|
<div class="tabs is-centered">
|
|
<ul>
|
|
<li
|
|
v-for="window in windows"
|
|
:key="window.label"
|
|
@click="$emit('set-window', window)"
|
|
:class="{ 'is-active': window.label === activeWindow.label }"
|
|
>
|
|
<a>{{ window.label }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { ref, onMounted } from 'vue'
|
|
import dayjs from 'dayjs'
|
|
export default {
|
|
props: {
|
|
activeWindow: {
|
|
type: Object
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const windows = ref([
|
|
{
|
|
label: 'afgelopen uur',
|
|
getStart: () => dayjs().subtract(1, 'hour').unix(),
|
|
getEnd: () => dayjs().unix(),
|
|
format: 'HH:mm',
|
|
interval: 4
|
|
},
|
|
{
|
|
label: '24 uur',
|
|
getStart: () => dayjs().subtract(1, 'days').unix(),
|
|
getEnd: () => dayjs().unix(),
|
|
format: 'HH:mm',
|
|
interval: 4
|
|
},
|
|
{
|
|
label: 'vandaag',
|
|
getStart: () => dayjs().startOf('day').add(1, 'day').subtract(24, 'hours').unix(),
|
|
getEnd: () => dayjs().unix(),
|
|
format: 'HH:mm',
|
|
interval: 4
|
|
},
|
|
{
|
|
label: '3 dagen',
|
|
getStart: () => dayjs().startOf('day').add(1, 'day').subtract(3, 'days').unix(),
|
|
getEnd: () => dayjs().unix(),
|
|
format: 'ddd D/M',
|
|
interval: 24
|
|
},
|
|
{
|
|
label: 'week',
|
|
getStart: () => dayjs().startOf('day').add(1, 'day').subtract(7, 'days').unix(),
|
|
getEnd: () => dayjs().unix(),
|
|
format: 'ddd D/M',
|
|
interval: 24
|
|
},
|
|
{
|
|
label: 'maand',
|
|
getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'months').unix(),
|
|
getEnd: () => dayjs().unix(),
|
|
format: 'ddd D/M',
|
|
interval: 24
|
|
},
|
|
{
|
|
label: 'jaar',
|
|
getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'year').unix(),
|
|
getEnd: () => dayjs().unix(),
|
|
format: 'ddd D/M',
|
|
interval: 24 * 7
|
|
}
|
|
])
|
|
onMounted(() => {
|
|
const activeWindow = !props.activeWindow.label
|
|
? windows.value[1]
|
|
: windows.value.find((w) => w.label === props.activeWindow.label.replace('-', ' '))
|
|
emit('set-window', activeWindow)
|
|
})
|
|
return {
|
|
windows
|
|
}
|
|
}
|
|
}
|
|
</script>
|