Skip to content

Commit

Permalink
Merge pull request #211 from ActivityWatch/dev/calendar
Browse files Browse the repository at this point in the history
  • Loading branch information
ErikBjare committed Sep 14, 2020
2 parents a0f0ae5 + 4e7303a commit bfc24c9
Show file tree
Hide file tree
Showing 5 changed files with 196 additions and 0 deletions.
86 changes: 86 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/main.js
Expand Up @@ -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'));
Expand Down
3 changes: 3 additions & 0 deletions src/views/Timeline.vue
Expand Up @@ -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>
Expand Down
104 changes: 104 additions & 0 deletions src/visualizations/Calendar.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>

0 comments on commit bfc24c9

Please sign in to comment.