Merge pull request #211 from ActivityWatch/dev/calendar

Author: ErikBjare

package-lock.json

@@ -83,6 +83,8 @@
   "dependencies": {
     "@babel/polyfill": "^7.10.4",
     "@egjs/hammerjs": "^2.0.17",
+    "@fullcalendar/timegrid": "^5.1.0",
+    "@fullcalendar/vue": "^5.1.0",
     "@types/chart.js": "^2.9.23",
     "@types/chrome": "0.0.89",
     "@types/jest": "^24.9.1",

package.json

@@ -55,6 +55,7 @@ Vue.component('aw-timeline', () => import('./visualizations/TimelineSimple.vue')
 Vue.component('vis-timeline', () => import('./visualizations/VisTimeline.vue'));
 Vue.component('aw-categorytree', () => import('./visualizations/CategoryTree.vue'));
 Vue.component('aw-timeline-barchart', () => import('./visualizations/TimelineBarChart.vue'));
+Vue.component('aw-calendar', () => import('./visualizations/Calendar.vue'));
 
 // A mixin to make async method errors propagate
 Vue.mixin(require('~/mixins/asyncErrorCaptured.js'));

src/main.js

@@ -12,6 +12,9 @@ div
         | 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>

src/views/Timeline.vue

@@ -0,0 +1,104 @@
+<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, 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: {
+    FullCalendar, // make the <FullCalendar> tag available
+  },
+  props: {
+    buckets: { type: Array },
+  },
+  data() {
+    return { fitToActive: false, selectedBucket: null, view: 'timeGridDay' };
+  },
+  computed: {
+    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
+      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: this.view,
+        eventClick: this.onEventClick,
+        events: events,
+        allDaySlot: false,
+        slotMinTime: start,
+        slotMaxTime: end,
+        nowIndicator: true,
+        expandRows: true,
+        slotLabelFormat: {
+          hour: '2-digit',
+          minute: '2-digit',
+          //second: '2-digit',
+          hour12: false,
+        },
+      };
+    },
+    events: function () {
+      // NOTE: This returns FullCalendar events, not ActivityWatch events.
+      if (this.buckets == null) return [];
+
+      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(),
+          backgroundColor: getColorFromString(getTitleAttr(bucket, e)),
+        };
+      });
+      return events;
+    },
+  },
+  watch: {
+    view: function (to) {
+      const calendar = this.$refs.fullCalendar.getApi();
+      calendar.changeView(to);
+    },
+  },
+  methods: {
+    onEventClick: function (arg) {
+      // TODO: Open event inspector/editor here
+      alert('event click! ' + JSON.stringify(arg.event));
+    },
+  },
+};
+</script>