Skip to content
Snippets Groups Projects
Commit 164f36be authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

new presentation of timeslots with b-table

includes:
* new pretty date functions
* fetching of timeslots through getTimeslots function

now prepared for pagination, has to be implemented next
parent 3597a1cd
No related branches found
No related tags found
No related merge requests found
...@@ -45,18 +45,22 @@ ...@@ -45,18 +45,22 @@
<app-modalShow ref="appModalShow" v-bind:show="shows[currentShow]"></app-modalShow> <app-modalShow ref="appModalShow" v-bind:show="shows[currentShow]"></app-modalShow>
<app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes> <app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes>
<p align="left">Die nächsten <select v-model="numUpcoming"> <p>
<option>8</option> The next <b>{{ numSlots }}</b> timeslots from <b>{{ prettyDate(dateSlotsStart) }}</b> to <b>{{ prettyDate(dateSlotsEnd) }}</b>:
<option>16</option> </p>
<option value="all">alle</option> <div v-if="loaded.timeslots">
</select> Sendungen:</p> <b-table striped hover outlined :items="notesTableArray"></b-table>
</div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
<!-- This is the old old-school view for timeslots; remove when all functions are implmented in table above
<div v-if="loaded.timeslots"> <div v-if="loaded.timeslots">
<b-row> <b-row>
<b-col> <b-col>
<div v-for="timeslot in this.timeslotsFutureShow"> <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="notYetImplemented" /> <img v-if="timeslot.playlist_id === null" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="notYetImplemented" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" /> <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" />
{{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }}) {{ prettyDateTime(timeslot.start) }} <small>(Duration: {{ prettyDuration(timeslot.start, timeslot.end) }})</small>
<span v-if="loaded.notes">{{ prettyTimeslotNote(timeslot.id) }}</span> <span v-if="loaded.notes">{{ prettyTimeslotNote(timeslot.id) }}</span>
<span v-else style="background: ../assets/radio.gif"></span> <span v-else style="background: ../assets/radio.gif"></span>
<img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="editNote(timeslot.id)" /> <img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="editNote(timeslot.id)" />
...@@ -65,33 +69,11 @@ ...@@ -65,33 +69,11 @@
</b-row> </b-row>
</div> </div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div> <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
-->
<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="loaded.timeslots">
<b-row>
<b-col>
<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="notYetImplemented" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" />
{{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
<span v-if="loaded.notes">{{ 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="notYetImplemented" />
</div>
</b-col>
</b-row>
</div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
</div>
<hr /> <hr />
<div v-if="loaded.shows" class="showsettings"> <div v-if="loaded.shows">
<h2>Allgemeine Einstellungen zur Sendereihe:</h2> <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
<b-row> <b-row>
...@@ -280,11 +262,19 @@ export default { ...@@ -280,11 +262,19 @@ export default {
return { return {
shows: [], // an array of objects describing our shows (empty at load, will be populated on created()) 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 timeslots: [], // same as with shows, only for the related timeslots
timeslotmeta: { // meta info when pagination is used
count: 0,
next: null,
previous: null
},
notes: [], // same as with shows, only for the related notes notes: [], // same as with shows, only for the related notes
currentShow: 0, // index of the currently selected show in our shows array currentShow: 0, // index of the currently selected show in our shows array
currentShowID: 0, // actual id of the currently selected show currentShowID: 0, // actual id of the currently selected show
numUpcoming: 8, numUpcoming: 8,
numRecent: 8, numRecent: 8,
numSlots: 10,
dateSlotsStart: new Date(),
dateSlotsEnd: new Date(new Date().getTime() + 60 * 86400000),
loaded: { loaded: {
shows: false, shows: false,
timeslots: false, timeslots: false,
...@@ -311,6 +301,19 @@ export default { ...@@ -311,6 +301,19 @@ export default {
}, },
mixins: [ timeslotSort, prettyDate ], mixins: [ timeslotSort, prettyDate ],
computed: { computed: {
notesTableArray: function () {
var arr = []
for (var i in this.timeslots) {
arr.push({
title: this.getTimeslotNoteTitle(this.timeslots[i].id),
starts: this.prettyDateTime(this.timeslots[i].start),
duration: this.prettyDuration(this.timeslots[i].start, this.timeslots[i].end) + 'min',
// options: '<img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="' + this.editNote(this.timeslots[i].id) + '" />'
options: '<a href="#" onclick="alert(1)"><span class="oi" data-glyph="wrench" title="wrench" aria-hidden="true">edit</span></a>'
})
}
return arr
},
timeslotsFutureShow: function () { timeslotsFutureShow: function () {
if (this.numUpcoming === 'all') return this.timeslotsFuture if (this.numUpcoming === 'all') return this.timeslotsFuture
else return this.timeslotsFuture.slice(0, this.numUpcoming) else return this.timeslotsFuture.slice(0, this.numUpcoming)
...@@ -346,14 +349,28 @@ export default { ...@@ -346,14 +349,28 @@ export default {
this.getMusicfocus() this.getMusicfocus()
this.getRTRCategory() this.getRTRCategory()
this.getType() this.getType()
// now fetch the single timeslots for a given show from PV backend // now fetch the timeslots (including notes) for a given show from PV backend
axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/', {withCredentials: true}).then(response => { this.getTimeslots(this.dateSlotsStart, this.dateSlotsEnd, this.numSlots)
this.timeslots = response.data },
getTimeslots: function (start, end, limit, offset) {
var uri = process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/?'
if (typeof start === 'string') uri += 'start=' + start
if (typeof end === 'string') uri += '&end=' + end
if (typeof limit === 'number') uri += '&limit=' + limit
if (typeof offset === 'number') uri += '&offset=' + offset
console.log(uri)
axios.get(uri, {withCredentials: true}).then(response => {
this.timeslots = response.data.results
this.timeslotmeta.count = response.data.count
this.timeslotmeta.next = response.data.next
this.timeslotmeta.previous = response.data.previous
this.loaded.timeslots = true this.loaded.timeslots = true
// now that we have the timeslots we can fetch notes for all those timeslots // 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 // 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 // for bigger data sets it might be preferable to fetch only the notes for those
// timeslots that are also visible to the user // timeslots that are also visible to the user
// TODO: discuss: when a timeslot can only have one not, why is the id
// of this note not stored in the timeslot? would be way more efficient
axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes/', {withCredentials: true}).then(response => { axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes/', {withCredentials: true}).then(response => {
this.notes = response.data this.notes = response.data
this.loaded.notes = true this.loaded.notes = true
...@@ -375,7 +392,7 @@ export default { ...@@ -375,7 +392,7 @@ export default {
} }
this.$refs.appModalNotes.$refs.modalNote.show() this.$refs.appModalNotes.$refs.modalNote.show()
}, },
getTimeslotNote: function (timeslotID) { getTimeslotNoteTitle: function (timeslotID) {
for (var n in this.notes) { for (var n in this.notes) {
if (this.notes[n].timeslot === timeslotID && this.notes[n].title !== undefined) { if (this.notes[n].timeslot === timeslotID && this.notes[n].title !== undefined) {
return this.notes[n].title return this.notes[n].title
...@@ -384,7 +401,7 @@ export default { ...@@ -384,7 +401,7 @@ export default {
return null return null
}, },
prettyTimeslotNote: function (timeslotID) { prettyTimeslotNote: function (timeslotID) {
var note = this.getTimeslotNote(timeslotID) var note = this.getTimeslotNoteTitle(timeslotID)
if (note !== null) { if (note !== null) {
return this.prettyTitle(note) return this.prettyTitle(note)
} else { } else {
...@@ -532,11 +549,5 @@ export default { ...@@ -532,11 +549,5 @@ export default {
} }
</script> </script>
<style scoped> <style>
div.recenttimeslots {
margin-top: 2em;
}
.showsettings, .recenttimeslots, .nexttimeslots {
text-align: left;
}
</style> </style>
...@@ -3,18 +3,71 @@ function leadingZero (num) { ...@@ -3,18 +3,71 @@ function leadingZero (num) {
else return num.toString() else return num.toString()
} }
var day = [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
var month = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
]
export default { export default {
methods: { methods: {
apiDate: function (date) {
var d = new Date(date)
return d.getFullYear() + '-' + leadingZero(d.getMonth()) + '-' + leadingZero(d.getDate() + 1)
},
prettyDate: function (date) { prettyDate: function (date) {
var d = new Date(date) var d = new Date(date)
var dstring = ''
dstring += day[d.getDay()] + ', '
dstring += leadingZero(d.getDate() + 1) + '. '
dstring += month[d.getMonth()] + ' '
dstring += d.getFullYear()
return dstring
},
prettyDateTime: function (date) {
var d = new Date(date)
/*
// This is a simple numbered representation - have to decide which one to use in final design
// note: Date.getMonth() returns the month as an index from 0 to 11 // 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()) return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth() + 1) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
*/
var dstring = ''
dstring += day[d.getDay()] + ', '
dstring += leadingZero(d.getDate() + 1) + '. '
dstring += month[d.getMonth()] + ' '
dstring += d.getFullYear() + ', '
dstring += leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
return dstring
}, },
prettyDuration: function (start, end) { prettyDuration: function (start, end) {
var duration = (new Date(end).getTime() - new Date(start).getTime()) / 1000 var duration = (new Date(end).getTime() - new Date(start).getTime()) / 1000
/*
// This is the old notation in HH:MM - have to decide which one to use in final design
var hours = Math.floor(duration / 60 / 60) var hours = Math.floor(duration / 60 / 60)
var minutes = (duration / 60) % 60 var minutes = (duration / 60) % 60
return leadingZero(hours) + ':' + leadingZero(minutes) return leadingZero(hours) + ':' + leadingZero(minutes)
*/
// Here we just return the duration in minutes
return duration / 60
} }
} }
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment