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 @@
<!-- All the UI for creating and editing playlists is only shown if the user
choose to edit playlists in the jumbotron above -->
<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 -->
<div v-if="!loaded.playlists">
<b-row>
......@@ -364,7 +462,7 @@
</b-alert>
<b-button
variant="success"
@click="notYetImplemented"
@click="addPlaylist"
>
Create a playlist
</b-button>
......@@ -377,7 +475,7 @@
>
<b-button
variant="success"
@click="notYetImplemented"
@click="addPlaylist"
>
Create a playlist
</b-button>
......@@ -476,6 +574,13 @@ export default {
uploadSourceURI: '',
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
temp: {
id: null,
......@@ -569,6 +674,16 @@ export default {
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) {
var text = '<div style="white-space: nowrap;" align="left">'
for (var i in entries) {
......@@ -578,6 +693,21 @@ export default {
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) {
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
......@@ -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) {
this.notYetImplemented()
return id
this.playlistEditor.mode = 'edit'
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
......
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