ShowManager.vue 4.68 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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
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
146
147
148
149
150
151
152
153
154
<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>

    <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 v-for="episode in this.episodesFutureShowFirstHalf">
          {{ prettyDate(episode.start) }}
        </div>
      </div>
      <div class="col span_2_of_4">
        <div v-for="episode in this.episodesFutureShowSecondHalf">
          {{ episode.start }}
        </div>
      </div>
    </div>

    <p align="left">Die letzten <select v-model="numRecent">
      <option>8</option>
      <option>16</option>
      <option>alle</option>
    </select> Sendungen:</p>
    <div class="section group">
      <div class="col span_2_of_4">
        <div v-for="episode in this.episodesPastShowFirstHalf">
          {{ episode.start }}
        </div>
      </div>
      <div class="col span_2_of_4">
        <div v-for="episode in this.episodesPastShowSecondHalf">
          {{ episode.start }}
        </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)
      return leadingZero(d.getDate()) + '. ' + leadingZero(d.getMonth()) + '. ' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
    },
    prettyDuration: function (start, end) {
      
    }
  },
  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>

<style>

</style>