Jumbotron.vue 1.88 KB
Newer Older
1
<template>
Richard Blechinger's avatar
Richard Blechinger committed
2
3
4
5
6
    <b-jumbotron>
        <!-- The jumbotron is used to display the name and short description of the
        currently selected show and let the user choose between editing files and
        playlists -->
        <template slot="header">
7
8
9
      <span v-if="loaded.shows">
        {{ selectedShow.name }}
      </span>
10
            <span v-else>{{ $t('loading') }}</span>
Richard Blechinger's avatar
Richard Blechinger committed
11
12
13
14
15
16
17
18
19
20
21
22
        </template>
        <template slot="lead">
            <span v-if="loaded.shows">{{ selectedShow.short_description }}</span>
        </template>
        <hr>
        <div align="center">
            <b-button-group>
                <b-button
                        size="lg"
                        :variant="button.files"
                        @click="$store.commit('setFileManagerMode', 'files')"
                >
23
                    {{ $t('filePlaylistManager.files') }}
Richard Blechinger's avatar
Richard Blechinger committed
24
25
26
27
28
29
                </b-button>
                <b-button
                        size="lg"
                        :variant="button.playlists"
                        @click="$store.commit('setFileManagerMode', 'playlists')"
                >
30
                    {{ $t('filePlaylistManager.playlists') }}
Richard Blechinger's avatar
Richard Blechinger committed
31
32
33
34
                </b-button>
            </b-button-group>
        </div>
    </b-jumbotron>
35
36
37
</template>

<script>
Richard Blechinger's avatar
Richard Blechinger committed
38
    import {mapGetters} from 'vuex'
39

Richard Blechinger's avatar
Richard Blechinger committed
40
41
42
43
44
45
46
    export default {
        computed: {
            loaded() {
                return {
                    shows: this.$store.state.shows.loaded.shows,
                }
            },
47

Richard Blechinger's avatar
Richard Blechinger committed
48
49
            button() {
                return {
Richard Blechinger's avatar
Richard Blechinger committed
50
51
                    files: this.mode === 'files' ? 'primary' : 'outline-primary',
                    playlists: this.mode === 'playlists' ? 'primary' : 'outline-primary',
Richard Blechinger's avatar
Richard Blechinger committed
52
53
                }
            },
54

Richard Blechinger's avatar
Richard Blechinger committed
55
56
57
58
59
60
            ...mapGetters({
                selectedShow: 'shows/selectedShow',
                mode: 'fileManagerMode'
            })
        }
    }
61
</script>