Commit b67f97e2 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

refactor show jumbotron to own component

parent 61ca1516
<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>
......@@ -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 => {
......
......@@ -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
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment