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

new presentation of timeslots with b-table (ctd.)

parent 164f36be
...@@ -42,11 +42,13 @@ ...@@ -42,11 +42,13 @@
</b-row> </b-row>
</div> </div>
<div v-else> <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-modalShow ref="appModalShow" v-bind:show="shows[currentShow]"></app-modalShow>
<app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes> <app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes>
<!-- here we show our table of timeslots -->
<p> <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> </p>
<div v-if="loaded.timeslots"> <div v-if="loaded.timeslots">
<b-table striped hover outlined :items="notesTableArray"></b-table> <b-table striped hover outlined :items="notesTableArray"></b-table>
...@@ -63,7 +65,7 @@ ...@@ -63,7 +65,7 @@
{{ prettyDateTime(timeslot.start) }} <small>(Duration: {{ prettyDuration(timeslot.start, timeslot.end) }})</small> {{ prettyDateTime(timeslot.start) }} <small>(Duration: {{ prettyDuration(timeslot.start, timeslot.end) }})</small>
<span v-if="loaded.notes">{{ 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 note" v-on:click="editNote(timeslot.id)" /> <img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="editTimeslotNote(timeslot.id)" />
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
...@@ -73,175 +75,173 @@ ...@@ -73,175 +75,173 @@
<hr /> <hr />
<div v-if="loaded.shows"> <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
<h2>Allgemeine Einstellungen zur Sendereihe:</h2> <b-row>
<b-row>
<b-col lg="6">
<p>
<b-badge variant="light">E-Mail:</b-badge>
<span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
<span v-else>{{ shows[currentShow].email }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit contact e-mail" v-on:click="$refs.appModalShow.showEmail()" />
</p>
</b-col>
<b-col lg="6"> <b-col lg="6">
<p> <p>
<b-badge variant="light">Website:</b-badge> <b-badge variant="light">E-Mail:</b-badge>
<span v-if="shows[currentShow].website === null"><small><i>(none set)</i></small></span> <span v-if="shows[currentShow].email === null"><small><i>(none set)</i></small></span>
<span v-else><a :href="shows[currentShow].website">{{ shows[currentShow].website }}</a></span> <span v-else>{{ shows[currentShow].email }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit website" v-on:click="$refs.appModalShow.showWebsite()" /> <img src="../assets/16x16/emblem-system.png" alt="edit contact e-mail" v-on:click="$refs.appModalShow.showEmail()" />
</p> </p>
</b-col> </b-col>
<b-col lg="6"> <b-col lg="6">
<p> <p>
<b-badge variant="light">Show type:</b-badge> <b-badge variant="light">Website:</b-badge>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? --> <span v-if="shows[currentShow].website === null"><small><i>(none set)</i></small></span>
<span v-if="loaded.type"> <span v-else><a :href="shows[currentShow].website">{{ shows[currentShow].website }}</a></span>
<span v-if="current.type.length === 0"><small><i>(none set)</i></small></span> <img src="../assets/16x16/emblem-system.png" alt="edit website" v-on:click="$refs.appModalShow.showWebsite()" />
<span v-else>{{ current.type[0].type }}</span> </p>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> </b-col>
</span>
<span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
</p>
</b-col>
<b-col lg="6"> <b-col lg="6">
<p> <p>
<b-badge variant="light">Funding category (eg. for RTR):</b-badge> <b-badge variant="light">Show type:</b-badge>
<!-- 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? -->
<span v-if="loaded.rtrcategory"> <span v-if="loaded.type">
<span v-if="current.rtrcategory.length === 0"><small><i>(none set)</i></small></span> <span v-if="current.type.length === 0"><small><i>(none set)</i></small></span>
<span v-else>{{ current.rtrcategory[0].rtrcategory }}</span> <span v-else>{{ current.type[0].type }}</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" />
</span> </span>
<span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span> <span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
</p> </p>
</b-col> </b-col>
<b-col lg="6"> <b-col lg="6">
<p> <p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? --> <b-badge variant="light">Funding category (eg. for RTR):</b-badge>
<!-- TODO: fetch name for predecessor_id from steering api --> <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<b-badge variant="light">Predecessor:</b-badge> <span v-if="loaded.rtrcategory">
<span v-if="shows[currentShow].predecessor_id === null"><small><i>This show has no predecessor show.</i></small></span> <span v-if="current.rtrcategory.length === 0"><small><i>(none set)</i></small></span>
<span v-else>{{ shows[currentShow].predecessor_id }}</span> <span v-else>{{ current.rtrcategory[0].rtrcategory }}</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> </span>
</b-col> <span v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /></span>
</p>
</b-col>
<b-col lg="6"> <b-col lg="6">
<p> <p>
<b-badge variant="light">CBA Series ID:</b-badge> <!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span> <!-- TODO: fetch name for predecessor_id from steering api -->
<span v-else>{{ shows[currentShow].cba_series_id }}</span> <b-badge variant="light">Predecessor:</b-badge>
<img src="../assets/16x16/emblem-system.png" alt="edit CBA series ID" v-on:click="$refs.appModalShow.showCBAid()" /> <span v-if="shows[currentShow].predecessor_id === null"><small><i>This show has no predecessor show.</i></small></span>
</p> <span v-else>{{ shows[currentShow].predecessor_id }}</span>
</b-col> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-col lg="6"> <b-col lg="6">
<p> <p>
<b-badge variant="light">Fallback List/Pool:</b-badge> <b-badge variant="light">CBA Series ID:</b-badge>
<span v-if="shows[currentShow].fallback_id === ''"><small><i>(none set)</i></small></span> <span v-if="shows[currentShow].cba_series_id === null"><small><i>(none set)</i></small></span>
<span v-else>ID: {{ shows[currentShow].fallback_id }}</span> <span v-else>{{ shows[currentShow].cba_series_id }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit CBA series ID" v-on:click="$refs.appModalShow.showCBAid()" />
</p> </p>
</b-col> </b-col>
</b-row> <b-col lg="6">
<p>
<b-badge variant="light">Fallback List/Pool:</b-badge>
<span v-if="shows[currentShow].fallback_id === ''"><small><i>(none set)</i></small></span>
<span v-else>ID: {{ shows[currentShow].fallback_id }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</p>
</b-col>
<b-row> </b-row>
<b-col lg="2"> <b-row>
<b-badge style="width:80%;">Categories:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</b-col>
<b-col lg="4">
<div v-if="loaded.categories">
<p v-if="shows[currentShow].category.length === 0">
<small><i>(none set)</i></small>
</p>
<p v-else>
<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-col lg="2">
<b-badge style="width:80%;">Topics:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <b-badge style="width:80%;">Categories:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</b-col> </b-col>
<b-col lg="4"> <b-col lg="4">
<div v-if="loaded.topics"> <div v-if="loaded.categories">
<p v-if="shows[currentShow].topic.length === 0"> <p v-if="shows[currentShow].category.length === 0">
<small><i>(none set)</i></small> <small><i>(none set)</i></small>
</p> </p>
<p v-else> <p v-else>
<ul> <ul>
<li v-for="topic in current.topics">{{ topic.topic }}</li> <li v-for="cat in current.categories">{{ cat.category }}</li>
</ul> </ul>
</p> </p>
</div> </div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div> <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
</b-col> </b-col>
<b-col lg="2"> <b-col lg="2">
<b-badge style="width:80%;">Musicfocus:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <b-badge style="width:80%;">Topics:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</b-col> </b-col>
<b-col lg="4"> <b-col lg="4">
<div v-if="loaded.musicfocus"> <div v-if="loaded.topics">
<p v-if="shows[currentShow].musicfocus.length === 0"> <p v-if="shows[currentShow].topic.length === 0">
<small><i>(none set)</i></small> <small><i>(none set)</i></small>
</p> </p>
<p v-else> <p v-else>
<ul> <ul>
<li v-for="focus in current.musicfocus">{{ focus.focus }}</li> <li v-for="topic in current.topics">{{ topic.topic }}</li>
</ul> </ul>
</p> </p>
</div> </div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div> <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
</b-col> </b-col>
<b-col lg="2"> <b-col lg="2">
<b-badge style="width:80%;">Languages:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <b-badge style="width:80%;">Musicfocus:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</b-col> </b-col>
<b-col lg="4"> <b-col lg="4">
<div v-if="loaded.languages"> <div v-if="loaded.musicfocus">
<p v-if="shows[currentShow].language.length === 0"> <p v-if="shows[currentShow].musicfocus.length === 0">
<small><i>(none set)</i></small> <small><i>(none set)</i></small>
</p> </p>
<p v-else> <p v-else>
<ul> <ul>
<li v-for="lang in current.languages">{{ lang.name }}</li> <li v-for="focus in current.musicfocus">{{ focus.focus }}</li>
</ul> </ul>
</p> </p>
</div> </div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div> <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
</b-col> </b-col>
<b-col lg="2"> <b-col lg="2">
<b-badge style="width:80%;">Hosts:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" /> <b-badge style="width:80%;">Languages:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</b-col> </b-col>
<b-col lg="4"> <b-col lg="4">
<div v-if="loaded.hosts"> <div v-if="loaded.languages">
<p v-if="shows[currentShow].hosts.length === 0"> <p v-if="shows[currentShow].language.length === 0">
<small><i>(none set)</i></small> <small><i>(none set)</i></small>
</p> </p>
<p v-else> <p v-else>
<!-- TODO: make link on name; when user clicks, open modal to edit host --> <ul>
<ul> <li v-for="lang in current.languages">{{ lang.name }}</li>
<li v-for="host in current.hosts">{{ host.name }}</li> </ul>
</ul> </p>
</p> </div>
</div> <div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div>
<div v-else><img src="../assets/radio.gif" height="24px" alt="loading data" /><br /></div> </b-col>
</b-col>
</b-row> <b-col lg="2">
</div> <b-badge style="width:80%;">Hosts:</b-badge> <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
</b-col>
<b-col lg="4">
<div v-if="loaded.hosts">
<p v-if="shows[currentShow].hosts.length === 0">
<small><i>(none set)</i></small>
</p>
<p v-else>
<!-- TODO: make link on name; when user clicks, open modal to edit host -->
<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>
</b-container> </b-container>
</template> </template>
...@@ -274,7 +274,7 @@ export default { ...@@ -274,7 +274,7 @@ export default {
numRecent: 8, numRecent: 8,
numSlots: 10, numSlots: 10,
dateSlotsStart: new Date(), dateSlotsStart: new Date(),
dateSlotsEnd: new Date(new Date().getTime() + 60 * 86400000), dateSlotsEnd: new Date(new Date().getTime() + 90 * 86400000),
loaded: { loaded: {
shows: false, shows: false,
timeslots: false, timeslots: false,
...@@ -308,8 +308,11 @@ export default { ...@@ -308,8 +308,11 @@ export default {
title: this.getTimeslotNoteTitle(this.timeslots[i].id), title: this.getTimeslotNoteTitle(this.timeslots[i].id),
starts: this.prettyDateTime(this.timeslots[i].start), starts: this.prettyDateTime(this.timeslots[i].start),
duration: this.prettyDuration(this.timeslots[i].start, this.timeslots[i].end) + 'min', 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) + '" />' // TODO: find out how to insert images or iconffont icons into b-table rows
options: '<a href="#" onclick="alert(1)"><span class="oi" data-glyph="wrench" title="wrench" aria-hidden="true">edit</span></a>' // 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 return arr
...@@ -354,16 +357,24 @@ export default { ...@@ -354,16 +357,24 @@ export default {
}, },
getTimeslots: function (start, end, limit, offset) { getTimeslots: function (start, end, limit, offset) {
var uri = process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/?' var uri = process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/?'
if (typeof start === 'string') uri += 'start=' + start if (typeof start === 'object') uri += 'start=' + this.apiDate(start)
if (typeof end === 'string') uri += '&end=' + end if (typeof end === 'object') uri += '&end=' + this.apiDate(end)
if (typeof limit === 'number') uri += '&limit=' + limit if (typeof limit === 'number') uri += '&limit=' + limit
if (typeof offset === 'number') uri += '&offset=' + offset if (typeof offset === 'number') uri += '&offset=' + offset
console.log(uri)
axios.get(uri, {withCredentials: true}).then(response => { axios.get(uri, {withCredentials: true}).then(response => {
this.timeslots = response.data.results // if we use the limit argument results are paginated and look different
this.timeslotmeta.count = response.data.count // than without the limit argument
this.timeslotmeta.next = response.data.next if (typeof limit === 'number') {
this.timeslotmeta.previous = response.data.previous 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 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
...@@ -383,7 +394,7 @@ export default { ...@@ -383,7 +394,7 @@ export default {
}) })
// done fetching timeslots // done fetching timeslots
}, },
editNote: function (timeslotID) { editTimeslotNote: function (timeslotID) {
for (var n in this.notes) { for (var n in this.notes) {
if (this.notes[n].timeslot === timeslotID) { if (this.notes[n].timeslot === timeslotID) {
this.current.note = this.notes[n] this.current.note = this.notes[n]
...@@ -550,4 +561,13 @@ export default { ...@@ -550,4 +561,13 @@ export default {
</script> </script>
<style> <style>
span.timeslotEditLink {
color: #8d5f82 !important;
font-weight: bold;
font-size: 0.8em;
padding: 0.25em;
}
span.timeslotEditLink:hover {
color: #ad7fa8 !important;
}
</style> </style>
...@@ -4,13 +4,13 @@ function leadingZero (num) { ...@@ -4,13 +4,13 @@ function leadingZero (num) {
} }
var day = [ var day = [
'Sunday',
'Monday', 'Monday',
'Tuesday', 'Tuesday',
'Wednesday', 'Wednesday',
'Thursday', 'Thursday',
'Friday', 'Friday',
'Saturday', 'Saturday'
'Sunday'
] ]
var month = [ var month = [
...@@ -32,13 +32,13 @@ export default { ...@@ -32,13 +32,13 @@ export default {
methods: { methods: {
apiDate: function (date) { apiDate: function (date) {
var d = new Date(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) { prettyDate: function (date) {
var d = new Date(date) var d = new Date(date)
var dstring = '' var dstring = ''
dstring += day[d.getDay()] + ', ' dstring += day[d.getDay()] + ', '
dstring += leadingZero(d.getDate() + 1) + '. ' dstring += leadingZero(d.getDate()) + '. '
dstring += month[d.getMonth()] + ' ' dstring += month[d.getMonth()] + ' '
dstring += d.getFullYear() dstring += d.getFullYear()
return dstring return dstring
...@@ -52,7 +52,7 @@ export default { ...@@ -52,7 +52,7 @@ export default {
*/ */
var dstring = '' var dstring = ''
dstring += day[d.getDay()] + ', ' dstring += day[d.getDay()] + ', '
dstring += leadingZero(d.getDate() + 1) + '. ' dstring += leadingZero(d.getDate()) + '. '
dstring += month[d.getMonth()] + ' ' dstring += month[d.getMonth()] + ' '
dstring += d.getFullYear() + ', ' dstring += d.getFullYear() + ', '
dstring += leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes()) dstring += leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
......
Markdown is supported
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