Skip to content

Commit

Permalink
Merge pull request #201 from ActivityWatch/dev/period-link-subview-fix
Browse files Browse the repository at this point in the history
Subview is now kept when changing date in Activity view
  • Loading branch information
johan-bjareholt committed May 30, 2020
2 parents 9247aed + f31c75c commit df5a625
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 16 deletions.
9 changes: 7 additions & 2 deletions src/views/activity/Activity.vue
Expand Up @@ -34,7 +34,7 @@ div
span.d-none.d-md-inline
| Refresh

aw-periodusage(:periodusage_arr="periodusage", :link_prefix="link_prefix")
aw-periodusage(:periodusage_arr="periodusage", @update="setDate")

ul.row.nav.nav-tabs.mt-3.pl-3
li.nav-item
Expand Down Expand Up @@ -224,13 +224,18 @@ export default {
return 'day';
}
},
setDate: function(date, periodLength) {
// periodLength is an optional argument, default to this.periodLength
if (!periodLength) {
periodLength = this.periodLength;
}
const new_period_length_moment = this.periodLengthConvertMoment(periodLength);
const new_date = moment(date)
.startOf(new_period_length_moment)
.format('YYYY-MM-DD');
console.log(new_date, periodLength);
this.$router.push(`/activity/${this.host}/${periodLength}/${new_date}`);
this.$router.push(`/activity/${this.host}/${periodLength}/${new_date}/${this.subview}`);
},
refresh: async function(force) {
Expand Down
13 changes: 11 additions & 2 deletions src/visualizations/PeriodUsage.vue
Expand Up @@ -21,15 +21,24 @@ import periodusage from './periodusage.js';
export default {
name: 'aw-periodusage',
props: ['periodusage_arr', 'link_prefix'],
props: {
periodusage_arr: {
type: Array,
},
},
watch: {
periodusage_arr: function() {
periodusage.update(this.$el, this.periodusage_arr, this.link_prefix);
periodusage.update(this.$el, this.periodusage_arr, this.onPeriodClicked);
},
},
mounted: function() {
periodusage.create(this.$el);
periodusage.set_status(this.$el, 'Loading...');
},
methods: {
onPeriodClicked: function(period) {
this.$emit('update', period);
},
},
};
</script>
17 changes: 5 additions & 12 deletions src/visualizations/periodusage.js
Expand Up @@ -30,16 +30,16 @@ const diagramcolor = '#aaa';
const diagramcolor_selected = '#fc5';
const diagramcolor_focused = '#adf';

function update(svg_elem, usage_arr, link_prefix) {
function update(svg_elem, usage_arr, onPeriodClicked) {
const dateformat = 'YYYY-MM-DD';

// No apps, sets status to "No data"
if (usage_arr.length <= 0) {
set_status(svg_elem, 'No data');
return svg;
return;
}
svg_elem.innerHTML = '';
var svg = d3.select(svg_elem);
const svg = d3.select(svg_elem);

function get_usage_time(day_events) {
const day_event = _.head(_.filter(day_events, e => e.data.status == 'not-afk'));
Expand Down Expand Up @@ -101,7 +101,6 @@ function update(svg_elem, usage_arr, link_prefix) {
.attr('height', height + offset + '%')
.attr('color', color)
.attr('date', date)
.attr('data', link_prefix)
.style('fill', color)
.on('mouseover', () => {
rect.style('fill', diagramcolor_focused);
Expand All @@ -110,14 +109,8 @@ function update(svg_elem, usage_arr, link_prefix) {
const a = n[j];
rect.style('fill', a.getAttribute('color'));
})
.on('click', function(d, j, n) {
const me = n[j];
const date = d3.select(me).attr('date');
const link_prefix = d3.select(me).attr('data');
const url = `/#${link_prefix}/${date}`;
/* Not the vue-way, but works */
window.location.assign(url);
/* Hardcoding click behavior also isn't optimal I guess */
.on('click', function() {
onPeriodClicked(date);
});
rect
.append('title')
Expand Down

0 comments on commit df5a625

Please sign in to comment.