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

added functions to get arrayed options of shows

parent 00a45967
...@@ -11,16 +11,16 @@ ...@@ -11,16 +11,16 @@
<b-jumbotron> <b-jumbotron>
<template slot="header"> <template slot="header">
<span v-if="showsLoaded">{{ shows[currentShow].name }}</span> <span v-if="loaded.shows">{{ shows[currentShow].name }}</span>
<span v-else>Shows are being loaded</span> <span v-else>Shows are being loaded</span>
</template> </template>
<template slot="lead"> <template slot="lead">
<span v-if="showsLoaded">{{ shows[currentShow].short_description }}</span> <span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit short description" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit short description" v-on:click="notYetImplemented" />
</template> </template>
<p v-if="showsLoaded"> <p v-if="loaded.shows">
<b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="notYetImplemented" /> <b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="notYetImplemented" />
<div v-if="showsLoaded"> <div v-if="loaded.shows">
<!-- TODO: see if we can make a nice but secure html rendering of the description --> <!-- TODO: see if we can make a nice but secure html rendering of the description -->
{{ shows[currentShow].description.replace(/<[^>]*>/g, '') }} {{ shows[currentShow].description.replace(/<[^>]*>/g, '') }}
<!-- TODO: add image and logo here? --> <!-- TODO: add image and logo here? -->
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</p> </p>
</b-jumbotron> </b-jumbotron>
<div v-if="!showsLoaded"> <div v-if="!loaded.shows">
<b-row> <b-row>
<b-col align="center"> <b-col align="center">
<img src="../assets/radio.gif" alt="loading data" /> <img src="../assets/radio.gif" alt="loading data" />
...@@ -41,14 +41,14 @@ ...@@ -41,14 +41,14 @@
<option>16</option> <option>16</option>
<option value="all">alle</option> <option value="all">alle</option>
</select> Sendungen:</p> </select> Sendungen:</p>
<div v-if="timeslotsLoaded"> <div v-if="loaded.timeslots">
<b-row> <b-row>
<b-col> <b-col>
<div v-for="timeslot in this.timeslotsFutureShow"> <div v-for="timeslot in this.timeslotsFutureShow">
<img v-if="timeslot.playlist_id === null" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="notYetImplemented" /> <img v-if="timeslot.playlist_id === null" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="notYetImplemented" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" /> <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" />
{{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }}) {{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
<span v-if="notesLoaded">{{ prettyTimeslotNote(timeslot.id) }}</span> <span v-if="loaded.notes">{{ prettyTimeslotNote(timeslot.id) }}</span>
<span v-else style="background: ../assets/radio.gif"></span> <span v-else style="background: ../assets/radio.gif"></span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</div> </div>
...@@ -63,14 +63,14 @@ ...@@ -63,14 +63,14 @@
<option>16</option> <option>16</option>
<option value="all">alle</option> <option value="all">alle</option>
</select> Sendungen:</p> </select> Sendungen:</p>
<div v-if="timeslotsLoaded"> <div v-if="loaded.timeslots">
<b-row> <b-row>
<b-col> <b-col>
<div v-for="timeslot in this.timeslotsPastShow"> <div v-for="timeslot in this.timeslotsPastShow">
<img v-if="timeslot.playlist_id === null" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="notYetImplemented" /> <img v-if="timeslot.playlist_id === null" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="notYetImplemented" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" /> <img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" />
{{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }}) {{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
<span v-if="notesLoaded">{{ prettyTimeslotNote(timeslot.id) }}</span> <span v-if="loaded.notes">{{ prettyTimeslotNote(timeslot.id) }}</span>
<span v-else style="background: ../assets/radio.gif"></span> <span v-else style="background: ../assets/radio.gif"></span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</div> </div>
...@@ -79,12 +79,14 @@ ...@@ -79,12 +79,14 @@
</div> </div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div> <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
</div> </div>
<hr /> <hr />
<div v-if="showsLoaded" class="showsettings"> <div v-if="loaded.shows" class="showsettings">
<h2>Allgemeine Einstellungen zur Sendereihe:</h2> <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
<b-row> <b-row>
<b-col xl="4" lg="6">
<b-col lg="6">
<p> <p>
<b>E-Mail:</b> <b>E-Mail:</b>
<span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span> <span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
...@@ -92,15 +94,17 @@ ...@@ -92,15 +94,17 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
</b-col> </b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p> <p>
<b>Website:</b> {{ shows[currentShow].website }} <b>Website:</b>
<span v-if="shows[currentShow].website === null"><small><i>(none set)</i></small></span> <span v-if="shows[currentShow].website === null"><small><i>(none set)</i></small></span>
<span v-else><a :href="shows[currentShow].website">{{ shows[currentShow].website }}</a></span> <span v-else><a :href="shows[currentShow].website">{{ shows[currentShow].website }}</a></span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
</b-col> </b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p> <p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? --> <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for type_id from steering api --> <!-- TODO: fetch name for type_id from steering api -->
...@@ -108,7 +112,8 @@ ...@@ -108,7 +112,8 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
</b-col> </b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p> <p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? --> <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for rtrcategory_id from steering api --> <!-- TODO: fetch name for rtrcategory_id from steering api -->
...@@ -116,7 +121,8 @@ ...@@ -116,7 +121,8 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
</b-col> </b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p> <p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? --> <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for predecessor_id from steering api --> <!-- TODO: fetch name for predecessor_id from steering api -->
...@@ -126,7 +132,8 @@ ...@@ -126,7 +132,8 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
</b-col> </b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p> <p>
<b>CBA Series ID:</b> <b>CBA Series ID:</b>
<span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span> <span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span>
...@@ -134,7 +141,8 @@ ...@@ -134,7 +141,8 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
</b-col> </b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p> <p>
<b>Fallback Pool:</b> <b>Fallback Pool:</b>
<span v-if="shows[currentShow].fallback_pool === ''"><small><i>(none set)</i></small></span> <span v-if="shows[currentShow].fallback_pool === ''"><small><i>(none set)</i></small></span>
...@@ -142,62 +150,98 @@ ...@@ -142,62 +150,98 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
</b-col> </b-col>
<b-col xl="4" lg="6">
</b-row>
<b-row>
<b-col lg="2">
<b>Categories <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
</b-col>
<b-col lg="4">
<div v-if="loaded.categories">
<p v-if="shows[currentShow].category.length === 0"> <p v-if="shows[currentShow].category.length === 0">
<b>Categories:</b>
<small><i>(none set)</i></small> <small><i>(none set)</i></small>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
<p v-else> <p v-else>
<b>Categories:</b> <ul>
<span v-for="cat in shows[currentShow].category">{{ cat.category }} </span> <li v-for="cat in current.categories">{{ cat.category }}</li>
</ul>
</p> </p>
</div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
</b-col>
<b-col lg="2">
<b>Languages <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
</b-col> </b-col>
<b-col xl="4" lg="6"> <b-col lg="4">
<div v-if="loaded.categories">
<p v-if="shows[currentShow].language.length === 0"> <p v-if="shows[currentShow].language.length === 0">
<b>Languages:</b>
<small><i>(none set)</i></small> <small><i>(none set)</i></small>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
<p v-else> <p v-else>
<b>Languages:</b> <ul>
<span v-for="lang in shows[currentShow].language">{{ lang.name }} </span> <li v-for="lang in current.languages">{{ lang.name }}</li>
</ul>
</p> </p>
</div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
</b-col> </b-col>
<b-col xl="4" lg="6">
<b-col lg="2">
<b>Topics <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
</b-col>
<b-col lg="4">
<div v-if="loaded.topics">
<p v-if="shows[currentShow].topic.length === 0"> <p v-if="shows[currentShow].topic.length === 0">
<b>Topics:</b>
<small><i>(none set)</i></small> <small><i>(none set)</i></small>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
<p v-else> <p v-else>
<b>Topics:</b> <ul>
<span v-for="top in shows[currentShow].topic">{{ top.topic }} </span> <li v-for="topic in current.topics">{{ topic.topic }}</li>
</ul>
</p> </p>
</div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
</b-col>
<b-col lg="2">
<b>Musicfocus <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
</b-col> </b-col>
<b-col xl="4" lg="6"> <b-col lg="4">
<div v-if="loaded.musicfocus">
<p v-if="shows[currentShow].musicfocus.length === 0"> <p v-if="shows[currentShow].musicfocus.length === 0">
<b>Musicfocus:</b>
<small><i>(none set)</i></small> <small><i>(none set)</i></small>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
<p v-else> <p v-else>
<b>Musicfocus:</b> <ul>
<span v-for="m in shows[currentShow].musicfocus">{{ m.focus }} </span> <li v-for="focus in current.musicfocus">{{ focus.focus }}</li>
</ul>
</p> </p>
</div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
</b-col>
<b-col lg="2">
<b>Hosts <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> :</b>
</b-col> </b-col>
<b-col xl="4" lg="6">
<p v-if="shows[currentShow].hosts === 0"> <b-col lg="4">
<b>Hosts:</b> <div v-if="loaded.hosts">
<p v-if="shows[currentShow].hosts.length === 0">
<small><i>(none set)</i></small> <small><i>(none set)</i></small>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p> </p>
<p v-else> <p v-else>
<b>Hosts:</b>
<!-- TODO: make link on name; when user clicks, open modal to edit host --> <!-- TODO: make link on name; when user clicks, open modal to edit host -->
<span v-for="host in shows[currentShow].hosts">{{ host.name }} </span> <ul>
<li v-for="host in current.hosts">{{ host.name }}</li>
</ul>
</p> </p>
</div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
</div> </div>
...@@ -219,13 +263,29 @@ export default { ...@@ -219,13 +263,29 @@ export default {
shows: [], // an array of objects describing our shows (empty at load, will be populated on created()) 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 timeslots: [], // same as with shows, only for the related timeslots
notes: [], // same as with shows, only for the related notes notes: [], // same as with shows, only for the related notes
showsLoaded: false,
timeslotsLoaded: false,
notesLoaded: false,
currentShow: 0, // index of the currently selected show in our shows array currentShow: 0, // index of the currently selected show in our shows array
currentShowID: 0, // actual id of the currently selected show currentShowID: 0, // actual id of the currently selected show
numUpcoming: 8, numUpcoming: 8,
numRecent: 8 numRecent: 8,
loaded: {
shows: false,
timeslots: false,
notes: false,
categories: false,
hosts: false,
languages: false,
topics: false,
musicfocus: false,
rtrcategory: false
},
current: {
categories: [],
hosts: [],
languages: [],
topics: [],
musicfocus: [],
rtrcategory: []
}
} }
}, },
mixins: [ timeslotSort ], mixins: [ timeslotSort ],
...@@ -245,22 +305,36 @@ export default { ...@@ -245,22 +305,36 @@ export default {
// if we already had some show loaded with timeslots and notes, set these to // 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 // 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 // the new show is displayed and new timeslots and notes are still loading
this.timeslotsLoaded = false this.loaded.timeslots = false
this.notesLoaded = false this.loaded.notes = false
// also for those settings of the show which are only ids or arrays of ids
// we have to fetch the corresponding names first
this.loaded.categories = false
this.loaded.hosts = false
this.loaded.languages = false
this.loaded.musicfocus = false
this.loaded.rtrcategory = false
// set the current show and its ID to whatever we want to switch to now // set the current show and its ID to whatever we want to switch to now
this.currentShow = index this.currentShow = index
this.currentShowID = this.shows[this.currentShow].id this.currentShowID = this.shows[this.currentShow].id
// before we load timeslots and notes, we want to fetch the general settings first
this.getCategories()
this.getHosts()
this.getLanguages()
this.getTopics()
this.getMusicfocus()
this.getRTRCategory()
// now fetch the single timeslots for a given show from PV backend // now fetch the single timeslots for a given show from PV backend
axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots').then(response => { axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/').then(response => {
this.timeslots = response.data this.timeslots = response.data
this.timeslotsLoaded = true this.loaded.timeslots = true
// now that we have the timeslots we can fetch notes for all those timeslots // 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 // 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 // for bigger data sets it might be preferable to fetch only the notes for those
// timeslots that are also visible to the user // timeslots that are also visible to the user
axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes').then(response => { axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes/').then(response => {
this.notes = response.body this.notes = response.data
this.notesLoaded = true this.loaded.notes = true
}).catch(error => { }).catch(error => {
alert('There was an error fetching notes from the server' + error) alert('There was an error fetching notes from the server' + error)
}) })
...@@ -302,6 +376,112 @@ export default { ...@@ -302,6 +376,112 @@ export default {
else if (title.length > 25) return title.slice(0, 25) + '...' else if (title.length > 25) return title.slice(0, 25) + '...'
else return title else return title
}, },
// TODO: all thos getSomething functions could be probably merged into one
// generic getItem function. Maybe this.current should be an associative array
// instead of an object then?
getCategories: function () {
this.current.categories = []
var loadingError = false
if (this.shows[this.currentShow].category.length === 0) {
this.loaded.categories = true
} else {
for (var i in this.shows[this.currentShow].category) {
axios.get(process.env.API_STEERING + 'categories/' + this.shows[this.currentShow].category[i]).then(response => {
this.current.categories.push(response.data)
}).catch(error => {
loadingError = true
alert('There was an error fetching categories from the server: ' + error)
})
}
if (!loadingError) this.loaded.categories = true
}
},
getHosts: function () {
this.current.hosts = []
var loadingError = false
if (this.shows[this.currentShow].hosts.length === 0) {
this.loaded.hosts = true
} else {
for (var i in this.shows[this.currentShow].hosts) {
axios.get(process.env.API_STEERING + 'hosts/' + this.shows[this.currentShow].hosts[i] + '/').then(response => {
this.current.hosts.push(response.data)
}).catch(error => {
loadingError = true
alert('There was an error fetching hosts from the server: ' + error)
})
}
if (!loadingError) this.loaded.hosts = true
}
},
getLanguages: function () {
this.current.languages = []
var loadingError = false
if (this.shows[this.currentShow].language.length === 0) {
this.loaded.categories = true
} else {
for (var i in this.shows[this.currentShow].language) {
axios.get(process.env.API_STEERING + 'languages/' + this.shows[this.currentShow].language[i]).then(response => {
this.current.languages.push(response.data)
}).catch(error => {
loadingError = true
alert('There was an error fetching languages from the server: ' + error)
})
}
if (!loadingError) this.loaded.categories = true
}
},
getTopics: function () {
this.current.topics = []
var loadingError = false
if (this.shows[this.currentShow].topic.length === 0) {
this.loaded.topics = true
} else {
for (var i in this.shows[this.currentShow].topic) {
axios.get(process.env.API_STEERING + 'topics/' + this.shows[this.currentShow].topic[i]).then(response => {
this.current.topics.push(response.data)
}).catch(error => {
loadingError = true
alert('There was an error fetching topics from the server: ' + error)
})
}
if (!loadingError) this.loaded.topics = true
}
},
getMusicfocus: function () {
this.current.musicfocus = []
var loadingError = false
if (this.shows[this.currentShow].musicfocus.length === 0) {
this.loaded.musicfocus = true
} else {
for (var i in this.shows[this.currentShow].musicfocus) {
axios.get(process.env.API_STEERING + 'musicfocus/' + this.shows[this.currentShow].musicfocus[i]).then(response => {
this.current.musicfocus.push(response.data)
}).catch(error => {
loadingError = true
alert('There was an error fetching musicfocus from the server: ' + error)
})
}
}
if (!loadingError) this.loaded.musicfocus = true
},
getRTRCategory: function () {
this.current.rtrcategory = []
var loadingError = false
if (this.shows[this.currentShow].rtrcategory.length === 0) {
this.loaded.rtrcategory = true
} else {
for (var i in this.shows[this.currentShow].rtrcategory) {
axios.get(process.env.API_STEERING + 'rtrcategories/' + this.shows[this.currentShow].rtrcategory[i]).then(response => {
console.log(response.data)
this.current.rtrcategory.push(response.data)
}).catch(error => {
loadingError = true
alert('There was an error fetching RTR category from the server: ' + error)
})
}
}
if (!loadingError) this.loaded.categories = true
},
notYetImplemented: function () { notYetImplemented: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.') alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
} }
...@@ -311,7 +491,7 @@ export default { ...@@ -311,7 +491,7 @@ export default {
this.shows = response.data this.shows = response.data
this.currentShowID = this.shows[0].id this.currentShowID = this.shows[0].id
this.currentShow = 0 this.currentShow = 0
this.showsLoaded = true this.loaded.shows = true
this.switchShow(this.currentShow) this.switchShow(this.currentShow)
}).catch(error => { }).catch(error => {
alert('There was an error fetching shows from the server: ' + error) alert('There was an error fetching shows from the server: ' + error)
......
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