aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMateja <mail@matejamaric.com>2021-03-13 23:57:41 +0100
committerMateja <mail@matejamaric.com>2021-03-13 23:57:41 +0100
commit2e570c76bda80def3e07ecc3478d8eb95905acbb (patch)
tree8608f5ebf608bdf2bcf245b458970f2346ecb8d6
parent865bb1f30a0c4567522525fb0be9fd99bd796ecf (diff)
downloadyota-laravel-2e570c76bda80def3e07ecc3478d8eb95905acbb.tar.gz
yota-laravel-2e570c76bda80def3e07ecc3478d8eb95905acbb.zip
Work on call-sign-filter component.
-rw-r--r--resources/js/app.js13
-rw-r--r--resources/js/bootstrap.js10
-rw-r--r--resources/js/components/call-sign-filter.vue22
-rw-r--r--resources/js/store.js25
-rw-r--r--resources/views/layouts/app.blade.php3
-rw-r--r--resources/views/pages/activities.blade.php3
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>