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" :show="shows[currentShow]"></app-modalShow>
      <app-modalNotes ref="appModalNotes" :show="shows[currentShow]" :showAggregate="current"></app-modalNotes>

      <!-- here we show our table of timeslots -->
      <b-card>
        <b-btn v-b-toggle.timeslotFilterCollapse>Toggle timeslot filters</b-btn>
        <b-collapse id="timeslotFilterCollapse">
          <br />
          <b-row>
            <b-col sm="3"><label for="inputNumSlots">Number of slots to show:</label></b-col>
            <b-col sm="9"><b-form-input id="inputNumSlots" v-model="numSlots" type="number"></b-form-input></b-col>
          </b-row>
          <b-row>
            <b-col sm="3"><label for="inputDateStart">From:</label></b-col>
            <b-col sm="9"><b-form-input id="inputDateStart" v-model="dateStart" type="date"></b-form-input></b-col>
          </b-row>
          <b-row>
            <b-col sm="3"><label for="inputNumSlots">Until (exclusive):</label></b-col>
            <b-col sm="9"><b-form-input id="inputDateEnd" v-model="dateEnd" type="date"></b-form-input></b-col>
          </b-row>
          <br />
          <b-container fluid class="text-right">
            <b-btn variant="outline-danger" @click="resetFilter()">Reset filter</b-btn> &nbsp;
            <b-btn variant="info" @click="applyFilter()">Apply filter</b-btn>
          </b-container>
        </b-collapse>
      </b-card>

      <br />

      <div v-if="loaded.timeslots">
        <b-table striped hover outlined :fields="notesTableArrayFields" :items="notesTableArray">
          <template slot="title" slot-scope="data">
            <span v-if="data.value">{{ data.value }}</span>
            <span v-else><small><i>(none set)</i></small></span>
          </template>
          <template slot="starts" slot-scope="data">
            {{ data.value }}
          </template>
          <template slot="duration" slot-scope="data">
            {{ data.value }}
          </template>
          <template slot="options" slot-scope="data">
            <span class="timeslotEditLink" @click="editTimeslotNote(data.item.options.id, data.item.options.schedule)"><img src="../assets/16x16/emblem-system.png" alt="Edit description" title="Edit description"></span>
            <span class="timeslotEditLink" @click=""><img src="../assets/16x16/media-eject.png" alt="Upload audio file / Create playlist" title="Upload audio file / Create playlist"></span>
            <span class="timeslotEditLink" @click=""><img src="../assets/16x16/media-playback-start.png" alt="Play audio file / playlist" title="Play audio file / playlist"></span>
            <span class="timeslotEditLink" @click="">...</span>
          </template>
        </b-table>
        <b-pagination align="center" :total-rows="current.timeslotmeta.count" :per-page="current.timeslotmeta.perpage" v-model="current.timeslotmeta.page" @change="timeslotsPage"></b-pagination>
      </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="$refs.appModalShow.showType()" />
            </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.fundingcategory">
              <span v-if="current.fundingcategory.length === 0"><small><i>(none set)</i></small></span>
              <span v-else>{{ current.fundingcategory[0].fundingcategory }}</span>
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showFundingCategory()" />
            </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 from steering api -->
            <b-badge variant="light">Predecessor:</b-badge>
            <span v-if="shows[currentShow].predecessor === null"><small><i>This show has no predecessor show.</i></small></span>
            <span v-else>{{ predecessorName }}</span>
            <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showPredecessor()" />
          </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="$refs.appModalShow.showCategories()" />
        </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="$refs.appModalShow.showTopics()" />
        </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="$refs.appModalShow.showMusicFocus()" />
        </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="$refs.appModalShow.showLanguages()" />
        </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="$refs.appModalShow.showHosts()" />
        </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>

      <b-row>
        <b-col lg="2">
          <b-badge style="width:80%;">Logo:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showLogo()" />
        </b-col>
        <b-col lg="4">
          <div v-if="current.logo.length === 0">
            <small><i>(none set)</i></small>
          </div>
          <div v-else>
            <br />
            <b-img thumbnail :src="current.logo" fluid  v-on:click="$refs.appModalShow.showLogo()" />
          </div>
        </b-col>

        <b-col lg="2">
          <b-badge style="width:80%;">Image:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showImage()" />
        </b-col>
        <b-col lg="4">
          <div v-if="current.image.length === 0">
            <small><i>(none set)</i></small>
          </div>
          <div v-else>
            <br />
            <b-img thumbnail :src="current.image" fluid v-on:click="$refs.appModalShow.showImage()" />
          </div>
        </b-col>
      </b-row>

      <hr />

    </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())
      currentShow: 0,   // index of the currently selected show in our shows array
      currentShowID: 0, // actual id of the currently selected show
      numSlots: process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS, // all form input values are provided as strings
      dateStart: this.apiDate(new Date()),
      dateEnd: this.apiDate(new Date(new Date().getTime() + process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS * 86400000)),
      loaded: {
        shows: false,
        timeslots: false,
        notes: false,
        categories: false,
        hosts: false,
        languages: false,
        topics: false,
        musicfocus: false,
        fundingcategory: false,
        type: false
      },
      current: {
        categories: [],
        hosts: [],
        languages: [],
        topics: [],
        musicfocus: [],
        fundingcategory: [],
        type: [],
        timeslots: [],
        timeslotmeta: {    // meta info when pagination is used
          count: 0,
          next: null,
          previous: null,
          page: 1,   // page indexes start at 1 for <b-pagination> components
          perpage: 10
        },
        note: {},
        notes: [],
        image: '',
        logo: ''
      },
      notesTableArrayFields: [
        { key: 'title', label: 'Title of emission' },
        { key: 'starts', label: 'Emission start' },
        { key: 'duration', label: 'Duration' },
        { key: 'options', label: 'Edit' }
      ]
    }
  },
  mixins: [ timeslotSort, prettyDate ],
  computed: {
    predecessorName: function () {
      for (var i in this.shows) {
        if (this.shows[i].id === this.shows[this.currentShow].predecessor) {
          return this.shows[i].name
        }
      }
      return 'Name of predecessor show not available'
    },
    notesTableArray: function () {
      var arr = []
      for (var i in this.current.timeslots) {
        var note = this.getNoteByTimeslotID(this.current.timeslots[i].id)
        if (note !== null) note = note.title
        arr.push({
          title: note,
          starts: this.prettyDateTime(this.current.timeslots[i].start),
          duration: this.prettyDuration(this.current.timeslots[i].start, this.current.timeslots[i].end),
          options: {
            id: this.current.timeslots[i].id,
            schedule: this.current.timeslots[i].schedule
          }
        })
      }
      return arr
    }
  },
  methods: {
    applyFilter: function () {
      this.current.timeslotmeta.page = 1
      this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
    },
    resetFilter: function () {
      this.numSlots = process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS
      this.dateStart = this.apiDate(new Date())
      this.dateEnd = this.apiDate(new Date(new Date().getTime() + process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS * 86400000))
      this.current.timeslotmeta.page = 1
      this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
    },
    timeslotsPage: function (page) {
      if (this.current.timeslotmeta.page !== page) {
        this.current.timeslotmeta.page = page
        this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots, (page - 1) * this.numSlots)
      }
    },
    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.fundingcategory = 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
      // and check if images are available and set image strings, because we
      // cannot use them directly inside the b-img if they are null
      if (this.shows[this.currentShow].logo === null) this.current.logo = ''
      else this.current.logo = this.shows[this.currentShow].logo
      if (this.shows[this.currentShow].image === null) this.current.image = ''
      else this.current.image = this.shows[this.currentShow].image
      // 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.getFundingCategory()
      this.getType()
      // now fetch the timeslots (including notes) for a given show from PV backend
      this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
    },
    getTimeslots: function (start, end, limit, offset) {
      var dateRegex = new RegExp('^\\d{4}-\\d{2}-\\d{2}$')
      var uri = process.env.VUE_APP_API_STEERING_SHOWS + this.currentShowID + '/timeslots/?'
      if (dateRegex.test(start)) uri += 'start=' + start + '&'
      if (dateRegex.test(end)) uri += 'end=' + end + '&'
      if (!isNaN(parseInt(limit))) uri += 'limit=' + parseInt(limit) + '&'
      if (!isNaN(parseInt(offset))) uri += 'offset=' + parseInt(offset)
      this.loaded.timeslots = false
      this.loaded.notes = false
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
      }).then(response => {
        // if we use the limit argument results are paginated and look different
        // than without the limit argument
        if (!isNaN(parseInt(limit))) {
          this.current.timeslots = response.data.results
          this.current.timeslotmeta.count = response.data.count
          this.current.timeslotmeta.next = response.data.next
          this.current.timeslotmeta.previous = response.data.previous
          this.current.timeslotmeta.perpage = parseInt(limit)
        } else {
          this.current.timeslots = response.data
          this.current.timeslotmeta.count = response.data.length
          this.current.timeslotmeta.next = null
          this.current.timeslotmeta.previous = null
          this.current.timeslotmeta.perpage = response.data.length
        }
        this.loaded.timeslots = true
        // now that we have the timeslots we can fetch notes for all those timeslots
        uri = process.env.VUE_APP_API_STEERING_SHOWS + this.currentShowID + '/notes/?ids='
        // add all note IDs from the timeslots that have existing notes
        var thereIsANote = false
        for (var i in this.current.timeslots) {
          if (typeof this.current.timeslots[i].note_id === 'number') {
            uri += this.current.timeslots[i].note_id + ','
            thereIsANote = true
          }
        }
        // now remove trailing ',' if at least one note already exists
        // and make the api call to fetch them
        if (thereIsANote) {
          uri = uri.slice(0, -1)
          axios.get(uri, {
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).then(response => {
            this.current.notes = response.data
            this.loaded.notes = true
          }).catch(error => {
            alert('There was an error fetching notes from the server' + error)
          })
          // done fetching notes
        } else {
          // if no notes exist that correspond to our selected timeslots, empty
          // the corresponding array
          this.current.notes = []
        }
      }).catch(error => {
        console.log(error)
        alert('There was an error fetching timeslots from the server\n' + error)
      })
      // done fetching timeslots
    },
    editTimeslotNote: function (timeslotID, scheduleID) {
      this.current.note = null
      for (var i in this.current.notes) {
        if (this.current.notes[i].timeslot === timeslotID) {
          this.current.note = this.current.notes[i]
          break
        }
      }
      this.$refs.appModalNotes.showModal(this.current.note, timeslotID, scheduleID)
    },
    getNoteByTimeslotID: function (timeslotID) {
      for (var i in this.current.notes) {
        if (this.current.notes[i].timeslot === timeslotID && this.current.notes[i].title !== undefined) {
          return this.current.notes[i]
        }
      }
      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.VUE_APP_API_STEERING + 'categories/' + this.shows[this.currentShow].category[i] + '/', {
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).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.VUE_APP_API_STEERING + 'hosts/' + this.shows[this.currentShow].hosts[i] + '/', {
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).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.languages = true
      } else {
        for (var i in this.shows[this.currentShow].language) {
          axios.get(process.env.VUE_APP_API_STEERING + 'languages/' + this.shows[this.currentShow].language[i] + '/', {
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).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.VUE_APP_API_STEERING + 'topics/' + this.shows[this.currentShow].topic[i] + '/', {
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).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.VUE_APP_API_STEERING + 'musicfocus/' + this.shows[this.currentShow].musicfocus[i] + '/', {
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).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
    },
    getFundingCategory: function () {
      this.current.fundingcategory = []
      var loadingError = false
      if (typeof this.shows[this.currentShow].fundingcategory !== 'number') {
        this.loaded.fundingcategory = true
      } else {
        axios.get(process.env.VUE_APP_API_STEERING + 'fundingcategories/' + this.shows[this.currentShow].fundingcategory + '/', {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
        }).then(response => {
          this.current.fundingcategory.push(response.data)
        }).catch(error => {
          loadingError = true
          alert('There was an error fetching funding category from the server: ' + error)
        })
      }
      if (!loadingError) this.loaded.fundingcategory = 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.VUE_APP_API_STEERING + 'types/' + this.shows[this.currentShow].type + '/', {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
        }).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 () {
    var uri = process.env.VUE_APP_API_STEERING_SHOWS
    if (!this.$parent.user.steeringUser.is_superuser) {
      uri += '?owner=' + this.$parent.user.steeringUser.id
    }
    axios.get(uri, {
      withCredentials: true,
      headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
    }).then(response => {
      if (response.data.length === 0) {
        alert('There are now shows associated with your account!')
        return
      }
      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>