Skip to content
Snippets Groups Projects
Commit 5b46e774 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

added all show fields from steering api/v1

parent 68c0fa34
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/ShowManager.vue
+ 166
− 49
View file @ 5b46e774
<template> <template>
<b-container> <b-container>
<div> <b-row>
<b-row v-if="showsLoaded"> <b-col align="right">
<b-col> <b-dropdown id="ddshows" text="Sendereihe auswählen" variant="info">
Aktuell ausgewählt: &nbsp;&nbsp; <b-dropdown-item v-for="(show, index) in this.shows" :key="show.id" v-on:click="switchShow(index)">{{ show.name }}</b-dropdown-item>
<b-button disabled variant="outline-secondary"><b>{{ shows[currentShow].name }}</b></b-button> </b-dropdown>
</b-col> </b-col>
<b-col align="right"> </b-row>
<b-dropdown id="ddshows" text="Sendereihe auswählen" variant="info"> <hr />
<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-jumbotron>
<template slot="header">
<span v-if="showsLoaded">{{ 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>
<img src="../assets/16x16/emblem-system.png" alt="edit short description" v-on:click="notYetImplemented" />
</template>
<p v-if="showsLoaded">
<b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="notYetImplemented" />
<div v-if="showsLoaded">
<!-- 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? -->
</div>
</p>
</b-jumbotron>
<div v-if="!showsLoaded">
<b-row>
<b-col align="center">
<img src="../assets/radio.gif" alt="loading data" />
</b-col> </b-col>
</b-row> </b-row>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div> </div>
<hr /> <div v-else>
<p align="left">Die nächsten <select v-model="numUpcoming"> <p align="left">Die nächsten <select v-model="numUpcoming">
<option>8</option> <option>8</option>
<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="timeslotsLoaded">
<div class="row"> <b-row>
<div class="col-12"> <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="setPlaylist" /> <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="playPlaylist" /> <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="notesLoaded">{{ 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="setPlaylist" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</div> </div>
</div> </b-col>
</div> </b-row>
</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>
...@@ -43,36 +64,141 @@ ...@@ -43,36 +64,141 @@
<option value="all">alle</option> <option value="all">alle</option>
</select> Sendungen:</p> </select> Sendungen:</p>
<div v-if="timeslotsLoaded"> <div v-if="timeslotsLoaded">
<div class="row"> <b-row>
<div class="col-12"> <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="setPlaylist" /> <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="playPlaylist" /> <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="notesLoaded">{{ 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="setPlaylist" /> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</div> </div>
</div> </b-col>
</div> </b-row>
</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 class="showsettings"> <div v-if="showsLoaded" class="showsettings">
<h2>Allgemeine Einstellungen zur Sendereihe:</h2> <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
<div v-if="showsLoaded"> <b-row>
<p> <b-col xl="4" lg="6">
<span v-if="shows[currentShow].short_description === ''"><b>Kurzbeschreibung:</b><i>(noch keine Kurzbeschreibung eingetragen)</i></span> <p>
<span v-else="shows[currentShow].short_description === ''"><b>Kurzbeschreibung</b><br />{{ shows[currentShow].short_description }}</span> <b>E-Mail:</b>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setShortDescription" /> <span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
</p> <span v-else>{{ shows[currentShow].email }}</span>
<p> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
CBA-Url: <a v-bind:href="shows[currentShow].cba_url">{{ shows[currentShow].cba_url }}</a> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setShortDescription" /> </p>
</p> </b-col>
</div> <b-col xl="4" lg="6">
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div> <p>
<b>Website:</b> {{ shows[currentShow].website }}
<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">
<p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for type_id from steering api -->
<b>Type:</b> {{ shows[currentShow].type_id }}
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" 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 -->
<b>RTR-Category:</b> {{ shows[currentShow].rtrcategory_id }}
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" 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 -->
<b>Predecessor:</b>
<span v-if="shows[currentShow].predecessor_id === null"><small><i>This show has no predecessor show.</i></small></span>
<span v-else>{{ shows[currentShow].predecessor_id }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" lg="6">
<p>
<b>CBA Series ID:</b>
<span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span>
<span v-else>{{ shows[currentShow].cba_series_id }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" lg="6">
<p>
<b>Fallback Pool:</b>
<span v-if="shows[currentShow].fallback_pool === ''"><small><i>(none set)</i></small></span>
<span v-else>{{ shows[currentShow].fallback_pool }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col xl="4" lg="6">
<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>
</p>
</b-col>
<b-col xl="4" lg="6">
<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>
</p>
</b-col>
<b-col xl="4" lg="6">
<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>
</p>
</b-col>
<b-col xl="4" lg="6">
<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>
</p>
</b-col>
<b-col xl="4" lg="6">
<p v-if="shows[currentShow].hosts === 0">
<b>Hosts:</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>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>
</p>
</b-col>
</b-row>
</div> </div>
</div> </div>
</b-container> </b-container>
...@@ -181,16 +307,7 @@ export default { ...@@ -181,16 +307,7 @@ 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
}, },
editEpisode: function () { notYetImplemented: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
setPlaylist: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
playPlaylist: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
setShortDescription: 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.')
} }
}, },
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment