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

11
            <jumbotron />
Richard Blechinger's avatar
Richard Blechinger committed
12

13
14
15
            <!-- All the UI for uploading and editing files is only shown if the user
            choose to edit files in the jumbotron above -->
            <div v-if="mode === 'files'">
16
                <files />
17
            </div>
Richard Blechinger's avatar
Richard Blechinger committed
18

19
20
21
            <!-- All the UI for creating and editing playlists is only shown if the user
            choose to edit playlists in the jumbotron above -->
            <div v-if="mode === 'playlists'">
22
                <playlists />
23
24
            </div>
        </template>
Richard Blechinger's avatar
Richard Blechinger committed
25

26
27
28
        <div
            v-else
            class="tw-text-center"
29
            v-html="this.$t('noAssignedShows', { adminUrl })"
30
        />
Richard Blechinger's avatar
Richard Blechinger committed
31
    </b-container>
32
33
34
</template>

<script>
Richard Blechinger's avatar
Richard Blechinger committed
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
    import {mapGetters} from 'vuex'
    import showSelector from '../components/ShowSelector.vue'
    import jumbotron from '../components/filemanager/Jumbotron.vue'
    import files from '../components/filemanager/Files.vue'
    import playlists from '../components/filemanager/Playlists.vue'

    export default {
        components: {
            'show-selector': showSelector,
            'jumbotron': jumbotron,
            'files': files,
            'playlists': playlists,
        },

        // the data this component will be handling: mostly flags and local versions
        // of the data fetched from the AuRa tank API
        data() {
            return {
53
54
                adminUrl: `${process.env.VUE_APP_BASEURI_STEERING}/admin`,

Richard Blechinger's avatar
Richard Blechinger committed
55
56
57
58
59
60
61
62
                // for formatting the buttons - this way we could customize it later
                button: {
                    files: 'info',
                    playlists: 'outline-info'
                },

            }
        },
63

Richard Blechinger's avatar
Richard Blechinger committed
64
65
66
67
68
69
70
71
72
73
74
75
76
77
        computed: {
            ...mapGetters({
                selectedShow: 'shows/selectedShow',
                mode: 'fileManagerMode'
            })
        },

        // Right after this component is set up, we want to fetch all available shows
        // from the AuRa tank module. This works quite similar to the ShowManager.
        // We also want to load the files and playlists as soon as the shows are
        // loaded.
        created() {
            this.$store.dispatch('shows/fetchShows', {
                callback: () => {
78
79
80
81
82
83
84
85
                    if (!this.selectedShow) {
                        return;
                    }

                    this.$nextTick(() => {
                        this.showHasSwitched()
                        this.$refs.showSelector.updateInputSelector()
                    })
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
                }
            })
        },

        // Now for our hotchpotch of methods, mostly for fetching data from and
        // posting/updating data to the AuRa tank API
        methods: {

            // This switches the UI elements to reflect another show and fetches all
            // relevent data from the tank API.
            showHasSwitched() {
                this.$store.dispatch('files/fetchFiles', {
                    slug: this.selectedShow.slug
                })
                this.$store.dispatch('playlists/fetch', {
                    slug: this.selectedShow.slug
                })
            },

        }
106
    }
107
108
109
</script>

<style>
Richard Blechinger's avatar
Richard Blechinger committed
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
    div.filelistbox {
        border: 1px solid #e9ecef;
        border-radius: 0.3rem;
        padding: 1rem 2rem;
    }

    .stateNew {
        color: red;
        font-weight: bold;
    }

    .stateRunning {
        color: darkgreen;
    }

    .stateUndefined {
        color: orange;
        font-weight: bold;
    }

    .upDownArrows {
        font-size: 1.15rem;
    }

    .modalPlaylistRows {
        padding: 0.2rem 0;
    }
137
</style>