ShowManager: layout & nice bootstrap show switcher

src/components/ShowManager.vue

 <template>
   <b-container>
     <div>
-      <h1>Sendereihen &amp; Sendungen</h1>
-      <div class="row">
-        <div class="col">
-          Aktuelle Sendereihe:
-          <select v-model="currentShow" v-on:change="switchShow">
-            <option v-for="(show, index) in this.shows" v-bind:value="index">{{ show.name }}</option>
-          </select>
-          <hr />
-        </div>
-      </div>
+      <b-row v-if="showsLoaded">
+        <b-col>
+          Aktuell ausgewählt: &nbsp;&nbsp;
+          <b-button disabled variant="outline-secondary"><b>{{ shows[currentShow].name }}</b></b-button>
+        </b-col>
+        <b-col align="right">
+          <b-dropdown id="ddshows" text="Sendereihe auswählen" variant="info">
+            <b-dropdown-item v-for="(show, index) in this.shows" v-on:click="switchShow(index)">{{ show.name }}</b-dropdown-item>
+          </b-dropdown>
+        </b-col>
+      </b-row>
+      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
+      <hr />
 
       <p align="left">Die nächsten <select v-model="numUpcoming">
         <option>8</option>
@@ -142,8 +145,9 @@ export default {
     }
   },
   methods: {
-    switchShow: function () {
+    switchShow: function (index) {
       this.episodesLoaded = false
+      this.currentShow = index
       this.currentShowID = this.shows[this.currentShow].id
       // fetch single episodes for a given show from PV backend
       this.$http.post(process.env.API_STEERING, {
@@ -203,7 +207,7 @@ export default {
         this.currentShowID = this.shows[0].id
         this.currentShow = 0
         this.showsLoaded = true
-        this.switchShow()
+        this.switchShow(this.currentShow)
       }
     }, response => {
       alert('There was an error fetching the data from the server')