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
965caeb0
Commit
965caeb0
authored
Aug 10, 2019
by
jackie / Andrea Ida Malkah Klaura
Browse files
FEAT: modal for choosing a playlist for timeslots
parent
0e4d90bb
Changes
2
Show whitespace changes
Inline
Side-by-side
src/components/ShowManager.vue
View file @
965caeb0
...
...
@@ -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
)
{
...
...
src/components/ShowManagerModalPlaylist.vue
0 → 100644
View file @
965caeb0
<
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\n
This feature is not implemented yet.
'
)
},
}
}
</
script
>
<
style
scoped
>
</
style
>
Write
Preview
Supports
Markdown
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