Add descriptions to activities call sign filter.

2 files changed, 14 insertions, 1 deletions

diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue
index dd22c7f..1b1057c 100644
--- a/resources/js/components/activities.vue
+++ b/resources/js/components/activities.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <call-sign-filter @sign-changed="filterChanged()"></call-sign-filter>
+    <call-sign-filter :showDescriptions="true" @sign-changed="filterChanged()"></call-sign-filter>
 
     <div class="table-responsive mt-2">
         <table class="table table-striped table-bordered" style="white-space:nowrap;">
diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index 16eaae8..0ba8b4d 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -5,11 +5,18 @@
       <option value="all">All</option>
       <option v-for="option in options" :key="option.id" :value="option.sign" v-text="option.sign"></option>
     </select>
+
+    <div class="card mb-3" v-if="showDescriptions && (selected !== 'all')">
+      <div class="card-body pb-1">
+        <div class="card-text" v-html="description"></div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: ['showDescriptions'],
   mounted() {
     this.$store.dispatch('pullSigns');
   },
@@ -25,6 +32,12 @@ export default {
     },
     options() {
       return this.$store.getters.getSigns;
+    },
+    description() {
+      for (let i = 0; i < this.options.length; i++)
+        if (this.options[i].sign === this.selected)
+          return this.options[i].description;
+      return '';
     }
   }
 }