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
27474671
Commit
27474671
authored
May 18, 2018
by
Andrea Ida Malkah Klaura
Browse files
finish all modals to change a shows info
parent
714370d9
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/components/ShowManager.vue
View file @
27474671
...
...
@@ -110,8 +110,8 @@
<!-- TODO: fetch name for predecessor_id from steering api -->
<b-badge
variant=
"light"
>
Predecessor:
</b-badge>
<span
v-if=
"shows[currentShow].predecessor_id === null"
><small><i>
This show has no predecessor show.
</i></small></span>
<span
v-else
>
{{
shows[currentShow].
predecessor
_id
}}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"
notYetImplemented
"
/>
<span
v-else
>
{{ predecessor
Name
}}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"
$refs.appModalShow.showPredecessor()
"
/>
</p>
</b-col>
...
...
@@ -155,7 +155,7 @@
</b-col>
<b-col
lg=
"2"
>
<b-badge
style=
"width:80%;"
>
Topics:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"
notYetImplemented
"
/>
<b-badge
style=
"width:80%;"
>
Topics:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"
$refs.appModalShow.showTopics()
"
/>
</b-col>
<b-col
lg=
"4"
>
<div
v-if=
"loaded.topics"
>
...
...
@@ -172,7 +172,7 @@
</b-col>
<b-col
lg=
"2"
>
<b-badge
style=
"width:80%;"
>
Musicfocus:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"
notYetImplemented
"
/>
<b-badge
style=
"width:80%;"
>
Musicfocus:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"
$refs.appModalShow.showMusicFocus()
"
/>
</b-col>
<b-col
lg=
"4"
>
<div
v-if=
"loaded.musicfocus"
>
...
...
@@ -189,7 +189,7 @@
</b-col>
<b-col
lg=
"2"
>
<b-badge
style=
"width:80%;"
>
Languages:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"
notYetImplemented
"
/>
<b-badge
style=
"width:80%;"
>
Languages:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"
$refs.appModalShow.showLanguages()
"
/>
</b-col>
<b-col
lg=
"4"
>
<div
v-if=
"loaded.languages"
>
...
...
@@ -206,7 +206,7 @@
</b-col>
<b-col
lg=
"2"
>
<b-badge
style=
"width:80%;"
>
Hosts:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"
notYetImplemented
"
/>
<b-badge
style=
"width:80%;"
>
Hosts:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"
$refs.appModalShow.showHosts()
"
/>
</b-col>
<b-col
lg=
"4"
>
<div
v-if=
"loaded.hosts"
>
...
...
@@ -283,6 +283,14 @@ export default {
},
mixins
:
[
timeslotSort
,
prettyDate
],
computed
:
{
predecessorName
:
function
()
{
for
(
var
i
in
this
.
shows
)
{
if
(
this
.
shows
[
i
].
id
===
this
.
shows
[
this
.
currentShow
].
predecessor_id
)
{
return
this
.
shows
[
i
].
name
}
}
return
'
Name of predecessor show not available
'
},
notesTableArray
:
function
()
{
var
arr
=
[]
for
(
var
i
in
this
.
current
.
timeslots
)
{
...
...
src/components/ShowManagerModalShow.vue
View file @
27474671
...
...
@@ -30,6 +30,12 @@
<b-form-input
v-model=
"id"
type=
"number"
placeholder=
"Put the CBA Series ID of your show here"
></b-form-input>
</b-modal>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
ref=
"modalShowPredecessor"
title=
"Predecessor of this show"
size=
"lg"
@
ok=
"savePredecessor"
>
<b-form-select
v-model=
"id"
:options=
"showPredecessorSelector"
/>
</b-modal>
<b-modal
ref=
"modalShowType"
title=
"Show type"
size=
"lg"
@
ok=
"saveShowType"
>
<b-row>
<b-col
align=
"center"
>
...
...
@@ -43,7 +49,7 @@
</b-row>
</b-modal>
<b-modal
ref=
"modalShowFundingCategory"
title=
"Funding category"
size=
"lg"
@
ok=
"saveFundingCategory"
>
<b-modal
ref=
"modalShowFundingCategory"
title=
"Funding category
of this show
"
size=
"lg"
@
ok=
"saveFundingCategory"
>
<b-row>
<b-col
align=
"center"
>
<div
v-if=
"!loaded"
>
...
...
@@ -56,14 +62,81 @@
</b-row>
</b-modal>
<b-modal
ref=
"modalShowCategories"
title=
"
Show c
ategories"
size=
"lg"
@
ok=
"saveCategories"
>
<b-modal
ref=
"modalShowCategories"
title=
"
C
ategories
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
multiple
v-model=
"array"
: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
multiple
v-model=
"array"
: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
multiple
v-model=
"array"
: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
multiple
v-model=
"array"
: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
multiple
v-model=
"array"
: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>
...
...
@@ -75,6 +148,7 @@
<
script
>
import
axios
from
'
axios
'
// debug function - can be thrown out as soon as this component is stable
/* function debugErrorResponse (data) {
console.log('Response data provided to transformResponse:')
console.log(data)
...
...
@@ -87,18 +161,39 @@ export default {
},
data
()
{
return
{
/*
We use a those variables for the modals as the model variable, which
can be either a string, and id or an array, depending on the modal.
For every parameter we also need a backup parmeter to reset our local
show storage in case the API update in one of the save functions fails.
*/
string
:
''
,
backupstring
:
''
,
id
:
0
,
backupid
:
0
,
array
:
[],
backuparray
:
[],
// 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
:
[]
categories
:
[],
topics
:
[],
musicfocus
:
[],
languages
:
[],
hosts
:
[]
}
},
/*
We use those computed properties for all modals that have select boxes
which use a specific array format [{value:"",text:""},...] to render options.
*/
computed
:
{
showTypeSelector
:
function
()
{
var
options
=
[]
...
...
@@ -114,15 +209,65 @@ export default {
}
return
options
},
showPredecessorSelector
:
function
()
{
var
options
=
[]
options
.
push
({
value
:
null
,
text
:
'
<i>... this show has no predecessor ...</i>
'
})
for
(
var
i
in
this
.
$parent
.
shows
)
{
options
.
push
({
value
:
this
.
$parent
.
shows
[
i
].
id
,
text
:
this
.
$parent
.
shows
[
i
].
name
})
}
return
options
},
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
the info set through the modal.
*/
methods
:
{
/*
Functions to update certain infos about a show through the API
The API always takes the full show object, so even if we only change one
single item in a show we have to send the whole show.
This also means we could use just one save function. Here we could think
about refactoring. It is important than to check which of the items have
changed and to restore those items in case the update fails.
For now we have single function for every modal to save only the bits
regarding this modal.
*/
saveName
(
event
)
{
if
(
this
.
string
!==
this
.
show
.
name
)
{
event
.
preventDefault
()
...
...
@@ -250,6 +395,28 @@ export default {
})
}
},
savePredecessor
(
event
)
{
if
(
this
.
id
!==
this
.
show
.
predecessor_id
)
{
event
.
preventDefault
()
this
.
backupid
=
this
.
show
.
predecessor_id
this
.
show
.
predecessor_id
=
this
.
id
console
.
log
(
this
.
show
.
predecessor_id
)
axios
.
put
(
process
.
env
.
API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
this
.
show
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
// this.$parent.shows[this.$parent.currentShow].predecessor_id = this.show.predecessor_id
console
.
log
(
'
saved
'
+
this
.
show
.
predecessor_id
)
console
.
log
(
response
)
this
.
$refs
.
modalShowPredecessor
.
hide
()
}).
catch
(
error
=>
{
this
.
show
.
predecessor_id
=
this
.
backupid
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not save the new show information
'
)
})
}
},
saveFundingCategory
(
event
)
{
if
(
this
.
id
!==
this
.
show
.
fundingcategory
)
{
event
.
preventDefault
()
...
...
@@ -287,9 +454,81 @@ export default {
})
}
},
saveTopics
(
event
)
{
if
(
this
.
array
.
length
!==
this
.
show
.
topic
.
length
||
!
this
.
array
.
every
((
value
,
index
)
=>
value
===
this
.
show
.
topic
[
index
]))
{
this
.
backuparray
=
this
.
show
.
topic
this
.
show
.
topic
=
this
.
array
axios
.
put
(
process
.
env
.
API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
this
.
show
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
this
.
$parent
.
getTopics
()
this
.
$refs
.
modalShowTopics
.
hide
()
}).
catch
(
error
=>
{
this
.
show
.
topic
=
this
.
backuparray
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not save the new show information
'
)
})
}
},
saveMusicFocus
(
event
)
{
if
(
this
.
array
.
length
!==
this
.
show
.
musicfocus
.
length
||
!
this
.
array
.
every
((
value
,
index
)
=>
value
===
this
.
show
.
musicfocus
[
index
]))
{
this
.
backuparray
=
this
.
show
.
musicfocus
this
.
show
.
musicfocus
=
this
.
array
axios
.
put
(
process
.
env
.
API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
this
.
show
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
this
.
$parent
.
getMusicfocus
()
this
.
$refs
.
modalShowMusicFocus
.
hide
()
}).
catch
(
error
=>
{
this
.
show
.
musicfocus
=
this
.
backuparray
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not save the new show information
'
)
})
}
},
saveLanguages
(
event
)
{
if
(
this
.
array
.
length
!==
this
.
show
.
language
.
length
||
!
this
.
array
.
every
((
value
,
index
)
=>
value
===
this
.
show
.
language
[
index
]))
{
this
.
backuparray
=
this
.
show
.
language
this
.
show
.
language
=
this
.
array
axios
.
put
(
process
.
env
.
API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
this
.
show
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
this
.
$parent
.
getLanguages
()
this
.
$refs
.
modalShowLanguages
.
hide
()
}).
catch
(
error
=>
{
this
.
show
.
language
=
this
.
backuparray
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not save the new show information
'
)
})
}
},
saveHosts
(
event
)
{
if
(
this
.
array
.
length
!==
this
.
show
.
hosts
.
length
||
!
this
.
array
.
every
((
value
,
index
)
=>
value
===
this
.
show
.
hosts
[
index
]))
{
this
.
backuparray
=
this
.
show
.
hosts
this
.
show
.
hosts
=
this
.
array
axios
.
put
(
process
.
env
.
API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
this
.
show
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
this
.
$parent
.
getHosts
()
this
.
$refs
.
modalShowHosts
.
hide
()
}).
catch
(
error
=>
{
this
.
show
.
hosts
=
this
.
backuparray
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not save the new show information
'
)
})
}
},
/*
Functions to activate modals
The
can b
e called from the parent component
The
y ar
e called from the parent component
*/
showName
()
{
this
.
string
=
this
.
show
.
name
...
...
@@ -315,6 +554,10 @@ export default {
this
.
id
=
this
.
show
.
cba_series_id
this
.
$refs
.
modalShowCBAid
.
show
()
},
showPredecessor
()
{
this
.
id
=
this
.
show
.
predecessor_id
this
.
$refs
.
modalShowPredecessor
.
show
()
},
showType
()
{
this
.
id
=
this
.
show
.
type
this
.
loaded
=
false
...
...
@@ -327,7 +570,7 @@ export default {
}).
catch
(
error
=>
{
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not load
show type information
'
)
alert
(
'
Error: could not load
available show types
'
)
})
this
.
$refs
.
modalShowType
.
show
()
},
...
...
@@ -343,7 +586,7 @@ export default {
}).
catch
(
error
=>
{
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not load
show type information
'
)
alert
(
'
Error: could not load
available funding categories
'
)
})
this
.
$refs
.
modalShowFundingCategory
.
show
()
},
...
...
@@ -359,9 +602,73 @@ export default {
}).
catch
(
error
=>
{
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not load
show type information
'
)
alert
(
'
Error: could not load
available categories
'
)
})
this
.
$refs
.
modalShowCategories
.
show
()
},
showTopics
()
{
this
.
array
=
this
.
show
.
topic
this
.
loaded
=
false
axios
.
get
(
process
.
env
.
API_STEERING
+
'
topics/
'
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
this
.
topics
=
response
.
data
this
.
loaded
=
true
}).
catch
(
error
=>
{
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not load available topics
'
)
})
this
.
$refs
.
modalShowTopics
.
show
()
},
showMusicFocus
()
{
this
.
array
=
this
.
show
.
musicfocus
this
.
loaded
=
false
axios
.
get
(
process
.
env
.
API_STEERING
+
'
musicfocus/
'
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
this
.
musicfocus
=
response
.
data
this
.
loaded
=
true
}).
catch
(
error
=>
{
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not load available music foci
'
)
})
this
.
$refs
.
modalShowMusicFocus
.
show
()
},
showLanguages
()
{
this
.
array
=
this
.
show
.
language
this
.
loaded
=
false
axios
.
get
(
process
.
env
.
API_STEERING
+
'
languages/
'
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
this
.
languages
=
response
.
data
this
.
loaded
=
true
}).
catch
(
error
=>
{
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not load available languages
'
)
})
this
.
$refs
.
modalShowLanguages
.
show
()
},
showHosts
()
{
this
.
array
=
this
.
show
.
hosts
this
.
loaded
=
false
axios
.
get
(
process
.
env
.
API_STEERING
+
'
hosts/
'
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
this
.
hosts
=
response
.
data
this
.
loaded
=
true
}).
catch
(
error
=>
{
console
.
log
(
'
Error:
'
)
console
.
log
(
error
)
alert
(
'
Error: could not load available hosts
'
)
})
this
.
$refs
.
modalShowHosts
.
show
()
}
}
}
...
...
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