Merge pull request #201 from ActivityWatch/dev/period-link-subview-fix

Subview is now kept when changing date in Activity view

Author: johan-bjareholt

src/views/activity/Activity.vue

@@ -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
@@ -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) {

src/visualizations/PeriodUsage.vue

@@ -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>

src/visualizations/periodusage.js

@@ -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'));
@@ -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);
@@ -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')