added functions to get arrayed options of shows

src/components/ShowManager.vue

@@ -11,16 +11,16 @@
 
     <b-jumbotron>
       <template slot="header">
-        <span v-if="showsLoaded">{{ shows[currentShow].name }}</span>
+        <span v-if="loaded.shows">{{ shows[currentShow].name }}</span>
         <span v-else>Shows are being loaded</span>
       </template>
       <template slot="lead">
-        <span v-if="showsLoaded">{{ shows[currentShow].short_description }}</span>
+        <span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
         <img src="../assets/16x16/emblem-system.png" alt="edit short description" v-on:click="notYetImplemented" />
       </template>
-      <p v-if="showsLoaded">
+      <p v-if="loaded.shows">
         <b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="notYetImplemented" />
-        <div v-if="showsLoaded">
+        <div v-if="loaded.shows">
           <!-- TODO: see if we can make a nice but secure html rendering of the description -->
           {{ shows[currentShow].description.replace(/<[^>]*>/g, '') }}
           <!-- TODO: add image and logo here? -->
@@ -28,7 +28,7 @@
       </p>
     </b-jumbotron>
 
-    <div v-if="!showsLoaded">
+    <div v-if="!loaded.shows">
       <b-row>
         <b-col align="center">
           <img src="../assets/radio.gif" alt="loading data" />
@@ -41,14 +41,14 @@
         <option>16</option>
         <option value="all">alle</option>
       </select> Sendungen:</p>
-      <div v-if="timeslotsLoaded">
+      <div v-if="loaded.timeslots">
         <b-row>
           <b-col>
             <div v-for="timeslot in this.timeslotsFutureShow">
               <img v-if="timeslot.playlist_id === null" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="notYetImplemented" />
               <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" />
               {{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
-              <span v-if="notesLoaded">{{ prettyTimeslotNote(timeslot.id) }}</span>
+              <span v-if="loaded.notes">{{ prettyTimeslotNote(timeslot.id) }}</span>
               <span v-else style="background: ../assets/radio.gif"></span>
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
             </div>
@@ -63,14 +63,14 @@
           <option>16</option>
           <option value="all">alle</option>
         </select> Sendungen:</p>
-        <div v-if="timeslotsLoaded">
+        <div v-if="loaded.timeslots">
           <b-row>
             <b-col>
               <div v-for="timeslot in this.timeslotsPastShow">
                 <img v-if="timeslot.playlist_id === null" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="notYetImplemented" />
                 <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" />
                 {{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
-                <span v-if="notesLoaded">{{ prettyTimeslotNote(timeslot.id) }}</span>
+                <span v-if="loaded.notes">{{ prettyTimeslotNote(timeslot.id) }}</span>
                 <span v-else style="background: ../assets/radio.gif"></span>
                 <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
               </div>
@@ -79,12 +79,14 @@
         </div>
         <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
       </div>
+
       <hr />
 
-      <div v-if="showsLoaded" class="showsettings">
+      <div v-if="loaded.shows" class="showsettings">
         <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
         <b-row>
-          <b-col xl="4" lg="6">
+
+          <b-col lg="6">
             <p>
               <b>E-Mail:</b>
               <span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
@@ -92,15 +94,17 @@
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
             </p>
           </b-col>
-          <b-col xl="4" lg="6">
+
+          <b-col lg="6">
             <p>
-              <b>Website:</b> {{ shows[currentShow].website }}
+              <b>Website:</b>
               <span v-if="shows[currentShow].website === null"><small><i>(none set)</i></small></span>
               <span v-else><a :href="shows[currentShow].website">{{ shows[currentShow].website }}</a></span>
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
             </p>
           </b-col>
-          <b-col xl="4" lg="6">
+
+          <b-col lg="6">
             <p>
               <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
               <!-- TODO: fetch name for type_id from steering api -->
@@ -108,7 +112,8 @@
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
             </p>
           </b-col>
-          <b-col xl="4" lg="6">
+
+          <b-col lg="6">
             <p>
               <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
               <!-- TODO: fetch name for rtrcategory_id from steering api -->
@@ -116,7 +121,8 @@
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
             </p>
           </b-col>
-          <b-col xl="4" lg="6">
+
+          <b-col lg="6">
             <p>
               <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
               <!-- TODO: fetch name for predecessor_id from steering api -->
@@ -126,7 +132,8 @@
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
             </p>
           </b-col>
-          <b-col xl="4" lg="6">
+
+          <b-col lg="6">
             <p>
               <b>CBA Series ID:</b>
               <span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span>
@@ -134,7 +141,8 @@
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
             </p>
           </b-col>
-          <b-col xl="4" lg="6">
+
+          <b-col lg="6">
             <p>
               <b>Fallback Pool:</b>
               <span v-if="shows[currentShow].fallback_pool === ''"><small><i>(none set)</i></small></span>
@@ -142,62 +150,98 @@
               <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
             </p>
           </b-col>
-          <b-col xl="4" lg="6">
+
+        </b-row>
+
+        <b-row>
+
+          <b-col lg="2">
+            <b>Categories <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
+          </b-col>
+          <b-col lg="4">
+            <div v-if="loaded.categories">
               <p v-if="shows[currentShow].category.length === 0">
-              <b>Categories:</b>
                 <small><i>(none set)</i></small>
-              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
               </p>
               <p v-else>
-              <b>Categories:</b>
-              <span v-for="cat in shows[currentShow].category">{{ cat.category }} </span>
+                <ul>
+                  <li v-for="cat in current.categories">{{ cat.category }}</li>
+                </ul>
               </p>
+            </div>
+            <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
+          </b-col>
+
+          <b-col lg="2">
+            <b>Languages <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
           </b-col>
-          <b-col xl="4" lg="6">
+          <b-col lg="4">
+            <div v-if="loaded.categories">
               <p v-if="shows[currentShow].language.length === 0">
-              <b>Languages:</b>
                 <small><i>(none set)</i></small>
-              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
               </p>
               <p v-else>
-              <b>Languages:</b>
-              <span v-for="lang in shows[currentShow].language">{{ lang.name }} </span>
+                <ul>
+                  <li v-for="lang in current.languages">{{ lang.name }}</li>
+                </ul>
               </p>
+            </div>
+            <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
           </b-col>
-          <b-col xl="4" lg="6">
+
+          <b-col lg="2">
+            <b>Topics <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
+          </b-col>
+          <b-col lg="4">
+            <div v-if="loaded.topics">
               <p v-if="shows[currentShow].topic.length === 0">
-              <b>Topics:</b>
                 <small><i>(none set)</i></small>
-              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
               </p>
               <p v-else>
-              <b>Topics:</b>
-              <span v-for="top in shows[currentShow].topic">{{ top.topic }} </span>
+                <ul>
+                  <li v-for="topic in current.topics">{{ topic.topic }}</li>
+                </ul>
               </p>
+            </div>
+            <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
+          </b-col>
+
+          <b-col lg="2">
+            <b>Musicfocus <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
           </b-col>
-          <b-col xl="4" lg="6">
+          <b-col lg="4">
+            <div v-if="loaded.musicfocus">
               <p v-if="shows[currentShow].musicfocus.length === 0">
-              <b>Musicfocus:</b>
                 <small><i>(none set)</i></small>
-              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
               </p>
               <p v-else>
-              <b>Musicfocus:</b>
-              <span v-for="m in shows[currentShow].musicfocus">{{ m.focus }} </span>
+                <ul>
+                  <li v-for="focus in current.musicfocus">{{ focus.focus }}</li>
+                </ul>
               </p>
+            </div>
+            <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
+          </b-col>
+
+          <b-col lg="2">
+            <b>Hosts <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
           </b-col>
-          <b-col xl="4" lg="6">
-            <p v-if="shows[currentShow].hosts === 0">
-              <b>Hosts:</b>
+
+          <b-col lg="4">
+            <div v-if="loaded.hosts">
+              <p v-if="shows[currentShow].hosts.length === 0">
                 <small><i>(none set)</i></small>
-              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
               </p>
               <p v-else>
-              <b>Hosts:</b>
                 <!-- TODO: make link on name; when user clicks, open modal to edit host -->
-              <span v-for="host in shows[currentShow].hosts">{{ host.name }} </span>
+                <ul>
+                  <li v-for="host in current.hosts">{{ host.name }}</li>
+                </ul>
               </p>
+            </div>
+            <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
           </b-col>
+
         </b-row>
       </div>
     </div>
@@ -219,13 +263,29 @@ export default {
       shows: [],      // an array of objects describing our shows (empty at load, will be populated on created())
       timeslots: [],  // same as with shows, only for the related timeslots
       notes: [],      // same as with shows, only for the related notes
-      showsLoaded: false,
-      timeslotsLoaded: false,
-      notesLoaded: false,
       currentShow: 0,   // index of the currently selected show in our shows array
       currentShowID: 0, // actual id of the currently selected show
       numUpcoming: 8,
-      numRecent: 8
+      numRecent: 8,
+      loaded: {
+        shows: false,
+        timeslots: false,
+        notes: false,
+        categories: false,
+        hosts: false,
+        languages: false,
+        topics: false,
+        musicfocus: false,
+        rtrcategory: false
+      },
+      current: {
+        categories: [],
+        hosts: [],
+        languages: [],
+        topics: [],
+        musicfocus: [],
+        rtrcategory: []
+      }
     }
   },
   mixins: [ timeslotSort ],
@@ -245,22 +305,36 @@ export default {
       // if we already had some show loaded with timeslots and notes, set these to
       // not loaded, so we don't display old timeslots and notes while already
       // the new show is displayed and new timeslots and notes are still loading
-      this.timeslotsLoaded = false
-      this.notesLoaded = false
+      this.loaded.timeslots = false
+      this.loaded.notes = false
+      // also for those settings of the show which are only ids or arrays of ids
+      // we have to fetch the corresponding names first
+      this.loaded.categories = false
+      this.loaded.hosts = false
+      this.loaded.languages = false
+      this.loaded.musicfocus = false
+      this.loaded.rtrcategory = false
       // set the current show and its ID to whatever we want to switch to now
       this.currentShow = index
       this.currentShowID = this.shows[this.currentShow].id
+      // before we load timeslots and notes, we want to fetch the general settings first
+      this.getCategories()
+      this.getHosts()
+      this.getLanguages()
+      this.getTopics()
+      this.getMusicfocus()
+      this.getRTRCategory()
       // now fetch the single timeslots for a given show from PV backend
-      axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots').then(response => {
+      axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/').then(response => {
         this.timeslots = response.data
-        this.timeslotsLoaded = true
+        this.loaded.timeslots = true
         // now that we have the timeslots we can fetch notes for all those timeslots
         // TODO: curently we are fetching all notes for the show into a single array
         // for bigger data sets it might be preferable to fetch only the notes for those
         // timeslots that are also visible to the user
-        axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes').then(response => {
-          this.notes = response.body
-          this.notesLoaded = true
+        axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes/').then(response => {
+          this.notes = response.data
+          this.loaded.notes = true
         }).catch(error => {
           alert('There was an error fetching notes from the server' + error)
         })
@@ -302,6 +376,112 @@ export default {
       else if (title.length > 25) return title.slice(0, 25) + '...'
       else return title
     },
+    // TODO: all thos getSomething functions could be probably merged into one
+    // generic getItem function. Maybe this.current should be an associative array
+    // instead of an object then?
+    getCategories: function () {
+      this.current.categories = []
+      var loadingError = false
+      if (this.shows[this.currentShow].category.length === 0) {
+        this.loaded.categories = true
+      } else {
+        for (var i in this.shows[this.currentShow].category) {
+          axios.get(process.env.API_STEERING + 'categories/' + this.shows[this.currentShow].category[i]).then(response => {
+            this.current.categories.push(response.data)
+          }).catch(error => {
+            loadingError = true
+            alert('There was an error fetching categories from the server: ' + error)
+          })
+        }
+        if (!loadingError) this.loaded.categories = true
+      }
+    },
+    getHosts: function () {
+      this.current.hosts = []
+      var loadingError = false
+      if (this.shows[this.currentShow].hosts.length === 0) {
+        this.loaded.hosts = true
+      } else {
+        for (var i in this.shows[this.currentShow].hosts) {
+          axios.get(process.env.API_STEERING + 'hosts/' + this.shows[this.currentShow].hosts[i] + '/').then(response => {
+            this.current.hosts.push(response.data)
+          }).catch(error => {
+            loadingError = true
+            alert('There was an error fetching hosts from the server: ' + error)
+          })
+        }
+        if (!loadingError) this.loaded.hosts = true
+      }
+    },
+    getLanguages: function () {
+      this.current.languages = []
+      var loadingError = false
+      if (this.shows[this.currentShow].language.length === 0) {
+        this.loaded.categories = true
+      } else {
+        for (var i in this.shows[this.currentShow].language) {
+          axios.get(process.env.API_STEERING + 'languages/' + this.shows[this.currentShow].language[i]).then(response => {
+            this.current.languages.push(response.data)
+          }).catch(error => {
+            loadingError = true
+            alert('There was an error fetching languages from the server: ' + error)
+          })
+        }
+        if (!loadingError) this.loaded.categories = true
+      }
+    },
+    getTopics: function () {
+      this.current.topics = []
+      var loadingError = false
+      if (this.shows[this.currentShow].topic.length === 0) {
+        this.loaded.topics = true
+      } else {
+        for (var i in this.shows[this.currentShow].topic) {
+          axios.get(process.env.API_STEERING + 'topics/' + this.shows[this.currentShow].topic[i]).then(response => {
+            this.current.topics.push(response.data)
+          }).catch(error => {
+            loadingError = true
+            alert('There was an error fetching topics from the server: ' + error)
+          })
+        }
+        if (!loadingError) this.loaded.topics = true
+      }
+    },
+    getMusicfocus: function () {
+      this.current.musicfocus = []
+      var loadingError = false
+      if (this.shows[this.currentShow].musicfocus.length === 0) {
+        this.loaded.musicfocus = true
+      } else {
+        for (var i in this.shows[this.currentShow].musicfocus) {
+          axios.get(process.env.API_STEERING + 'musicfocus/' + this.shows[this.currentShow].musicfocus[i]).then(response => {
+            this.current.musicfocus.push(response.data)
+          }).catch(error => {
+            loadingError = true
+            alert('There was an error fetching musicfocus from the server: ' + error)
+          })
+        }
+      }
+      if (!loadingError) this.loaded.musicfocus = true
+    },
+    getRTRCategory: function () {
+      this.current.rtrcategory = []
+      var loadingError = false
+      if (this.shows[this.currentShow].rtrcategory.length === 0) {
+        this.loaded.rtrcategory = true
+      } else {
+        for (var i in this.shows[this.currentShow].rtrcategory) {
+          axios.get(process.env.API_STEERING + 'rtrcategories/' + this.shows[this.currentShow].rtrcategory[i]).then(response => {
+            console.log(response.data)
+            this.current.rtrcategory.push(response.data)
+          }).catch(error => {
+            loadingError = true
+            alert('There was an error fetching RTR category from the server: ' + error)
+          })
+        }
+      }
+      if (!loadingError) this.loaded.categories = true
+    },
     notYetImplemented: function () {
       alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
     }
@@ -311,7 +491,7 @@ export default {
       this.shows = response.data
       this.currentShowID = this.shows[0].id
       this.currentShow = 0
-      this.showsLoaded = true
+      this.loaded.shows = true
       this.switchShow(this.currentShow)
     }).catch(error => {
       alert('There was an error fetching shows from the server: ' + error)