-
-
Notifications
You must be signed in to change notification settings - Fork 98
/
Timeline.vue
54 lines (50 loc) · 1.38 KB
/
Timeline.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template lang="pug">
div
h2 Timeline
input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration", :maxDuration="maxDuration")
div(v-show="buckets !== null")
div
div(style="float: left")
| Events shown: {{ num_events }}
div(style="float: right; color: #999")
| Drag to pan and scroll to zoom.
div(style="clear: both")
vis-timeline(:buckets="buckets", :showRowLabels='true', :queriedInterval="daterange")
aw-devonly(reason="Not ready for production, still experimenting")
aw-calendar(:buckets="buckets")
div(v-show="!(buckets !== null && num_events)")
h1 Loading...
</template>
<script>
import _ from 'lodash';
export default {
name: 'Timeline',
data() {
return {
buckets: null,
daterange: null,
timeintervalDefaultDuration: Number.parseInt(localStorage.durationDefault) || 60 * 60,
maxDuration: 31 * 24 * 60 * 60,
};
},
computed: {
num_events() {
return _.sumBy(this.buckets, 'events.length');
},
},
watch: {
daterange() {
this.getBuckets();
},
},
methods: {
getBuckets: async function () {
if (this.daterange == null) return;
this.buckets = await this.$store.dispatch('buckets/getBucketsWithEvents', {
start: this.daterange[0].format(),
end: this.daterange[1].format(),
});
},
},
};
</script>