ShowManager.vue 3.69 KB
Newer Older
1
<template>
2
  <b-container>
3
4
5
6
7
    <show-selector
      ref="showSelector"
      title="Radio shows"
      :callback="showHasSwitched"
    />
8
    <hr>
9

10
11
    <!-- The jumbotron is used to display the name and description of the
    currently selected show -->
12
    <show-jumbotron />
13

14
    <!-- If the shows are not fully loaded yet, we just put the loading sign -->
15
    <div v-if="!loaded.shows">
16
17
      <b-row>
        <b-col align="center">
18
19
20
21
          <img
            src="../assets/radio.gif"
            alt="loading data"
          >
22
23
        </b-col>
      </b-row>
24
    </div>
25
26

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

31
      <hr>
32

33
      <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
34
      <show-metaSimpleTypes />
35
      <show-metaArrays />
36
      <show-metaOwners />
37
      <show-metaImages />
38

39
      <hr>
40
    </div>
41
  </b-container>
42
43
44
</template>

<script>
45
import showJumbotron from './shows/Jumbotron.vue'
46
import showTimeslots from './shows/Timeslots.vue'
47
48
49
50
import showMetaSimpleTypes from './shows/MetaSimpleTypes.vue'
import showMetaArrays from './shows/MetaArrays.vue'
import showMetaOwners from './shows/MetaOwners.vue'
import showMetaImages from './shows/MetaImages.vue'
51
import showSelector from './ShowSelector.vue'
52
import { mapGetters } from 'vuex'
53
54

export default {
55
56
  // 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
57
  components: {
58
    'show-jumbotron': showJumbotron,
59
    'show-timeslots': showTimeslots,
60
    'show-metaArrays': showMetaArrays,
61
    'show-metaSimpleTypes': showMetaSimpleTypes,
62
    'show-metaOwners': showMetaOwners,
63
    'show-metaImages': showMetaImages,
64
    'show-selector': showSelector,
65
  },
66

67
68
69
70
  data () {
    return {
    }
  },
71

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

78
79
80
81
    loaded () {
      return {
        shows: this.$store.state.shows.loaded.shows,
      }
82
    },
83

84
85
86
87
    ...mapGetters({
      shows: 'shows/shows',
      selectedShow: 'shows/selectedShow',
    })
88
  },
89
90

  // Right after this component is set up, we want to fetch all available shows
91
  // and the arrays for the show meta info from the AuRa steering module.
92
  created () {
93
94
95
    this.$store.dispatch('shows/fetchShows', {
      callback: () => {
        this.$store.dispatch('playlists/fetch', {slug: this.selectedShow.slug})
96
        this.$refs.showSelector.updateInputSelector()
97
98
      }
    })
99
100
101
102
103
104
105
106
    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') }
107
  },
108

109
  methods: {
110
    showHasSwitched () {
111
      this.$refs.timeslotsComponent.showHasSwitched()
112
    },
113
114
115
116
  }
}
</script>

117
<style>
118
119
120
121
122
123
124
125
126
span.timeslotEditLink {
  color: #8d5f82 !important;
  font-weight: bold;
  font-size: 0.8em;
  padding: 0.25em;
}
span.timeslotEditLink:hover {
  color: #ad7fa8 !important;
}
127
</style>