feat: added ability to add new views and visualizations

Author: ErikBjare

src/store/modules/settings.js

@@ -90,11 +90,17 @@ const mutations = {
     }
     console.log('Loaded views:', state.views);
   },
+  addView(state, { view_id }) {
+    state.views.push({ id: view_id, name: view_id, elements: [] });
+  },
   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;
   },
+  addVisualization(state, { view_id, type }) {
+    state.views.find(v => v.id == view_id).elements.push({ type: type });
+  },
   loadClasses(state, classes) {
     let i = 0;
     state.classes = classes.map(c => Object.assign(c, { id: i++ }));

src/views/activity/Activity.vue

@@ -209,7 +209,10 @@ export default {
 
   methods: {
     addView: function () {
-      alert('Not implemented yet');
+      // TODO: Open modal to ask for options like id, and name
+      this.$store.commit('settings/addView', {
+        view_id: this.$store.state.settings.views.length + 1,
+      });
     },
     previousPeriod: function () {
       return moment(this._date).subtract(1, `${this.periodLength}s`).format('YYYY-MM-DD');

src/views/activity/ActivityView.vue

@@ -30,7 +30,9 @@ export default {
   },
   methods: {
     addVisualization: function () {
-      alert('not implemented');
+      const view_id =
+        this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
+      this.$store.commit('settings/addVisualization', { view_id, type: 'top_apps' });
     },
     async onTypeChange(id, type) {
       const view_id =