Skip to content
Snippets Groups Projects
Commit b1e82149 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 @@
<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
}
}
}
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