feat: added options to WIP Calendar visualization

Author: ErikBjare

src/visualizations/Calendar.vue

@@ -1,14 +1,28 @@
-<template>
-  <FullCalendar :options="calendarOptions" />
+<template lang="pug">
+div.mx-3
+  b-form
+    b-form-group(label="Bucket:")
+      select(v-model="selectedBucket")
+        option(v-for="bucket in buckets", :value="bucket.id") {{ bucket.id }}
+    b-form-group(label="Show:")
+      select(v-model="view")
+        option(value="timeGridDay") Day
+        option(value="timeGridWeek") Week
+    b-form-group
+      b-checkbox(v-model="fitToActive")
+        | Fit to active
+  FullCalendar(ref="fullCalendar", :options="calendarOptions")
 </template>
 
 <script>
 import { getTitleAttr, getColorFromString } from '../util/color';
 import moment from 'moment';
+import _ from 'lodash';
 import FullCalendar from '@fullcalendar/vue';
 import timeGridPlugin from '@fullcalendar/timegrid';
 
-// TODO: Use canonical timeline query instead, with flooding and categorization
+// TODO: Use canonical timeline query, with flooding and categorization
+// TODO: Checkbox for toggling category-view, where adjacent events with same category are merged and the events are labeled by category
 // TODO: Use the recommended way of dynamically getting events: https://fullcalendar.io/docs/events-function
 export default {
   components: {
@@ -18,19 +32,26 @@ export default {
     buckets: { type: Array },
   },
   data() {
-    return { fitToActive: true };
+    return { fitToActive: false, selectedBucket: null, view: 'timeGridDay' };
   },
   computed: {
-    calendarOptions: function() {
+    calendarOptions: function () {
       const events = this.events;
       const first = _.minBy(events, e => e.start);
       const last = _.maxBy(events, e => e.end);
       // FIXME: end must be at least one slot (1 hour) after start, otherwise it fails hard
-      const start = this.fitToActive && events.length > 0 ? first.start.slice(11, 16) : '00:00:00';
-      const end = this.fitToActive && events.length > 0 ? last.end.slice(11, 16) : '24:00:00';
+      let start, end;
+      if (this.fitToActive && events.length > 0) {
+        console.log(first.start);
+        start = moment(first.start).startOf('hour').format().slice(11, 16);
+        end = moment(last.end).endOf('hour').format().slice(11, 16);
+      } else {
+        start = '00:00:00';
+        end = '24:00:00';
+      }
       return {
         plugins: [timeGridPlugin],
-        initialView: 'timeGridDay',
+        initialView: this.view,
         eventClick: this.onEventClick,
         events: events,
         allDaySlot: false,
@@ -46,28 +67,35 @@ export default {
         },
       };
     },
-    events: function() {
+    events: function () {
       // NOTE: This returns FullCalendar events, not ActivityWatch events.
       if (this.buckets == null) return [];
 
-      const bucket = _.find(this.buckets, b => b.id == 'aw-watcher-window_erb-main2-arch');
+      const bucket = _.find(this.buckets, b => b.id == this.selectedBucket);
+      if (bucket == null) {
+        return;
+      }
       let events = bucket.events;
       events = _.filter(events, e => e.duration > 10);
       events = _.map(events, e => {
         return {
           title: getTitleAttr(bucket, e),
           start: moment(e.timestamp).format(),
-          end: moment(e.timestamp)
-            .add(e.duration, 'seconds')
-            .format(),
+          end: moment(e.timestamp).add(e.duration, 'seconds').format(),
           backgroundColor: getColorFromString(getTitleAttr(bucket, e)),
         };
       });
       return events;
     },
   },
+  watch: {
+    view: function (to) {
+      const calendar = this.$refs.fullCalendar.getApi();
+      calendar.changeView(to);
+    },
+  },
   methods: {
-    onEventClick: function(arg) {
+    onEventClick: function (arg) {
       // TODO: Open event inspector/editor here
       alert('event click! ' + JSON.stringify(arg.event));
     },