Skip to content

GitLab

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
Show whitespace changes
Inline Side-by-side
src/components/ShowManager.vue
View file @ e7ffcd0b
......@@ -11,16 +11,16 @@
<b-jumbotron>
<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>
</template>
<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" />
</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" />
<div v-if="showsLoaded">
<div v-if="loaded.shows">
<!-- TODO: see if we can make a nice but secure html rendering of the description -->
{{ shows[currentShow].description.replace(/<[^>]*>/g, '') }}
<!-- TODO: add image and logo here? -->
......@@ -28,7 +28,7 @@
</p>
</b-jumbotron>
<div v-if="!showsLoaded">
<div v-if="!loaded.shows">
<b-row>
<b-col align="center">
<img src="../assets/radio.gif" alt="loading data" />
......@@ -41,14 +41,14 @@
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<div v-if="timeslotsLoaded">
<div v-if="loaded.timeslots">
<b-row>
<b-col>
<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-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" />
{{ 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>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</div>
......@@ -63,14 +63,14 @@
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<div v-if="timeslotsLoaded">
<div v-if="loaded.timeslots">
<b-row>
<b-col>
<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-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="notYetImplemented" />
{{ 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>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</div>
......@@ -79,12 +79,14 @@
</div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
</div>
<hr />
<div v-if="showsLoaded" class="showsettings">
<div v-if="loaded.shows" class="showsettings">
<h2>Allgemeine Einstellungen zur Sendereihe:</h2>
<b-row>
<b-col xl="4" lg="6">
<b-col lg="6">
<p>
<b>E-Mail:</b>
<span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
......@@ -92,15 +94,17 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<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-else><a :href="shows[currentShow].website">{{ shows[currentShow].website }}</a></span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for type_id from steering api -->
......@@ -108,7 +112,8 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for rtrcategory_id from steering api -->
......@@ -116,7 +121,8 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for predecessor_id from steering api -->
......@@ -126,7 +132,8 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p>
<b>CBA Series ID:</b>
<span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span>
......@@ -134,7 +141,8 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" lg="6">
<b-col lg="6">
<p>
<b>Fallback Pool:</b>
<span v-if="shows[currentShow].fallback_pool === ''"><small><i>(none set)</i></small></span>
......@@ -142,62 +150,98 @@
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</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">
<b>Categories:</b>
<small><i>(none set)</i></small>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
<p v-else>
<b>Categories:</b>
<span v-for="cat in shows[currentShow].category">{{ cat.category }} </span>
<ul>
<li v-for="cat in current.categories">{{ cat.category }}</li>
</ul>
</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 xl="4" lg="6">
<b-col lg="4">
<div v-if="loaded.categories">
<p v-if="shows[currentShow].language.length === 0">
<b>Languages:</b>
<small><i>(none set)</i></small>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
<p v-else>
<b>Languages:</b>
<span v-for="lang in shows[currentShow].language">{{ lang.name }} </span>
<ul>
<li v-for="lang in current.languages">{{ lang.name }}</li>
</ul>
</p>
</div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
</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">
<b>Topics:</b>
<small><i>(none set)</i></small>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
<p v-else>
<b>Topics:</b>
<span v-for="top in shows[currentShow].topic">{{ top.topic }} </span>
<ul>
<li v-for="topic in current.topics">{{ topic.topic }}</li>
</ul>
</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 xl="4" lg="6">
<b-col lg="4">
<div v-if="loaded.musicfocus">
<p v-if="shows[currentShow].musicfocus.length === 0">
<b>Musicfocus:</b>
<small><i>(none set)</i></small>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
<p v-else>
<b>Musicfocus:</b>
<span v-for="m in shows[currentShow].musicfocus">{{ m.focus }} </span>
<ul>
<li v-for="focus in current.musicfocus">{{ focus.focus }}</li>
</ul>
</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 xl="4" lg="6">
<p v-if="shows[currentShow].hosts === 0">
<b>Hosts:</b>
<b-col lg="4">
<div v-if="loaded.hosts">
<p v-if="shows[currentShow].hosts.length === 0">
<small><i>(none set)</i></small>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
<p v-else>
<b>Hosts:</b>
<!-- 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>
</div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
</b-col>
</b-row>
</div>
</div>
......@@ -219,13 +263,29 @@ export default {
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
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
currentShowID: 0, // actual id of the currently selected show
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 ],
......@@ -245,22 +305,36 @@ export default {
// 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
this.loaded.timeslots = 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
this.currentShow = index
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
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.timeslotsLoaded = true
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
// for bigger data sets it might be preferable to fetch only the notes for those
// timeslots that are also visible to the user
axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes').then(response => {
this.notes = response.body
this.notesLoaded = true
axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes/').then(response => {
this.notes = response.data
this.loaded.notes = true
}).catch(error => {
alert('There was an error fetching notes from the server' + error)
})
......@@ -302,6 +376,112 @@ export default {
else if (title.length > 25) return title.slice(0, 25) + '...'
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 () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
}
......@@ -311,7 +491,7 @@ export default {
this.shows = response.data
this.currentShowID = this.shows[0].id
this.currentShow = 0
this.showsLoaded = true
this.loaded.shows = true
this.switchShow(this.currentShow)
}).catch(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