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
28357168
Commit
28357168
authored
Feb 16, 2018
by
Andrea Ida Malkah Klaura
Browse files
new presentation of timeslots with b-table (ctd.)
parent
164f36be
Changes
2
Show whitespace changes
Inline
Side-by-side
src/components/ShowManager.vue
View file @
28357168
...
...
@@ -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="edit
Timeslot
Note(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
()
+
6
0
*
86400000
),
dateSlotsEnd
:
new
Date
(
new
Date
().
getTime
()
+
9
0
*
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
)
{
edit
Timeslot
Note
:
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
View file @
28357168
...
...
@@ -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
())
...
...
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