first commit

src/components/TimeWindows.vue

@@ -0,0 +1,72 @@
+<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'],
+  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 (!this.activeWindow.label) {
+      this.$emit('setWindow', this.windows[1])
+    }
+  }
+}
+</script>