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>

          <!-- 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
              slot="metadata.album"
              slot-scope="data"
            >
              <span v-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
              slot="metadata.title"
              slot-scope="data"
            >
              <span v-if="data.item.source.import.state === 'done'">{{ data.value }}</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
              slot="duration"
              slot-scope="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>
              <!-- 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
              slot="size"
              slot-scope="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
              slot="actions"
              slot-scope="data"
            >
              <b-button-group size="sm">
                <b-button @click="editFile(data.item.id)">
                  Edit
                </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'">
      <!-- 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 an create button and
      a table of playlists (if there are already any)-->
      <div v-else>
        <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="notYetImplemented"
          >
            Create a playlist
          </b-button>
        </div>
        <div v-else>
          <b-table
            striped
            :items="playlistsTable"
          />
        </div>
      </div>
    </div>
  </b-container>
</template>

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

export default {
  // 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,

      // 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' },
      ]
    }
  },

  // TODO: if we can use the playlists object itself (similar to the files in
  // in the files table, we can get rid of the computed properties)
  computed: {
    playlistsTable: function (){
      var arr = []
      for (var i in this.files) {
        arr.push({
          id: this.files[i].id,
          other_fields: 'not yet implemented',
          updated: this.files[i].updated,
          actions: '...'
        })
      }
      return arr
    }
  },

  // 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 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 steering: ' + error)
    })
  },

  // 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
    },

    // 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 => {
          console.log('Error:')
          console.log(error)
          alert('Error: could not save metadata info to file. See console log for details.')
        })
      }
    },

    // Deletes a file with a specific, calling the AuRa tank API and afterwards
    // fetching a fresh list of files from it.
    deleteFile: function (id) {
      var 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,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token },
      }).then(
        this.fetchFiles(this.shows[this.currentShow].slug)
      ).catch(error => {
        console.log('Error:')
        console.log(error)
        alert('Error: could not delete file. See console log for details.')
      })
    },

    // With this function we add a new file in the AuRa tank by calling its API.
    // Depending on wheter we add a remote file which tank then imports by itself,
    // or if we want to upload a local file, we source-uri has to look different.
    // And for uploading a local file this is just the first step. Afterwards the
    // actual upload has to be started with the startUpload function.
    addFile: function () {
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files'
      if (this.addNewFileURI) {
        // TODO: add mechanism to indicate the running post request in the files table
        axios.post(uri, { 'source-uri': this.uploadSourceURI }, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
        }).then(() => {
          this.fetchFiles(this.shows[this.currentShow].slug)
          if (this.uploadInterval === null) {
            this.uploadInterval = setInterval(() => { this.fetchImports(this.shows[this.currentShow].slug) }, 250)
          }
        }).catch(error => {
          console.log('Error:')
          console.log(error)
          alert('Error: could not add the new remote import. See console log for details.')
        })
      } else if (this.uploadSourceFile) {
        // TODO: add mechanism to indicate the running post request in the files table
        axios.post(uri, { 'source-uri': encodeURI('upload://' + this.uploadSourceFile.name) }, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
        }).then(response => {
          this.startUpload(response.data.id)
          this.fetchFiles(this.shows[this.currentShow].slug)
          if (this.uploadInterval === null) {
            this.uploadInterval = setInterval(() => { this.fetchImports(this.shows[this.currentShow].slug) }, 250)
          }
        }).catch(error => {
          console.log('Error:')
          console.log(error)
          alert('Error: could not add the new file upload. See console log for details.')
        })
      } else {
        alert('Something is wrong. You have choosen to upload a file, but the corresponding file object does not exist.')
      }
    },

    // When a new file was added with the addFile function we can start an upload
    // fetching the import endpoint of this file and then call the upload
    // function, which atually puts the file onto the server.
    startUpload: function (id) {
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + id + '/import'
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token },
        params: {'wait-for': 'running'}
      }).then(
        this.upload(id)
      ).catch(error => {
        console.log('Error:')
        console.log(error)
        alert('Error: could not start the file upload. See console log for details.')
      })
    },

    // Upload a file to the AuRa tank API - given it was created with the addFile
    // and started with the startUpload methods.
    upload: function (id) {
      /*
       * NOTE: there is no npm package for flow.js and importing it manually did not
       *       work so far. therefore this is commented out and we are using the simple
       *       upload method, until there is a nice npm package for flow.js or somone
       *       resolves this issue otherwise
      var flow = new Flow({
        target: process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + id + '/upload',
        chunkSize: 100 * 1024,
        prioritizeFirstAndLastChunk: true
      })
      flow.on('fileSuccess', function(file, message) {
        console.log(file, message)
      })
      flow.on('fileError', function(file, message) {
        console.log(file, message)
        alert('Error: could not upload your file. See console log for details.')
      })
      flow.addFile(this.uploadSourceFile)
      flow.upload()
      */
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + id + '/upload'
      axios.put(uri, this.uploadSourceFile, {
        withCredentials: true,
        headers: {
          'Authorization': 'Bearer ' + this.$parent.user.access_token,
          'Content-Type': 'application/octet-stream'
        }
      }).then(() => {
        console.log('Sucessfully uploaded file.')
        // now we start polling for the import progress
        // the fetchImports function has to make sure to deactivate the interval
        // again, when all running imports are done (in this first raw version;
        // ideally we should refine this so that every single file gets updated independently)
        //this.uploadInterval = setInterval(() => { this.fetchImports(this.shows[this.currentShow].slug) }, 100)
      }).catch(error => {
        console.log('Error:')
        console.log(error)
        alert('Error: could not start the file upload. See console log for details.')
      })
    },

    // This switches the UI elements to reflect another show and fetches all
    // relevent data from the tank API.
    switchShow: function (index) {
      // 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
      this.fetchShow(this.shows[this.currentShow].slug)
    },

    // This function is used to visually switch between the files and playlists
    // editing mode.
    switchMode: function (mode) {
      if (this.mode !== mode) {
        this.mode = mode
        for (var b in this.button) {
          if (b === mode) { this.button[b] = 'info' }
          else { this.button[b] = 'outline-info' }
        }
      }
    },

    // This function fetches all running imports for a given show. It should
    // be called periodically to reflect the upload/import progress. When no
    // more active imports are available the corresponding updateInterval
    // should be cleared again.
    fetchImports: function (slug){
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + slug + '/imports'
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
      }).then(response => {
        // if all imports are done, we will receive an empty result set and stop
        // polling the server again. now we can also refetch all file statuses.
        if (response.data.results === null) {
          clearInterval(this.uploadInterval)
          this.uploadInterval = null
          this.fetchShow(slug)
        } else {
          for (var i in response.data.results) {
            var f = this.getFileById(response.data.results[i].id)
            if (f) {
              f.source.import.progress = {
                progress: response.data.results[i].progress.progress,
                step: response.data.results[i].progress.step
              }
            }
            var p = '[import]'
            p += ' id: ' + response.data.results[i].id
            p += ', progress: ' + response.data.results[i].progress.progress
            p += ', step: ' + response.data.results[i].progress.step
            console.log(p)
            this.$refs.filesTable.refresh()
          }
        }
      }).catch(error => {
        console.log(error)
        alert('There was an error fetching current imports. See console for details.')
      })
    },

    // Just a wrapper to fetch both, files and playlists information.
    fetchShow: function (slug) {
      this.fetchFiles(slug)
      this.fetchPlaylists(slug)
    },

    // Fetch all files for a given show from the AuRa tank API
    fetchFiles: function (slug) {
      this.loaded.files = false
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + slug + '/files'
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
      }).then(response => {
        // we don't have to check separately, if there are files, because tank
        // always provides an empty array if there are no files (or even if there is no corresponding show)
        this.files = response.data.results
        this.loaded.files = true
      }).catch(error => {
        alert('There was an error fetching files from tank: ' + error)
      })
    },

    // Fetch all playlists for a given show from the AuRa tank API
    fetchPlaylists: function (slug) {
      this.loaded.playlists = false
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + slug + '/playlists'
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$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 => {
        alert('There was an error fetching playlists from tank: ' + error)
      })
    }
  }
}
</script>

<style>
div.filelistbox {
  border: 1px solid #e9ecef;
  border-radius: 0.3rem;
  padding: 1rem 2rem;
}
.stateNew {
  color: red;
  font-weight: bold;
}
.stateRunning {
  color: darkgreen;
}
.stateUndefined {
  color: orange;
  font-weight: bold;
}
</style>