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

src/components/ShowManager.vue

@@ -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>

src/mixins/prettyDate.js

@@ -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
     }
   }
 }