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

14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    <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>
      <div class="section group">
        <div class="col span_2_of_4">
          <div align="left" 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>
29
        </div>
30
31
32
33
34
35
36
37
        <div align="left" 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>
38
39
40
41
        </div>
      </div>
    </div>

42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
    <div class="recentepisodes">
      <p align="left">Die letzten <select v-model="numRecent">
        <option>8</option>
        <option>16</option>
        <option value="all">alle</option>
      </select> Sendungen:</p>
      <div class="section group">
        <div class="col span_2_of_4">
          <div align="left" 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>
57
        </div>
58
59
60
61
62
63
64
65
        <div class="col span_2_of_4">
          <div align="left" 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>
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
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
144
145
        </div>
      </div>
    </div>
    <hr />

    <p align="left">Allgemeine Einstellungen zur Sendereihe:</p>
    <div>
      ...
    </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: [],
      newShow: 0,
      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 () {
      // fetch single episodes for a given show from PV backend
      this.$http.post(config.api_pv, {
        action: 'query',
        query: 'episodes',
        show_id: this.newShow,
        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
        }
      }, response => {
        alert('There was an error fetching the data from the server')
      })
    },
    prettyDate: function (date) {
      var d = new Date(date)
146
      return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth()) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
147
148
    },
    prettyDuration: function (start, end) {
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
      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.')
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
    }
  },
  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
        this.newShow = this.shows[0].id
        this.switchShow()
      }
    }, response => {
      alert('There was an error fetching the data from the server')
    })
  }
}
</script>

189
190
191
192
<style scoped>
div.recentepisodes {
  margin-top: 2em;
}
193
</style>