From 7abc7cbd3cffb1147b856a262b27166507d8a7ed Mon Sep 17 00:00:00 2001 From: Mateja Date: Sat, 13 Mar 2021 16:22:36 +0100 Subject: Install Vuex package. --- package-lock.json | 6 ++++++ package.json | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 9c0ccea..5f8bfbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9198,6 +9198,12 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vuex": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz", + "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==", + "dev": true + }, "watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", diff --git a/package.json b/package.json index 3556d45..5c158cb 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "sass": "^1.32.8", "sass-loader": "^8.0.2", "vue": "^2.6.12", - "vue-template-compiler": "^2.6.12" + "vue-template-compiler": "^2.6.12", + "vuex": "^3.6.2" } } -- cgit v1.2.3 From 865bb1f30a0c4567522525fb0be9fd99bd796ecf Mon Sep 17 00:00:00 2001 From: Mateja Date: Sat, 13 Mar 2021 17:56:37 +0100 Subject: Adding boilerplate code. --- resources/js/app.js | 20 ++++++++++++++++++++ resources/js/bootstrap.js | 2 ++ resources/js/components/activities.vue | 9 +++++++++ resources/js/components/call-sign-description.vue | 9 +++++++++ resources/js/components/call-sign-filter.vue | 9 +++++++++ resources/js/components/reservation.vue | 9 +++++++++ resources/js/components/reservations.vue | 9 +++++++++ resources/js/store.js | 15 +++++++++++++++ 8 files changed, 82 insertions(+) create mode 100644 resources/js/components/activities.vue create mode 100644 resources/js/components/call-sign-description.vue create mode 100644 resources/js/components/call-sign-filter.vue create mode 100644 resources/js/components/reservation.vue create mode 100644 resources/js/components/reservations.vue create mode 100644 resources/js/store.js diff --git a/resources/js/app.js b/resources/js/app.js index 40c55f6..6c325fa 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1 +1,21 @@ require('./bootstrap'); + +//import store from './store.js'; +require('./store'); + +import callSignDesc from './components/call-sign-description.vue'; +import callSignFilter from './components/call-sign-filter.vue'; +import activities from './components/activities.vue'; +import reservation from './components/reservation.vue'; +import reservations from './components/reservations.vue'; + +new Vue({ + el: '#vue', + components: { + callSignDesc, + callSignFilter, + activities, + reservation, + reservations + } +}); diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js index ffc0a2b..c3456b8 100644 --- a/resources/js/bootstrap.js +++ b/resources/js/bootstrap.js @@ -4,6 +4,8 @@ window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; window.Vue = require('vue'); +window.Vuex = require('vuex'); +Vue.use(Vuex); window.$ = window.jQuery = require('jquery'); window.Popper = require('popper.js'); diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue new file mode 100644 index 0000000..48e54f5 --- /dev/null +++ b/resources/js/components/activities.vue @@ -0,0 +1,9 @@ + + + diff --git a/resources/js/components/call-sign-description.vue b/resources/js/components/call-sign-description.vue new file mode 100644 index 0000000..48e54f5 --- /dev/null +++ b/resources/js/components/call-sign-description.vue @@ -0,0 +1,9 @@ + + + diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue new file mode 100644 index 0000000..48e54f5 --- /dev/null +++ b/resources/js/components/call-sign-filter.vue @@ -0,0 +1,9 @@ + + + diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue new file mode 100644 index 0000000..48e54f5 --- /dev/null +++ b/resources/js/components/reservation.vue @@ -0,0 +1,9 @@ + + + diff --git a/resources/js/components/reservations.vue b/resources/js/components/reservations.vue new file mode 100644 index 0000000..48e54f5 --- /dev/null +++ b/resources/js/components/reservations.vue @@ -0,0 +1,9 @@ + + + diff --git a/resources/js/store.js b/resources/js/store.js new file mode 100644 index 0000000..e9249cc --- /dev/null +++ b/resources/js/store.js @@ -0,0 +1,15 @@ +const store = new Vuex.Store({ + state: { + callSign: "all", + data: [] + }, + getters: { + + }, + mutations: { + + }, + actions: { + + } +}); -- cgit v1.2.3 From 2e570c76bda80def3e07ecc3478d8eb95905acbb Mon Sep 17 00:00:00 2001 From: Mateja Date: Sat, 13 Mar 2021 23:57:41 +0100 Subject: Work on call-sign-filter component. --- resources/js/app.js | 13 ++++++++++--- resources/js/bootstrap.js | 10 +++++++--- resources/js/components/call-sign-filter.vue | 22 ++++++++++++++++++++-- resources/js/store.js | 25 +++++++++++++++++++++---- resources/views/layouts/app.blade.php | 3 ++- 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 @@ 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 @@ + @yield('styles') YOTA - @yield('title') @@ -10,7 +11,7 @@ @yield('navbar', View::make('inc.navbar')) @yield('jumbotron') -
+
@yield('content')
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') + +
+ - @foreach ($signs as $sign) - - @endforeach - + + @error('scall')
{{ $message }}
@enderror -
-
-
-
-
-
+ {{----}} +{{--
--}} + {{----}} + {{-- --}} + {{--@error('scall')--}} + {{--
{{ $message }}
--}} + {{--@enderror--}} +{{--
--}} + +{{--
--}} + {{--
--}} + {{--
--}} + {{--
--}} +{{--
--}} @error('time')
{{ $message }}
@@ -163,5 +169,5 @@ format: 'H:i' }); - + {{----}} @endsection -- cgit v1.2.3 From 682803b3a6d39f00aaf64499e1226859e6fda801 Mon Sep 17 00:00:00 2001 From: Mateja Date: Sun, 14 Mar 2021 19:53:12 +0100 Subject: Add label to `call-sign-filter` component. --- resources/js/components/call-sign-filter.vue | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue index a19b8a6..8e3228c 100644 --- a/resources/js/components/call-sign-filter.vue +++ b/resources/js/components/call-sign-filter.vue @@ -1,8 +1,11 @@ diff --git a/resources/views/pages/activities.blade.php b/resources/views/pages/activities.blade.php index e9dc169..275431a 100644 --- a/resources/views/pages/activities.blade.php +++ b/resources/views/pages/activities.blade.php @@ -5,33 +5,7 @@ @section('navbar', View::make('inc.navbar')) @section('content') - -
+ - - - -
- -
- - - - - - -
OperatorFromToSpecial CallsignFrequenciesModesQSO
-
@endsection() - -@section('scripts') - -@endsection -- cgit v1.2.3 From 5d79c586b963b1249eb148816a70d1cec618511f Mon Sep 17 00:00:00 2001 From: Mateja Date: Sun, 14 Mar 2021 21:38:01 +0100 Subject: Work on `activities` component. It currently doesn't update on filter change. --- resources/js/components/activities.vue | 26 ++++++++++++++++++++++++-- resources/js/components/call-sign-filter.vue | 1 + resources/js/store.js | 13 +++++++++++++ 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 @@ -- cgit v1.2.3 From 4e6fa681c3f8f01a44a3446f80524842a4f42274 Mon Sep 17 00:00:00 2001 From: Mateja Date: Mon, 15 Mar 2021 23:12:32 +0100 Subject: Update activities on filter change. I had to use kebab-case for event and listen directly on child component. --- resources/js/components/activities.vue | 4 ++-- resources/js/components/call-sign-filter.vue | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue index 928bae6..2f2cf03 100644 --- a/resources/js/components/activities.vue +++ b/resources/js/components/activities.vue @@ -1,6 +1,6 @@ + + -- cgit v1.2.3 From 074bff2e79d91610a936f329ac8f603049c3b334 Mon Sep 17 00:00:00 2001 From: Mateja Date: Thu, 18 Mar 2021 19:37:53 +0100 Subject: Better styling for `reservation.vue` component. --- resources/js/components/reservation.vue | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue index fbb5fdc..85348bd 100644 --- a/resources/js/components/reservation.vue +++ b/resources/js/components/reservation.vue @@ -1,20 +1,18 @@