80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<template>
|
|
<div class="tabs is-centered">
|
|
<ul>
|
|
<li
|
|
v-for="window in windows"
|
|
:key="window.label"
|
|
@click="$emit('setWindow', window)"
|
|
:class="{'is-active': window.label === activeWindow.label}"
|
|
>
|
|
<a>{{window.label}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import dayjs from 'dayjs'
|
|
export default {
|
|
props: {
|
|
activeWindow: {
|
|
type: [Object, String]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
windows: [{
|
|
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
|
|
}]
|
|
}
|
|
},
|
|
mounted() {
|
|
if (typeof this.activeWindow === 'string') {
|
|
const window = this.windows.find(w => w.label === this.activeWindow.replace('-', ' '))
|
|
this.$emit('setWindow', window)
|
|
} else if (!this.activeWindow.label) {
|
|
this.$emit('setWindow', this.windows[1])
|
|
}
|
|
}
|
|
}
|
|
</script>
|