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