Skip to content

GitLab

Commit 68c0fa34 authored by Andrea Ida Malkah Klaura's avatar Andrea Ida Malkah Klaura
Browse files

adapted show manager to autoradio api/v1

parent be350289
Hide whitespace changes
Inline Side-by-side
config/dev.env.js
View file @ 68c0fa34
......@@ -4,8 +4,8 @@ const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_STEERING: '"https://autoradio-testing.o94.at/api.php"',
API_STEERING_SHOWS: '"https://autoradio-testing.o94.at/api.php"',
API_STEERING: '"http://127.0.0.1:3000/api/v1/"',
API_STEERING_SHOWS: '"http://127.0.0.1:3000/api/v1/shows/"'
//API_STEERING: '"http://127.0.0.1:8000/api/v1/"',
//API_STEERING_SHOWS: '"http://127.0.0.1:8000/api/v1/shows/"'
})
src/components/ShowManager.vue
View file @ 68c0fa34
......@@ -8,7 +8,7 @@
</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-item v-for="(show, index) in this.shows" :key="show.id" v-on:click="switchShow(index)">{{ show.name }}</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
......@@ -20,23 +20,15 @@
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<div v-if="episodesLoaded">
<div v-if="timeslotsLoaded">
<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" />
<div class="col-12">
<div v-for="timeslot in this.timeslotsFutureShow">
<img v-if="timeslot.playlist_id === null" 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-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>
{{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
<span v-if="notesLoaded">{{ prettyTimeslotNote(timeslot.id) }}</span>
<span v-else style="background: ../assets/radio.gif"></span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
</div>
</div>
......@@ -44,32 +36,24 @@
</div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
<div class="recentepisodes">
<div class="recenttimeslots">
<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" />
<div v-if="timeslotsLoaded">
<div class="row">
<div class="col-12">
<div v-for="timeslot in this.timeslotsPastShow">
<img v-if="timeslot.playlist_id === null" 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>
{{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
<span v-if="notesLoaded">{{ prettyTimeslotNote(timeslot.id) }}</span>
<span v-else style="background: ../assets/radio.gif"></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>
......@@ -95,7 +79,7 @@
</template>
<script>
import episodeSort from '../mixins/episodeSort'
import timeslotSort from '../mixins/timeslotSort'
function leadingZero (num) {
if (num < 10) return '0' + num
......@@ -105,70 +89,78 @@ function leadingZero (num) {
export default {
data () {
return {
// an array of objects describing sendereihen (empty at load, will be populated on created())
shows: [],
episodes: [],
shows: [], // an array of objects describing our shows (empty at load, will be populated on created())
timeslots: [], // same as with shows, only for the related timeslots
notes: [], // same as with shows, only for the related notes
showsLoaded: false,
episodesLoaded: false,
currentShow: 0,
currentShowID: 0,
numShows: 0,
timeslotsLoaded: false,
notesLoaded: false,
currentShow: 0, // index of the currently selected show in our shows array
currentShowID: 0, // actual id of the currently selected show
numUpcoming: 8,
numRecent: 8
}
},
mixins: [ episodeSort ],
mixins: [ timeslotSort ],
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)
timeslotsFutureShow: function () {
if (this.numUpcoming === 'all') return this.timeslotsFuture
else return this.timeslotsFuture.slice(0, 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)
timeslotsPastShow: function () {
// if (this.numRecent === 'all') return this.timeslotsPast
// else return this.timeslotsPast.slice(0, this.numRecent)
return this.timeslotsPast
}
},
methods: {
switchShow: function (index) {
this.episodesLoaded = false
// if we already had some show loaded with timeslots and notes, set these to
// not loaded, so we don't display old timeslots and notes while already
// the new show is displayed and new timeslots and notes are still loading
this.timeslotsLoaded = false
this.notesLoaded = false
// set the current show and its ID to whatever we want to switch to now
this.currentShow = index
this.currentShowID = this.shows[this.currentShow].id
// fetch single episodes for a given show from PV backend
this.$http.post(process.env.API_STEERING, {
action: 'query',
query: 'episodes',
show_id: this.currentShowID,
api_key: 'D1EB23A42F'
}, { emulateJSON: true }).then(response => {
// now fetch the single timeslots for a given show from PV backend
this.$http.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots').then(response => {
if (response.body.hasOwnProperty('error')) alert(response.body.error)
else {
this.episodes = response.body
this.numShows = this.episodes.length
this.episodesLoaded = true
this.timeslots = response.body
this.timeslotsLoaded = true
// now that we have the timeslots we can fetch notes for all those timeslots
// TODO: curently we are fetching all notes for the show into a single array
// for bigger data sets it might be preferable to fetch only the notes for those
// timeslots that are also visible to the user
this.$http.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes').then(response => {
if (response.body.hasOwnProperty('error')) alert(response.body.error)
else {
this.notes = response.body
this.notesLoaded = true
}
}, response => {
alert('There was an error fetching notes from the server')
})
// done fetching notes
}
}, response => {
alert('There was an error fetching the data from the server')
alert('There was an error fetching timeslots from the server')
})
// done fetching timeslots
},
getTimeslotNote: function (timeslotID) {
for (var n in this.notes) {
if (this.notes[n].timeslot === timeslotID && this.notes[n].title !== undefined) {
return this.notes[n].title
}
}
return null
},
prettyDate: function (date) {
var d = new Date(date)
return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth()) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
// note: Date.getMonth() returns the month as an index from 0 to 11
return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth() + 1) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
},
prettyDuration: function (start, end) {
var duration = (new Date(end).getTime() - new Date(start).getTime()) / 1000
......@@ -176,6 +168,14 @@ export default {
var minutes = (duration / 60) % 60
return leadingZero(hours) + ':' + leadingZero(minutes)
},
prettyTimeslotNote: function (timeslotID) {
var note = this.getTimeslotNote(timeslotID)
if (note !== null) {
return this.prettyTitle(note)
} else {
return ''
}
},
prettyTitle: function (title) {
if (title === '') return '...'
else if (title.length > 25) return title.slice(0, 25) + '...'
......@@ -196,11 +196,7 @@ export default {
},
created () {
// fetch sendereihen from PV backend
this.$http.post(process.env.API_STEERING, {
action: 'query',
query: 'shows',
api_key: 'D1EB23A42F'
}, { emulateJSON: true }).then(response => {
this.$http.get(process.env.API_STEERING_SHOWS).then(response => {
if (response.body.hasOwnProperty('error')) {
alert(response.body.error)
} else {
......@@ -211,17 +207,17 @@ export default {
this.switchShow(this.currentShow)
}
}, response => {
alert('There was an error fetching the data from the server')
alert('There was an error fetching shows from the server')
})
}
}
</script>
<style scoped>
div.recentepisodes {
div.recenttimeslots {
margin-top: 2em;
}
.showsettings, .recentepisodes, .nextepisodes {
.showsettings, .recenttimeslots, .nexttimeslots {
text-align: left;
}
</style>
src/mixins/episodeSort.js → src/mixins/timeslotSort.js
View file @ 68c0fa34
......@@ -8,28 +8,28 @@ function compareEpisodesByDate (a, b) {
export default {
computed: {
episodesPast: function () {
timeslotsPast: function () {
var eps = []
var now = new Date()
for (var x in this.episodes.sort(compareEpisodesByDate)) {
if (new Date(this.episodes[x].start) < now) {
eps.push(this.episodes[x])
for (var x in this.timeslotsSortedDate) {
if (new Date(this.timeslots[x].start) < now) {
eps.push(this.timeslots[x])
}
}
return eps
},
episodesFuture: function () {
timeslotsFuture: function () {
var eps = []
var now = new Date()
for (var x in this.episodes.sort(compareEpisodesByDate)) {
if (new Date(this.episodes[x].start) >= now) {
eps.push(this.episodes[x])
for (var x in this.timeslotsSortedDate) {
if (new Date(this.timeslots[x].start) >= now) {
eps.push(this.timeslots[x])
}
}
return eps
},
episodesSortedDate: function () {
return this.episodes.sort(compareEpisodesByDate)
timeslotsSortedDate: function () {
return this.timeslots.sort(compareEpisodesByDate)
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment