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
b67f97e2
Commit
b67f97e2
authored
Apr 27, 2020
by
jackie / Andrea Ida Malkah Klaura
Browse files
refactor show jumbotron to own component
parent
61ca1516
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/components/ShowJumbotron.vue
0 → 100644
View file @
b67f97e2
<
template
>
<b-jumbotron>
<!-- The show title goes into the jumbotron header -->
<template
slot=
"header"
>
<span
v-if=
"loaded.shows"
>
{{
selectedShow
.
name
}}
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit name of show"
@
click=
"$refs.appModalShow.showName()"
>
</span>
<span
v-else
>
Shows are being loaded
</span>
</
template
>
<!-- The short description of the show goes into the jumbotron lead -->
<
template
slot=
"lead"
>
<span
v-if=
"loaded.shows"
>
{{
selectedShow
.
short_description
}}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit short description"
@
click=
"$refs.appModalShow.showShortDescription()"
>
</
template
>
<!-- The rest of the jumbotron is filled with the show description -->
<div
v-if=
"loaded.shows"
>
<b>
Description:
</b>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit description"
@
click=
"$refs.appModalShow.showDescription()"
>
<div>
<!--
we are disabling the linter warning for the next line, because, while it
generally is not advisible to use v-html, in this case we took thorough
steps to sanitize the date before inserting it into the DOM
-->
<!-- eslint-disable-next-line vue/no-v-html -->
<p
v-html=
"sanitizedShowDescription"
/>
<!-- TODO: add image and logo here? -->
</div>
<div
v-if=
"$parent.$parent.user.steeringUser.is_superuser"
align=
"center"
>
<div
v-if=
"selectedShow.is_active"
>
<b-button
variant=
"danger"
size=
"sm"
@
click=
"$refs.appModalSuperuser.showModalDeactivateShow(shows[currentShow])"
>
Deactivate show
</b-button>
</div>
<div
v-else
>
<b-alert
variant=
"danger"
show
>
This show is currently not active!
<br><br>
<b-button
variant=
"success"
size=
"sm"
@
click=
"$refs.appModalSuperuser.activateShow(shows[currentShow])"
>
Activate!
</b-button>
</b-alert>
</div>
</div>
</div>
</b-jumbotron>
</template>
<
script
>
import
DOMPurify
from
'
dompurify
'
import
{
mapGetters
}
from
'
vuex
'
export
default
{
data
()
{
return
{
}
},
computed
:
{
shows
()
{
return
this
.
$store
.
state
.
shows
.
shows
},
loaded
()
{
return
{
shows
:
this
.
$store
.
state
.
shows
.
loaded
.
shows
,
}
},
// As the show description should allow to be html-formatted, we have to
// make sure no malicous code can be inserted into the DOM. For that the
// DOMPurify library (https://github.com/cure53/DOMPurify) does us a much
// better service than trying to sanitize it with some RegExp.
sanitizedShowDescription
:
function
()
{
return
DOMPurify
.
sanitize
(
this
.
selectedShow
.
description
)
},
...
mapGetters
({
selectedShow
:
'
shows/selectedShow
'
,
})
},
methods
:
{
}
}
</
script
>
src/components/ShowManager.vue
View file @
b67f97e2
...
...
@@ -35,77 +35,7 @@
<!-- The jumbotron is used to display the name and description of the
currently selected show -->
<b-jumbotron>
<!-- The show title goes into the jumbotron header -->
<template
slot=
"header"
>
<span
v-if=
"loaded.shows"
>
{{
shows
[
currentShow
].
name
}}
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit name of show"
@
click=
"$refs.appModalShow.showName()"
>
</span>
<span
v-else
>
Shows are being loaded
</span>
</
template
>
<!-- The short description of the show goes into the jumbotron lead -->
<
template
slot=
"lead"
>
<span
v-if=
"loaded.shows"
>
{{
shows
[
currentShow
].
short_description
}}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit short description"
@
click=
"$refs.appModalShow.showShortDescription()"
>
</
template
>
<!-- The rest of the jumbotron is filled with the show description -->
<div
v-if=
"loaded.shows"
>
<b>
Description:
</b>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit description"
@
click=
"$refs.appModalShow.showDescription()"
>
<div>
<!--
we are disabling the linter warning for the next line, because, while it
generally is not advisible to use v-html, in this case we took thorough
steps to sanitize the date before inserting it into the DOM
-->
<!-- eslint-disable-next-line vue/no-v-html -->
<p
v-html=
"sanitizedShowDescription"
/>
<!-- TODO: add image and logo here? -->
</div>
<div
v-if=
"$parent.user.steeringUser.is_superuser"
align=
"center"
>
<div
v-if=
"shows[currentShow].is_active"
>
<b-button
variant=
"danger"
size=
"sm"
@
click=
"$refs.appModalSuperuser.showModalDeactivateShow(shows[currentShow])"
>
Deactivate show
</b-button>
</div>
<div
v-else
>
<b-alert
variant=
"danger"
show
>
This show is currently not active!
<br><br>
<b-button
variant=
"success"
size=
"sm"
@
click=
"$refs.appModalSuperuser.activateShow(shows[currentShow])"
>
Activate!
</b-button>
</b-alert>
</div>
</div>
</div>
</b-jumbotron>
<show-jumbotron
/>
<!-- If the shows are not fully loaded yet, we just put the loading sign -->
<div
v-if=
"!loaded.shows"
>
...
...
@@ -707,6 +637,7 @@
</template>
<
script
>
import
showJumbotron
from
'
./ShowJumbotron.vue
'
import
modalNotes
from
'
./ShowManagerModalNotes.vue
'
import
modalShow
from
'
./ShowManagerModalShow.vue
'
import
modalSuperuser
from
'
./ShowManagerModalSuperuser.vue
'
...
...
@@ -724,6 +655,7 @@ export default {
'
app-modalShow
'
:
modalShow
,
'
app-modalSuperuser
'
:
modalSuperuser
,
'
app-modalPlaylist
'
:
modalPlaylist
,
'
show-jumbotron
'
:
showJumbotron
,
},
// generic functions that we want to use from our mixins folder
...
...
@@ -734,8 +666,6 @@ export default {
data
()
{
return
{
shows
:
[],
// an array of objects describing our shows (empty at load, will be populated on created())
currentShow
:
0
,
// index of the currently selected show in our shows array
currentShowID
:
0
,
// actual id of the currently selected show
numSlots
:
process
.
env
.
VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS
,
// all form input values are provided as strings
dateStart
:
this
.
apiDate
(
new
Date
()),
dateEnd
:
this
.
apiDate
(
new
Date
(
new
Date
().
getTime
()
+
process
.
env
.
VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS
*
86400000
)),
...
...
@@ -798,6 +728,9 @@ export default {
// retrievable, so we are computing them on the fly, when they are needed
computed
:
{
currentShow
()
{
return
this
.
$store
.
state
.
shows
.
selected
.
index
},
currentShowID
()
{
return
this
.
$store
.
state
.
shows
.
selected
.
id
},
// As the show description should allow to be html-formatted, we have to
// make sure no malicous code can be inserted into the DOM. For that the
// DOMPurify library (https://github.com/cure53/DOMPurify) does us a much
...
...
@@ -915,8 +848,7 @@ export default {
this
.
loaded
.
fundingcategory
=
false
this
.
loaded
.
owners
=
false
// set the current show and its ID to whatever we want to switch to now
this
.
currentShow
=
index
this
.
currentShowID
=
this
.
shows
[
this
.
currentShow
].
id
this
.
$store
.
commit
(
'
shows/switchShow
'
,
index
)
// and check if images are available and set image strings, because we
// cannot use them directly inside the b-img if they are null
if
(
this
.
shows
[
this
.
currentShow
].
logo
===
null
)
{
this
.
current
.
logo
=
''
}
...
...
@@ -941,6 +873,7 @@ export default {
// (Re)Load all shows from server and switch to a show with a specific ID.
// 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
.
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
...
...
@@ -967,8 +900,7 @@ export default {
// if no show with the given ID was found, we use the first item in the show array
if
(
index
===
-
1
)
{
index
=
0
}
}
this
.
currentShow
=
index
this
.
currentShowID
=
this
.
shows
[
index
].
id
this
.
$store
.
commit
(
'
shows/switchShow
'
,
index
)
this
.
loaded
.
shows
=
true
this
.
switchShow
(
this
.
currentShow
)
}).
catch
(
error
=>
{
...
...
src/store/modules/shows.js
View file @
b67f97e2
...
...
@@ -9,10 +9,15 @@ const state = {
timeslots
:
false
,
schedules
:
false
,
},
selected
:
{
index
:
0
,
// index of the currently selected show in our shows array
id
:
0
,
// actual id of the currently selected show
}
}
const
getters
=
{
shows
:
state
=>
state
.
shows
,
selectedShow
:
state
=>
state
.
shows
[
state
.
selected
.
index
]
}
const
mutations
=
{
...
...
@@ -28,6 +33,11 @@ const mutations = {
},
setTimeslots
(
state
,
slots
)
{
state
.
timeslots
=
slots
},
switchShow
(
state
,
index
)
{
state
.
selected
.
index
=
index
state
.
selected
.
id
=
state
.
shows
[
index
].
id
}
}
...
...
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