Work on call-sign-filter component.

4 files changed, 58 insertions, 12 deletions

diff --git a/resources/js/app.js b/resources/js/app.js
index 6c325fa..360abf8 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,16 +1,23 @@
 require('./bootstrap');
 
-//import store from './store.js';
-require('./store');
+import Vue from 'vue';
+
+import store from './store.js';
+
+//window.Vue = require('vue');
+//window.Vuex = require('vuex');
+//Vue.use(Vuex);
 
-import callSignDesc from './components/call-sign-description.vue';
 import callSignFilter from './components/call-sign-filter.vue';
+import callSignDesc from './components/call-sign-description.vue';
+
 import activities from './components/activities.vue';
 import reservation from './components/reservation.vue';
 import reservations from './components/reservations.vue';
 
 new Vue({
   el: '#vue',
+  store,
   components: {
     callSignDesc,
     callSignFilter,
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index c3456b8..e5e0ab6 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -3,9 +3,13 @@ window._ = require('lodash');
 window.axios = require('axios');
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
-window.Vue = require('vue');
-window.Vuex = require('vuex');
-Vue.use(Vuex);
+let token = document.querySelector('meta[name="csrf-token"]');
+
+if (token) {
+  window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+} else {
+  console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
+}
 
 window.$ = window.jQuery = require('jquery');
 window.Popper = require('popper.js');
diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index 48e54f5..9ad202d 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -1,9 +1,27 @@
 <template>
-  
+  <select v-model="selected">
+    <option value="all">All</option>
+    <option v-for="option in options" :value="option" v-text="option"></option>
+  </select>
 </template>
 
 <script>
+import store from '../store.js';
+
 export default {
-  
+  data() {
+    return {
+      selected: store.state.selectedSign,
+      //options: store.state.callSigns
+    }
+  },
+  mounted() {
+    store.dispatch('getSigns');
+  },
+  computed: {
+    options() {
+      return store.state.callSigns;
+    }
+  }
 }
 </script>
diff --git a/resources/js/store.js b/resources/js/store.js
index e9249cc..7f5f1df 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -1,15 +1,32 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+Vue.use(Vuex);
+
 const store = new Vuex.Store({
   state: {
-    callSign: "all",
+    selectedSign: "all",
+    callSigns: [],
     data: []
   },
   getters: {
-
+    getSelectedSign(state) {
+      return state.selectedSign;
+    },
+    getSigns(state) {
+      return state.callSigns;
+    }
   },
   mutations: {
-
+    fillSigns(state, signs) {
+      state.callSigns = signs;
+    }
   },
   actions: {
-
+    getSigns(context) {
+      let data = ['test', 'TEST', 'TeSt'];
+      context.commit('fillSigns', data);
+    }
   }
 });
+
+export default store;