diff options
author | Mateja <mail@matejamaric.com> | 2021-03-14 18:22:56 +0100 |
---|---|---|
committer | Mateja <mail@matejamaric.com> | 2021-03-14 18:22:56 +0100 |
commit | cc323d95fa3cad2d3ba437c37c4f29f8dff854eb (patch) | |
tree | 52b51c03b39552cd1708aba74dd3d546b51029cb /resources/js/components | |
parent | 95d863c82ad630d46b2195ef04d62d45b18e68a7 (diff) | |
download | yota-laravel-cc323d95fa3cad2d3ba437c37c4f29f8dff854eb.tar.gz yota-laravel-cc323d95fa3cad2d3ba437c37c4f29f8dff854eb.zip |
Finished call-sign-description component.
Diffstat (limited to 'resources/js/components')
-rw-r--r-- | resources/js/components/call-sign-description.vue | 45 |
1 files changed, 43 insertions, 2 deletions
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> |