ShowManager.vue 9.27 KB
Newer Older
1
<template>
2
3
  <b-container>
    <div>
4
5
6
7
8
9
10
      <b-row v-if="showsLoaded">
        <b-col>
          Aktuell ausgewählt: &nbsp;&nbsp;
          <b-button disabled variant="outline-secondary"><b>{{ shows[currentShow].name }}</b></b-button>
        </b-col>
        <b-col align="right">
          <b-dropdown id="ddshows" text="Sendereihe auswählen" variant="info">
11
            <b-dropdown-item v-for="(show, index) in this.shows" :key="show.id" v-on:click="switchShow(index)">{{ show.name }}</b-dropdown-item>
12
13
14
15
16
          </b-dropdown>
        </b-col>
      </b-row>
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
      <hr />
17

18
      <p align="left">Die nächsten <select v-model="numUpcoming">
19
20
21
22
        <option>8</option>
        <option>16</option>
        <option value="all">alle</option>
      </select> Sendungen:</p>
23
      <div v-if="timeslotsLoaded">
24
        <div class="row">
25
26
27
          <div class="col-12">
            <div v-for="timeslot in this.timeslotsFutureShow">
              <img v-if="timeslot.playlist_id === null" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
28
              <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
29
30
31
              {{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
              <span v-if="notesLoaded">{{ prettyTimeslotNote(timeslot.id) }}</span>
              <span v-else style="background: ../assets/radio.gif"></span>
32
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
33
            </div>
34
          </div>
35
36
        </div>
      </div>
37
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
38

39
      <div class="recenttimeslots">
40
41
42
43
44
        <p>Die letzten <select v-model="numRecent">
          <option>8</option>
          <option>16</option>
          <option value="all">alle</option>
        </select> Sendungen:</p>
45
46
47
48
49
        <div v-if="timeslotsLoaded">
          <div class="row">
            <div class="col-12">
              <div v-for="timeslot in this.timeslotsPastShow">
                <img v-if="timeslot.playlist_id === null" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
50
                <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
51
52
53
                {{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
                <span v-if="notesLoaded">{{ prettyTimeslotNote(timeslot.id) }}</span>
                <span v-else style="background: ../assets/radio.gif"></span>
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
                <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
              </div>
            </div>
          </div>
        </div>
        <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
      </div>
      <hr />

      <div class="showsettings">
        <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
        <div v-if="showsLoaded">
          <p>
            <span v-if="shows[currentShow].short_description === ''"><b>Kurzbeschreibung:</b><i>(noch keine Kurzbeschreibung eingetragen)</i></span>
            <span v-else="shows[currentShow].short_description === ''"><b>Kurzbeschreibung</b><br />{{ shows[currentShow].short_description }}</span>
            <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setShortDescription" />
          </p>
          <p>
            CBA-Url: <a v-bind:href="shows[currentShow].cba_url">{{ shows[currentShow].cba_url }}</a> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setShortDescription" />
          </p>
        </div>
        <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
76
      </div>
77
    </div>
78
  </b-container>
79
80
81
</template>

<script>
82
import timeslotSort from '../mixins/timeslotSort'
83
84
85
86
87
88
89
90
91

function leadingZero (num) {
  if (num < 10) return '0' + num
  else return num.toString()
}

export default {
  data () {
    return {
92
93
94
      shows: [],      // an array of objects describing our shows (empty at load, will be populated on created())
      timeslots: [],  // same as with shows, only for the related timeslots
      notes: [],      // same as with shows, only for the related notes
95
      showsLoaded: false,
96
97
98
99
      timeslotsLoaded: false,
      notesLoaded: false,
      currentShow: 0,   // index of the currently selected show in our shows array
      currentShowID: 0, // actual id of the currently selected show
100
101
102
103
      numUpcoming: 8,
      numRecent: 8
    }
  },
104
  mixins: [ timeslotSort ],
105
  computed: {
106
107
108
    timeslotsFutureShow: function () {
      if (this.numUpcoming === 'all') return this.timeslotsFuture
      else return this.timeslotsFuture.slice(0, this.numUpcoming)
109
    },
110
111
112
113
    timeslotsPastShow: function () {
      // if (this.numRecent === 'all') return this.timeslotsPast
      // else return this.timeslotsPast.slice(0, this.numRecent)
      return this.timeslotsPast
114
115
116
    }
  },
  methods: {
117
    switchShow: function (index) {
118
119
120
121
122
123
      // 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
      this.timeslotsLoaded = false
      this.notesLoaded = false
      // set the current show and its ID to whatever we want to switch to now
124
      this.currentShow = index
125
      this.currentShowID = this.shows[this.currentShow].id
126
127
      // now fetch the single timeslots for a given show from PV backend
      this.$http.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots').then(response => {
128
129
        if (response.body.hasOwnProperty('error')) alert(response.body.error)
        else {
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
          this.timeslots = response.body
          this.timeslotsLoaded = true
          // now that we have the timeslots we can fetch notes for all those timeslots
          // TODO: curently we are fetching all notes for the show into a single array
          // for bigger data sets it might be preferable to fetch only the notes for those
          // timeslots that are also visible to the user
          this.$http.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes').then(response => {
            if (response.body.hasOwnProperty('error')) alert(response.body.error)
            else {
              this.notes = response.body
              this.notesLoaded = true
            }
          }, response => {
            alert('There was an error fetching notes from the server')
          })
          // done fetching notes
146
147
        }
      }, response => {
148
        alert('There was an error fetching timeslots from the server')
149
      })
150
151
152
153
154
155
156
157
158
      // done fetching timeslots
    },
    getTimeslotNote: function (timeslotID) {
      for (var n in this.notes) {
        if (this.notes[n].timeslot === timeslotID && this.notes[n].title !== undefined) {
          return this.notes[n].title
        }
      }
      return null
159
160
161
    },
    prettyDate: function (date) {
      var d = new Date(date)
162
163
      // note: Date.getMonth() returns the month as an index from 0 to 11
      return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth() + 1) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
164
165
    },
    prettyDuration: function (start, end) {
166
167
168
169
170
      var duration = (new Date(end).getTime() - new Date(start).getTime()) / 1000
      var hours = Math.floor(duration / 60 / 60)
      var minutes = (duration / 60) % 60
      return leadingZero(hours) + ':' + leadingZero(minutes)
    },
171
172
173
174
175
176
177
178
    prettyTimeslotNote: function (timeslotID) {
      var note = this.getTimeslotNote(timeslotID)
      if (note !== null) {
        return this.prettyTitle(note)
      } else {
        return ''
      }
    },
179
180
181
182
183
184
185
186
187
188
189
190
191
    prettyTitle: function (title) {
      if (title === '') return '...'
      else if (title.length > 25) return title.slice(0, 25) + '...'
      else return title
    },
    editEpisode: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
    },
    setPlaylist: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
    },
    playPlaylist: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
192
193
194
    },
    setShortDescription: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
195
196
197
198
    }
  },
  created () {
    // fetch sendereihen from PV backend
199
    this.$http.get(process.env.API_STEERING_SHOWS).then(response => {
200
201
202
      if (response.body.hasOwnProperty('error')) {
        alert(response.body.error)
      } else {
203
        this.shows = response.body
204
205
206
        this.currentShowID = this.shows[0].id
        this.currentShow = 0
        this.showsLoaded = true
207
        this.switchShow(this.currentShow)
208
209
      }
    }, response => {
210
      alert('There was an error fetching shows from the server')
211
212
213
214
215
    })
  }
}
</script>

216
<style scoped>
217
div.recenttimeslots {
218
219
  margin-top: 2em;
}
220
.showsettings, .recenttimeslots, .nexttimeslots {
221
222
  text-align: left;
}
223
</style>