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 -->
      <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>

      <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_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="$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="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())
      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,
        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
        },
        note: {},
        notes: []
      }
    }
  },
  mixins: [ timeslotSort, prettyDate ],
  computed: {
    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) + '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.current.timeslots[i].id) + '" />'
          options: '<span class="timeslotEditLink" onclick="' +
            'document.getElementById(\'app\').children[1].__vue__.' +
            'editTimeslotNote(' + this.current.timeslots[i].id + ', ' + this.current.timeslots[i].schedule + ')">edit</span> ' +
            '<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">upload</span>' +
            '<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">...</span>'
        })
      }
      return arr
    }
  },
  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.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
      // 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.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,
        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 (typeof limit === 'number') {
          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
        } else {
          this.current.timeslots = response.data
          this.current.timeslotmeta.count = response.data.length
          this.current.timeslotmeta.next = null
          this.current.timeslotmeta.previous = null
        }
        this.loaded.timeslots = true
        // now that we have the timeslots we can fetch notes for all those timeslots
        uri = process.env.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 => {
        alert('There was an error fetching timeslots from the server' + 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.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.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.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.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.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.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.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.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>