Skip to content

GitLab

Commit e8741e92 authored by Andrea Ida Malkah Klaura's avatar Andrea Ida Malkah Klaura
Browse files

add filter for timeslots

parent 27474671
Hide whitespace changes
Inline Side-by-side
config/dev.env.js
View file @ e8741e92
......@@ -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
View file @ e8741e92
......@@ -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
},
......
Supports Markdown
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