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.showName()" />
        </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.showShortDescription()" />
      </template>
      <p v-if="loaded.shows">
        <b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="$refs.appModalShow.showDescription()" />
        <div v-if="loaded.shows">
          <!-- TODO: see if we can make a nice but secure html rendering of the description
            This should be already secure, as long as you do not write directly to the DOM.
            Only if you do this and render HTML, take care to have it save (no script tags etc.).
            This current regex replace is only to have it looking nicely, in case there are html tags. -->
          {{ shows[currentShow].description.replace(/<[^>]*>/g, '') }}
          <!-- 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 contact e-mail" v-on:click="$refs.appModalShow.showEmail()" />
            </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 website" v-on:click="$refs.appModalShow.showWebsite()" />
            </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 CBA series ID" v-on:click="$refs.appModalShow.showCBAid()" />
            </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>