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>
      <!-- include the modals to edit show and timeslot entries from the modal compontents -->
      <app-modalShow ref="appModalShow" v-bind:show="shows[currentShow]"></app-modalShow>
      <app-modalNotes ref="appModalNotes" v-bind:show="shows[currentShow]"></app-modalNotes>

      <!-- here we show our table of timeslots -->
      <p>
        The next <b>{{ numSlots }}</b> timeslots between <b>{{ prettyDate(dateSlotsStart) }}</b> and <b>{{ prettyDate(dateSlotsEnd) }}</b>:
      </p>
      <div v-if="loaded.timeslots">
        <b-table striped hover outlined :items="notesTableArray"></b-table>
      </div>
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>

      <!-- This is the old old-school view for timeslots; remove when all functions are implmented in table above
      <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" />
              {{ prettyDateTime(timeslot.start) }} <small>(Duration: {{ prettyDuration(timeslot.start, timeslot.end) }})</small>
              <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="editTimeslotNote(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>
      -->

      <hr />

      <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>
  </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
      timeslotmeta: { // meta info when pagination is used
        count: 0,
        next: null,
        previous: null
      },
      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,
      numSlots: 10,
      dateSlotsStart: new Date(),
      dateSlotsEnd: new Date(new Date().getTime() + 90 * 86400000),
      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: {
    notesTableArray: function () {
      var arr = []
      for (var i in this.timeslots) {
        arr.push({
          title: this.getTimeslotNoteTitle(this.timeslots[i].id),
          starts: this.prettyDateTime(this.timeslots[i].start),
          duration: this.prettyDuration(this.timeslots[i].start, this.timeslots[i].end) + 'min',
          // TODO: find out how to insert images or iconffont icons into b-table rows
          // options: '<img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="' + this.editTimeslotNote(this.timeslots[i].id) + '" />'
          options: '<span class="timeslotEditLink" onclick="' +
            'document.getElementById(\'app\').children[1].__vue__.' +
            'editTimeslotNote(' + this.timeslots[i].id + ', ' + this.timeslots[i].schedule + ')">edit</span> ' +
            '<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">upload</span>' +
            '<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">...</span>'
        })
      }
      return arr
    },
    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 timeslots (including notes) for a given show from PV backend
      this.getTimeslots(this.dateSlotsStart, this.dateSlotsEnd, this.numSlots)
    },
    getTimeslots: function (start, end, limit, offset) {
      var uri = process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/?'
      if (typeof start === 'object') uri += 'start=' + this.apiDate(start)
      if (typeof end === 'object') uri += '&end=' + this.apiDate(end)
      if (typeof limit === 'number') uri += '&limit=' + limit
      if (typeof offset === 'number') uri += '&offset=' + offset
      axios.get(uri, {withCredentials: true}).then(response => {
        // if we use the limit argument results are paginated and look different
        // than without the limit argument
        if (typeof limit === 'number') {
          this.timeslots = response.data.results
          this.timeslotmeta.count = response.data.count
          this.timeslotmeta.next = response.data.next
          this.timeslotmeta.previous = response.data.previous
        } else {
          this.timeslots = response.data
          this.timeslotmeta.count = response.data.length
          this.timeslotmeta.next = null
          this.timeslotmeta.previous = null
        }
        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
        // TODO: discuss: when a timeslot can only have one not, why is the id
        // of this note not stored in the timeslot? would be way more efficient
        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
    },
    editTimeslotNote: function (timeslotID, scheduleID) {
      this.current.note = null
      for (var n in this.notes) {
        if (this.notes[n].timeslot === timeslotID) {
          this.current.note = this.notes[n]
          break
        }
      }
      this.$refs.appModalNotes.showModal(this.current.note, timeslotID, scheduleID)
    },
    getTimeslotNoteTitle: 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
    },
    getTimeslotNoteID: function (timeslotID) {
      for (var n in this.notes) {
        if (this.notes[n].timeslot === timeslotID) {
          return this.notes[n].id
        }
      }
      return null
    },
    prettyTimeslotNote: function (timeslotID) {
      var note = this.getTimeslotNoteTitle(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>
span.timeslotEditLink {
  color: #8d5f82 !important;
  font-weight: bold;
  font-size: 0.8em;
  padding: 0.25em;
}
span.timeslotEditLink:hover {
  color: #ad7fa8 !important;
}
</style>