ShowManager.vue 29.3 KB
Newer Older
1
<template>
2
  <b-container>
3
4
5
6
7
8
9
10
11
12
13
    <b-row>
      <b-col align="right">
        <b-dropdown id="ddshows" text="Sendereihe auswählen" variant="info">
          <b-dropdown-item v-for="(show, index) in this.shows" :key="show.id" v-on:click="switchShow(index)">{{ show.name }}</b-dropdown-item>
        </b-dropdown>
      </b-col>
    </b-row>
    <hr />

    <b-jumbotron>
      <template slot="header">
14
15
        <span v-if="loaded.shows">
          {{ shows[currentShow].name }}
16
          <img src="../assets/16x16/emblem-system.png" alt="edit name of show" v-on:click="$refs.appModalShow.showName()" />
17
        </span>
18
19
20
        <span v-else>Shows are being loaded</span>
      </template>
      <template slot="lead">
21
        <span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
22
        <img src="../assets/16x16/emblem-system.png" alt="edit short description" v-on:click="$refs.appModalShow.showShortDescription()" />
23
      </template>
24
      <div v-if="loaded.shows">
25
        <b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="$refs.appModalShow.showDescription()" />
26
        <div v-if="loaded.shows">
27
          <p v-html="sanitizedShowDescription"></p>
28
29
          <!-- TODO: add image and logo here? -->
        </div>
30
      </div>
31
32
    </b-jumbotron>

33
    <div v-if="!loaded.shows">
34
35
36
      <b-row>
        <b-col align="center">
          <img src="../assets/radio.gif" alt="loading data" />
37
38
        </b-col>
      </b-row>
39
40
    </div>
    <div v-else>
41
      <!-- include the modals to edit show and timeslot entries from the modal compontents -->
42
43
      <app-modalShow ref="appModalShow" :show="shows[currentShow]"></app-modalShow>
      <app-modalNotes ref="appModalNotes" :show="shows[currentShow]" :showAggregate="current"></app-modalNotes>
44

45
      <!-- here we show our table of timeslots -->
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
      <b-card>
        <b-btn v-b-toggle.timeslotFilterCollapse>Toggle timeslot filters</b-btn>
        <b-collapse id="timeslotFilterCollapse">
          <br />
          <b-row>
            <b-col sm="3"><label for="inputNumSlots">Number of slots to show:</label></b-col>
            <b-col sm="9"><b-form-input id="inputNumSlots" v-model="numSlots" type="number"></b-form-input></b-col>
          </b-row>
          <b-row>
            <b-col sm="3"><label for="inputDateStart">From:</label></b-col>
            <b-col sm="9"><b-form-input id="inputDateStart" v-model="dateStart" type="date"></b-form-input></b-col>
          </b-row>
          <b-row>
            <b-col sm="3"><label for="inputNumSlots">Until (exclusive):</label></b-col>
            <b-col sm="9"><b-form-input id="inputDateEnd" v-model="dateEnd" type="date"></b-form-input></b-col>
          </b-row>
          <br />
          <b-container fluid class="text-right">
            <b-btn variant="outline-danger" @click="resetFilter()">Reset filter</b-btn> &nbsp;
            <b-btn variant="info" @click="applyFilter()">Apply filter</b-btn>
          </b-container>
        </b-collapse>
      </b-card>

      <br />

72
      <div v-if="loaded.timeslots">
73
74
75
76
77
78
79
80
81
82
83
84
85
        <b-table striped hover outlined :fields="notesTableArrayFields" :items="notesTableArray">
          <template slot="title" slot-scope="data">
            <span v-if="data.value">{{ data.value }}</span>
            <span v-else><small><i>(none set)</i></small></span>
          </template>
          <template slot="starts" slot-scope="data">
            {{ data.value }}
          </template>
          <template slot="duration" slot-scope="data">
            {{ data.value }}
          </template>
          <template slot="options" slot-scope="data">
            <span class="timeslotEditLink" @click="editTimeslotNote(data.item.options.id, data.item.options.schedule)"><img src="../assets/16x16/emblem-system.png" alt="Edit description" title="Edit description"></span>
86
87
88
            <span class="timeslotEditLink" @click="notYetImplemented()"><img src="../assets/16x16/media-eject.png" alt="Upload audio file / Create playlist" title="Upload audio file / Create playlist"></span>
            <span class="timeslotEditLink" @click="notYetImplemented()"><img src="../assets/16x16/media-playback-start.png" alt="Play audio file / playlist" title="Play audio file / playlist"></span>
            <span class="timeslotEditLink" @click="notYetImplemented()">...</span>
89
90
          </template>
        </b-table>
91
        <b-pagination align="center" :total-rows="current.timeslotmeta.count" :per-page="current.timeslotmeta.perpage" v-model="current.timeslotmeta.page" @change="timeslotsPage"></b-pagination>
92
93
94
      </div>
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>

95
96
      <hr />

97
98
      <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
      <b-row>
99

100
101
102
103
104
105
106
107
        <b-col lg="6">
          <p>
            <b-badge variant="light">E-Mail:</b-badge>
            <span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
            <span v-else>{{ shows[currentShow].email }}</span>
            <img src="../assets/16x16/emblem-system.png" alt="edit contact e-mail" v-on:click="$refs.appModalShow.showEmail()" />
          </p>
        </b-col>
108

109
110
111
112
113
114
115
116
        <b-col lg="6">
          <p>
            <b-badge variant="light">Website:</b-badge>
            <span v-if="shows[currentShow].website === null"><small><i>(none set)</i></small></span>
            <span v-else><a :href="shows[currentShow].website">{{ shows[currentShow].website }}</a></span>
            <img src="../assets/16x16/emblem-system.png" alt="edit website" v-on:click="$refs.appModalShow.showWebsite()" />
          </p>
        </b-col>
117

118
119
120
121
122
123
124
        <b-col lg="6">
          <p>
            <b-badge variant="light">Show type:</b-badge>
            <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
            <span v-if="loaded.type">
              <span v-if="current.type.length === 0"><small><i>(none set)</i></small></span>
              <span v-else>{{ current.type[0].type }}</span>
125
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showType()" />
126
127
128
129
            </span>
            <span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
          </p>
        </b-col>
130

131
132
133
134
        <b-col lg="6">
          <p>
            <b-badge variant="light">Funding category (eg. for RTR):</b-badge>
            <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
135
136
137
            <span v-if="loaded.fundingcategory">
              <span v-if="current.fundingcategory.length === 0"><small><i>(none set)</i></small></span>
              <span v-else>{{ current.fundingcategory[0].fundingcategory }}</span>
138
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showFundingCategory()" />
139
140
141
142
            </span>
            <span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
          </p>
        </b-col>
143

144
145
146
        <b-col lg="6">
          <p>
            <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
147
            <!-- TODO: fetch name for predecessor from steering api -->
148
            <b-badge variant="light">Predecessor:</b-badge>
149
            <span v-if="shows[currentShow].predecessor === null"><small><i>This show has no predecessor show.</i></small></span>
150
151
            <span v-else>{{ predecessorName }}</span>
            <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showPredecessor()" />
152
153
          </p>
        </b-col>
154

155
156
157
158
159
160
161
162
        <b-col lg="6">
          <p>
            <b-badge variant="light">CBA Series ID:</b-badge>
            <span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span>
            <span v-else>{{ shows[currentShow].cba_series_id }}</span>
            <img src="../assets/16x16/emblem-system.png" alt="edit CBA series ID" v-on:click="$refs.appModalShow.showCBAid()" />
          </p>
        </b-col>
163

164
165
166
167
168
169
170
171
        <b-col lg="6">
          <p>
            <b-badge variant="light">Fallback List/Pool:</b-badge>
            <span v-if="shows[currentShow].fallback_id === ''"><small><i>(none set)</i></small></span>
            <span v-else>ID: {{ shows[currentShow].fallback_id }}</span>
            <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
          </p>
        </b-col>
172

173
      </b-row>
174

175
      <b-row>
176

177
        <b-col lg="2">
178
          <b-badge style="width:80%;">Categories:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showCategories()" />
179
180
181
182
183
184
185
186
        </b-col>
        <b-col lg="4">
          <div v-if="loaded.categories">
            <p v-if="shows[currentShow].category.length === 0">
              <small><i>(none set)</i></small>
            </p>
            <p v-else>
              <ul>
187
                <li v-for="cat in current.categories" v-bind:key="cat.id">{{ cat.category }}</li>
188
189
190
191
192
              </ul>
            </p>
          </div>
          <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
        </b-col>
193

194
        <b-col lg="2">
195
          <b-badge style="width:80%;">Topics:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showTopics()" />
196
197
198
199
200
201
202
203
        </b-col>
        <b-col lg="4">
          <div v-if="loaded.topics">
            <p v-if="shows[currentShow].topic.length === 0">
              <small><i>(none set)</i></small>
            </p>
            <p v-else>
              <ul>
204
                <li v-for="topic in current.topics" v-bind:key="topic.id">{{ topic.topic }}</li>
205
206
207
208
209
              </ul>
            </p>
          </div>
          <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
        </b-col>
210

211
        <b-col lg="2">
212
          <b-badge style="width:80%;">Musicfocus:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showMusicFocus()" />
213
214
215
216
217
218
219
220
        </b-col>
        <b-col lg="4">
          <div v-if="loaded.musicfocus">
            <p v-if="shows[currentShow].musicfocus.length === 0">
              <small><i>(none set)</i></small>
            </p>
            <p v-else>
              <ul>
221
                <li v-for="focus in current.musicfocus" v-bind:key="focus.id">{{ focus.focus }}</li>
222
223
224
225
226
              </ul>
            </p>
          </div>
          <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
        </b-col>
227

228
        <b-col lg="2">
229
          <b-badge style="width:80%;">Languages:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showLanguages()" />
230
231
232
233
234
235
236
237
        </b-col>
        <b-col lg="4">
          <div v-if="loaded.languages">
            <p v-if="shows[currentShow].language.length === 0">
              <small><i>(none set)</i></small>
            </p>
            <p v-else>
              <ul>
238
                <li v-for="lang in current.languages" v-bind:key="lang.id">{{ lang.name }}</li>
239
240
241
242
243
              </ul>
            </p>
          </div>
          <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
        </b-col>
244

245
        <b-col lg="2">
246
          <b-badge style="width:80%;">Hosts:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showHosts()" />
247
248
249
250
251
252
253
254
255
        </b-col>
        <b-col lg="4">
          <div v-if="loaded.hosts">
            <p v-if="shows[currentShow].hosts.length === 0">
              <small><i>(none set)</i></small>
            </p>
            <p v-else>
              <!-- TODO: make link on name; when user clicks, open modal to edit host -->
              <ul>
256
                <li v-for="host in current.hosts" v-bind:key="host.id">{{ host.name }}</li>
257
258
259
260
261
262
263
              </ul>
            </p>
          </div>
          <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
        </b-col>

      </b-row>
264
265
266
267
268
269

      <b-row>
        <b-col lg="2">
          <b-badge style="width:80%;">Logo:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showLogo()" />
        </b-col>
        <b-col lg="4">
270
          <div v-if="current.logo.length === 0">
271
272
273
274
            <small><i>(none set)</i></small>
          </div>
          <div v-else>
            <br />
275
            <b-img thumbnail :src="current.logo" fluid  v-on:click="$refs.appModalShow.showLogo()" />
276
277
278
279
280
281
282
          </div>
        </b-col>

        <b-col lg="2">
          <b-badge style="width:80%;">Image:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="$refs.appModalShow.showImage()" />
        </b-col>
        <b-col lg="4">
283
          <div v-if="current.image.length === 0">
284
285
286
287
            <small><i>(none set)</i></small>
          </div>
          <div v-else>
            <br />
288
            <b-img thumbnail :src="current.image" fluid v-on:click="$refs.appModalShow.showImage()" />
289
290
291
292
293
294
          </div>
        </b-col>
      </b-row>

      <hr />

295
    </div>
296
  </b-container>
297
298
299
</template>

<script>
300
import modalNotes from './ShowManagerModalNotes.vue'
301
import modalShow from './ShowManagerModalShow.vue'
302
import timeslotSort from '../mixins/timeslotSort'
303
import prettyDate from '../mixins/prettyDate'
304
import axios from 'axios'
305
import DOMPurify from 'dompurify'
306
307

export default {
308
  components: {
309
310
    'app-modalNotes': modalNotes,
    'app-modalShow': modalShow
311
  },
312
313
  data () {
    return {
314
315
316
      shows: [],      // an array of objects describing our shows (empty at load, will be populated on created())
      currentShow: 0,   // index of the currently selected show in our shows array
      currentShowID: 0, // actual id of the currently selected show
317
      numSlots: process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS, // all form input values are provided as strings
318
      dateStart: this.apiDate(new Date()),
319
      dateEnd: this.apiDate(new Date(new Date().getTime() + process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS * 86400000)),
320
321
322
323
324
325
326
327
328
      loaded: {
        shows: false,
        timeslots: false,
        notes: false,
        categories: false,
        hosts: false,
        languages: false,
        topics: false,
        musicfocus: false,
329
        fundingcategory: false,
330
        type: false
331
332
333
334
335
336
337
      },
      current: {
        categories: [],
        hosts: [],
        languages: [],
        topics: [],
        musicfocus: [],
338
        fundingcategory: [],
339
        type: [],
340
341
342
343
        timeslots: [],
        timeslotmeta: {    // meta info when pagination is used
          count: 0,
          next: null,
344
345
346
          previous: null,
          page: 1,   // page indexes start at 1 for <b-pagination> components
          perpage: 10
347
348
        },
        note: {},
349
350
351
        notes: [],
        image: '',
        logo: ''
352
353
354
355
356
357
358
      },
      notesTableArrayFields: [
        { key: 'title', label: 'Title of emission' },
        { key: 'starts', label: 'Emission start' },
        { key: 'duration', label: 'Duration' },
        { key: 'options', label: 'Edit' }
      ]
359
360
    }
  },
361
  mixins: [ timeslotSort, prettyDate ],
362
  computed: {
363
364
365
366
    sanitizedShowDescription: function () {
      //return this.shows[this.currentShow].description.replace(/<[^>]*>/g, '')
      return DOMPurify.sanitize(this.shows[this.currentShow].description)
    },
367
368
    predecessorName: function () {
      for (var i in this.shows) {
369
        if (this.shows[i].id === this.shows[this.currentShow].predecessor) {
370
371
372
373
374
          return this.shows[i].name
        }
      }
      return 'Name of predecessor show not available'
    },
375
376
    notesTableArray: function () {
      var arr = []
377
378
379
      for (var i in this.current.timeslots) {
        var note = this.getNoteByTimeslotID(this.current.timeslots[i].id)
        if (note !== null) note = note.title
380
        arr.push({
381
382
          title: note,
          starts: this.prettyDateTime(this.current.timeslots[i].start),
383
          duration: this.prettyDuration(this.current.timeslots[i].start, this.current.timeslots[i].end),
384
385
386
387
          options: {
            id: this.current.timeslots[i].id,
            schedule: this.current.timeslots[i].schedule
          }
388
389
390
        })
      }
      return arr
391
392
393
    }
  },
  methods: {
394
395
396
397
398
    applyFilter: function () {
      this.current.timeslotmeta.page = 1
      this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
    },
    resetFilter: function () {
399
      this.numSlots = process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS
400
      this.dateStart = this.apiDate(new Date())
401
      this.dateEnd = this.apiDate(new Date(new Date().getTime() + process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS * 86400000))
402
403
404
405
406
407
408
409
410
      this.current.timeslotmeta.page = 1
      this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
    },
    timeslotsPage: function (page) {
      if (this.current.timeslotmeta.page !== page) {
        this.current.timeslotmeta.page = page
        this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots, (page - 1) * this.numSlots)
      }
    },
411
    switchShow: function (index) {
412
413
414
      // if we already had some show loaded with timeslots and notes, set these to
      // not loaded, so we don't display old timeslots and notes while already
      // the new show is displayed and new timeslots and notes are still loading
415
416
417
418
419
420
421
422
      this.loaded.timeslots = false
      this.loaded.notes = false
      // also for those settings of the show which are only ids or arrays of ids
      // we have to fetch the corresponding names first
      this.loaded.categories = false
      this.loaded.hosts = false
      this.loaded.languages = false
      this.loaded.musicfocus = false
423
      this.loaded.fundingcategory = false
424
      // set the current show and its ID to whatever we want to switch to now
425
      this.currentShow = index
426
      this.currentShowID = this.shows[this.currentShow].id
427
428
429
430
431
432
      // and check if images are available and set image strings, because we
      // cannot use them directly inside the b-img if they are null
      if (this.shows[this.currentShow].logo === null) this.current.logo = ''
      else this.current.logo = this.shows[this.currentShow].logo
      if (this.shows[this.currentShow].image === null) this.current.image = ''
      else this.current.image = this.shows[this.currentShow].image
433
434
435
436
437
438
      // before we load timeslots and notes, we want to fetch the general settings first
      this.getCategories()
      this.getHosts()
      this.getLanguages()
      this.getTopics()
      this.getMusicfocus()
439
      this.getFundingCategory()
440
      this.getType()
441
      // now fetch the timeslots (including notes) for a given show from PV backend
442
      this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
443
444
    },
    getTimeslots: function (start, end, limit, offset) {
445
      var dateRegex = new RegExp('^\\d{4}-\\d{2}-\\d{2}$')
446
      var uri = process.env.VUE_APP_API_STEERING_SHOWS + this.currentShowID + '/timeslots/?'
447
448
449
450
451
452
      if (dateRegex.test(start)) uri += 'start=' + start + '&'
      if (dateRegex.test(end)) uri += 'end=' + end + '&'
      if (!isNaN(parseInt(limit))) uri += 'limit=' + parseInt(limit) + '&'
      if (!isNaN(parseInt(offset))) uri += 'offset=' + parseInt(offset)
      this.loaded.timeslots = false
      this.loaded.notes = false
453
454
455
456
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
      }).then(response => {
457
458
        // if we use the limit argument results are paginated and look different
        // than without the limit argument
459
        if (!isNaN(parseInt(limit))) {
460
461
462
463
          this.current.timeslots = response.data.results
          this.current.timeslotmeta.count = response.data.count
          this.current.timeslotmeta.next = response.data.next
          this.current.timeslotmeta.previous = response.data.previous
464
          this.current.timeslotmeta.perpage = parseInt(limit)
465
        } else {
466
467
468
469
          this.current.timeslots = response.data
          this.current.timeslotmeta.count = response.data.length
          this.current.timeslotmeta.next = null
          this.current.timeslotmeta.previous = null
470
          this.current.timeslotmeta.perpage = response.data.length
471
        }
472
        this.loaded.timeslots = true
473
        // now that we have the timeslots we can fetch notes for all those timeslots
474
        uri = process.env.VUE_APP_API_STEERING_SHOWS + this.currentShowID + '/notes/?ids='
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
        // add all note IDs from the timeslots that have existing notes
        var thereIsANote = false
        for (var i in this.current.timeslots) {
          if (typeof this.current.timeslots[i].note_id === 'number') {
            uri += this.current.timeslots[i].note_id + ','
            thereIsANote = true
          }
        }
        // now remove trailing ',' if at least one note already exists
        // and make the api call to fetch them
        if (thereIsANote) {
          uri = uri.slice(0, -1)
          axios.get(uri, {
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).then(response => {
            this.current.notes = response.data
            this.loaded.notes = true
          }).catch(error => {
            alert('There was an error fetching notes from the server' + error)
          })
          // done fetching notes
        } else {
          // if no notes exist that correspond to our selected timeslots, empty
          // the corresponding array
          this.current.notes = []
        }
502
      }).catch(error => {
503
504
        console.log(error)
        alert('There was an error fetching timeslots from the server\n' + error)
505
      })
506
507
      // done fetching timeslots
    },
508
509
    editTimeslotNote: function (timeslotID, scheduleID) {
      this.current.note = null
510
511
512
      for (var i in this.current.notes) {
        if (this.current.notes[i].timeslot === timeslotID) {
          this.current.note = this.current.notes[i]
513
514
515
          break
        }
      }
516
      this.$refs.appModalNotes.showModal(this.current.note, timeslotID, scheduleID)
517
    },
518
519
520
521
    getNoteByTimeslotID: function (timeslotID) {
      for (var i in this.current.notes) {
        if (this.current.notes[i].timeslot === timeslotID && this.current.notes[i].title !== undefined) {
          return this.current.notes[i]
522
523
524
525
        }
      }
      return null
    },
526
    prettyTimeslotNote: function (timeslotID) {
527
      var note = this.getTimeslotNoteTitle(timeslotID)
528
529
530
531
532
533
      if (note !== null) {
        return this.prettyTitle(note)
      } else {
        return ''
      }
    },
534
535
536
537
538
    prettyTitle: function (title) {
      if (title === '') return '...'
      else if (title.length > 25) return title.slice(0, 25) + '...'
      else return title
    },
539
540
541
542
543
544
545
546
547
548
    // TODO: all thos getSomething functions could be probably merged into one
    // generic getItem function. Maybe this.current should be an associative array
    // instead of an object then?
    getCategories: function () {
      this.current.categories = []
      var loadingError = false
      if (this.shows[this.currentShow].category.length === 0) {
        this.loaded.categories = true
      } else {
        for (var i in this.shows[this.currentShow].category) {
549
          axios.get(process.env.VUE_APP_API_STEERING + 'categories/' + this.shows[this.currentShow].category[i] + '/', {
550
551
552
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).then(response => {
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
            this.current.categories.push(response.data)
          }).catch(error => {
            loadingError = true
            alert('There was an error fetching categories from the server: ' + error)
          })
        }
        if (!loadingError) this.loaded.categories = true
      }
    },
    getHosts: function () {
      this.current.hosts = []
      var loadingError = false
      if (this.shows[this.currentShow].hosts.length === 0) {
        this.loaded.hosts = true
      } else {
        for (var i in this.shows[this.currentShow].hosts) {
569
          axios.get(process.env.VUE_APP_API_STEERING + 'hosts/' + this.shows[this.currentShow].hosts[i] + '/', {
570
571
572
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).then(response => {
573
574
575
576
577
578
579
580
581
582
583
584
585
            this.current.hosts.push(response.data)
          }).catch(error => {
            loadingError = true
            alert('There was an error fetching hosts from the server: ' + error)
          })
        }
        if (!loadingError) this.loaded.hosts = true
      }
    },
    getLanguages: function () {
      this.current.languages = []
      var loadingError = false
      if (this.shows[this.currentShow].language.length === 0) {
586
        this.loaded.languages = true
587
588
      } else {
        for (var i in this.shows[this.currentShow].language) {
589
          axios.get(process.env.VUE_APP_API_STEERING + 'languages/' + this.shows[this.currentShow].language[i] + '/', {
590
591
592
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).then(response => {
593
594
595
596
597
598
            this.current.languages.push(response.data)
          }).catch(error => {
            loadingError = true
            alert('There was an error fetching languages from the server: ' + error)
          })
        }
599
        if (!loadingError) this.loaded.languages = true
600
601
602
603
604
605
606
607
608
      }
    },
    getTopics: function () {
      this.current.topics = []
      var loadingError = false
      if (this.shows[this.currentShow].topic.length === 0) {
        this.loaded.topics = true
      } else {
        for (var i in this.shows[this.currentShow].topic) {
609
          axios.get(process.env.VUE_APP_API_STEERING + 'topics/' + this.shows[this.currentShow].topic[i] + '/', {
610
611
612
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).then(response => {
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
            this.current.topics.push(response.data)
          }).catch(error => {
            loadingError = true
            alert('There was an error fetching topics from the server: ' + error)
          })
        }
        if (!loadingError) this.loaded.topics = true
      }
    },
    getMusicfocus: function () {
      this.current.musicfocus = []
      var loadingError = false
      if (this.shows[this.currentShow].musicfocus.length === 0) {
        this.loaded.musicfocus = true
      } else {
        for (var i in this.shows[this.currentShow].musicfocus) {
629
          axios.get(process.env.VUE_APP_API_STEERING + 'musicfocus/' + this.shows[this.currentShow].musicfocus[i] + '/', {
630
631
632
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
          }).then(response => {
633
634
635
636
637
638
639
640
641
            this.current.musicfocus.push(response.data)
          }).catch(error => {
            loadingError = true
            alert('There was an error fetching musicfocus from the server: ' + error)
          })
        }
      }
      if (!loadingError) this.loaded.musicfocus = true
    },
642
    getFundingCategory: function () {
643
      this.current.fundingcategory = []
644
      var loadingError = false
645
646
      if (typeof this.shows[this.currentShow].fundingcategory !== 'number') {
        this.loaded.fundingcategory = true
647
      } else {
648
        axios.get(process.env.VUE_APP_API_STEERING + 'fundingcategories/' + this.shows[this.currentShow].fundingcategory + '/', {
649
650
651
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
        }).then(response => {
652
          this.current.fundingcategory.push(response.data)
653
654
        }).catch(error => {
          loadingError = true
655
          alert('There was an error fetching funding category from the server: ' + error)
656
657
        })
      }
658
      if (!loadingError) this.loaded.fundingcategory = true
659
660
661
662
663
664
665
    },
    getType: function () {
      this.current.type = []
      var loadingError = false
      if (typeof this.shows[this.currentShow].type !== 'number') {
        this.loaded.type = true
      } else {
666
        axios.get(process.env.VUE_APP_API_STEERING + 'types/' + this.shows[this.currentShow].type + '/', {
667
668
669
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
        }).then(response => {
670
671
672
673
674
          this.current.type.push(response.data)
        }).catch(error => {
          loadingError = true
          alert('There was an error fetching show type from the server: ' + error)
        })
675
      }
676
      if (!loadingError) this.loaded.type = true
677
    },
678
    notYetImplemented: function () {
679
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
680
681
682
    }
  },
  created () {
683
    var uri = process.env.VUE_APP_API_STEERING_SHOWS
684
685
686
687
    if (!this.$parent.user.steeringUser.is_superuser) {
      uri += '?owner=' + this.$parent.user.steeringUser.id
    }
    axios.get(uri, {
688
689
690
      withCredentials: true,
      headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
    }).then(response => {
691
692
693
694
      if (response.data.length === 0) {
        alert('There are now shows associated with your account!')
        return
      }
695
696
697
      this.shows = response.data
      this.currentShowID = this.shows[0].id
      this.currentShow = 0
698
      this.loaded.shows = true
699
700
701
      this.switchShow(this.currentShow)
    }).catch(error => {
      alert('There was an error fetching shows from the server: ' + error)
702
703
704
705
706
    })
  }
}
</script>

707
<style>
708
709
710
711
712
713
714
715
716
span.timeslotEditLink {
  color: #8d5f82 !important;
  font-weight: bold;
  font-size: 0.8em;
  padding: 0.25em;
}
span.timeslotEditLink:hover {
  color: #ad7fa8 !important;
}
717
</style>