Commit 6feb5948 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

add text based show selector to fix #28

parent 4154c1e3
<template> <template>
<b-container> <b-container>
<show-selector <show-selector
ref="showSelector"
title="Emissions" title="Emissions"
:callback="showHasSwitched" :callback="showHasSwitched"
/> />
...@@ -179,6 +180,7 @@ export default { ...@@ -179,6 +180,7 @@ export default {
this.$store.dispatch('shows/fetchShows', { this.$store.dispatch('shows/fetchShows', {
callback: () => { callback: () => {
this.showHasSwitched() this.showHasSwitched()
this.$refs.showSelector.updateInputSelector()
} }
}) })
}, },
......
<template> <template>
<b-container> <b-container>
<show-selector <show-selector
ref="showSelector"
title="Files &amp; playlists" title="Files &amp; playlists"
:callback="showHasSwitched" :callback="showHasSwitched"
/> />
...@@ -63,7 +64,10 @@ export default { ...@@ -63,7 +64,10 @@ export default {
// loaded. // loaded.
created () { created () {
this.$store.dispatch('shows/fetchShows', { this.$store.dispatch('shows/fetchShows', {
callback: () => { this.showHasSwitched() } callback: () => {
this.showHasSwitched()
this.$refs.showSelector.updateInputSelector()
}
}) })
}, },
...@@ -74,7 +78,7 @@ export default { ...@@ -74,7 +78,7 @@ export default {
// This switches the UI elements to reflect another show and fetches all // This switches the UI elements to reflect another show and fetches all
// relevent data from the tank API. // relevent data from the tank API.
showHasSwitched () { showHasSwitched () {
this.$log.debug('show has switched to') this.$log.debug('show has switched to', this.selectedShow.name)
this.$store.dispatch('files/fetchFiles', { this.$store.dispatch('files/fetchFiles', {
slug: this.selectedShow.slug slug: this.selectedShow.slug
}) })
......
<template> <template>
<b-row> <b-row>
<b-col> <b-col cols="3">
<h3>{{ title }}</h3> <h3>{{ title }}</h3>
</b-col> </b-col>
<b-col align="right"> <b-col align="right">
<b-input-group prepend="Select show:">
<b-form-input
v-model="inputSelector"
list="list-of-shows"
autocomplete="off"
@keypress="keypressed"
/>
<b-input-group-append>
<b-button
variant="success"
:disabled="disabledOk"
@click="confirmSelector"
>
<b-icon-check />
</b-button>
<b-button
variant="danger"
:disabled="disabledReset"
@click="resetSelector"
>
<b-icon-x />
</b-button>
</b-input-group-append>
</b-input-group>
<datalist id="list-of-shows">
<option
v-for="show in shows"
:key="show.id"
>
{{ show.name }} (ID: {{ show.id }})
</option>
</datalist>
</b-col>
<b-col
cols="3"
align="right"
>
<b-dropdown <b-dropdown
id="ddshows" id="ddshows"
text="Sendereihe auswählen" text="Sendereihe auswählen"
...@@ -23,13 +60,25 @@ ...@@ -23,13 +60,25 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { BIconCheck, BIconX } from 'bootstrap-vue'
export default { export default {
components: {
BIconCheck,
BIconX,
},
props: { props: {
title: { type: String, default: 'Unlabeled component title' }, title: { type: String, default: 'Unlabeled component title' },
callback: { type: Function, default: null } callback: { type: Function, default: null }
}, },
data () {
return {
inputSelector: '',
}
},
computed: { computed: {
loaded () { loaded () {
return { return {
...@@ -37,6 +86,14 @@ export default { ...@@ -37,6 +86,14 @@ export default {
} }
}, },
disabledOk () {
return ! this.isValidSelector()
},
disabledReset () {
return this.inputSelector.length > 0 ? false : true
},
...mapGetters({ ...mapGetters({
shows: 'shows/shows', shows: 'shows/shows',
selectedShow: 'shows/selectedShow', selectedShow: 'shows/selectedShow',
...@@ -46,8 +103,45 @@ export default { ...@@ -46,8 +103,45 @@ export default {
methods: { methods: {
switchShow: function (index) { switchShow: function (index) {
this.$store.commit('shows/switchShow', index) this.$store.commit('shows/switchShow', index)
this.updateInputSelector()
if (this.callback) { this.callback() } if (this.callback) { this.callback() }
}, },
updateInputSelector () {
this.inputSelector = this.selectedShow.name + ' (ID: ' + this.selectedShow.id + ')'
},
isValidSelector () {
let pattern = /^.*\(ID: \d+\)$/
if (pattern.test(this.inputSelector)) {
if ( this.shows.findIndex(s => s.id == this.getSelectorId()) >= 0 ) {
return true
}
}
return false
},
getSelectorId () {
let s = this.inputSelector.split('(ID: ')
return s[s.length-1].slice(0,-1)
},
keypressed (k) {
if (k.key === 'Enter') {
if (this.isValidSelector()) {
this.switchShow(this.shows.findIndex(s => s.id == this.getSelectorId()))
}
}
},
confirmSelector () {
this.keypressed({key: 'Enter'})
},
resetSelector () {
this.inputSelector = ''
},
} }
} }
</script> </script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment