Skip to content

Commit

Permalink
feat: added options to WIP Calendar visualization
Browse files Browse the repository at this point in the history
  • Loading branch information
ErikBjare committed Sep 14, 2020
1 parent 376e44f commit 4e7303a
Showing 1 changed file with 42 additions and 14 deletions.
56 changes: 42 additions & 14 deletions 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: {
Expand All @@ -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,
Expand All @@ -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));
},
Expand Down

0 comments on commit 4e7303a

Please sign in to comment.