ShowManager.vue 5.47 KB
Newer Older
1
<template>
Richard Blechinger's avatar
Richard Blechinger committed
2
    <b-container>
3
4
5
6
        <template v-if="loaded.shows">
            <template v-if="selectedShow">
                <show-selector
                        ref="showSelector"
7
                        :title="$t('showManager.title')"
8
9
10
11
12
13
                        :callback="showHasSwitched"
                />
                <hr>

                <!-- The jumbotron is used to display the name and description of the
                currently selected show -->
14
15
                <show-jumbotron />
                <show-schedules />
16
17

                <!-- include the modals to edit show and timeslot entries from the modal compontents -->
18
                <show-timeslots ref="timeslotsComponent" />
19
20
21

                <hr>

22
                <h2>{{ $t('showManager.generalSettings') }}</h2>
23
24
25
26
                <show-metaSimpleTypes />
                <show-metaArrays />
                <show-metaOwners />
                <show-metaImages />
27
28
29
30
31
32
33

                <hr>
            </template>

            <div
                v-else
                class="tw-text-center"
34
                v-html="this.$t('noAssignedShows', { adminUrl })"
35
36
            />
        </template>
Richard Blechinger's avatar
Richard Blechinger committed
37
38

        <!-- If the shows are not fully loaded yet, we just put the loading sign -->
39
40
41
42
43
        <div
            v-else
            class="tw-text-center"
        >
            {{ $t('loading') }}
Richard Blechinger's avatar
Richard Blechinger committed
44
45
        </div>
    </b-container>
46
47
48
</template>

<script>
Richard Blechinger's avatar
Richard Blechinger committed
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
    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'
    import {mapGetters} from 'vuex'

    export default {
        // 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
        components: {
            'show-jumbotron': showJumbotron,
            'show-timeslots': showTimeslots,
            'show-schedules': showSchedules,
            'show-metaArrays': showMetaArrays,
            'show-metaSimpleTypes': showMetaSimpleTypes,
            'show-metaOwners': showMetaOwners,
            'show-metaImages': showMetaImages,
            'show-selector': showSelector,
        },

        data() {
74
75
76
            return {
                adminUrl: `${process.env.VUE_APP_BASEURI_STEERING}/admin`
            }
Richard Blechinger's avatar
Richard Blechinger committed
77
78
79
80
81
82
83
84
        },

        // Some of the info we need in the template are not easily and directly
        // retrievable, so we are computing them on the fly, when they are needed
        computed: {
            user() {
                return this.$store.state.auth.user
            },
85

Richard Blechinger's avatar
Richard Blechinger committed
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
            isSuperuser() {
                return this.$store.state.auth.user.steeringUser.is_superuser
            },

            loaded() {
                return {
                    shows: this.$store.state.shows.loaded.shows,
                }
            },

            ...mapGetters({
                shows: 'shows/shows',
                selectedShow: 'shows/selectedShow',
            })
        },

        // Right after this component is set up, we want to fetch all available shows
        // and the arrays for the show meta info from the AuRa steering module.
        created() {
            if (this.$store.state.auth.user.steeringUser) {
                this.loadShowInfos()
            } else {
                this.$store.watch(
                    (state) => state.auth.user.steeringUser,
                    () => {
                        this.loadShowInfos()
                    }
                )
            }
        },

        methods: {
            showHasSwitched() {
                this.$refs.timeslotsComponent.showHasSwitched()
            },

            loadShowInfos() {
                this.$store.dispatch('shows/fetchShows', {
                    callback: () => {
125
126
127
128
                        if (!this.selectedShow) {
                            return;
                        }

Richard Blechinger's avatar
Richard Blechinger committed
129
                        this.$store.dispatch('playlists/fetch', {slug: this.selectedShow.slug})
130
                        this.$nextTick(() => this.$refs.showSelector.updateInputSelector())
Richard Blechinger's avatar
Richard Blechinger committed
131
132
133
134
135
136
137
138
139
140
141
142
143
                    }
                })
                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')
                }
            },
144
145
        }
    }
146
147
</script>

148
<style>
Richard Blechinger's avatar
Richard Blechinger committed
149
150
151
152
153
154
155
156
157
158
159
    span.timeslotEditLink {
        color: #8d5f82 !important;
        font-weight: bold;
        font-size: 0.8em;
        padding: 0.25em;
    }

    span.timeslotEditLink:hover {
        color: #ad7fa8 !important;
        cursor: pointer;
    }
160
</style>