ShowManager.vue

<template>
  <b-container>
    <b-row>
      <b-col align="right">
        <b-dropdown id="ddshows" text="Sendereihe auswählen" variant="info">
          <b-dropdown-item v-for="(show, index) in this.shows" :key="show.id" v-on:click="switchShow(index)">{{ show.name }}</b-dropdown-item>
        </b-dropdown>
      </b-col>
    </b-row>
    <hr />

    <b-jumbotron>
      <template slot="header">
        <span v-if="loaded.shows">
          {{ shows[currentShow].name }}
          <img src="../assets/16x16/emblem-system.png" alt="edit name of show" v-on:click="$refs.appModalShow.$refs.modalShowName.show()" />
        </span>
        <span v-else>Shows are being loaded</span>
      </template>
      <template slot="lead">
        <span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
        <img src="../assets/16x16/emblem-system.png" alt="edit short description" v-on:click="$refs.appModalShow.$refs.modalShowShortDescription.show()" />
      </template>
      <p v-if="loaded.shows">
        <b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="$refs.appModalShow.$refs.modalShowDescription.show()" />
        <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, '') }}-->
          {{ shows[currentShow].description }}
          <!-- TODO: add image and logo here? -->
        </div>
      </p>
    </b-jumbotron>

    <div v-if="!loaded.shows">
      <b-row>
        <b-col align="center">
          <img src="../assets/radio.gif" alt="loading data" />
        </b-col>
      </b-row>
    </div>
    <div v-else>
      <app-modalShow ref="appModalShow" v-bind:show="shows[currentShow]"></app-modalShow>
      <app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes>

      <p align="left">Die nächsten <select v-model="numUpcoming">
        <option>8</option>
        <option>16</option>
        <option value="all">alle</option>
      </select> Sendungen:</p>
      <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="loaded.notes">{{ prettyTimeslotNote(timeslot.id) }}</span>
              <span v-else style="background: ../assets/radio.gif"></span>
              <img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="editNote(timeslot.id)" />
            </div>
          </b-col>
        </b-row>
      </div>
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>

      <div class="recenttimeslots">
        <p>Die letzten <select v-model="numRecent">
          <option>8</option>
          <option>16</option>
          <option value="all">alle</option>
        </select> Sendungen:</p>
        <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="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>
            </b-col>
          </b-row>
        </div>
        <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
      </div>

      <hr />

      <div v-if="loaded.shows" class="showsettings">
        <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
        <b-row>

          <b-col lg="6">
            <p>
              <b-badge variant="light">E-Mail:</b-badge>
              <span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
              <span v-else>{{ shows[currentShow].email }}</span>
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
            </p>
          </b-col>

          <b-col lg="6">
            <p>
              <b-badge variant="light">Website:</b-badge>
              <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 lg="6">
            <p>
              <b-badge variant="light">Show type:</b-badge>
              <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
              <span v-if="loaded.type">
                <span v-if="current.type.length === 0"><small><i>(none set)</i></small></span>
                <span v-else>{{ current.type[0].type }}</span>
                <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
              </span>
              <span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
            </p>
          </b-col>

          <b-col lg="6">
            <p>
              <b-badge variant="light">Funding category (eg. for RTR):</b-badge>
              <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
              <span v-if="loaded.rtrcategory">
                <span v-if="current.rtrcategory.length === 0"><small><i>(none set)</i></small></span>
                <span v-else>{{ current.rtrcategory[0].rtrcategory }}</span>
                <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
              </span>
              <span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
            </p>
          </b-col>

          <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 -->
              <b-badge variant="light">Predecessor:</b-badge>
              <span v-if="shows[currentShow].predecessor_id === null"><small><i>This show has no predecessor show.</i></small></span>
              <span v-else>{{ shows[currentShow].predecessor_id }}</span>
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
            </p>
          </b-col>

          <b-col lg="6">
            <p>
              <b-badge variant="light">CBA Series ID:</b-badge>
              <span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span>
              <span v-else>{{ shows[currentShow].cba_series_id }}</span>
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
            </p>
          </b-col>

          <b-col lg="6">
            <p>
              <b-badge variant="light">Fallback List/Pool:</b-badge>
              <span v-if="shows[currentShow].fallback_id === ''"><small><i>(none set)</i></small></span>
              <span v-else>ID: {{ shows[currentShow].fallback_id }}</span>
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
            </p>
          </b-col>

        </b-row>

        <b-row>

          <b-col lg="2">
            <b-badge style="width:80%;">Categories:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
          </b-col>
          <b-col lg="4">
            <div v-if="loaded.categories">
              <p v-if="shows[currentShow].category.length === 0">
                <small><i>(none set)</i></small>
              </p>
              <p v-else>
                <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-badge style="width:80%;">Topics:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
          </b-col>
          <b-col lg="4">
            <div v-if="loaded.topics">
              <p v-if="shows[currentShow].topic.length === 0">
                <small><i>(none set)</i></small>
              </p>
              <p v-else>
                <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-badge style="width:80%;">Musicfocus:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
          </b-col>
          <b-col lg="4">
            <div v-if="loaded.musicfocus">
              <p v-if="shows[currentShow].musicfocus.length === 0">
                <small><i>(none set)</i></small>
              </p>
              <p v-else>
                <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-badge style="width:80%;">Languages:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
          </b-col>
          <b-col lg="4">
            <div v-if="loaded.languages">
              <p v-if="shows[currentShow].language.length === 0">
                <small><i>(none set)</i></small>
              </p>
              <p v-else>
                <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 lg="2">
            <b-badge style="width:80%;">Hosts:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
          </b-col>
          <b-col lg="4">
            <div v-if="loaded.hosts">
              <p v-if="shows[currentShow].hosts.length === 0">
                <small><i>(none set)</i></small>
              </p>
              <p v-else>
                <!-- TODO: make link on name; when user clicks, open modal to edit host -->
                <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>
  </b-container>
</template>

<script>
import modalNotes from './ShowManagerModalNotes.vue'
import modalShow from './ShowManagerModalShow.vue'
import timeslotSort from '../mixins/timeslotSort'
import prettyDate from '../mixins/prettyDate'
import axios from 'axios'

export default {
  components: {
    'app-modalNotes': modalNotes,
    'app-modalShow': modalShow
  },
  data () {
    return {
      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
      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,
      loaded: {
        shows: false,
        timeslots: false,
        notes: false,
        categories: false,
        hosts: false,
        languages: false,
        topics: false,
        musicfocus: false,
        rtrcategory: false,
        type: false
      },
      current: {
        categories: [],
        hosts: [],
        languages: [],
        topics: [],
        musicfocus: [],
        rtrcategory: [],
        type: [],
        note: {}
      }
    }
  },
  mixins: [ timeslotSort, prettyDate ],
  computed: {
    timeslotsFutureShow: function () {
      if (this.numUpcoming === 'all') return this.timeslotsFuture
      else return this.timeslotsFuture.slice(0, this.numUpcoming)
    },
    timeslotsPastShow: function () {
      // if (this.numRecent === 'all') return this.timeslotsPast
      // else return this.timeslotsPast.slice(0, this.numRecent)
      return this.timeslotsPast
    }
  },
  methods: {
    switchShow: function (index) {
      // 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.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()
      this.getType()
      // now fetch the single timeslots for a given show from PV backend
      axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/', {withCredentials: true}).then(response => {
        this.timeslots = response.data
        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/', {withCredentials: true}).then(response => {
          this.notes = response.data
          this.loaded.notes = true
        }).catch(error => {
          alert('There was an error fetching notes from the server' + error)
        })
        // done fetching notes
      }).catch(error => {
        alert('There was an error fetching timeslots from the server' + error)
      })
      // done fetching timeslots
    },
    editNote: function (timeslotID) {
      for (var n in this.notes) {
        if (this.notes[n].timeslot === timeslotID) {
          this.current.note = this.notes[n]
          break
        }
      }
      this.$refs.appModalNotes.$refs.modalNote.show()
    },
    getTimeslotNote: function (timeslotID) {
      for (var n in this.notes) {
        if (this.notes[n].timeslot === timeslotID && this.notes[n].title !== undefined) {
          return this.notes[n].title
        }
      }
      return null
    },
    prettyTimeslotNote: function (timeslotID) {
      var note = this.getTimeslotNote(timeslotID)
      if (note !== null) {
        return this.prettyTitle(note)
      } else {
        return ''
      }
    },
    prettyTitle: function (title) {
      if (title === '') return '...'
      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], {withCredentials: true}).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] + '/', {withCredentials: true}).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], {withCredentials: true}).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.languages = 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], {withCredentials: true}).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], {withCredentials: true}).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 (typeof this.shows[this.currentShow].rtrcategory !== 'number') {
        this.loaded.rtrcategory = true
      } else {
        axios.get(process.env.API_STEERING + 'rtrcategories/' + this.shows[this.currentShow].rtrcategory, {withCredentials: true}).then(response => {
          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.rtrcategory = true
    },
    getType: function () {
      this.current.type = []
      var loadingError = false
      if (typeof this.shows[this.currentShow].type !== 'number') {
        this.loaded.type = true
      } else {
        axios.get(process.env.API_STEERING + 'types/' + this.shows[this.currentShow].type, {withCredentials: true}).then(response => {
          this.current.type.push(response.data)
        }).catch(error => {
          loadingError = true
          alert('There was an error fetching show type from the server: ' + error)
        })
      }
      if (!loadingError) this.loaded.type = true
    },
    notYetImplemented: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
    }
  },
  created () {
    axios.get(process.env.API_STEERING_SHOWS, {withCredentials: true}).then(response => {
      this.shows = response.data
      this.currentShowID = this.shows[0].id
      this.currentShow = 0
      this.loaded.shows = true
      this.switchShow(this.currentShow)
    }).catch(error => {
      alert('There was an error fetching shows from the server: ' + error)
    })
  }
}
</script>

<style scoped>
div.recenttimeslots {
  margin-top: 2em;
}
.showsettings, .recenttimeslots, .nexttimeslots {
  text-align: left;
}
</style>