diff options
| author | Mateja <mail@matejamaric.com> | 2021-03-13 23:57:41 +0100 |
|---|---|---|
| committer | Mateja <mail@matejamaric.com> | 2021-03-13 23:57:41 +0100 |
| commit | 2e570c76bda80def3e07ecc3478d8eb95905acbb (patch) | |
| tree | 8608f5ebf608bdf2bcf245b458970f2346ecb8d6 | |
| parent | 865bb1f30a0c4567522525fb0be9fd99bd796ecf (diff) | |
| download | yota-laravel-2e570c76bda80def3e07ecc3478d8eb95905acbb.tar.gz yota-laravel-2e570c76bda80def3e07ecc3478d8eb95905acbb.zip | |
Work on call-sign-filter component.
| -rw-r--r-- | resources/js/app.js | 13 | ||||
| -rw-r--r-- | resources/js/bootstrap.js | 10 | ||||
| -rw-r--r-- | resources/js/components/call-sign-filter.vue | 22 | ||||
| -rw-r--r-- | resources/js/store.js | 25 | ||||
| -rw-r--r-- | resources/views/layouts/app.blade.php | 3 | ||||
| -rw-r--r-- | resources/views/pages/activities.blade.php | 3 |
6 files changed, 63 insertions, 13 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; diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 79235ac..0a8bbda 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css"> @yield('styles') <title>YOTA - @yield('title')</title> @@ -10,7 +11,7 @@ <body> @yield('navbar', View::make('inc.navbar')) @yield('jumbotron') - <div class="container pt-3"> + <div id="vue" class="container pt-3"> @yield('content') </div> <script src="{{ mix('js/manifest.js') }}"></script> diff --git a/resources/views/pages/activities.blade.php b/resources/views/pages/activities.blade.php index 7e7a0ed..e9dc169 100644 --- a/resources/views/pages/activities.blade.php +++ b/resources/views/pages/activities.blade.php @@ -6,6 +6,9 @@ @section('content') <input type="hidden" name="csrf-token" content="{{ csrf_token() }}"> + +<call-sign-filter></call-sign-filter><br> + <label for="call-sign">Filter by special callsign: </label> <select id="call-sign"> <option value="all">All</option> |