new presentation of timeslots with b-table (ctd.)

src/components/ShowManager.vue

@@ -42,11 +42,13 @@
       </b-row>
     </div>
     <div v-else>
+      <!-- include the modals to edit show and timeslot entries from the modal compontents -->
       <app-modalShow ref="appModalShow" v-bind:show="shows[currentShow]"></app-modalShow>
       <app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes>
 
+      <!-- here we show our table of timeslots -->
       <p>
-        The next <b>{{ numSlots }}</b> timeslots from <b>{{ prettyDate(dateSlotsStart) }}</b> to <b>{{ prettyDate(dateSlotsEnd) }}</b>:
+        The next <b>{{ numSlots }}</b> timeslots between <b>{{ prettyDate(dateSlotsStart) }}</b> and <b>{{ prettyDate(dateSlotsEnd) }}</b>:
       </p>
       <div v-if="loaded.timeslots">
         <b-table striped hover outlined :items="notesTableArray"></b-table>
@@ -63,7 +65,7 @@
               {{ 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)" />
+              <img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="editTimeslotNote(timeslot.id)" />
             </div>
           </b-col>
         </b-row>
@@ -73,7 +75,6 @@
 
       <hr />
 
-      <div v-if="loaded.shows">
       <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
       <b-row>
 
@@ -242,7 +243,6 @@
 
       </b-row>
     </div>
-    </div>
   </b-container>
 </template>
 
@@ -274,7 +274,7 @@ export default {
       numRecent: 8,
       numSlots: 10,
       dateSlotsStart: new Date(),
-      dateSlotsEnd: new Date(new Date().getTime() + 60 * 86400000),
+      dateSlotsEnd: new Date(new Date().getTime() + 90 * 86400000),
       loaded: {
         shows: false,
         timeslots: false,
@@ -308,8 +308,11 @@ export default {
           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>'
+          // TODO: find out how to insert images or iconffont icons into b-table rows
+          // options: '<img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="' + this.editTimeslotNote(this.timeslots[i].id) + '" />'
+          options: '<span class="timeslotEditLink" onclick="document.getElementById(\'app\').children[1].__vue__.editTimeslotNote(' + this.timeslots[i].id + ')">edit</span> ' +
+            '<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">upload</span>' +
+            '<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">...</span>'
         })
       }
       return arr
@@ -354,16 +357,24 @@ export default {
     },
     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 start === 'object') uri += 'start=' + this.apiDate(start)
+      if (typeof end === 'object') uri += '&end=' + this.apiDate(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 => {
+        // if we use the limit argument results are paginated and look different
+        // than without the limit argument
+        if (typeof limit === 'number') {
           this.timeslots = response.data.results
           this.timeslotmeta.count = response.data.count
           this.timeslotmeta.next = response.data.next
           this.timeslotmeta.previous = response.data.previous
+        } else {
+          this.timeslots = response.data
+          this.timeslotmeta.count = response.data.length
+          this.timeslotmeta.next = null
+          this.timeslotmeta.previous = null
+        }
         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
@@ -383,7 +394,7 @@ export default {
       })
       // done fetching timeslots
     },
-    editNote: function (timeslotID) {
+    editTimeslotNote: function (timeslotID) {
       for (var n in this.notes) {
         if (this.notes[n].timeslot === timeslotID) {
           this.current.note = this.notes[n]
@@ -550,4 +561,13 @@ export default {
 </script>
 
 <style>
+span.timeslotEditLink {
+  color: #8d5f82 !important;
+  font-weight: bold;
+  font-size: 0.8em;
+  padding: 0.25em;
+}
+span.timeslotEditLink:hover {
+  color: #ad7fa8 !important;
+}
 </style>

src/mixins/prettyDate.js

@@ -4,13 +4,13 @@ function leadingZero (num) {
 }
 
 var day = [
+  'Sunday',
   'Monday',
   'Tuesday',
   'Wednesday',
   'Thursday',
   'Friday',
-  'Saturday',
-  'Sunday'
+  'Saturday'
 ]
 
 var month = [
@@ -32,13 +32,13 @@ export default {
   methods: {
     apiDate: function (date) {
       var d = new Date(date)
-      return d.getFullYear() + '-' + leadingZero(d.getMonth()) + '-' + leadingZero(d.getDate() + 1)
+      return d.getFullYear() + '-' + leadingZero(d.getMonth() + 1) + '-' + leadingZero(d.getDate())
     },
     prettyDate: function (date) {
       var d = new Date(date)
       var dstring = ''
       dstring += day[d.getDay()] + ', '
-      dstring += leadingZero(d.getDate() + 1) + '. '
+      dstring += leadingZero(d.getDate()) + '. '
       dstring += month[d.getMonth()] + ' '
       dstring += d.getFullYear()
       return dstring
@@ -52,7 +52,7 @@ export default {
       */
       var dstring = ''
       dstring += day[d.getDay()] + ', '
-      dstring += leadingZero(d.getDate() + 1) + '. '
+      dstring += leadingZero(d.getDate()) + '. '
       dstring += month[d.getMonth()] + ' '
       dstring += d.getFullYear() + ', '
       dstring += leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())