add fetchImport and visualize progress

src/components/FileManager.vue

@@ -87,20 +87,18 @@
           <div align="center" style="padding-bottom: 1.5em;">
             <b-button variant="success" v-b-modal.modal-add-file>Upload or add a file</b-button>
           </div>
-          <b-table striped :fields="filesTableFields" :items="files">
+          <b-table ref="filesTable" striped :fields="filesTableFields" :items="files">
             <template slot="metadata.artist" 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>
             <template slot="metadata.album" slot-scope="data">
-              <span v-if="data.item.source.import.state === 'new'" class="stateNew">upload not started</span>
-              <span v-else-if="data.item.source.import.state === 'running'" class="stateRunning">importing</span>
-              <span v-else-if="data.item.source.import.state === 'done'">{{ data.value }}</span>
-              <span v-else class="stateUndefined">undefined import state</span>
+              <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>
             <template slot="duration" 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>{{ prettyNanoseconds(data.value) }}</span>
+              <div v-if="data.item.source.import.state === 'done'">{{ prettyNanoseconds(data.value) }}</div>
+              <div v-else-if="data.item.source.import.progress !== undefined"><b-progress :value="data.item.source.import.progress.progress" :max="1" show-progress animated></b-progress></div>
             </template>
             <template slot="size" slot-scope="data">
               <span v-if="data.item.source.import.state === 'done'">{{ prettyFileSize(data.value) }}</span>
@@ -154,6 +152,7 @@ export default {
       addNewFileURI: false,
       uploadSourceURI: '',
       uploadSourceFile: null,
+      uploadInterval: null,
       loaded: {
         shows: false,
         files: false,
@@ -265,9 +264,12 @@ export default {
         axios.post(uri, { 'source-uri': this.uploadSourceURI }, {
           withCredentials: true,
           headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
-        }).then(
+        }).then(() => {
           this.fetchFiles(this.shows[this.currentShow].slug)
-        ).catch(error => {
+          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.')
@@ -280,6 +282,9 @@ export default {
         }).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)
@@ -331,9 +336,13 @@ export default {
           'Authorization': 'Bearer ' + this.$parent.user.access_token,
           'Content-Type': 'application/octet-stream'
         }
-      }).then(response => {
-        console.log('Sucessfully uploaded file. Response data:')
-        console.log(response.data)
+      }).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)
@@ -355,6 +364,40 @@ export default {
         }
       }
     },
+    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.')
+      })
+    },
     fetchShow: function (slug) {
       this.fetchFiles(slug)
       this.fetchPlaylists(slug)