From 28357168606c3224f696fdbdcd726f0f64a68855 Mon Sep 17 00:00:00 2001
From: Andrea Ida Malkah Klaura <jackie@o94.at>
Date: Fri, 16 Feb 2018 09:49:25 +0100
Subject: [PATCH] new presentation of timeslots with b-table (ctd.)
---
src/components/ShowManager.vue | 354 +++++++++++++++++----------------
src/mixins/prettyDate.js | 10 +-
2 files changed, 192 insertions(+), 172 deletions(-)
diff --git a/src/components/ShowManager.vue b/src/components/ShowManager.vue
index 5967dde8..3949648b 100644
--- a/src/components/ShowManager.vue
+++ b/src/components/ShowManager.vue
@@ -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>
diff --git a/src/mixins/prettyDate.js b/src/mixins/prettyDate.js
index f4f7b730..a9ab545b 100644
--- a/src/mixins/prettyDate.js
+++ b/src/mixins/prettyDate.js
@@ -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())
--
GitLab