ShowManagerModalPlaylist.vue

<template>
  <div>
    <b-modal
      ref="modalShowManagerPlaylist"
      title="Edit playlist for this timeslot"
      size="lg"
    >
      <p v-if="loaded.playlists">
        Currently chosen playlist ID:
        <span v-if="timeslotObject.playlist_id === null">
          <i><small>(none set)</small></i>
        </span>
        <span v-else>
          {{ timeslotObject.playlist_id }}
          <span v-if="currentPlaylistDescription">
            , Description: <b>{{ currentPlaylistDescription }}</b>
          </span>
        </span>
      </p>

      <p>Available playlists:</p>
      <div v-if="loaded.playlists">
        <b-table
          ref="playlistsTable"
          striped
          :fields="playlistsTableFields"
          :items="playlists"
        >
          <!-- Column: Entries
          This column displays the number of entries of the playlist.
          -->
          <template
            slot="entries"
            slot-scope="data"
          >
            {{ data.value.length }} items
            <b-button
              v-b-tooltip.html="playlistToolTip(data.value)"
              variant="outline-success"
              size="sm"
            >
              show entries
            </b-button>
          </template>

          <!-- Column: Actions
          This column displays the available buttons for actions the user can
          take on this playlist (e.g. editing and deleting).
          -->
          <template
            slot="actions"
            slot-scope="data"
          >
            <b-button-group size="sm">
              <b-button
                v-if="data.item.id !== timeslotObject.playlist_id"
                variant="info"
                @click="choose(data.item.id)"
              >
                Take it!
              </b-button>
            </b-button-group>
          </template>
        </b-table>
      </div>
      <div v-else>
        <img
          src="../assets/radio.gif"
          alt="loading playlists"
        >
      </div>
    </b-modal>
  </div>
</template>

<script>
import axios from 'axios'
import prettyDate from '../mixins/prettyDate'

export default {
  mixins: [ prettyDate ],

  data () {
    return {
      show: null,
      schedule: null,
      timeslot: null,
      timeslotObject: null,
      playlists: null,
      loaded: {
        playlists: false,
      },

      playlistsTableFields: [
        { key: 'id', label: 'Index' },
        { key: 'description', label: 'Description' },
        { key: 'entries', label: 'Entries' },
        { key: 'actions', label: 'Actions', class: 'text-right' },
      ],
    }
  },

  computed: {
    currentPlaylistDescription () {
      let description = false
      if (this.timeslotObject && this.timeslotObject.playlist_id !== null) {
        let choosenList = this.playlists.find(list => list.id === this.timeslotObject.playlist_id)
        if (choosenList && choosenList.description.length > 0) {
          description = choosenList.description
        }
      }
      return description
    }
  },

  methods: {
    open (show, schedule, timeslot) {
      this.show = show
      this.schedule = schedule
      this.timeslot = timeslot
      this.timeslotObject = this.getTimeslotObject(timeslot)
      this.loadPlaylists()
      this.$refs.modalShowManagerPlaylist.show()
    },

    getTimeslotObject (id) {
      let timeslot = this.$parent.current.timeslots.find(slot => slot.id === id)
      return timeslot
    },

    choose (id) {
      let timeslot = this.getTimeslotObject(this.timeslot)
      if (timeslot === null) {
        this.$log.error('choosen playlist id', id)
        this.$log.error('timeslot id', id)
        this.$log.error('ShowManager.current.timeslots', this.$parent.current.timeslots)
        alert('Error: could not find timeslot for chosen playlist. See console for details.')
      }
      timeslot.playlist_id = id
      let show = this.$parent.shows[this.$parent.currentShow].id
      let uri = process.env.VUE_APP_API_STEERING + 'shows/' + show + '/schedules/' + timeslot.schedule + '/timeslots/' + timeslot.id + '/'
      axios.put(uri, timeslot, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(() => {
        this.$refs.modalShowManagerPlaylist.hide()
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not update timeslot with chosen playlist. See console for details.')
      })
    },

    playlistToolTip (entries) {
      let text = '<div style="white-space: nowrap;" align="left">'
      for (let i in entries) {
        text += i + ': ' + entries[i].uri + '<br>'
      }
      text += '</div>'
      return text
    },

    loadPlaylists () {
      this.loaded.playlists = false
      let uri = process.env.VUE_APP_API_TANK + 'shows/' + this.show.slug + '/playlists'
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        // we don't have to check separately, if there are playlists, because tank
        // always provides an empty array if there are no playlists (or even if there is no corresponding show)
        this.playlists = response.data.results
        this.loaded.playlists = true
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not fetch playlists from tank. See console for details.')
      })
    },

    notYetImplemented: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
    },
  }
}
</script>

<style scoped>
</style>