add filter for timeslots

config/dev.env.js

@@ -16,5 +16,9 @@ module.exports = merge(prodEnv, {
   API_STEERING_OIDC_REDIRECT_URI_SILENT: '"http://localhost:8080/static/oidc_callback_silentRenew.html"',
   API_STEERING_OIDC_REDIRECT_URI_POPUP: '"http://localhost:8080/static/oidc_callback_popupRenew.html"',
   // address that is called by the pv/steering OIDC module after logout - should be the dashboard entry point
-  API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT: '"http://localhost:8080"'
+  API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT: '"http://localhost:8080"',
+  // how many timeslots should be shown by default (has to be a string)
+  TIMESLOT_FILTER_DEFAULT_NUMSLOTS: '"10"',
+  // how many days timeslots should be fetched by default from now (has to be an int)
+  TIMESLOT_FILTER_DEFAULT_DAYS: '60'
 })

src/components/ShowManager.vue

@@ -47,11 +47,35 @@
       <app-modalNotes ref="appModalNotes" :show="shows[currentShow]" :showAggregate="current"></app-modalNotes>
 
       <!-- here we show our table of timeslots -->
-      <p>
-        The next <b>{{ numSlots }}</b> timeslots between <b>{{ prettyDate(dateSlotsStart) }}</b> and <b>{{ prettyDate(dateSlotsEnd) }}</b>:
-      </p>
+      <b-card>
+        <b-btn v-b-toggle.timeslotFilterCollapse>Toggle timeslot filters</b-btn>
+        <b-collapse id="timeslotFilterCollapse">
+          <br />
+          <b-row>
+            <b-col sm="3"><label for="inputNumSlots">Number of slots to show:</label></b-col>
+            <b-col sm="9"><b-form-input id="inputNumSlots" v-model="numSlots" type="number"></b-form-input></b-col>
+          </b-row>
+          <b-row>
+            <b-col sm="3"><label for="inputDateStart">From:</label></b-col>
+            <b-col sm="9"><b-form-input id="inputDateStart" v-model="dateStart" type="date"></b-form-input></b-col>
+          </b-row>
+          <b-row>
+            <b-col sm="3"><label for="inputNumSlots">Until (exclusive):</label></b-col>
+            <b-col sm="9"><b-form-input id="inputDateEnd" v-model="dateEnd" type="date"></b-form-input></b-col>
+          </b-row>
+          <br />
+          <b-container fluid class="text-right">
+            <b-btn variant="outline-danger" @click="resetFilter()">Reset filter</b-btn> &nbsp;
+            <b-btn variant="info" @click="applyFilter()">Apply filter</b-btn>
+          </b-container>
+        </b-collapse>
+      </b-card>
+
+      <br />
+
       <div v-if="loaded.timeslots">
         <b-table striped hover outlined :items="notesTableArray"></b-table>
+        <b-pagination align="center" :total-rows="current.timeslotmeta.count" :per-page="current.timeslotmeta.perpage" v-model="current.timeslotmeta.page" @change="timeslotsPage"></b-pagination>
       </div>
       <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
 
@@ -245,11 +269,9 @@ export default {
       shows: [],      // an array of objects describing our shows (empty at load, will be populated on created())
       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() + 90 * 86400000),
+      numSlots: process.env.TIMESLOT_FILTER_DEFAULT_NUMSLOTS, // all form input values are provided as strings
+      dateStart: this.apiDate(new Date()),
+      dateEnd: this.apiDate(new Date(new Date().getTime() + process.env.TIMESLOT_FILTER_DEFAULT_DAYS * 86400000)),
       loaded: {
         shows: false,
         timeslots: false,
@@ -274,7 +296,9 @@ export default {
         timeslotmeta: {    // meta info when pagination is used
           count: 0,
           next: null,
-          previous: null
+          previous: null,
+          page: 1,   // page indexes start at 1 for <b-pagination> components
+          perpage: 10
         },
         note: {},
         notes: []
@@ -303,16 +327,33 @@ export default {
           // 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.current.timeslots[i].id) + '" />'
           options: '<span class="timeslotEditLink" onclick="' +
-            'document.getElementById(\'app\').children[1].__vue__.' +
-            'editTimeslotNote(' + this.current.timeslots[i].id + ', ' + this.current.timeslots[i].schedule + ')">edit</span> ' +
-            '<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">upload</span>' +
-            '<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">...</span>'
+          'document.getElementById(\'app\').children[1].__vue__.' +
+          'editTimeslotNote(' + this.current.timeslots[i].id + ', ' + this.current.timeslots[i].schedule + ')">edit</span> ' +
+          '<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">upload</span>' +
+          '<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">...</span>'
         })
       }
       return arr
     }
   },
   methods: {
+    applyFilter: function () {
+      this.current.timeslotmeta.page = 1
+      this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
+    },
+    resetFilter: function () {
+      this.numSlots = process.env.TIMESLOT_FILTER_DEFAULT_NUMSLOTS
+      this.dateStart = this.apiDate(new Date())
+      this.dateEnd = this.apiDate(new Date(new Date().getTime() + process.env.TIMESLOT_FILTER_DEFAULT_DAYS * 86400000))
+      this.current.timeslotmeta.page = 1
+      this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
+    },
+    timeslotsPage: function (page) {
+      if (this.current.timeslotmeta.page !== page) {
+        this.current.timeslotmeta.page = page
+        this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots, (page - 1) * this.numSlots)
+      }
+    },
     switchShow: function (index) {
       // if we already had some show loaded with timeslots and notes, set these to
       // not loaded, so we don't display old timeslots and notes while already
@@ -338,30 +379,35 @@ export default {
       this.getFundingCategory()
       this.getType()
       // now fetch the timeslots (including notes) for a given show from PV backend
-      this.getTimeslots(this.dateSlotsStart, this.dateSlotsEnd, this.numSlots)
+      this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
     },
     getTimeslots: function (start, end, limit, offset) {
+      var dateRegex = new RegExp('^\\d{4}-\\d{2}-\\d{2}$')
       var uri = process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/?'
-      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
+      if (dateRegex.test(start)) uri += 'start=' + start + '&'
+      if (dateRegex.test(end)) uri += 'end=' + end + '&'
+      if (!isNaN(parseInt(limit))) uri += 'limit=' + parseInt(limit) + '&'
+      if (!isNaN(parseInt(offset))) uri += 'offset=' + parseInt(offset)
+      this.loaded.timeslots = false
+      this.loaded.notes = false
       axios.get(uri, {
         withCredentials: true,
         headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
       }).then(response => {
         // if we use the limit argument results are paginated and look different
         // than without the limit argument
-        if (typeof limit === 'number') {
+        if (!isNaN(parseInt(limit))) {
           this.current.timeslots = response.data.results
           this.current.timeslotmeta.count = response.data.count
           this.current.timeslotmeta.next = response.data.next
           this.current.timeslotmeta.previous = response.data.previous
+          this.current.timeslotmeta.perpage = parseInt(limit)
         } else {
           this.current.timeslots = response.data
           this.current.timeslotmeta.count = response.data.length
           this.current.timeslotmeta.next = null
           this.current.timeslotmeta.previous = null
+          this.current.timeslotmeta.perpage = response.data.length
         }
         this.loaded.timeslots = true
         // now that we have the timeslots we can fetch notes for all those timeslots
@@ -394,7 +440,8 @@ export default {
           this.current.notes = []
         }
       }).catch(error => {
-        alert('There was an error fetching timeslots from the server' + error)
+        console.log(error)
+        alert('There was an error fetching timeslots from the server\n' + error)
       })
       // done fetching timeslots
     },