FileManager.vue

<template>
  <b-container>
    <!-- This first row is so far only used to provide a dropdown for
    choosing one of the loaded shows (which the user has access to) -->
    <b-row>
      <b-col>
        <h3>Dateien und Playlists</h3>
      </b-col>
      <b-col align="right">
        <b-dropdown
          id="ddshows"
          text="Sendereihe auswählen"
          variant="info"
        >
          <b-dropdown-item
            v-for="(show, index) in shows"
            :key="show.id"
            @click="switchShow(index)"
          >
            {{ show.name }}
          </b-dropdown-item>
        </b-dropdown>
      </b-col>
    </b-row>
    <hr>

    <!-- The jumbotron is used to display the name and short description of the
    currently selected show and let the user choose between editing files and
    playlists -->
    <b-jumbotron>
      <template slot="header">
        <span v-if="loaded.shows">
          {{ shows[currentShow].name }}
        </span>
        <span v-else>Shows are being loaded</span>
      </template>
      <template slot="lead">
        <span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
      </template>
      <hr>
      <div align="center">
        <b-button-group>
          <b-button
            size="lg"
            :variant="button.files"
            @click="switchMode('files')"
          >
            Files
          </b-button>
          <b-button
            size="lg"
            :variant="button.playlists"
            @click="switchMode('playlists')"
          >
            Playlists
          </b-button>
        </b-button-group>
      </div>
    </b-jumbotron>

    <!-- All the UI for uploading and editing files is only shown if the user
    choose to edit files in the jumbotron above -->
    <div v-if="mode === 'files'">
      <!-- Only display a spinner if the files are not loaded yet -->
      <div v-if="!loaded.files">
        <b-row>
          <b-col align="center">
            <img
              src="../assets/radio.gif"
              alt="loading data"
            >
          </b-col>
        </b-row>
      </div>

      <!-- If all file data is loaded we can present an upload button and
      a table of files (if there are already any or if there are any already
      being uploaded/imported )-->
      <div v-else>
        <!-- Modal: Add new file
        This is the modal that is used when the user clicks on the
        "Upload or add a file" button. When the user hits the OK button,
        the addFile method will be called. -->
        <b-modal
          id="modal-add-file"
          title="Add new file"
          @ok="addFile"
        >
          <!-- If the checkbox below is checked we only need a simple input
          for entering an URI, instead of a complete file upload dialogue -->
          <div v-if="addNewFileURI">
            <b-row>
              <b-col md="2">
                <b>Link:</b>
              </b-col>
              <b-col>
                <b-form-input
                  v-model="uploadSourceURI"
                  type="url"
                  placeholder="Insert a HTTP(S) link here"
                />
              </b-col>
            </b-row>
          </div>
          <!-- If the checkbox is not checked, we provide a file selection
          dialogue instead of a simple input for an URI -->
          <div v-else>
            <b-form-file
              v-model="uploadSourceFile"
              accept="audio/*"
              placeholder="Choose a file..."
              drop-placeholder="Drop file here..."
            />
          </div>

          <hr>

          <!-- This checkbox determines whether there is just a simple input
          or a file selection dialogue (see above) -->
          <div align="center">
            <b-form-checkbox
              v-model="addNewFileURI"
              value="true"
              unchecked_value="false"
            >
              Download from remote source instead of uploading a file
            </b-form-checkbox>
          </div>
        </b-modal>

        <!-- Modal: Edit meta information
        This modal lets the user change a file's meta information (artist,
        album, title). When the user hits OK, the saveFile method is called.
        -->
        <b-modal
          id="modal-edit-file"
          title="Edit meta information"
          size="lg"
          @ok="saveFile"
        >
          <!-- Input element: Artist -->
          <b-row>
            <b-col md="2">
              Artist:
            </b-col>
            <b-col>
              <b-form-input
                v-model="temp.artist"
                type="text"
              />
            </b-col>
          </b-row>

          <!-- Input element: Album -->
          <b-row>
            <b-col md="2">
              Album:
            </b-col>
            <b-col>
              <b-form-input
                v-model="temp.album"
                type="text"
              />
            </b-col>
          </b-row>

          <!-- Input element: Title -->
          <b-row>
            <b-col md="2">
              Title:
            </b-col>
            <b-col>
              <b-form-input
                v-model="temp.title"
                type="text"
              />
            </b-col>
          </b-row>

          <hr>

          <!-- As additional orientation we provide the source this file was
          uploaded/imported from. This might help the user to manage all files
          and set the meta information accordingly.
          -->
          <b-row>
            <b-col md="2">
              Sourced from:
            </b-col>
            <b-col>{{ temp.uri }}</b-col>
          </b-row>
        </b-modal>

        <!-- Now for the files. If there are none yet, just show an alert and
        a button for uploading/importing a new file -->
        <div
          v-if="files.length === 0"
          align="center"
        >
          <b-alert
            show
            variant="warning"
          >
            There are no files for this show yet.
          </b-alert>
          <b-button
            v-b-modal.modal-add-file
            variant="success"
          >
            Upload or add a file
          </b-button>
        </div>

        <!-- If there already are files for this show we'll show the button
        for uploading/importing a new file and then a table with all files -->
        <div v-else>
          <!-- This is the button -->
          <div
            align="center"
            style="padding-bottom: 1.5em;"
          >
            <b-button
              v-b-modal.modal-add-file
              variant="success"
            >
              Upload or add a file
            </b-button>
          </div>

          <!-- We also import the modal for showing file import logs here -->
          <app-modalFileManagerLog ref="appModalFileManagerLog" />

          <!-- And here comes the table -->
          <b-table
            ref="filesTable"
            striped
            :fields="filesTableFields"
            :items="files"
          >
            <!-- The first two columns in the table (Index & Artist) are filled
            in automatically, because we do not use these fields for displaying
            upload/import progress information.
            -->

            <!-- Column: Album
            This column displays either the album meta information or, in case
            the file is just being uploaded/imported, a spinner visualising an
            ongoing import.
            -->
            <template v-slot:cell(metadata.album)="data">
              <span v-if="data.item.source.import.state === 'aborted'"><b-badge variant="danger">Error:</b-badge></span>
              <span v-else-if="data.item.source.import.state !== 'done'"><img
                src="../assets/radio.gif"
                width="24"
                alt="loading data"
              ></span>
              <span v-else>{{ data.value }}</span>
            </template>

            <!-- Column: Title
            This column displays either the title meta information or, in case
            the file is just being uploaded/imported, the current phase
            of the ongoing import (fetching or normalizing).
            -->
            <template v-slot:cell(metadata.title)="data">
              <span v-if="data.item.source.import.state === 'done'">{{ data.value }}</span>
              <span v-else-if="data.item.source.import.state === 'aborted'">import was aborted</span>
              <span v-else-if="data.item.source.import.progress !== undefined">{{ data.item.source.import.progress.step }} :</span>
            </template>

            <!-- Column: Duration
            This column displays either the duration of the audio file, or, if
            the file is just being uploaded/imported, the current progress.
            -->
            <template v-slot:cell(duration)="data">
              <!-- In case the import is already done just print a pretty duration -->
              <div v-if="data.item.source.import.state === 'done'">
                {{ prettyNanoseconds(data.value) }}
              </div>
              <!-- If the import was aborted show some error info -->
              <div v-else-if="data.item.source.import.state === 'aborted'">
                {{ data.item.source.import.error }}
              </div>
              <!-- Or print the progress for ongoing imports. We use the variant
              prop of the b-progress to display the bar in different colours -
              either the info variant for the fetching phase or the success
              variant for the normalizing phase -->
              <div v-else-if="data.item.source.import.progress !== undefined">
                <b-progress
                  :value="data.item.source.import.progress.progress"
                  :max="1"
                  show-progress
                  :variant="data.item.source.import.progress.step === 'fetching' ? 'info' : 'success'"
                  animated
                />
              </div>
            </template>

            <!-- Column: Size
            This column displays the size of the audio file, if the file is
            already fully imported. Otherwise we'll just leave it empty.
            -->
            <template v-slot:cell(size)="data">
              <span v-if="data.item.source.import.state === 'done'">{{ prettyFileSize(data.value) }}</span>
            </template>

            <!-- Column: Actions
            This column displays the available button for actions  the user can
            take on this file (e.g. editing and deleting).
            -->
            <template v-slot:cell(actions)="data">
              <b-button-group size="sm">
                <b-button @click="editFile(data.item.id)">
                  Edit
                </b-button>
                <b-button
                  v-b-tooltip.hover
                  title="Show import log"
                  @click="$refs.appModalFileManagerLog.show(data.item.show, data.item.id)"
                >
                  &#128220;
                </b-button>
                <b-button
                  variant="danger"
                  @click="deleteFile(data.item.id)"
                >
                  Delete
                </b-button>
              </b-button-group>
            </template>
          </b-table>
        </div>
        <!-- End of files table -->
      </div>
    </div>

    <!-- All the UI for creating and editing playlists is only shown if the user
    choose to edit playlists in the jumbotron above -->
    <div v-if="mode === 'playlists'">
      <!-- Modal: Add new file
      This is the modal that is used when the user clicks on the
      "Upload or add a file" button. When the user hits the OK button,
      the addFile method will be called. -->
      <b-modal
        id="modal-edit-playlist"
        size="lg"
        :title="playlistEditor.mode === 'edit' ? 'Edit playlist' : 'Add new playlist'"
        @ok="storePlaylist"
      >
        <b-row
          v-if="playlistEditor.mode === 'edit'"
          style="padding-bottom: 1em;"
        >
          <b-col
            cols="3"
          >
            Playlist index:
          </b-col>
          <b-col>{{ playlistEditor.id }}</b-col>
        </b-row>

        <b-row>
          <b-col cols="3">
            Description:
          </b-col>
          <b-col>
            <b-form-input
              v-model="playlistEditor.description"
              type="text"
            />
          </b-col>
        </b-row>

        <hr>

        <p>Playlist entries:</p>

        <!-- If no entries are here (i.e. we add a new playlist), only show
        a hint that there's nothing here yet. -->
        <div
          v-if="playlistEditor.entries.length === 0"
          align="center"
        >
          No entries yet. Add some.
        </div>
        <!-- As soon as we have at least one entry in our temporary playlist
        we can display a table with all the info and action buttons -->
        <div v-else>
          <b-table
            ref="playlistEditTable"
            striped
            :items="playlistEditor.entries"
            :fields="playlistEditTableFields"
          >
            <!-- Column: Index
                 Here we just use the array index, because the playlist entries
                 are ordered as an array, without the need for an extra id field
            -->
            <template v-slot:cell(id)="data">
              {{ data.index + 1 }}.
            </template>

            <!-- Column: Type
                 Based on the entry content (either file or uri), we display
                 a small badge indicating which type of source this is
            -->
            <template v-slot:cell(type)="data">
              <b-badge
                v-if="data.item.file"
                variant="success"
              >
                File
              </b-badge>
              <b-badge
                v-else-if="data.item.uri.startsWith('line://')"
                variant="info"
              >
                Line-in
              </b-badge>
              <b-badge
                v-else-if="data.item.uri.startsWith('http://') || data.item.uri.startsWith('https://')"
                variant="light"
              >
                Stream
              </b-badge>
              <b-badge
                v-else
                variant="dark"
              >
                Other
              </b-badge>
            </template>

            <!-- Column: Source
                 Here we display where this playlist entry is coming from
            -->
            <template v-slot:cell(source)="data">
              <span v-if="data.item.file">
                {{ getFileTitleForPlaylist(data.item.file.show, data.item.file.id) }}
                <small><i>( file://{{ data.item.file.show }}/{{ data.item.file.id }} )</i></small>
              </span>
              <span v-else>
                {{ data.item.uri }}
              </span>
            </template>

            <!-- Column: Actions
                 Finally some buttons to reorder or delete playlist entries
            -->
            <template v-slot:cell(actions)="data">
              <b-button-group size="sm">
                <b-button
                  :disabled="data.index === 0"
                  @click="movePlaylistItemUp(data.index)"
                >
                  <b class="upDownArrows">&uarr;</b>
                </b-button>
                <b-button
                  :disabled="data.index === playlistEditor.entries.length - 1"
                  @click="movePlaylistItemDown(data.index)"
                >
                  <b class="upDownArrows">&darr;</b>
                </b-button>
                <b-button
                  variant="danger"
                  @click="deletePlaylistItem(data.index)"
                >
                  Delete
                </b-button>
              </b-button-group>
            </template>
          </b-table>
        </div>

        <hr>

        <!-- Below the table with the playlists entry we display buttons to
        add new entries to the table - these can either be files from our
        uploaded/imported files, or one of the preconfigured inputs, or a
        stream.
        TODO: should we disable choosing files that are still being imported?
        TODO: make the inputs configurable
        -->
        <div>
          <b-modal
            id="modal-edit-playlist-add-stream"
            title="Add stream to the playlist"
            @ok="addPlaylistItemStream('save')"
          >
            <b-input
              v-model="playlistEditor.newStreamURL"
              type="url"
            >
              ...
            </b-input>
          </b-modal>
          Add:
          <b-button-group>
            <b-dropdown text="File">
              <b-dropdown-item
                v-for="(file, index) in files"
                :key="index"
                @click="addPlaylistItemFile(file.show, file.id)"
              >
                {{ file.id }}: {{ file.metadata.title ? file.metadata.title : "" }} ({{ prettyNanoseconds(file.duration) }}, {{ prettyFileSize(file.size) }}, {{ file.source.uri }})
              </b-dropdown-item>
            </b-dropdown>
            <b-dropdown text="Line-in">
              <b-dropdown-item @click="addPlaylistItemLine('0')">
                Studio 1
              </b-dropdown-item>
              <b-dropdown-item @click="addPlaylistItemLine('1')">
                Preprod
              </b-dropdown-item>
              <b-dropdown-item @click="addPlaylistItemLine('2')">
                Line 2
              </b-dropdown-item>
            </b-dropdown>
            <b-button
              @click="addPlaylistItemStream('openModal')"
            >
              Stream
            </b-button>
          </b-button-group>
        </div>
      </b-modal>

      <!-- Only display a spinner if the playlists are not loaded yet -->
      <div v-if="!loaded.playlists">
        <b-row>
          <b-col align="center">
            <img
              src="../assets/radio.gif"
              alt="loading data"
            >
          </b-col>
        </b-row>
      </div>

      <!-- If all playlist data is loaded we can present a create button and
      a table of playlists (if there are already any)-->
      <div v-else>
        <!-- If no playlists are available, only show an alert and a create button -->
        <div
          v-if="playlists.length === 0"
          align="center"
        >
          <b-alert
            show
            variant="warning"
          >
            There are no playlists for this show yet.
          </b-alert>
          <b-button
            variant="success"
            @click="addPlaylist"
          >
            Create a playlist
          </b-button>
        </div>
        <!-- In case there are playlists, show the button and then the table -->
        <div v-else>
          <div
            align="center"
            style="padding-bottom: 1.5em;"
          >
            <b-button
              variant="success"
              @click="addPlaylist"
            >
              Create a playlist
            </b-button>
          </div>
          <b-table
            ref="playlistsTable"
            striped
            :fields="playlistsTableFields"
            :items="playlists"
          >
            <!-- Column: Entries
            This column displays the number of entries of the playlist.
            -->
            <template v-slot:cell(entries)="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: Last edit
            This column lists the last date this playlist was changed.
            -->
            <template v-slot:cell(updated)="data">
              {{ prettyDateTime(data.value) }}
            </template>

            <!-- Column: Actions
            This column displays the available buttons for actions the user can
            take on this playlist (e.g. editing and deleting).
            -->
            <template v-slot:cell(actions)="data">
              <b-button-group size="sm">
                <b-button @click="editPlaylist(data.item.id)">
                  Edit
                </b-button>
                <b-button
                  variant="danger"
                  @click="deletePlaylist(data.item.id)"
                >
                  Delete
                </b-button>
              </b-button-group>
            </template>
          </b-table>
        </div>
        <!-- End of playlists table -->
      </div>
    </div>
  </b-container>
</template>

<script>
import axios from 'axios'
import filesize from 'filesize'
import prettyDate from '../mixins/prettyDate'
import modalFileManagerLog from './FileManagerModalLog.vue'

export default {
  // include the modal for displaying file import logs
  components: {
    'app-modalFileManagerLog': modalFileManagerLog
  },

  // generic functions that we want to use from our mixins folder
  mixins: [ prettyDate ],

  // the data this component will be handling: mostly flags and local versions
  // of the data fetched from the AuRa tank API
  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
      files: [],
      playlists: [],
      mode: 'files',
      uploadInterval: null,

      // some flags to signal if API data is already fully loaded
      loaded: {
        shows: false,
        files: false,
        playlists: false
      },

      // variables used by file upload/import modal
      addNewFileURI: false,
      uploadSourceURI: '',
      uploadSourceFile: null,

      // and for adding and editing the playlists we need some temporary stuff
      playlistEditor: {
        id: null,
        mode: 'add',  // should be either 'add' or 'edit'
        description: '',
        entries: [],
        newStreamURL: null
      },

      // we need this for the modal to edit a file's meta information
      temp: {
        id: null,
        artist: '',
        album: '',
        title: ''
      },

      // for formatting the buttons - this way we could customize it later
      button: {
        files: 'info',
        playlists: 'outline-info'
      },

      // configuration of the files table, which will use the files array as data
      filesTableFields: [
        { key: 'id', label: 'Index' },
        { key: 'metadata.artist', label: 'Artist' },
        { key: 'metadata.album', label: 'Album' },
        { key: 'metadata.title', label: 'Title' },
        { key: 'duration', label: 'Duration' },
        { key: 'size', label: 'Size' },
        { key: 'actions', label: 'Actions', class: 'text-right' },
      ],

      // configuration of the playlists table, which will use the playlists array as data
      playlistsTableFields: [
        { key: 'id', label: 'Index' },
        { key: 'description', label: 'Description' },
        { key: 'entries', label: 'Entries' },
        { key: 'updated', label: 'Last edit' },
        { key: 'actions', label: 'Actions', class: 'text-right' },
      ],

      playlistEditTableFields: [
        { key: 'id', label: 'Index' },
        { key: 'type', label: 'Type' },
        { key: 'source', label: 'Source' },
        { key: 'actions', label: 'Actions', class: 'text-right' },
      ]
    }
  },

  // Right after this component is set up, we want to fetch all available shows
  // from the AuRa tank module. This works quite similar to the ShowManager.
  // We also want to load the files and playlists as soon as the shows are
  // loaded.
  created () {
    // when we enter this module, we want to load all shows of the current user
    // before we search for corresponding shows in the tank
    var uri = process.env.VUE_APP_API_STEERING_SHOWS
    // only the superuser should see all shows and therefore files and playlists
    // normal users should only see their own shows
    if (!this.$parent.user.steeringUser.is_superuser) {
      uri += '?owner=' + this.$parent.user.steeringUser.id
    }
    // now make the API call to fetch the shows
    axios.get(uri, {
      withCredentials: true,
      headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
    }).then(response => {
      if (response.data.length === 0) {
        alert('There are no 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 => {
      this.$log.error(error.response.status + ' ' + error.response.statusText)
      this.$log.error(error.response)
      alert('Error: could not fetch shows from steering. See console for details.')
    })
  },

  // Now for our hotchpotch of methods, mostly for fetching data from and
  // posting/updating data to the AuRa tank API
  methods: {

    // Just a placeholder function we can use in the UI, to signal if something
    // is not yet implemented
    notYetImplemented: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
    },

    // We want to have a nice format for the file size, given a size in Bytes.
    // For that we're useing the filesize npm module.
    prettyFileSize: function (s) {
      return filesize(s)
    },

    // Returns a file object from the files array, given a file ID
    getFileById: function (id) {
      for (var i in this.files) {
        if (this.files[i].id === id) {
          return this.files[i]
        }
      }
      return null
    },

    // Returns a playlist object from the playlists array, given a playlist ID.
    // If the mode parameter is used and set to 'index', then the playlists
    // index in the playlist array is returned instead of the object
    getPlaylistById: function (id, mode) {
      for (var i in this.playlists) {
        if (this.playlists[i].id === id) {
          if (mode === 'index') { return i }
          else { return this.playlists[i] }
        }
      }
      return null
    },

    // return a string representing a file entry for the playlist editor
    getFileTitleForPlaylist: function (show, id) {
      // TODO: change structure of files array, so we can access all shows
      // the user has access to.
      var file = this.getFileById(id)
      if (file && file.metadata.title) {
        return show + ": " + file.metadata.title
      } else {
        return ""
      }
    },

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

    movePlaylistItemUp: function (index) {
      if (index > 0 && index < this.playlistEditor.entries.length) {
        var temp = this.playlistEditor.entries[index - 1]
        this.playlistEditor.entries[index - 1] = this.playlistEditor.entries[index]
        this.playlistEditor.entries[index] = temp
        this.$refs.playlistEditTable.refresh()
      }
    },

    movePlaylistItemDown: function (index) {
      if (index < this.playlistEditor.entries.length - 1 && index >= 0) {
        var temp = this.playlistEditor.entries[index + 1]
        this.playlistEditor.entries[index + 1] = this.playlistEditor.entries[index]
        this.playlistEditor.entries[index] = temp
        this.$refs.playlistEditTable.refresh()
      }
    },

    deletePlaylistItem: function (index) {
      if (index >= 0 && index < this.playlistEditor.entries.length) {
        this.playlistEditor.entries.splice(index, 1)
        this.$refs.playlistEditTable.refresh()
      }
    },

    // add a file from the file manager to the playlist that is being edited
    addPlaylistItemFile: function (show, id) {
      var item = {}
      item.file = {show: show, id: id}
      this.playlistEditor.entries.push(item)
    },

    // add a line input to the playlist that is being edited
    addPlaylistItemLine: function (line) {
      this.playlistEditor.entries.push({uri: 'line://' + line})
    },

    // controls sub-modal to add a new URI to the playlist editor
    addPlaylistItemStream: function (action) {
      if (action === 'openModal') {
        // the function gets called with the action 'openModal' when the users
        // clicks on the add new stream button. then we clear all temp data and
        // open the modal
        this.playlistEditor.newStreamURL = ''
        this.$bvModal.show('modal-edit-playlist-add-stream')
      } else {
        // when the user hits ok to add the new uri, this function gets called
        // with the action 'save' and the modal closes automagically. so we
        // just have to push a new entry to the playlist in the editor
        if (this.playlistEditor.newStreamURL.trim().length > 0) {
          this.playlistEditor.entries.push({uri: this.playlistEditor.newStreamURL})
        }
        // if an empty string was provided, we just do nothing
      }
    },

    deletePlaylist: function (id) {
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/playlists/' + id
      // TODO: add mechanism to indicate the running delete request in the files table
      axios.delete(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token },
      }).then(
        this.fetchPlaylists(this.shows[this.currentShow].slug)
      ).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not delete playlist. See console for details.')
      })
    },

    addPlaylist: function () {
      this.playlistEditor.mode = 'add'
      this.playlistEditor.id = null
      this.playlistEditor.description = ''
      this.playlistEditor.entries = []
      this.$bvModal.show('modal-edit-playlist')
    },

    editPlaylist: function (id) {
      this.playlistEditor.mode = 'edit'
      this.playlistEditor.entries = []
      this.playlistEditor.id = id
      var playlist = this.getPlaylistById(id)
      this.playlistEditor.description = playlist.description
      for (var i in playlist.entries) {
        var entry = {}
        if (playlist.entries[i].file) {
          entry.file = {}
          entry.file.show = playlist.entries[i].file.show
          entry.file.id = playlist.entries[i].file.id
        } else {
          entry.uri = playlist.entries[i].uri
        }
        this.playlistEditor.entries.push(entry)
      }
      this.$bvModal.show('modal-edit-playlist')
    },

    // Adds a new or updates an existing playlist by sending a POST/PUT
    // request to the AURA tank API
    storePlaylist: function () {
      var data = {
        description: this.playlistEditor.description,
        entries: this.playlistEditor.entries
      }
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/playlists'

      // TODO: add some spinner or other visualisation while the playlist is added/updated

      if (this.playlistEditor.mode === 'add') {
        axios.post(uri, data, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
        }).then(response => {
          this.playlists.push(response.data)
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not add new playlist. See console for details.')
        })

      // when updating an existing playlist we use a PUT request and add the id
      // of the playlist to the uri
      } else if (this.playlistEditor.mode === 'edit') {
        var id = this.playlistEditor.id
        uri += '/' + id
        axios.put(uri, data, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
        }).then(response => {
          this.playlists[this.getPlaylistById(id, 'index')] = response.data
          this.$refs.playlistsTable.refresh()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not update playlist. See console for details.')
        })
      }
    },

    // To start modifying the meta information for a file we have to set our
    // temporary data (which will be used to check if anything changed) and
    // then open the editing modal
    editFile: function (id) {
      var file = this.getFileById(id)
      this.temp.id = file.id
      this.temp.artist = file.metadata.artist
      this.temp.album = file.metadata.album
      this.temp.title = file.metadata.title
      this.temp.uri = file.source.uri
      this.$bvModal.show('modal-edit-file')
    },

    // Once the OK button is hit in the file editing modal, we have to check
    // if anything changed and then send an appropriate metadata obecjt to
    // the AuRa tank API to update it
    saveFile: function (){
      var file = this.getFileById(this.temp.id)
      // we only want to send a PATCH request if some metadata actually changed
      if (this.temp.artist !== file.metadata.artist || this.temp.album !== file.metadata.album || this.temp.title !== file.metadata.title ) {
        // if a metadata property was in use before and now shall be emptied
        // we cannot just omit the property, but have to explicitly send null
        var metadata = {
          artist: this.temp.artist ? this.temp.artist : null,
          album: this.temp.album ? this.temp.album : null,
          title: this.temp.title ? this.temp.title : null
        }
        var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + file.id
        // TODO: add mechanism to indicate the running patch request in the files table
        axios.patch(uri, metadata, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
        }).then(response => {
          this.getFileById(this.temp.id).metadata = response.data.metadata
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save metadata info to file. See console for details.')
        })
      }
    },

    // Deletes a file with a specific ID calling the AuRa tank API and afterwards
    // fetching a fresh list of files from it.
    deleteFile: function (id) {
      let uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + id
      // TODO: add mechanism to indicate the running delete request in the files table
      axios.delete(uri, {
        withCredentials: true,