Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
AURA
dashboard
Commits
e8741e92
Commit
e8741e92
authored
May 18, 2018
by
Andrea Ida Malkah Klaura
Browse files
add filter for timeslots
parent
27474671
Changes
2
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>
<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
.
dateS
lotsS
tart
,
this
.
date
Slots
End
,
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
},
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment