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
68c0fa34
Commit
68c0fa34
authored
Dec 25, 2017
by
Andrea Ida Malkah Klaura
Browse files
adapted show manager to autoradio api/v1
parent
be350289
Changes
3
Hide whitespace changes
Inline
Side-by-side
config/dev.env.js
View file @
68c0fa34
...
...
@@ -4,8 +4,8 @@ const prodEnv = require('./prod.env')
module
.
exports
=
merge
(
prodEnv
,
{
NODE_ENV
:
'
"development"
'
,
API_STEERING
:
'
"http
s
://
autoradio-testing.o94.at/api.php
"
'
,
API_STEERING_SHOWS
:
'
"http
s
://
autoradio-testing.o94.at/api.php
"
'
,
API_STEERING
:
'
"http://
127.0.0.1:3000/api/v1/
"
'
,
API_STEERING_SHOWS
:
'
"http://
127.0.0.1:3000/api/v1/shows/
"
'
//API_STEERING: '"http://127.0.0.1:8000/api/v1/"',
//API_STEERING_SHOWS: '"http://127.0.0.1:8000/api/v1/shows/"'
})
src/components/ShowManager.vue
View file @
68c0fa34
...
...
@@ -8,7 +8,7 @@
</b-col>
<b-col
align=
"right"
>
<b-dropdown
id=
"ddshows"
text=
"Sendereihe auswählen"
variant=
"info"
>
<b-dropdown-item
v-for=
"(show, index) in this.shows"
v-on:click=
"switchShow(index)"
>
{{
show
.
name
}}
</b-dropdown-item>
<b-dropdown-item
v-for=
"(show, index) in this.shows"
:key=
"show.id"
v-on:click=
"switchShow(index)"
>
{{
show
.
name
}}
</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
...
...
@@ -20,23 +20,15 @@
<option>
16
</option>
<option
value=
"all"
>
alle
</option>
</select>
Sendungen:
</p>
<div
v-if=
"
episode
sLoaded"
>
<div
v-if=
"
timeslot
sLoaded"
>
<div
class=
"row"
>
<div
class=
"col-
6
"
>
<div
v-for=
"
episode
in this.
episode
sFutureShow
FirstHalf
"
>
<img
v-if=
"
episode.source
===
''
"
src=
"../assets/16x16/go-top.png"
alt=
"choose a playlist for this episode"
v-on:click=
"setPlaylist"
/>
<div
class=
"col-
12
"
>
<div
v-for=
"
timeslot
in this.
timeslot
sFutureShow"
>
<img
v-if=
"
timeslot.playlist_id
===
null
"
src=
"../assets/16x16/go-top.png"
alt=
"choose a playlist for this episode"
v-on:click=
"setPlaylist"
/>
<img
v-else
src=
"../assets/16x16/media-playback-start.png"
alt=
"play"
v-on:click=
"playPlaylist"
/>
{{
prettyDate
(
episode
.
start
)
}}
(
{{
prettyDuration
(
episode
.
start
,
episode
.
end
)
}}
)
<span
:title=
"episode.title"
>
{{
prettyTitle
(
episode
.
title
)
}}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"setPlaylist"
/>
</div>
</div>
<div
class=
"col-6"
>
<div
v-for=
"episode in this.episodesFutureShowSecondHalf"
>
<img
v-if=
"episode.source === ''"
src=
"../assets/16x16/go-top.png"
alt=
"choose a playlist for this episode"
v-on:click=
"setPlaylist"
/>
<img
v-else
src=
"../assets/16x16/media-playback-start.png"
alt=
"play"
v-on:click=
"playPlaylist"
/>
{{
prettyDate
(
episode
.
start
)
}}
(
{{
prettyDuration
(
episode
.
start
,
episode
.
end
)
}}
)
<span
:title=
"episode.title"
>
{{
prettyTitle
(
episode
.
title
)
}}
</span>
{{
prettyDate
(
timeslot
.
start
)
}}
(
{{
prettyDuration
(
timeslot
.
start
,
timeslot
.
end
)
}}
)
<span
v-if=
"notesLoaded"
>
{{
prettyTimeslotNote
(
timeslot
.
id
)
}}
</span>
<span
v-else
style=
"background: ../assets/radio.gif"
></span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"setPlaylist"
/>
</div>
</div>
...
...
@@ -44,32 +36,24 @@
</div>
<div
v-else
style=
"text-align: center;"
><img
src=
"../assets/radio.gif"
alt=
"loading data"
/><br
/></div>
<div
class=
"recent
episode
s"
>
<div
class=
"recent
timeslot
s"
>
<p>
Die letzten
<select
v-model=
"numRecent"
>
<option>
8
</option>
<option>
16
</option>
<option
value=
"all"
>
alle
</option>
</select>
Sendungen:
</p>
<div
v-if=
"
episode
sLoaded"
>
<div
class=
"
section group
"
>
<div
class=
"col
span_2_of_4
"
>
<div
v-for=
"
episode
in this.
episode
sPastShow
FirstHalf
"
>
<img
v-if=
"
episode.source
===
''
"
src=
"../assets/16x16/go-top.png"
alt=
"choose a playlist for this episode"
v-on:click=
"setPlaylist"
/>
<div
v-if=
"
timeslot
sLoaded"
>
<div
class=
"
row
"
>
<div
class=
"col
-12
"
>
<div
v-for=
"
timeslot
in this.
timeslot
sPastShow"
>
<img
v-if=
"
timeslot.playlist_id
===
null
"
src=
"../assets/16x16/go-top.png"
alt=
"choose a playlist for this episode"
v-on:click=
"setPlaylist"
/>
<img
v-else
src=
"../assets/16x16/media-playback-start.png"
alt=
"play"
v-on:click=
"playPlaylist"
/>
{{
prettyDate
(
episode
.
start
)
}}
(
{{
prettyDuration
(
episode
.
start
,
episode
.
end
)
}}
)
<span
:title=
"episode.title"
>
{{
prettyTitle
(
episode
.
title
)
}}
</span>
{{
prettyDate
(
timeslot
.
start
)
}}
(
{{
prettyDuration
(
timeslot
.
start
,
timeslot
.
end
)
}}
)
<span
v-if=
"notesLoaded"
>
{{
prettyTimeslotNote
(
timeslot
.
id
)
}}
</span>
<span
v-else
style=
"background: ../assets/radio.gif"
></span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"setPlaylist"
/>
</div>
</div>
<div
class=
"col span_2_of_4"
>
<div
v-for=
"episode in this.episodesPastShowSecondHalf"
>
<img
v-if=
"episode.source === ''"
src=
"../assets/16x16/go-top.png"
alt=
"choose a playlist for this episode"
v-on:click=
"setPlaylist"
/>
<img
v-else
src=
"../assets/16x16/media-playback-start.png"
alt=
"play"
v-on:click=
"playPlaylist"
/>
{{
prettyDate
(
episode
.
start
)
}}
(
{{
prettyDuration
(
episode
.
start
,
episode
.
end
)
}}
)
<span
:title=
"episode.title"
>
{{
prettyTitle
(
episode
.
title
)
}}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
v-on:click=
"editEpisode"
/>
</div>
</div>
</div>
</div>
<div
v-else
style=
"text-align: center;"
><img
src=
"../assets/radio.gif"
alt=
"loading data"
/><br
/></div>
...
...
@@ -95,7 +79,7 @@
</
template
>
<
script
>
import
episode
Sort
from
'
../mixins/
episode
Sort
'
import
timeslot
Sort
from
'
../mixins/
timeslot
Sort
'
function
leadingZero
(
num
)
{
if
(
num
<
10
)
return
'
0
'
+
num
...
...
@@ -105,70 +89,78 @@ function leadingZero (num) {
export
default
{
data
()
{
return
{
// an array of objects describing
sendereihen
(empty at load, will be populated on created())
shows
:
[],
episod
es
:
[],
shows
:
[],
// an array of objects describing
our shows
(empty at load, will be populated on created())
timeslots
:
[],
// same as with shows, only for the related timeslots
not
es
:
[],
// same as with shows, only for the related notes
showsLoaded
:
false
,
episode
sLoaded
:
false
,
currentShow
:
0
,
currentShow
ID
:
0
,
num
Show
s
:
0
,
timeslot
sLoaded
:
false
,
notesLoaded
:
false
,
currentShow
:
0
,
// index of the currently selected show in our shows array
current
Show
ID
:
0
,
// actual id of the currently selected show
numUpcoming
:
8
,
numRecent
:
8
}
},
mixins
:
[
episode
Sort
],
mixins
:
[
timeslot
Sort
],
computed
:
{
episodesFutureShow
:
function
()
{
if
(
this
.
numUpcoming
===
'
all
'
)
return
this
.
episodesFuture
else
return
this
.
episodesFuture
.
slice
(
0
,
this
.
numUpcoming
)
},
episodesFutureShowFirstHalf
:
function
()
{
if
(
this
.
numUpcoming
===
'
all
'
)
return
this
.
episodesFuture
.
slice
(
0
,
this
.
episodesFuture
.
length
/
2
)
else
return
this
.
episodesFuture
.
slice
(
0
,
this
.
numUpcoming
/
2
)
},
episodesFutureShowSecondHalf
:
function
()
{
if
(
this
.
numUpcoming
===
'
all
'
)
return
this
.
episodesFuture
.
slice
(
this
.
episodesFuture
.
length
/
2
)
else
return
this
.
episodesFuture
.
slice
(
this
.
numUpcoming
/
2
,
this
.
numUpcoming
)
timeslotsFutureShow
:
function
()
{
if
(
this
.
numUpcoming
===
'
all
'
)
return
this
.
timeslotsFuture
else
return
this
.
timeslotsFuture
.
slice
(
0
,
this
.
numUpcoming
)
},
episodesPastShow
:
function
()
{
if
(
this
.
numRecent
===
'
all
'
)
return
this
.
episodesPast
else
return
this
.
episodesPast
.
slice
(
0
,
this
.
numRecent
)
},
episodesPastShowFirstHalf
:
function
()
{
if
(
this
.
numRecent
===
'
all
'
)
return
this
.
episodesPast
.
slice
(
0
,
this
.
episodesPast
.
length
/
2
)
else
return
this
.
episodesPast
.
slice
(
0
,
this
.
numRecent
/
2
)
},
episodesPastShowSecondHalf
:
function
()
{
if
(
this
.
numRecent
===
'
all
'
)
return
this
.
episodesPast
.
slice
(
this
.
episodesPast
.
length
/
2
)
else
return
this
.
episodesPast
.
slice
(
this
.
numRecent
/
2
,
this
.
numRecent
)
timeslotsPastShow
:
function
()
{
// if (this.numRecent === 'all') return this.timeslotsPast
// else return this.timeslotsPast.slice(0, this.numRecent)
return
this
.
timeslotsPast
}
},
methods
:
{
switchShow
:
function
(
index
)
{
this
.
episodesLoaded
=
false
// 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
// the new show is displayed and new timeslots and notes are still loading
this
.
timeslotsLoaded
=
false
this
.
notesLoaded
=
false
// set the current show and its ID to whatever we want to switch to now
this
.
currentShow
=
index
this
.
currentShowID
=
this
.
shows
[
this
.
currentShow
].
id
// fetch single episodes for a given show from PV backend
this
.
$http
.
post
(
process
.
env
.
API_STEERING
,
{
action
:
'
query
'
,
query
:
'
episodes
'
,
show_id
:
this
.
currentShowID
,
api_key
:
'
D1EB23A42F
'
},
{
emulateJSON
:
true
}).
then
(
response
=>
{
// now fetch the single timeslots for a given show from PV backend
this
.
$http
.
get
(
process
.
env
.
API_STEERING_SHOWS
+
this
.
currentShowID
+
'
/timeslots
'
).
then
(
response
=>
{
if
(
response
.
body
.
hasOwnProperty
(
'
error
'
))
alert
(
response
.
body
.
error
)
else
{
this
.
episodes
=
response
.
body
this
.
numShows
=
this
.
episodes
.
length
this
.
episodesLoaded
=
true
this
.
timeslots
=
response
.
body
this
.
timeslotsLoaded
=
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
// for bigger data sets it might be preferable to fetch only the notes for those
// timeslots that are also visible to the user
this
.
$http
.
get
(
process
.
env
.
API_STEERING_SHOWS
+
this
.
currentShowID
+
'
/notes
'
).
then
(
response
=>
{
if
(
response
.
body
.
hasOwnProperty
(
'
error
'
))
alert
(
response
.
body
.
error
)
else
{
this
.
notes
=
response
.
body
this
.
notesLoaded
=
true
}
},
response
=>
{
alert
(
'
There was an error fetching notes from the server
'
)
})
// done fetching notes
}
},
response
=>
{
alert
(
'
There was an error fetching t
he data
from the server
'
)
alert
(
'
There was an error fetching t
imeslots
from the server
'
)
})
// done fetching timeslots
},
getTimeslotNote
:
function
(
timeslotID
)
{
for
(
var
n
in
this
.
notes
)
{
if
(
this
.
notes
[
n
].
timeslot
===
timeslotID
&&
this
.
notes
[
n
].
title
!==
undefined
)
{
return
this
.
notes
[
n
].
title
}
}
return
null
},
prettyDate
:
function
(
date
)
{
var
d
=
new
Date
(
date
)
return
leadingZero
(
d
.
getDate
())
+
'
.
'
+
leadingZero
(
d
.
getMonth
())
+
'
.
'
+
d
.
getFullYear
()
+
'
'
+
leadingZero
(
d
.
getHours
())
+
'
:
'
+
leadingZero
(
d
.
getMinutes
())
// note: Date.getMonth() returns the month as an index from 0 to 11
return
leadingZero
(
d
.
getDate
())
+
'
.
'
+
leadingZero
(
d
.
getMonth
()
+
1
)
+
'
.
'
+
d
.
getFullYear
()
+
'
'
+
leadingZero
(
d
.
getHours
())
+
'
:
'
+
leadingZero
(
d
.
getMinutes
())
},
prettyDuration
:
function
(
start
,
end
)
{
var
duration
=
(
new
Date
(
end
).
getTime
()
-
new
Date
(
start
).
getTime
())
/
1000
...
...
@@ -176,6 +168,14 @@ export default {
var
minutes
=
(
duration
/
60
)
%
60
return
leadingZero
(
hours
)
+
'
:
'
+
leadingZero
(
minutes
)
},
prettyTimeslotNote
:
function
(
timeslotID
)
{
var
note
=
this
.
getTimeslotNote
(
timeslotID
)
if
(
note
!==
null
)
{
return
this
.
prettyTitle
(
note
)
}
else
{
return
''
}
},
prettyTitle
:
function
(
title
)
{
if
(
title
===
''
)
return
'
...
'
else
if
(
title
.
length
>
25
)
return
title
.
slice
(
0
,
25
)
+
'
...
'
...
...
@@ -196,11 +196,7 @@ export default {
},
created
()
{
// fetch sendereihen from PV backend
this
.
$http
.
post
(
process
.
env
.
API_STEERING
,
{
action
:
'
query
'
,
query
:
'
shows
'
,
api_key
:
'
D1EB23A42F
'
},
{
emulateJSON
:
true
}).
then
(
response
=>
{
this
.
$http
.
get
(
process
.
env
.
API_STEERING_SHOWS
).
then
(
response
=>
{
if
(
response
.
body
.
hasOwnProperty
(
'
error
'
))
{
alert
(
response
.
body
.
error
)
}
else
{
...
...
@@ -211,17 +207,17 @@ export default {
this
.
switchShow
(
this
.
currentShow
)
}
},
response
=>
{
alert
(
'
There was an error fetching
the data
from the server
'
)
alert
(
'
There was an error fetching
shows
from the server
'
)
})
}
}
</
script
>
<
style
scoped
>
div
.recent
episode
s
{
div
.recent
timeslot
s
{
margin-top
:
2em
;
}
.showsettings
,
.recent
episodes
,
.nextepisode
s
{
.showsettings
,
.recent
timeslots
,
.nexttimeslot
s
{
text-align
:
left
;
}
</
style
>
src/mixins/
episode
Sort.js
→
src/mixins/
timeslot
Sort.js
View file @
68c0fa34
...
...
@@ -8,28 +8,28 @@ function compareEpisodesByDate (a, b) {
export
default
{
computed
:
{
episode
sPast
:
function
()
{
timeslot
sPast
:
function
()
{
var
eps
=
[]
var
now
=
new
Date
()
for
(
var
x
in
this
.
episodes
.
sort
(
compareEpisodesBy
Date
)
)
{
if
(
new
Date
(
this
.
episode
s
[
x
].
start
)
<
now
)
{
eps
.
push
(
this
.
episode
s
[
x
])
for
(
var
x
in
this
.
timeslotsSorted
Date
)
{
if
(
new
Date
(
this
.
timeslot
s
[
x
].
start
)
<
now
)
{
eps
.
push
(
this
.
timeslot
s
[
x
])
}
}
return
eps
},
episode
sFuture
:
function
()
{
timeslot
sFuture
:
function
()
{
var
eps
=
[]
var
now
=
new
Date
()
for
(
var
x
in
this
.
episodes
.
sort
(
compareEpisodesBy
Date
)
)
{
if
(
new
Date
(
this
.
episode
s
[
x
].
start
)
>=
now
)
{
eps
.
push
(
this
.
episode
s
[
x
])
for
(
var
x
in
this
.
timeslotsSorted
Date
)
{
if
(
new
Date
(
this
.
timeslot
s
[
x
].
start
)
>=
now
)
{
eps
.
push
(
this
.
timeslot
s
[
x
])
}
}
return
eps
},
episode
sSortedDate
:
function
()
{
return
this
.
episode
s
.
sort
(
compareEpisodesByDate
)
timeslot
sSortedDate
:
function
()
{
return
this
.
timeslot
s
.
sort
(
compareEpisodesByDate
)
}
}
}
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