Finished call-sign-description component.

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