aboutsummaryrefslogtreecommitdiff
path: root/resources/js/components/call-sign-filter.vue
diff options
context:
space:
mode:
authorMateja Marić <mail@matejamaric.com>2021-03-22 15:21:40 +0100
committerGitHub <noreply@github.com>2021-03-22 15:21:40 +0100
commit6ab102bc4be617255d5eab77faebb1cada65b370 (patch)
tree09fcff5953cc6ca3702335e717ca72f865124d1c /resources/js/components/call-sign-filter.vue
parent21e9e94e76a21516edc3d1e4d0462a0ba75aafa4 (diff)
parentdb976a9fb0434df0095ea9f1b8858213d57e7535 (diff)
downloadyota-laravel-master.tar.gz
yota-laravel-master.zip
Merge pull request #4 from MatejaMaric/use-vueHEADv2.0.0master
Use Vue.js and Vuex.
Diffstat (limited to 'resources/js/components/call-sign-filter.vue')
-rw-r--r--resources/js/components/call-sign-filter.vue44
1 files changed, 44 insertions, 0 deletions
diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
new file mode 100644
index 0000000..0ba8b4d
--- /dev/null
+++ b/resources/js/components/call-sign-filter.vue
@@ -0,0 +1,44 @@
+<template>
+ <div>
+ <label for="call-sign">Filter by special callsign: </label>
+ <select id="call-sign" v-model="selected">
+ <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');
+ },
+ computed: {
+ selected: {
+ get() {
+ return this.$store.getters.getSelectedSign;
+ },
+ set(value) {
+ this.$store.dispatch('setSelectedSign', value);
+ this.$emit('sign-changed');
+ }
+ },
+ 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 '';
+ }
+ }
+}
+</script>