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

FEAT: modal for choosing a playlist for timeslots

parent 0e4d90bb
......@@ -115,6 +115,9 @@
<app-modalSuperuser
ref="appModalSuperuser"
/>
<app-modalPlaylist
ref="appModalPlaylist"
/>
<!-- here are the filter settings for our timeslots table -->
<b-card>
......@@ -248,11 +251,11 @@
></span>
<span
class="timeslotEditLink"
@click="notYetImplemented()"
@click="editTimeslotPlaylist(shows[currentShow], data.item.options.schedule, data.item.options.id)"
><img
src="../assets/16x16/media-eject.png"
alt="Upload audio file / Create playlist"
title="Upload audio file / Create playlist"
alt="Edit playlist"
title="Edit playlist"
></span>
<span
class="timeslotEditLink"
......@@ -698,6 +701,7 @@
import modalNotes from './ShowManagerModalNotes.vue'
import modalShow from './ShowManagerModalShow.vue'
import modalSuperuser from './ShowManagerModalSuperuser.vue'
import modalPlaylist from './ShowManagerModalPlaylist.vue'
import timeslotSort from '../mixins/timeslotSort'
import prettyDate from '../mixins/prettyDate'
import axios from 'axios'
......@@ -710,6 +714,7 @@ export default {
'app-modalNotes': modalNotes,
'app-modalShow': modalShow,
'app-modalSuperuser': modalSuperuser,
'app-modalPlaylist': modalPlaylist,
},
// generic functions that we want to use from our mixins folder
......@@ -1024,6 +1029,10 @@ export default {
this.$refs.appModalNotes.showModal(this.current.note, timeslotID, scheduleID)
},
editTimeslotPlaylist: function (show, schedule, timeslot) {
this.$refs.appModalPlaylist.open(show, schedule, timeslot)
},
// For a given timeslot ID return the corresponding note, if there is one
getNoteByTimeslotID: function (timeslotID) {
for (var i in this.current.notes) {
......
<template>
<div>
<b-modal
ref="modalShowManagerPlaylist"
title="Edit playlist for this timeslot"
size="lg"
>
<p v-if="loaded.playlists">
Currently chosen playlist ID:
<span v-if="timeslotObject.playlist_id === null">
<i><small>(none set)</small></i>
</span>
<span v-else>
{{ timeslotObject.playlist_id }}
<span v-if="currentPlaylistDescription">
, Description: <b>{{ currentPlaylistDescription }}</b>
</span>
</span>
</p>
<p>Available playlists:</p>
<div v-if="loaded.playlists">
<b-table
ref="playlistsTable"
striped
:fields="playlistsTableFields"
:items="playlists"
>
<!-- Column: Entries
This column displays the number of entries of the playlist.
-->
<template
slot="entries"
slot-scope="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: Actions
This column displays the available buttons for actions the user can
take on this playlist (e.g. editing and deleting).
-->
<template
slot="actions"
slot-scope="data"
>
<b-button-group size="sm">
<b-button
v-if="data.item.id !== timeslotObject.playlist_id"
variant="info"
@click="choose(data.item.id)"
>
Take it!
</b-button>
</b-button-group>
</template>
</b-table>
</div>
<div v-else>
<img
src="../assets/radio.gif"
alt="loading playlists"
>
</div>
</b-modal>
</div>
</template>
<script>
import axios from 'axios'
import prettyDate from '../mixins/prettyDate'
export default {
mixins: [ prettyDate ],
data () {
return {
show: null,
schedule: null,
timeslot: null,
timeslotObject: null,
playlists: null,
loaded: {
playlists: false,
},
playlistsTableFields: [
{ key: 'id', label: 'Index' },
{ key: 'description', label: 'Description' },
{ key: 'entries', label: 'Entries' },
{ key: 'actions', label: 'Actions', class: 'text-right' },
],
}
},
computed: {
currentPlaylistDescription () {
let description = false
if (this.timeslotObject && this.timeslotObject.playlist_id !== null) {
let choosenList = this.playlists.find(list => list.id === this.timeslotObject.playlist_id)
if (choosenList && choosenList.description.length > 0) {
description = choosenList.description
}
}
return description
}
},
methods: {
open (show, schedule, timeslot) {
this.show = show
this.schedule = schedule
this.timeslot = timeslot
this.timeslotObject = this.getTimeslotObject(timeslot)
this.loadPlaylists()
this.$refs.modalShowManagerPlaylist.show()
},
getTimeslotObject (id) {
let timeslot = this.$parent.current.timeslots.find(slot => slot.id === id)
return timeslot
},
choose (id) {
let timeslot = this.getTimeslotObject(this.timeslot)
if (timeslot === null) {
this.$log.error('choosen playlist id', id)
this.$log.error('timeslot id', id)
this.$log.error('ShowManager.current.timeslots', this.$parent.current.timeslots)
alert('Error: could not find timeslot for chosen playlist. See console for details.')
}
timeslot.playlist_id = id
let show = this.$parent.shows[this.$parent.currentShow].id
let uri = process.env.VUE_APP_API_STEERING + 'shows/' + show + '/schedules/' + timeslot.schedule + '/timeslots/' + timeslot.id + '/'
axios.put(uri, timeslot, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.$refs.modalShowManagerPlaylist.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not update timeslot with chosen playlist. See console for details.')
})
},
playlistToolTip (entries) {
let text = '<div style="white-space: nowrap;" align="left">'
for (let i in entries) {
text += i + ': ' + entries[i].uri + '<br>'
}
text += '</div>'
return text
},
loadPlaylists () {
this.loaded.playlists = false
let uri = process.env.VUE_APP_API_TANK + 'shows/' + this.show.slug + '/playlists'
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$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 => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not fetch playlists from tank. See console for details.')
})
},
notYetImplemented: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
}
}
</script>
<style scoped>
</style>
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