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

files & playlists tables; refactoring

now displaying files and playlists in a b-table or asking to upload something

also refactored groups to shows, after tank refactoring happened
parent daa31daa
......@@ -39,7 +39,13 @@
</b-row>
</div>
<div v-else>
files
<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 variant="success" @click="notYetImplemented">Upload a file</b-button>
</div>
<div v-else>
<b-table striped :items="filesTable" />
</div>
</div>
</div>
......@@ -52,7 +58,13 @@
</b-row>
</div>
<div v-else>
playlists
<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>
......@@ -67,12 +79,11 @@ export default {
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
groups: [], // group array from the tank (needed until #2 is solved)
groupExists: false, // indicates if there is already a group in the tank for the current show
files: [],
playlists: [],
mode: 'files',
loaded: {
shows: false,
groups: false,
files: false,
playlists: false
},
......@@ -82,11 +93,45 @@ export default {
}
}
},
computed: {
filesTable: function (){
var arr = []
for (var i in this.files) {
arr.push({
id: this.files[i].id,
artist: this.files[i].metadata.artist,
album:this.files[i].metadata.album,
title: this.files[i].metadata.title,
duration: this.files[i].duration,
size: this.files[i].size,
updated: this.files[i].updated,
actions: '...'
})
}
return arr
},
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
}
},
methods: {
notYetImplemented: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
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.fetchShows(this.shows[this.currentShow].slug)
},
switchMode: function (mode) {
if (this.mode !== mode) {
......@@ -97,42 +142,38 @@ export default {
}
}
},
fetchGroup: function (slug) {
this.groupExists = false
for (var s in this.groups) {
if (this.groups[s].name === slug) {
this.groupExists = true
// the group for this show already exists, so lets fetch files and playlists
var uri = process.env.VUE_APP_API_TANK + 'groups/' + slug + '/files'
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
this.loaded.files = true
}).catch(error => {
alert('There was an error fetching files from tank: ' + error)
})
var uri = process.env.VUE_APP_API_TANK + 'groups/' + slug + '/playlists'
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
this.loaded.playlists = true
}).catch(error => {
alert('There was an error fetching playlists from tank: ' + error)
})
this.loaded.groups = true
return
}
}
// it is important to set this to true, so the interface knows the groups
// are already loaded but for the current show there is no group in the tank
this.loaded.groups = true
fetchShows: function (slug) {
this.loaded.files = false
this.loaded.playlists = 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)
})
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)
})
}
},
created () {
// when we enter this module, we want to load all shows of the current user
// before we search for corresponding groups in the tank
// 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
......@@ -153,24 +194,6 @@ export default {
this.currentShow = 0
this.loaded.shows = true
this.switchShow(this.currentShow)
//
// now that all the shows are laoded we can fetch the groups from tank
var uri = process.env.VUE_APP_API_TANK + 'groups'
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
if (response.data.length === 0) {
alert('There are no groups!')
return
}
// store the whole group array (until issue #2 is fixed)
// and then fetch group data for the current show
this.groups = response.data.results
this.fetchGroup(this.shows[this.currentShow].slug)
}).catch(error => {
alert('There was an error fetching groups from tank: ' + error)
})
}).catch(error => {
alert('There was an error fetching shows from steering: ' + error)
})
......
Supports Markdown
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