ShowManager.vue 9.14 KB
Newer Older
1
2
3
<template>
  <div>
    <h1>Sendereihen &amp; Sendungen</h1>
4
5
    <div class="row">
      <div class="col">
6
        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
20
21
22
23
24
25
26
27
    <p align="left">Die nächsten <select v-model="numUpcoming">
      <option>8</option>
      <option>16</option>
      <option value="all">alle</option>
    </select> Sendungen:</p>
    <div v-if="episodesLoaded">
      <div class="row">
        <div class="col-6">
          <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" />
28
          </div>
29
30
31
32
33
34
35
36
        </div>
        <div class="col-6">
          <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" />
37
          </div>
38
39
40
        </div>
      </div>
    </div>
41
    <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
42

43
    <div class="recentepisodes">
44
      <p>Die letzten <select v-model="numRecent">
45
46
47
48
        <option>8</option>
        <option>16</option>
        <option value="all">alle</option>
      </select> Sendungen:</p>
49
50
51
52
53
54
55
56
57
58
      <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>
59
          </div>
60
61
62
63
64
65
66
67
          <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>
68
          </div>
69
70
        </div>
      </div>
71
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
72
73
74
    </div>
    <hr />

75
76
77
78
79
80
81
82
    <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>
83
84
85
        <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>
86
87
      </div>
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
    </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: [],
106
107
108
109
      showsLoaded: false,
      episodesLoaded: false,
      currentShow: 0,
      currentShowID: 0,
110
111
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
      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 () {
144
145
      this.episodesLoaded = false
      this.currentShowID = this.shows[this.currentShow].id
146
      // fetch single episodes for a given show from PV backend
147
      this.$http.post(process.env.API_STEERING, {
148
149
        action: 'query',
        query: 'episodes',
150
        show_id: this.currentShowID,
151
152
153
154
155
156
        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
157
          this.episodesLoaded = true
158
159
160
161
162
163
164
        }
      }, response => {
        alert('There was an error fetching the data from the server')
      })
    },
    prettyDate: function (date) {
      var d = new Date(date)
165
      return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth()) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
166
167
    },
    prettyDuration: function (start, end) {
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
      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.')
186
187
188
    },
    setShortDescription: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
189
190
191
192
    }
  },
  created () {
    // fetch sendereihen from PV backend
193
    this.$http.post(process.env.API_STEERING, {
194
195
196
197
198
199
200
      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
201
202
203
        this.currentShowID = this.shows[0].id
        this.currentShow = 0
        this.showsLoaded = true
204
205
206
207
208
209
210
211
212
        this.switchShow()
      }
    }, response => {
      alert('There was an error fetching the data from the server')
    })
  }
}
</script>

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