ShowJumbotron.vue 3.07 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<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>