FileManager.vue 2.71 KB
Newer Older
1
<template>
2
  <b-container>
3
    <show-selector
4
      ref="showSelector"
5
6
7
      title="Files &amp; playlists"
      :callback="showHasSwitched"
    />
8
    <hr>
9

10
    <jumbotron />
11

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

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

<script>
27
import { mapGetters } from 'vuex'
28
29
import showSelector from './ShowSelector.vue'
import jumbotron from './filemanager/Jumbotron.vue'
30
import files from './filemanager/Files.vue'
31
import playlists from './filemanager/Playlists.vue'
32
33

export default {
34
  components: {
35
36
    'show-selector': showSelector,
    'jumbotron': jumbotron,
37
    'files': files,
38
    'playlists': playlists,
39
40
  },

41
42
  // the data this component will be handling: mostly flags and local versions
  // of the data fetched from the AuRa tank API
43
44
  data () {
    return {
45
      // for formatting the buttons - this way we could customize it later
46
47
48
      button: {
        files: 'info',
        playlists: 'outline-info'
49
      },
50

51
52
    }
  },
53

54
55
56
  computed: {
    ...mapGetters({
      selectedShow: 'shows/selectedShow',
57
      mode: 'fileManagerMode'
58
59
60
    })
  },

61
62
63
64
  // 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.
65
  created () {
66
    this.$store.dispatch('shows/fetchShows', {
67
68
69
70
      callback: () => {
        this.showHasSwitched()
        this.$refs.showSelector.updateInputSelector()
      }
71
72
    })
  },
73
74
75

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

    // This switches the UI elements to reflect another show and fetches all
    // relevent data from the tank API.
80
    showHasSwitched () {
81
      this.$log.debug('show has switched to', this.selectedShow.name)
82
83
      this.$store.dispatch('files/fetchFiles', {
        slug: this.selectedShow.slug
84
      })
85
86
87
      this.$store.dispatch('playlists/fetch', {
        slug: this.selectedShow.slug
      })
88
    },
89

90
91
  }
}
92
93
94
</script>

<style>
95
96
97
98
99
div.filelistbox {
  border: 1px solid #e9ecef;
  border-radius: 0.3rem;
  padding: 1rem 2rem;
}
100
101
102
103
104
105
106
107
108
109
110
.stateNew {
  color: red;
  font-weight: bold;
}
.stateRunning {
  color: darkgreen;
}
.stateUndefined {
  color: orange;
  font-weight: bold;
}
111
112
113
114
115
116
.upDownArrows {
  font-size: 1.15rem;
}
.modalPlaylistRows {
  padding: 0.2rem 0;
}
117
</style>