ShowManager.vue 9.29 KB
Newer Older
1
2
3
4
5
6
<template>
  <div>
    <h1>Sendereihen &amp; Sendungen</h1>
    <div class="section group">
      <div class="col span_4_of_4">
        Aktuelle Sendereihe:
7
8
        <select v-model="currentShow" v-on:change="switchShow">
          <option v-for="(show, index) in this.shows" v-bind:value="index">{{ show.name }}</option>
9
10
11
12
13
        </select>
        <hr />
      </div>
    </div>

14
15
16
17
18
19
    <div class="nextepisodes">
      <p align="left">Die nächsten <select v-model="numUpcoming">
        <option>8</option>
        <option>16</option>
        <option value="all">alle</option>
      </select> Sendungen:</p>
20
21
22
23
24
25
26
27
28
29
      <div v-if="episodesLoaded">
        <div class="section group">
          <div class="col span_2_of_4">
            <div v-for="episode in this.episodesFutureShowFirstHalf">
              <img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
              <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
              {{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
              <span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
            </div>
30
          </div>
31
32
33
34
35
36
37
38
          <div class="col span_2_of_4">
            <div v-for="episode in this.episodesFutureShowSecondHalf">
              <img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
              <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
              {{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
              <span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
            </div>
39
          </div>
40
41
        </div>
      </div>
42
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
43
44
    </div>

45
    <div class="recentepisodes">
46
      <p>Die letzten <select v-model="numRecent">
47
48
49
50
        <option>8</option>
        <option>16</option>
        <option value="all">alle</option>
      </select> Sendungen:</p>
51
52
53
54
55
56
57
58
59
60
      <div v-if="episodesLoaded">
        <div class="section group">
          <div class="col span_2_of_4">
            <div v-for="episode in this.episodesPastShowFirstHalf">
              <img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
              <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
              {{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
              <span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
            </div>
61
          </div>
62
63
64
65
66
67
68
69
          <div class="col span_2_of_4">
            <div v-for="episode in this.episodesPastShowSecondHalf">
              <img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
              <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
              {{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
              <span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="editEpisode" />
            </div>
70
          </div>
71
72
        </div>
      </div>
73
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
74
75
76
    </div>
    <hr />

77
78
79
80
81
82
83
84
    <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>
85
86
87
        <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>
88
89
      </div>
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
    </div>
  </div>
</template>

<script>
import config from '../config'
import episodeSort from '../mixins/episodeSort'

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

export default {
  data () {
    return {
      // an array of objects describing sendereihen (empty at load, will be populated on created())
      shows: [],
      episodes: [],
109
110
111
112
      showsLoaded: false,
      episodesLoaded: false,
      currentShow: 0,
      currentShowID: 0,
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
      numShows: 0,
      numUpcoming: 8,
      numRecent: 8
    }
  },
  mixins: [ episodeSort ],
  computed: {
    episodesFutureShow: function () {
      if (this.numUpcoming === 'all') return this.episodesFuture
      else return this.episodesFuture.slice(0, this.numUpcoming)
    },
    episodesFutureShowFirstHalf: function () {
      if (this.numUpcoming === 'all') return this.episodesFuture.slice(0, this.episodesFuture.length / 2)
      else return this.episodesFuture.slice(0, this.numUpcoming / 2)
    },
    episodesFutureShowSecondHalf: function () {
      if (this.numUpcoming === 'all') return this.episodesFuture.slice(this.episodesFuture.length / 2)
      else return this.episodesFuture.slice(this.numUpcoming / 2, this.numUpcoming)
    },
    episodesPastShow: function () {
      if (this.numRecent === 'all') return this.episodesPast
      else return this.episodesPast.slice(0, this.numRecent)
    },
    episodesPastShowFirstHalf: function () {
      if (this.numRecent === 'all') return this.episodesPast.slice(0, this.episodesPast.length / 2)
      else return this.episodesPast.slice(0, this.numRecent / 2)
    },
    episodesPastShowSecondHalf: function () {
      if (this.numRecent === 'all') return this.episodesPast.slice(this.episodesPast.length / 2)
      else return this.episodesPast.slice(this.numRecent / 2, this.numRecent)
    }
  },
  methods: {
    switchShow: function () {
147
148
      this.episodesLoaded = false
      this.currentShowID = this.shows[this.currentShow].id
149
150
151
152
      // fetch single episodes for a given show from PV backend
      this.$http.post(config.api_pv, {
        action: 'query',
        query: 'episodes',
153
        show_id: this.currentShowID,
154
155
156
157
158
159
        api_key: 'D1EB23A42F'
      }, { emulateJSON: true }).then(response => {
        if (response.body.hasOwnProperty('error')) alert(response.body.error)
        else {
          this.episodes = response.body
          this.numShows = this.episodes.length
160
          this.episodesLoaded = true
161
162
163
164
165
166
167
        }
      }, response => {
        alert('There was an error fetching the data from the server')
      })
    },
    prettyDate: function (date) {
      var d = new Date(date)
168
      return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth()) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
169
170
    },
    prettyDuration: function (start, end) {
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
      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)
    },
    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.')
189
190
191
    },
    setShortDescription: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
192
193
194
195
196
197
198
199
200
201
202
203
    }
  },
  created () {
    // fetch sendereihen from PV backend
    this.$http.post(config.api_pv, {
      action: 'query',
      query: 'shows',
      api_key: 'D1EB23A42F'
    }, { emulateJSON: true }).then(response => {
      if (response.body.hasOwnProperty('error')) alert(response.body.error)
      else {
        this.shows = response.body
204
205
206
        this.currentShowID = this.shows[0].id
        this.currentShow = 0
        this.showsLoaded = true
207
208
209
210
211
212
213
214
215
        this.switchShow()
      }
    }, response => {
      alert('There was an error fetching the data from the server')
    })
  }
}
</script>

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