Work on `activities` component.

It currently doesn't update on filter change.

3 files changed, 38 insertions, 2 deletions

diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue
index 976516f..01e7002 100644
--- a/resources/js/components/activities.vue
+++ b/resources/js/components/activities.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div @signChanged="filterChanged()">
     <call-sign-filter></call-sign-filter>
 
     <div class="table-responsive mt-2">
@@ -16,6 +16,15 @@
                 </tr>
             </thead>
             <tbody>
+              <tr v-for="activity in activities">
+                <td>{{ activity.operatorCall }}</td>
+                <td>{{ activity.fromTime }}</td>
+                <td>{{ activity.toTime }}</td>
+                <td>{{ activity.specialCall }}</td>
+                <td>{{ activity.frequencies }}</td>
+                <td>{{ activity.modes }}</td>
+                <td>{{ activity.qso }}</td>
+              </tr>
             </tbody>
         </table>
     </div>
@@ -26,6 +35,19 @@
 import callSignFilter from './call-sign-filter.vue';
 
 export default {
-  components: { callSignFilter }
+  components: { callSignFilter },
+  mounted() {
+    this.$store.dispatch('fillData');
+  },
+  computed: {
+    activities() {
+      return this.$store.getters.getData;
+    }
+  },
+  methods: {
+    filterChanged() {
+      this.$store.dispatch('fillData');
+    }
+  }
 }
 </script>
diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index 8e3228c..e8d22a5 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -20,6 +20,7 @@ export default {
       },
       set(value) {
         this.$store.dispatch('setSelectedSign', value);
+        this.$emit('signChanged');
       }
     },
     options() {
diff --git a/resources/js/store.js b/resources/js/store.js
index 669f0bc..852ba6b 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -14,6 +14,9 @@ export default new Vuex.Store({
     },
     getSigns(state) {
       return state.callSigns;
+    },
+    getData(state) {
+      return state.data;
     }
   },
   mutations: {
@@ -22,6 +25,9 @@ export default new Vuex.Store({
     },
     fillSigns(state, signs) {
       state.callSigns = signs;
+    },
+    setData(state, data) {
+      state.data = data;
     }
   },
   actions: {
@@ -34,6 +40,13 @@ export default new Vuex.Store({
       }).catch(error => {
         console.log(error);
       });
+    },
+    async fillData(context) {
+      await axios.post('/api/activities', {'call-sign': this.state.selectedSign}).then(response => {
+        context.commit('setData', response.data.data);
+      }).catch(error => {
+        console.log(error);
+      });
     }
   }
 });