diff options
| -rw-r--r-- | resources/js/app.js | 4 | ||||
| -rw-r--r-- | resources/js/components/call-sign-description.vue | 45 | ||||
| -rw-r--r-- | resources/js/store.js | 4 | ||||
| -rw-r--r-- | resources/views/pages/reserve.blade.php | 36 |
4 files changed, 68 insertions, 21 deletions
diff --git a/resources/js/app.js b/resources/js/app.js index efea4b1..35fd04a 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -5,7 +5,7 @@ import Vue from 'vue'; import store from './store.js'; import callSignFilter from './components/call-sign-filter.vue'; -import callSignDesc from './components/call-sign-description.vue'; +import callSignDescription from './components/call-sign-description.vue'; import activities from './components/activities.vue'; import reservation from './components/reservation.vue'; @@ -15,7 +15,7 @@ new Vue({ el: '#vue', store, components: { - callSignDesc, + callSignDescription, callSignFilter, activities, reservation, diff --git a/resources/js/components/call-sign-description.vue b/resources/js/components/call-sign-description.vue index 48e54f5..b0dca4d 100644 --- a/resources/js/components/call-sign-description.vue +++ b/resources/js/components/call-sign-description.vue @@ -1,9 +1,50 @@ <template> - + <div> + <div class="form-group"> + <label for="special-call">Special Callsign:</label> + <select class="form-control" id="special-call" v-model="selected" name="scall" required> + <option v-for="option in options" :value="option.sign" v-text="option.sign"></option> + </select> + </div> + + <div class="card mb-3"> + <div class="card-body pb-1"> + <div class="card-text" v-html="description"></div> + </div> + </div> + </div> </template> <script> export default { - + mounted() { + this.$store.dispatch('fillSigns').then(() => { + try { + this.$store.dispatch('setSelectedSign', this.$store.getters.getSigns[0].sign); + } + catch { + console.log('No call signs!'); + } + }); + }, + computed: { + options() { + return this.$store.getters.getSigns; + }, + selected: { + get() { + return this.$store.getters.getSelectedSign; + }, + set(value) { + this.$store.dispatch('setSelectedSign', value); + } + }, + description() { + for (let i = 0; i < this.options.length; i++) + if (this.options[i].sign === this.selected) + return this.options[i].description; + return ''; + } + } } </script> diff --git a/resources/js/store.js b/resources/js/store.js index 6ec3711..669f0bc 100644 --- a/resources/js/store.js +++ b/resources/js/store.js @@ -28,8 +28,8 @@ export default new Vuex.Store({ setSelectedSign(context, sign) { context.commit('setSelectedSign', sign); }, - fillSigns(context) { - axios.get('/special-calls/show').then(response => { + async fillSigns(context) { + await axios.get('/special-calls/show').then(response => { context.commit('fillSigns', response.data); }).catch(error => { console.log(error); diff --git a/resources/views/pages/reserve.blade.php b/resources/views/pages/reserve.blade.php index 823e8b9..d0253df 100644 --- a/resources/views/pages/reserve.blade.php +++ b/resources/views/pages/reserve.blade.php @@ -17,24 +17,30 @@ @endif <form action="{{ route('reserve') }}" method="POST"> @csrf - <!-- SPECIAL CALL --> -<div class="form-group"> - <label for="special-call">Special Callsign:</label> - <select class="form-control @error('scall') is-invalid @enderror" id="special-call" name="scall" required> - @foreach ($signs as $sign) - <option value="{{ $sign->sign }}" {{ old('scall') == $sign->sign ? 'selected' : '' }}>{{ $sign->sign }}</option> - @endforeach - </select> + + <call-sign-description></call-sign-description> @error('scall') <div class="alert alert-danger mt-2">{{ $message }}</div> @enderror -</div> -<div class="card mb-3"> - <div class="card-body pb-1"> - <div class="card-text" id="call-desc"></div> - </div> -</div> + {{--<!-- SPECIAL CALL -->--}} +{{--<div class="form-group">--}} + {{--<label for="special-call">Special Callsign:</label>--}} + {{--<select class="form-control @error('scall') is-invalid @enderror" id="special-call" name="scall" required>--}} + {{--@foreach ($signs as $sign)--}} + {{--<option value="{{ $sign->sign }}" {{ old('scall') == $sign->sign ? 'selected' : '' }}>{{ $sign->sign }}</option>--}} + {{--@endforeach--}} + {{--</select> --}} + {{--@error('scall')--}} + {{--<div class="alert alert-danger mt-2">{{ $message }}</div>--}} + {{--@enderror--}} +{{--</div>--}} + +{{--<div class="card mb-3">--}} + {{--<div class="card-body pb-1">--}} + {{--<div class="card-text" id="call-desc"></div>--}} + {{--</div>--}} +{{--</div>--}} @error('time') <div class="alert alert-danger mt-2">{{ $message }}</div> @@ -163,5 +169,5 @@ format: 'H:i' }); </script> - <script src="{{ asset('js/reserve.js') }}"></script> + {{--<script src="{{ asset('js/reserve.js') }}"></script>--}} @endsection |