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

FEAT: add modal for playlist editing

parent da9145a9
...@@ -336,6 +336,104 @@ ...@@ -336,6 +336,104 @@
<!-- All the UI for creating and editing playlists is only shown if the user <!-- All the UI for creating and editing playlists is only shown if the user
choose to edit playlists in the jumbotron above --> choose to edit playlists in the jumbotron above -->
<div v-if="mode === 'playlists'"> <div v-if="mode === 'playlists'">
<!-- 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-edit-playlist"
size="lg"
:title="playlistEditor.mode === 'edit' ? 'Edit playlist' : 'Add new playlist'"
@ok="storePlaylist"
>
<div v-if="playlistEditor.mode === 'edit'">
Editing playlist with index: {{ playlistEditor.id }}
</div>
<p>Playlist entries:</p>
<hr>
<div
v-if="playlistEditor.entries.length === 0"
align="center"
>
No entries yet. Add some.
</div>
<div v-else>
<b-row
v-for="(entry, index) in playlistEditor.entries"
:key="index"
>
<b-col cols="1" align="right">
{{ index + 1 }}.
</b-col>
<b-col cols="1">
<b-badge
v-if="entry.file"
variant="success"
>
File
</b-badge>
<b-badge
v-else-if="entry.uri.startsWith('line://')"
variant="info"
>
Line-in
</b-badge>
<b-badge
v-else-if="entry.uri.startsWith('http://') || entry.uri.startsWith('https://')"
variant="light"
>
Stream
</b-badge>
<b-badge
v-else
variant="dark"
>
Other
</b-badge>
</b-col>
<b-col>
uri: {{ entry.uri }}
</b-col>
<b-col cols="3">
<b-button-group size="sm">
<b-button
:disabled="index === 0"
@click="movePlaylistItemUp(index)"
>
Up
</b-button>
<b-button
:disabled="index === playlistEditor.entries.length - 1"
@click="movePlaylistItemDown(index)"
>
Down
</b-button>
<b-button
variant="danger"
@click="deletePlaylistItem(index)"
>
Delete
</b-button>
</b-button-group>
</b-col>
</b-row>
</div>
<hr>
Add:
<b-button-group>
<b-dropdown text="File">
<b-dropdown-item>File A</b-dropdown-item>
<b-dropdown-item>File B</b-dropdown-item>
</b-dropdown>
<b-dropdown text="Line-in">
<b-dropdown-item>Studio 1</b-dropdown-item>
<b-dropdown-item>Preprod</b-dropdown-item>
<b-dropdown-item>Line 3</b-dropdown-item>
</b-dropdown>
<b-button>Stream</b-button>
</b-button-group>
</b-modal>
<!-- Only display a spinner if the playlists are not loaded yet --> <!-- Only display a spinner if the playlists are not loaded yet -->
<div v-if="!loaded.playlists"> <div v-if="!loaded.playlists">
<b-row> <b-row>
...@@ -364,7 +462,7 @@ ...@@ -364,7 +462,7 @@
</b-alert> </b-alert>
<b-button <b-button
variant="success" variant="success"
@click="notYetImplemented" @click="addPlaylist"
> >
Create a playlist Create a playlist
</b-button> </b-button>
...@@ -377,7 +475,7 @@ ...@@ -377,7 +475,7 @@
> >
<b-button <b-button
variant="success" variant="success"
@click="notYetImplemented" @click="addPlaylist"
> >
Create a playlist Create a playlist
</b-button> </b-button>
...@@ -476,6 +574,13 @@ export default { ...@@ -476,6 +574,13 @@ export default {
uploadSourceURI: '', uploadSourceURI: '',
uploadSourceFile: null, uploadSourceFile: null,
// and for adding and editing the playlists we need some temporary stuff
playlistEditor: {
id: null,
mode: 'add', // should be either 'add' or 'edit'
entries: []
},
// we need this for the modal to edit a file's meta information // we need this for the modal to edit a file's meta information
temp: { temp: {
id: null, id: null,
...@@ -569,6 +674,16 @@ export default { ...@@ -569,6 +674,16 @@ export default {
return null return null
}, },
// Returns a playlist object from the playlists array, given a playlist ID
getPlaylistById: function (id) {
for (var i in this.playlists) {
if (this.playlists[i].id === id) {
return this.playlists[i]
}
}
return null
},
playlistToolTip: function (entries) { playlistToolTip: function (entries) {
var text = '<div style="white-space: nowrap;" align="left">' var text = '<div style="white-space: nowrap;" align="left">'
for (var i in entries) { for (var i in entries) {
...@@ -578,6 +693,21 @@ export default { ...@@ -578,6 +693,21 @@ export default {
return text return text
}, },
movePlaylistItemUp: function (index) {
this.notYetImplemented()
return index
},
movePlaylistItemDown: function (index) {
this.notYetImplemented()
return index
},
deletePlaylistItem: function (index) {
this.notYetImplemented()
return index
},
deletePlaylist: function (id) { deletePlaylist: function (id) {
var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/playlists/' + id var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/playlists/' + id
// TODO: add mechanism to indicate the running delete request in the files table // TODO: add mechanism to indicate the running delete request in the files table
...@@ -593,9 +723,31 @@ export default { ...@@ -593,9 +723,31 @@ export default {
}) })
}, },
addPlaylist: function () {
this.playlistEditor.mode = 'add'
this.playlistEditor.entries = []
this.playlistEditor.id = null
this.$bvModal.show('modal-edit-playlist')
},
editPlaylist: function (id) { editPlaylist: function (id) {
this.notYetImplemented() this.playlistEditor.mode = 'edit'
return id this.playlistEditor.entries = []
this.playlistEditor.id = id
var playlist = this.getPlaylistById(id)
for (var i in playlist.entries) {
var entry = {}
entry.uri = playlist.entries[i].uri
if (playlist.entries[i].file) {
entry.file = playlist.entries[i].file
}
this.playlistEditor.entries.push(entry)
}
this.$bvModal.show('modal-edit-playlist')
},
storePlaylist: function () {
alert(this.playlistEditor.mode)
}, },
// To start modifying the meta information for a file we have to set our // To start modifying the meta information for a file we have to set our
......
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