Commit f15829ae authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

add fetchImport and visualize progress

parent 0171a1b3
......@@ -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)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment