ShowManager.vue 4.54 KB
Newer Older
1
<template>
2
  <b-container>
3
4
5
6
7
8
    <!--
      The show picker including the modal to add new shows should also be
      refactored into an own component, so we can reuse it in the file and
      emission managers
    -->
    <addShowModal ref="addShowModal" />
9
    <b-row>
10
11
12
      <b-col>
        <h3>Sendungen verwalten</h3>
      </b-col>
13
      <b-col align="right">
14
15
16
        <b-button
          v-if="$parent.user.steeringUser.is_superuser"
          v-b-popover.hover.top="'Add a new show'"
17
          variant="info"
18
          @click="$refs.addShowModal.openModal()"
19
20
21
22
        >
          +
        </b-button>
        &nbsp;
23
24
25
        <b-dropdown
          id="ddshows"
          text="Sendereihe auswählen"
26
          variant="outline-info"
27
28
        >
          <b-dropdown-item
29
            v-for="(show, index) in shows"
30
31
32
33
34
            :key="show.id"
            @click="switchShow(index)"
          >
            {{ show.name }}
          </b-dropdown-item>
35
36
37
        </b-dropdown>
      </b-col>
    </b-row>
38

39
    <hr>
40

41
42
    <!-- The jumbotron is used to display the name and description of the
    currently selected show -->
43
    <show-jumbotron />
44

45
    <!-- If the shows are not fully loaded yet, we just put the loading sign -->
46
    <div v-if="!loaded.shows">
47
48
      <b-row>
        <b-col align="center">
49
50
51
52
          <img
            src="../assets/radio.gif"
            alt="loading data"
          >
53
54
        </b-col>
      </b-row>
55
    </div>
56
57

    <!-- When all show data is loaded, here we display all the rest -->
58
    <div v-else>
59
      <!-- include the modals to edit show and timeslot entries from the modal compontents -->
60
      <show-timeslots ref="timeslotsComponent" />
61

62
      <hr>
63

64
      <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
65
      <show-metaSimpleTypes />
66
      <show-metaArrays />
67
      <show-metaOwners />
68
      <show-metaImages />
69

70
      <hr>
71
    </div>
72
  </b-container>
73
74
75
</template>

<script>
76
import showJumbotron from './shows/Jumbotron.vue'
77
import showTimeslots from './shows/Timeslots.vue'
78
79
80
81
82
import showMetaSimpleTypes from './shows/MetaSimpleTypes.vue'
import showMetaArrays from './shows/MetaArrays.vue'
import showMetaOwners from './shows/MetaOwners.vue'
import showMetaImages from './shows/MetaImages.vue'
import modalAddShow from './shows/AddShowModal.vue'
83
import { mapGetters } from 'vuex'
84
85

export default {
86
87
  // all modals to edit a show and its timeslots/notes, are importet as separate
  // components, to make it a tiny lickle bit less messy here
88
  components: {
89
    'addShowModal': modalAddShow,
90
    'show-jumbotron': showJumbotron,
91
    'show-timeslots': showTimeslots,
92
    'show-metaArrays': showMetaArrays,
93
    'show-metaSimpleTypes': showMetaSimpleTypes,
94
    'show-metaOwners': showMetaOwners,
95
    'show-metaImages': showMetaImages,
96
  },
97

98
99
100
101
  data () {
    return {
    }
  },
102

jackie / Andrea Ida Malkah Klaura's avatar
jackie / Andrea Ida Malkah Klaura committed
103
  // Some of the info we need in the template are not easily and directly
104
  // retrievable, so we are computing them on the fly, when they are needed
105
  computed: {
106
    user () { return this.$store.state.auth.user },
107
    isSuperuser () { return this.$store.state.auth.user.steeringUser.is_superuser },
108

109
110
111
112
    loaded () {
      return {
        shows: this.$store.state.shows.loaded.shows,
      }
113
    },
114

115
116
117
118
    ...mapGetters({
      shows: 'shows/shows',
      selectedShow: 'shows/selectedShow',
    })
119
  },
120
121

  // Right after this component is set up, we want to fetch all available shows
122
  // and the arrays for the show meta info from the AuRa steering module.
123
  created () {
124
125
126
127
128
    this.$store.dispatch('shows/fetchShows', {
      callback: () => {
        this.$store.dispatch('playlists/fetch', {slug: this.selectedShow.slug})
      }
    })
129
130
131
132
133
134
135
136
    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'})
    if (this.isSuperuser) { this.$store.dispatch('auth/fetchUsers') }
137
  },
138

139
  methods: {
140
    switchShow: function (index) {
141
      this.$store.commit('shows/switchShow', index)
142
      this.$refs.timeslotsComponent.showHasSwitched()
143
    },
144
145
146
147
  }
}
</script>

148
<style>
149
150
151
152
153
154
155
156
157
span.timeslotEditLink {
  color: #8d5f82 !important;
  font-weight: bold;
  font-size: 0.8em;
  padding: 0.25em;
}
span.timeslotEditLink:hover {
  color: #ad7fa8 !important;
}
158
</style>