ShowManager.vue 9.66 KB
Newer Older
1
<template>
2
3
  <b-container>
    <div>
4
5
6
7
8
9
10
11
12
13
14
15
16
      <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">
            <b-dropdown-item v-for="(show, index) in this.shows" v-on:click="switchShow(index)">{{ show.name }}</b-dropdown-item>
          </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="episodesLoaded">
24
25
26
        <div class="row">
          <div class="col-6">
            <div v-for="episode in this.episodesFutureShowFirstHalf">
27
28
29
30
31
32
              <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>
33
          </div>
34
35
          <div class="col-6">
            <div v-for="episode in this.episodesFutureShowSecondHalf">
36
37
38
39
              <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>
40
              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
41
            </div>
42
          </div>
43
44
        </div>
      </div>
45
      <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
46

47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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
      <div class="recentepisodes">
        <p>Die letzten <select v-model="numRecent">
          <option>8</option>
          <option>16</option>
          <option value="all">alle</option>
        </select> Sendungen:</p>
        <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>
            </div>
            <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>
            </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>
92
      </div>
93
    </div>
94
  </b-container>
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
</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: [],
111
112
113
114
      showsLoaded: false,
      episodesLoaded: false,
      currentShow: 0,
      currentShowID: 0,
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
147
      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: {
148
    switchShow: function (index) {
149
      this.episodesLoaded = false
150
      this.currentShow = index
151
      this.currentShowID = this.shows[this.currentShow].id
152
      // fetch single episodes for a given show from PV backend
153
      this.$http.post(process.env.API_STEERING, {
154
155
        action: 'query',
        query: 'episodes',
156
        show_id: this.currentShowID,
157
158
159
160
161
162
        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
163
          this.episodesLoaded = true
164
165
166
167
168
169
170
        }
      }, response => {
        alert('There was an error fetching the data from the server')
      })
    },
    prettyDate: function (date) {
      var d = new Date(date)
171
      return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth()) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
172
173
    },
    prettyDuration: function (start, end) {
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
      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.')
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.post(process.env.API_STEERING, {
200
201
202
203
204
205
206
      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
207
208
209
        this.currentShowID = this.shows[0].id
        this.currentShow = 0
        this.showsLoaded = true
210
        this.switchShow(this.currentShow)
211
212
213
214
215
216
217
218
      }
    }, response => {
      alert('There was an error fetching the data from the server')
    })
  }
}
</script>

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