Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
AURA
dashboard
Commits
f76d8e30
Commit
f76d8e30
authored
May 14, 2019
by
jackie / Andrea Ida Malkah Klaura
Browse files
FEAT: add modal for playlist editing
parent
da9145a9
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/components/FileManager.vue
View file @
f76d8e30
...
...
@@ -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
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment