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
fde3cc26
Commit
fde3cc26
authored
May 04, 2020
by
jackie / Andrea Ida Malkah Klaura
Browse files
move arrays of show meta to own component
parent
cff9ef36
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/components/ShowManager.vue
View file @
fde3cc26
...
...
@@ -233,229 +233,7 @@
<h2>
Allgemeine Einstellungen zur Sendereihe:
</h2>
<show-metaSimpleTypes
/>
<hr
v-if=
"$parent.user.steeringUser.is_superuser"
>
<b-row
v-if=
"$parent.user.steeringUser.is_superuser"
>
<b-col
lg=
"2"
>
<b-badge
variant=
"info"
style=
"width:80%;"
>
Owners:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"$refs.appModalSuperuser.showModalOwners(shows[currentShow])"
>
</b-col>
<b-col
lg=
"10"
>
<div
v-if=
"loaded.owners"
>
<p
v-if=
"shows[currentShow].owners.length === 0"
>
<small><i>
(none set)
</i></small>
</p>
<p
v-else
>
<!-- TODO: make link on name; when user clicks, open modal to edit host -->
<ul>
<li
v-for=
"owner in current.owners"
:key=
"owner.id"
>
{{ owner.first_name }} {{ owner.last_name }}
<b-badge
variant=
"light"
>
username:
</b-badge>
<small>
{{ owner.username }}
</small>
<span
v-if=
"owner.email.length > 0"
>
<b-badge
variant=
"light"
>
email:
</b-badge>
<small>
{{ owner.email }}
</small>
</span>
</li>
</ul>
</p>
</div>
<div
v-else
>
<img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
><br>
</div>
</b-col>
</b-row>
<hr
v-if=
"$parent.user.steeringUser.is_superuser"
>
<b-row>
<b-col
lg=
"2"
>
<b-badge
style=
"width:80%;"
>
Categories:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"$refs.appModalShow.showCategories()"
>
</b-col>
<b-col
lg=
"4"
>
<div
v-if=
"loaded.categories"
>
<p
v-if=
"shows[currentShow].category.length === 0"
>
<small><i>
(none set)
</i></small>
</p>
<p
v-else
>
<ul>
<li
v-for=
"cat in current.categories"
:key=
"cat.id"
>
{{ cat.category }}
</li>
</ul>
</p>
</div>
<div
v-else
>
<img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
><br>
</div>
</b-col>
<b-col
lg=
"2"
>
<b-badge
style=
"width:80%;"
>
Topics:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"$refs.appModalShow.showTopics()"
>
</b-col>
<b-col
lg=
"4"
>
<div
v-if=
"loaded.topics"
>
<p
v-if=
"shows[currentShow].topic.length === 0"
>
<small><i>
(none set)
</i></small>
</p>
<p
v-else
>
<ul>
<li
v-for=
"topic in current.topics"
:key=
"topic.id"
>
{{ topic.topic }}
</li>
</ul>
</p>
</div>
<div
v-else
>
<img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
><br>
</div>
</b-col>
<b-col
lg=
"2"
>
<b-badge
style=
"width:80%;"
>
Musicfocus:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"$refs.appModalShow.showMusicFocus()"
>
</b-col>
<b-col
lg=
"4"
>
<div
v-if=
"loaded.musicfocus"
>
<p
v-if=
"shows[currentShow].musicfocus.length === 0"
>
<small><i>
(none set)
</i></small>
</p>
<p
v-else
>
<ul>
<li
v-for=
"focus in current.musicfocus"
:key=
"focus.id"
>
{{ focus.focus }}
</li>
</ul>
</p>
</div>
<div
v-else
>
<img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
><br>
</div>
</b-col>
<b-col
lg=
"2"
>
<b-badge
style=
"width:80%;"
>
Languages:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"$refs.appModalShow.showLanguages()"
>
</b-col>
<b-col
lg=
"4"
>
<div
v-if=
"loaded.languages"
>
<p
v-if=
"shows[currentShow].language.length === 0"
>
<small><i>
(none set)
</i></small>
</p>
<p
v-else
>
<ul>
<li
v-for=
"lang in current.languages"
:key=
"lang.id"
>
{{ lang.name }}
</li>
</ul>
</p>
</div>
<div
v-else
>
<img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
><br>
</div>
</b-col>
<b-col
lg=
"2"
>
<b-badge
style=
"width:80%;"
>
Hosts:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"$refs.appModalShow.showHosts()"
>
</b-col>
<b-col
lg=
"4"
>
<div
v-if=
"loaded.hosts"
>
<p
v-if=
"shows[currentShow].hosts.length === 0"
>
<small><i>
(none set)
</i></small>
</p>
<p
v-else
>
<!-- TODO: make link on name; when user clicks, open modal to edit host -->
<ul>
<li
v-for=
"host in current.hosts"
:key=
"host.id"
>
{{ host.name }}
</li>
</ul>
</p>
</div>
<div
v-else
>
<img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
><br>
</div>
</b-col>
</b-row>
<show-metaArrays
/>
<b-row>
<b-col
lg=
"2"
>
...
...
@@ -514,7 +292,8 @@
<
script
>
import
showJumbotron
from
'
./ShowJumbotron.vue
'
import
showMetaSimpleTypes
from
'
./ShowMetaSimpleTypes.vue
'
import
showMetaSimpleTypes
from
'
./ShowMetaArrays.vue
'
import
showMetaArrays
from
'
./ShowMetaSimpleTypes.vue
'
import
modalNotes
from
'
./ShowManagerModalNotes.vue
'
import
modalShow
from
'
./ShowManagerModalShow.vue
'
import
modalSuperuser
from
'
./ShowManagerModalSuperuser.vue
'
...
...
@@ -533,6 +312,7 @@ export default {
'
app-modalSuperuser
'
:
modalSuperuser
,
'
app-modalPlaylist
'
:
modalPlaylist
,
'
show-jumbotron
'
:
showJumbotron
,
'
show-metaArrays
'
:
showMetaArrays
,
'
show-metaSimpleTypes
'
:
showMetaSimpleTypes
,
},
...
...
@@ -736,8 +516,13 @@ export default {
// If the id argument is null, the first show in the show array will be used
loadAndSwitch
:
function
(
id
)
{
this
.
$store
.
dispatch
(
'
shows/fetchShows
'
)
this
.
$store
.
dispatch
(
'
shows/fetchTypes
'
)
this
.
$store
.
dispatch
(
'
shows/fetchFundingCategories
'
)
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
types
'
,
onlyActive
:
true
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
fundingcategories
'
,
onlyActive
:
true
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
categories
'
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
topics
'
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
musicfocus
'
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
languages
'
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
hosts
'
})
this
.
loaded
.
shows
=
false
var
uri
=
process
.
env
.
VUE_APP_API_STEERING_SHOWS
// normal users should only see their own shows, only superusers see all shows
...
...
src/components/ShowManagerModalShow.vue
View file @
fde3cc26
<
template
>
<div>
<b-modal
ref=
"modalShowCategories"
title=
"Categories of this show"
size=
"lg"
@
ok=
"saveCategories"
>
<b-row>
<b-col
align=
"center"
>
<div
v-if=
"!loaded"
>
<img
src=
"../assets/radio.gif"
alt=
"loading data"
>
</div>
<div
v-else
>
<p>
Choose one or more categoires for this show:
</p>
<b-form-select
v-model=
"array"
multiple
:options=
"showCategorySelector"
:select-size=
"5"
/>
<br><br>
<b-alert
show
dismissible
variant=
"info"
>
<b>
Hint:
</b>
use
<code>
CTRL+click
</code>
for multiple selection
</b-alert>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref=
"modalShowTopics"
title=
"Topics of this show"
size=
"lg"
@
ok=
"saveTopics"
>
<b-row>
<b-col
align=
"center"
>
<div
v-if=
"!loaded"
>
<img
src=
"../assets/radio.gif"
alt=
"loading data"
>
</div>
<div
v-else
>
<p>
Choose one or more topics for this show:
</p>
<b-form-select
v-model=
"array"
multiple
:options=
"showTopicsSelector"
:select-size=
"5"
/>
<br><br>
<b-alert
show
dismissible
variant=
"info"
>
<b>
Hint:
</b>
use
<code>
CTRL+click
</code>
for multiple selection
</b-alert>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref=
"modalShowMusicFocus"
title=
"Music focus of this show"
size=
"lg"
@
ok=
"saveMusicFocus"
>
<b-row>
<b-col
align=
"center"
>
<div
v-if=
"!loaded"
>
<img
src=
"../assets/radio.gif"
alt=
"loading data"
>
</div>
<div
v-else
>
<p>
Choose none, one or more music foci for this show:
</p>
<b-form-select
v-model=
"array"
multiple
:options=
"showMusicFocusSelector"
:select-size=
"5"
/>
<br><br>
<b-alert
show
dismissible
variant=
"info"
>
<b>
Hint:
</b>
use
<code>
CTRL+click
</code>
for multiple selection
</b-alert>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref=
"modalShowLanguages"
title=
"Languages of this show"
size=
"lg"
@
ok=
"saveLanguages"
>
<b-row>
<b-col
align=
"center"
>
<div
v-if=
"!loaded"
>
<img
src=
"../assets/radio.gif"
alt=
"loading data"
>
</div>
<div
v-else
>
<p>
Choose one or more languages for this show:
</p>
<b-form-select
v-model=
"array"
multiple
:options=
"showLanguagesSelector"
:select-size=
"5"
/>
<br><br>
<b-alert
show
dismissible
variant=
"info"
>
<b>
Hint:
</b>
use
<code>
CTRL+click
</code>
for multiple selection
</b-alert>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref=
"modalShowHosts"
title=
"Hosts of this show"
size=
"lg"
@
ok=
"saveHosts"
>
<b-row>
<b-col
align=
"center"
>
<div
v-if=
"!loaded"
>
<img
src=
"../assets/radio.gif"
alt=
"loading data"
>
</div>
<div
v-else
>
<p>
Choose one or more hosts for this show:
</p>
<b-form-select
v-model=
"array"
multiple
:options=
"showHostsSelector"
:select-size=
"5"
/>
<br><br>
<b-alert
show
dismissible
variant=
"info"
>
<b>
Hint:
</b>
use
<code>
CTRL+click
</code>
for multiple selection
</b-alert>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref=
"modalLogo"
title=
"Logo of this show"
...
...
@@ -275,19 +100,6 @@ export default {
file
:
null
,
// we use this when opening modals, that have to fetch options through the API first.
loaded
:
false
,
/*
These are temporary storages when we fetch arrays from the API. We need
them, because the show object only has arrays of ids and we have to
translate those to the correct labels, which we only get through API
calls.
*/
types
:
[],
fundingcategories
:
[],
categories
:
[],
topics
:
[],
musicfocus
:
[],
languages
:
[],
hosts
:
[]
}
},
/*
...
...
@@ -295,41 +107,6 @@ export default {
which use a specific array format [{value:"",text:""},...] to render options.
*/
computed
:
{
showCategorySelector
:
function
()
{
var
options
=
[]
for
(
var
i
in
this
.
categories
)
{
options
.
push
({
value
:
this
.
categories
[
i
].
id
,
text
:
this
.
categories
[
i
].
abbrev
+
'
(
'
+
this
.
categories
[
i
].
category
+
'
)
'
,
disabled
:
!
this
.
categories
[
i
].
is_active
})
}
return
options
},
showTopicsSelector
:
function
()
{
var
options
=
[]
for
(
var
i
in
this
.
topics
)
{
options
.
push
({
value
:
this
.
topics
[
i
].
id
,
text
:
this
.
topics
[
i
].
abbrev
+
'
(
'
+
this
.
topics
[
i
].
topic
+
'
)
'
,
disabled
:
!
this
.
topics
[
i
].
is_active
})
}
return
options
},
showMusicFocusSelector
:
function
()
{
var
options
=
[]
for
(
var
i
in
this
.
musicfocus
)
{
options
.
push
({
value
:
this
.
musicfocus
[
i
].
id
,
text
:
this
.
musicfocus
[
i
].
abbrev
+
'
(
'
+
this
.
musicfocus
[
i
].
focus
+
'
)
'
,
disabled
:
!
this
.
musicfocus
[
i
].
is_active
})
}
return
options
},
showLanguagesSelector
:
function
()
{
var
options
=
[]
for
(
var
i
in
this
.
languages
)
{
options
.
push
({
value
:
this
.
languages
[
i
].
id
,
text
:
this
.
languages
[
i
].
name
,
disabled
:
!
this
.
languages
[
i
].
is_active
})
}
return
options
},
showHostsSelector
:
function
()
{
var
options
=
[]
for
(
var
i
in
this
.
hosts
)
{
options
.
push
({
value
:
this
.
hosts
[
i
].
id
,
text
:
this
.
hosts
[
i
].
name
,
disabled
:
!
this
.
hosts
[
i
].
is_active
})
}
return
options
}
},
/*
Here we start all methods needed to show the single modals and to update
...
...
@@ -342,106 +119,6 @@ export default {
properties that actually get changed
TODO: think about refactoring all those function to one or few functions
*/
saveCategories
(
event
)
{
this
.
$log
.
debug
(
'
saveCategories
'
,
this
.
array
,
this
.
show
.
category
)
if
(
this
.
array
.
length
!==
this
.
show
.
category
.
length
||
!
this
.
array
.
every
((
value
,
index
)
=>
value
===
this
.
show
.
category
[
index
]))
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
category
=
this
.
array
let
uri
=
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
axios
.
put
(
uri
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
$parent
.
shows
[
this
.
$parent
.
currentShow
].
category
=
this
.
array
this
.
$parent
.
getCategories
()
this
.
$refs
.
modalShowCategories
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save categories. See console for details.
'
)
})
}
},
saveTopics
(
event
)
{
if
(
this
.
array
.
length
!==
this
.
show
.
topic
.
length
||
!
this
.
array
.
every
((
value
,
index
)
=>
value
===
this
.
show
.
topic
[
index
]))
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
topic
=
this
.
array
axios
.
put
(
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
show
.
topic
=
this
.
array
this
.
$parent
.
getTopics
()
this
.
$refs
.
modalShowTopics
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show
\'
s topics. See console for details.
'
)
})
}
},
saveMusicFocus
(
event
)
{
if
(
this
.
array
.
length
!==
this
.
show
.
musicfocus
.
length
||
!
this
.
array
.
every
((
value
,
index
)
=>
value
===
this
.
show
.
musicfocus
[
index
]))
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
musicfocus
=
this
.
array
axios
.
put
(
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
show
.
musicfocus
=
this
.
array
this
.
$parent
.
getMusicfocus
()
this
.
$refs
.
modalShowMusicFocus
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show
\'
s music focus. See console for details.
'
)
})
}
},
saveLanguages
(
event
)
{
if
(
this
.
array
.
length
!==
this
.
show
.
language
.
length
||
!
this
.
array
.
every
((
value
,
index
)
=>
value
===
this
.
show
.
language
[
index
]))
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
language
=
this
.
array
axios
.
put
(
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
show
.
language
=
this
.
array
this
.
$parent
.
getLanguages
()
this
.
$refs
.
modalShowLanguages
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show
\'
s languages. See console for details.
'
)
})
}
},
saveHosts
(
event
)
{
if
(
this
.
array
.
length
!==
this
.
show
.
hosts
.
length
||
!
this
.
array
.
every
((
value
,
index
)
=>
value
===
this
.
show
.
hosts
[
index
]))
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
hosts
=
this
.
array
axios
.
put
(
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
show
.
hosts
=
this
.
array
this
.
$parent
.
getHosts
()
this
.
$refs
.
modalShowHosts
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show
\'
s hosts. See console for details.
'
)
})
}
},