Commit 164f36be authored by Andrea Ida Malkah Klaura's avatar 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
......@@ -45,18 +45,22 @@
<app-modalShow ref="appModalShow" v-bind:show="shows[currentShow]"></app-modalShow>
<app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes>
<p align="left">Die nächsten <select v-model="numUpcoming">
<option>8</option>
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<p>
The next <b>{{ numSlots }}</b> timeslots from <b>{{ prettyDate(dateSlotsStart) }}</b> to <b>{{ prettyDate(dateSlotsEnd) }}</b>:
</p>
<div v-if="loaded.timeslots">
<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">
<b-row>
<b-col>
<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-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-else style="background: ../assets/radio.gif"></span>
<img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="editNote(timeslot.id)" />
......@@ -65,33 +69,11 @@
</b-row>
</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 />
<div v-if="loaded.shows" class="showsettings">
<div v-if="loaded.shows">
<h2>Allgemeine Einstellungen zur Sendereihe:</h2>
<b-row>
......@@ -280,11 +262,19 @@ export default {
return {
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
timeslotmeta: { // meta info when pagination is used
count: 0,
next: null,
previous: null
},
notes: [], // same as with shows, only for the related notes
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,
numSlots: 10,
dateSlotsStart: new Date(),
dateSlotsEnd: new Date(new Date().getTime() + 60 * 86400000),
loaded: {
shows: false,
timeslots: false,
......@@ -311,6 +301,19 @@ export default {
},
mixins: [ timeslotSort, prettyDate ],
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 () {
if (this.numUpcoming === 'all') return this.timeslotsFuture
else return this.timeslotsFuture.slice(0, this.numUpcoming)
......@@ -346,14 +349,28 @@ export default {
this.getMusicfocus()
this.getRTRCategory()
this.getType()
// now fetch the single timeslots for a given show from PV backend
axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/', {withCredentials: true}).then(response => {
this.timeslots = response.data
// now fetch the timeslots (including notes) for a given show from PV backend
this.getTimeslots(this.dateSlotsStart, this.dateSlotsEnd, this.numSlots)
},
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
// 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
// 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 => {
this.notes = response.data
this.loaded.notes = true
......@@ -375,7 +392,7 @@ export default {
}
this.$refs.appModalNotes.$refs.modalNote.show()
},
getTimeslotNote: function (timeslotID) {
getTimeslotNoteTitle: function (timeslotID) {
for (var n in this.notes) {
if (this.notes[n].timeslot === timeslotID && this.notes[n].title !== undefined) {
return this.notes[n].title
......@@ -384,7 +401,7 @@ export default {
return null
},
prettyTimeslotNote: function (timeslotID) {
var note = this.getTimeslotNote(timeslotID)
var note = this.getTimeslotNoteTitle(timeslotID)
if (note !== null) {
return this.prettyTitle(note)
} else {
......@@ -532,11 +549,5 @@ export default {
}
</script>
<style scoped>
div.recenttimeslots {
margin-top: 2em;
}
.showsettings, .recenttimeslots, .nexttimeslots {
text-align: left;
}
<style>
</style>
......@@ -3,18 +3,71 @@ function leadingZero (num) {
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 {
methods: {
apiDate: function (date) {
var d = new Date(date)
return d.getFullYear() + '-' + leadingZero(d.getMonth()) + '-' + leadingZero(d.getDate() + 1)
},
prettyDate: function (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
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) {
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 minutes = (duration / 60) % 60
return leadingZero(hours) + ':' + leadingZero(minutes)
*/
// Here we just return the duration in minutes
return duration / 60
}
}
}
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