ShowManager.vue 4.17 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
          <img
19
            src="/assets/radio.gif"
20
21
            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
29
      <show-schedules />

30
      <!-- include the modals to edit show and timeslot entries from the modal compontents -->
31
      <show-timeslots ref="timeslotsComponent" />
32

33
      <hr>
34

35
      <h2>General settings for the radio show:</h2>
36
      <show-metaSimpleTypes />
37
      <show-metaArrays />
38
      <show-metaOwners />
39
      <show-metaImages />
40

41
      <hr>
42
    </div>
43
  </b-container>
44
45
46
</template>

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

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

71
72
73
74
  data () {
    return {
    }
  },
75

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

82
83
84
85
    loaded () {
      return {
        shows: this.$store.state.shows.loaded.shows,
      }
86
    },
87

88
89
90
91
    ...mapGetters({
      shows: 'shows/shows',
      selectedShow: 'shows/selectedShow',
    })
92
  },
93
94

  // Right after this component is set up, we want to fetch all available shows
95
  // and the arrays for the show meta info from the AuRa steering module.
96
  created () {
97
98
99
100
101
102
103
104
105
    if (this.$store.state.auth.user.steeringUser) { this.loadShowInfos() }
    else {
      this.$store.watch(
        (state) => state.auth.user.steeringUser,
        () => {
          this.loadShowInfos()
        }
      )
    }
106
  },
107

108
  methods: {
109
    showHasSwitched () {
110
      this.$refs.timeslotsComponent.showHasSwitched()
111
    },
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

    loadShowInfos () {
      this.$store.dispatch('shows/fetchShows', {
        callback: () => {
          this.$store.dispatch('playlists/fetch', {slug: this.selectedShow.slug})
          this.$refs.showSelector.updateInputSelector()
        }
      })
      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') }
    },
129
130
131
132
  }
}
</script>

133
<style>
134
135
136
137
138
139
140
141
142
span.timeslotEditLink {
  color: #8d5f82 !important;
  font-weight: bold;
  font-size: 0.8em;
  padding: 0.25em;
}
span.timeslotEditLink:hover {
  color: #ad7fa8 !important;
}
143
</style>