ShowManager.vue 9.28 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
    </div>
  </div>
</template>

<script>
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: [],
108
109
110
111
      showsLoaded: false,
      episodesLoaded: false,
      currentShow: 0,
      currentShowID: 0,
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
137
138
139
140
141
142
143
144
145
      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 () {
146
147
      this.episodesLoaded = false
      this.currentShowID = this.shows[this.currentShow].id
148
      // fetch single episodes for a given show from PV backend
149
      this.$http.post(process.env.API_STEERING, {
150
151
        action: 'query',
        query: 'episodes',
152
        show_id: this.currentShowID,
153
154
155
156
157
158
        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
159
          this.episodesLoaded = true
160
161
162
163
164
165
166
        }
      }, response => {
        alert('There was an error fetching the data from the server')
      })
    },
    prettyDate: function (date) {
      var d = new Date(date)
167
      return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth()) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
168
169
    },
    prettyDuration: function (start, end) {
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
      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.')
188
189
190
    },
    setShortDescription: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
191
192
193
194
    }
  },
  created () {
    // fetch sendereihen from PV backend
195
    this.$http.post(process.env.API_STEERING, {
196
197
198
199
200
201
202
      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
203
204
205
        this.currentShowID = this.shows[0].id
        this.currentShow = 0
        this.showsLoaded = true
206
207
208
209
210
211
212
213
214
        this.switchShow()
      }
    }, response => {
      alert('There was an error fetching the data from the server')
    })
  }
}
</script>

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