feat: continued work on customizable views, fixing a few bugs

Author: ErikBjare

src/components/SelectableVisualization.vue

@@ -172,6 +172,7 @@ export default {
         timeline_barchart: {
           title: 'Timeline (barchart)',
           // TODO
+          available: true,
           //available: this.$store.state.activity.category.available,
         },
       };

src/route.js

@@ -6,9 +6,6 @@ const Home = () => import('./views/Home.vue');
 // Activity views for desktop
 const Activity = () => import('./views/activity/Activity.vue');
 const ActivityView = () => import('./views/activity/ActivityView.vue');
-const ActivitySummary = () => import('./views/activity/ActivitySummary.vue');
-const ActivityWindow = () => import('./views/activity/ActivityWindow.vue');
-const ActivityBrowser = () => import('./views/activity/ActivityBrowser.vue');
 const ActivityEditor = () => import('./views/activity/ActivityEditor.vue');
 
 const Buckets = () => import('./views/Buckets.vue');
@@ -36,26 +33,6 @@ const router = new VueRouter({
           component: ActivityView,
           props: true,
         },
-        {
-          path: 'summary',
-          meta: { subview: 'summary' },
-          name: 'activity-summary',
-          component: ActivitySummary,
-          props: true,
-        },
-        {
-          path: 'window',
-          meta: { subview: 'window' },
-          name: 'activity-window',
-          component: ActivityWindow,
-          props: true,
-        },
-        {
-          path: 'browser',
-          meta: { subview: 'browser' },
-          name: 'activity-browser',
-          component: ActivityBrowser,
-        },
         {
           path: 'editor',
           meta: { subview: 'editor' },

src/store/modules/settings.js

@@ -90,6 +90,11 @@ const mutations = {
     }
     console.log('Loaded views:', state.views);
   },
+  editView(state, { view_id, el_id, type }) {
+    console.log(view_id, el_id, type);
+    console.log(state.views);
+    state.views.find(v => v.id == view_id).elements[el_id].type = type;
+  },
   loadClasses(state, classes) {
     let i = 0;
     state.classes = classes.map(c => Object.assign(c, { id: i++ }));

src/views/activity/ActivityBrowser.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-div
+div(v-if="view")
   div.row.mb-4
     div.col-md-6.col-lg-4.p-3(v-for="el, index in view.elements")
       aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange")
 
-  div
+  b-button(@click="addVisualization")
     icon(name="plus")
     span Add visualization to view
 </template>
@@ -29,12 +29,13 @@ export default {
     },
   },
   methods: {
-    onTypeChange(id, type) {
-      // TODO: Use vuex store
-      console.log(this.$store.state.settings.views);
-      //this.elements[id] = type;
-      // Needed to emit the change to the child component
-      //this.$set(this.elements, this.elements);
+    addVisualization: function () {
+      alert('not implemented');
+    },
+    async onTypeChange(id, type) {
+      const view_id =
+        this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
+      await this.$store.commit('settings/editView', { view_id: view_id, el_id: id, type });
     },
   },
 };