add text based show selector to fix #28

src/components/EmissionManager.vue

 <template>
   <b-container>
     <show-selector
+      ref="showSelector"
       title="Emissions"
       :callback="showHasSwitched"
     />
@@ -179,6 +180,7 @@ export default {
     this.$store.dispatch('shows/fetchShows', {
       callback: () => {
         this.showHasSwitched()
+        this.$refs.showSelector.updateInputSelector()
       }
     })
   },

src/components/FileManager.vue

 <template>
   <b-container>
     <show-selector
+      ref="showSelector"
       title="Files &amp; playlists"
       :callback="showHasSwitched"
     />
@@ -63,7 +64,10 @@ export default {
   // loaded.
   created () {
     this.$store.dispatch('shows/fetchShows', {
-      callback: () => { this.showHasSwitched() }
+      callback: () => {
+        this.showHasSwitched()
+        this.$refs.showSelector.updateInputSelector()
+      }
     })
   },
 
@@ -74,7 +78,7 @@ export default {
     // This switches the UI elements to reflect another show and fetches all
     // relevent data from the tank API.
     showHasSwitched () {
-      this.$log.debug('show has switched to')
+      this.$log.debug('show has switched to', this.selectedShow.name)
       this.$store.dispatch('files/fetchFiles', {
         slug: this.selectedShow.slug
       })

src/components/ShowSelector.vue

 <template>
   <b-row>
-    <b-col>
+    <b-col cols="3">
       <h3>{{ title }}</h3>
     </b-col>
     <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
         id="ddshows"
         text="Sendereihe auswählen"
@@ -23,13 +60,25 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import { BIconCheck, BIconX } from 'bootstrap-vue'
 
 export default {
+  components: {
+    BIconCheck,
+    BIconX,
+  },
+
   props: {
     title: { type: String, default: 'Unlabeled component title' },
     callback: { type: Function, default: null }
   },
 
+  data () {
+    return {
+      inputSelector: '',
+    }
+  },
+
   computed: {
     loaded () {
       return {
@@ -37,6 +86,14 @@ export default {
       }
     },
 
+    disabledOk () {
+      return ! this.isValidSelector()
+    },
+
+    disabledReset () {
+      return this.inputSelector.length > 0 ? false : true
+    },
+
     ...mapGetters({
       shows: 'shows/shows',
       selectedShow: 'shows/selectedShow',
@@ -46,8 +103,45 @@ export default {
   methods: {
     switchShow: function (index) {
       this.$store.commit('shows/switchShow', index)
+      this.updateInputSelector()
       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>