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

modal for notes & prettyDate mixins

parent 10a74dcb
...@@ -36,6 +36,8 @@ ...@@ -36,6 +36,8 @@
</b-row> </b-row>
</div> </div>
<div v-else> <div v-else>
<app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes>
<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>
...@@ -50,7 +52,7 @@ ...@@ -50,7 +52,7 @@
{{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }}) {{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
<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" v-on:click="notYetImplemented" /> <img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="editNote(timeslot.id)" />
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
...@@ -256,15 +258,15 @@ ...@@ -256,15 +258,15 @@
</template> </template>
<script> <script>
import modalNotes from './ShowManagerModalNotes.vue'
import timeslotSort from '../mixins/timeslotSort' import timeslotSort from '../mixins/timeslotSort'
import prettyDate from '../mixins/prettyDate'
import axios from 'axios' import axios from 'axios'
function leadingZero (num) {
if (num < 10) return '0' + num
else return num.toString()
}
export default { export default {
components: {
'app-modalNotes': modalNotes
},
data () { data () {
return { return {
shows: [], // an array of objects describing our shows (empty at load, will be populated on created()) shows: [], // an array of objects describing our shows (empty at load, will be populated on created())
...@@ -293,11 +295,12 @@ export default { ...@@ -293,11 +295,12 @@ export default {
topics: [], topics: [],
musicfocus: [], musicfocus: [],
rtrcategory: [], rtrcategory: [],
type: [] type: [],
note: {}
} }
} }
}, },
mixins: [ timeslotSort ], mixins: [ timeslotSort, prettyDate ],
computed: { computed: {
timeslotsFutureShow: function () { timeslotsFutureShow: function () {
if (this.numUpcoming === 'all') return this.timeslotsFuture if (this.numUpcoming === 'all') return this.timeslotsFuture
...@@ -335,14 +338,14 @@ export default { ...@@ -335,14 +338,14 @@ export default {
this.getRTRCategory() this.getRTRCategory()
this.getType() this.getType()
// now fetch the single timeslots for a given show from PV backend // 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/', {withCredentials: true}).then(response => {
this.timeslots = response.data this.timeslots = response.data
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
// for bigger data sets it might be preferable to fetch only the notes for those // for bigger data sets it might be preferable to fetch only the notes for those
// timeslots that are also visible to the user // timeslots that are also visible to the user
axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes/').then(response => { axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes/', {withCredentials: true}).then(response => {
this.notes = response.data this.notes = response.data
this.loaded.notes = true this.loaded.notes = true
}).catch(error => { }).catch(error => {
...@@ -354,6 +357,15 @@ export default { ...@@ -354,6 +357,15 @@ export default {
}) })
// done fetching timeslots // done fetching timeslots
}, },
editNote: function (timeslotID) {
for (var n in this.notes) {
if (this.notes[n].timeslot === timeslotID) {
this.current.note = this.notes[n]
break
}
}
this.$refs.appModalNotes.$refs.modalNote.show()
},
getTimeslotNote: function (timeslotID) { getTimeslotNote: function (timeslotID) {
for (var n in this.notes) { for (var n in this.notes) {
if (this.notes[n].timeslot === timeslotID && this.notes[n].title !== undefined) { if (this.notes[n].timeslot === timeslotID && this.notes[n].title !== undefined) {
...@@ -362,17 +374,6 @@ export default { ...@@ -362,17 +374,6 @@ export default {
} }
return null return null
}, },
prettyDate: function (date) {
var d = new Date(date)
// note: Date.getMonth() returns the month as an index from 0 to 11
return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth() + 1) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
},
prettyDuration: function (start, end) {
var duration = (new Date(end).getTime() - new Date(start).getTime()) / 1000
var hours = Math.floor(duration / 60 / 60)
var minutes = (duration / 60) % 60
return leadingZero(hours) + ':' + leadingZero(minutes)
},
prettyTimeslotNote: function (timeslotID) { prettyTimeslotNote: function (timeslotID) {
var note = this.getTimeslotNote(timeslotID) var note = this.getTimeslotNote(timeslotID)
if (note !== null) { if (note !== null) {
...@@ -396,7 +397,7 @@ export default { ...@@ -396,7 +397,7 @@ export default {
this.loaded.categories = true this.loaded.categories = true
} else { } else {
for (var i in this.shows[this.currentShow].category) { for (var i in this.shows[this.currentShow].category) {
axios.get(process.env.API_STEERING + 'categories/' + this.shows[this.currentShow].category[i]).then(response => { axios.get(process.env.API_STEERING + 'categories/' + this.shows[this.currentShow].category[i], {withCredentials: true}).then(response => {
this.current.categories.push(response.data) this.current.categories.push(response.data)
}).catch(error => { }).catch(error => {
loadingError = true loadingError = true
...@@ -413,7 +414,7 @@ export default { ...@@ -413,7 +414,7 @@ export default {
this.loaded.hosts = true this.loaded.hosts = true
} else { } else {
for (var i in this.shows[this.currentShow].hosts) { for (var i in this.shows[this.currentShow].hosts) {
axios.get(process.env.API_STEERING + 'hosts/' + this.shows[this.currentShow].hosts[i] + '/').then(response => { axios.get(process.env.API_STEERING + 'hosts/' + this.shows[this.currentShow].hosts[i] + '/', {withCredentials: true}).then(response => {
this.current.hosts.push(response.data) this.current.hosts.push(response.data)
}).catch(error => { }).catch(error => {
loadingError = true loadingError = true
...@@ -430,7 +431,7 @@ export default { ...@@ -430,7 +431,7 @@ export default {
this.loaded.categories = true this.loaded.categories = true
} else { } else {
for (var i in this.shows[this.currentShow].language) { for (var i in this.shows[this.currentShow].language) {
axios.get(process.env.API_STEERING + 'languages/' + this.shows[this.currentShow].language[i]).then(response => { axios.get(process.env.API_STEERING + 'languages/' + this.shows[this.currentShow].language[i], {withCredentials: true}).then(response => {
this.current.languages.push(response.data) this.current.languages.push(response.data)
}).catch(error => { }).catch(error => {
loadingError = true loadingError = true
...@@ -447,7 +448,7 @@ export default { ...@@ -447,7 +448,7 @@ export default {
this.loaded.topics = true this.loaded.topics = true
} else { } else {
for (var i in this.shows[this.currentShow].topic) { for (var i in this.shows[this.currentShow].topic) {
axios.get(process.env.API_STEERING + 'topics/' + this.shows[this.currentShow].topic[i]).then(response => { axios.get(process.env.API_STEERING + 'topics/' + this.shows[this.currentShow].topic[i], {withCredentials: true}).then(response => {
this.current.topics.push(response.data) this.current.topics.push(response.data)
}).catch(error => { }).catch(error => {
loadingError = true loadingError = true
...@@ -464,7 +465,7 @@ export default { ...@@ -464,7 +465,7 @@ export default {
this.loaded.musicfocus = true this.loaded.musicfocus = true
} else { } else {
for (var i in this.shows[this.currentShow].musicfocus) { for (var i in this.shows[this.currentShow].musicfocus) {
axios.get(process.env.API_STEERING + 'musicfocus/' + this.shows[this.currentShow].musicfocus[i]).then(response => { axios.get(process.env.API_STEERING + 'musicfocus/' + this.shows[this.currentShow].musicfocus[i], {withCredentials: true}).then(response => {
this.current.musicfocus.push(response.data) this.current.musicfocus.push(response.data)
}).catch(error => { }).catch(error => {
loadingError = true loadingError = true
...@@ -480,7 +481,7 @@ export default { ...@@ -480,7 +481,7 @@ export default {
if (typeof this.shows[this.currentShow].rtrcategory !== 'number') { if (typeof this.shows[this.currentShow].rtrcategory !== 'number') {
this.loaded.rtrcategory = true this.loaded.rtrcategory = true
} else { } else {
axios.get(process.env.API_STEERING + 'rtrcategories/' + this.shows[this.currentShow].rtrcategory).then(response => { axios.get(process.env.API_STEERING + 'rtrcategories/' + this.shows[this.currentShow].rtrcategory, {withCredentials: true}).then(response => {
this.current.rtrcategory.push(response.data) this.current.rtrcategory.push(response.data)
}).catch(error => { }).catch(error => {
loadingError = true loadingError = true
...@@ -492,13 +493,10 @@ export default { ...@@ -492,13 +493,10 @@ export default {
getType: function () { getType: function () {
this.current.type = [] this.current.type = []
var loadingError = false var loadingError = false
console.log(this.shows[this.currentShow])
console.log(typeof this.shows[this.currentShow].type)
if (typeof this.shows[this.currentShow].type !== 'number') { if (typeof this.shows[this.currentShow].type !== 'number') {
this.loaded.type = true this.loaded.type = true
} else { } else {
axios.get(process.env.API_STEERING + 'types/' + this.shows[this.currentShow].type).then(response => { axios.get(process.env.API_STEERING + 'types/' + this.shows[this.currentShow].type, {withCredentials: true}).then(response => {
console.log(response.data)
this.current.type.push(response.data) this.current.type.push(response.data)
}).catch(error => { }).catch(error => {
loadingError = true loadingError = true
...@@ -512,7 +510,7 @@ export default { ...@@ -512,7 +510,7 @@ export default {
} }
}, },
created () { created () {
axios.get(process.env.API_STEERING_SHOWS).then(response => { axios.get(process.env.API_STEERING_SHOWS, {withCredentials: true}).then(response => {
this.shows = response.data this.shows = response.data
this.currentShowID = this.shows[0].id this.currentShowID = this.shows[0].id
this.currentShow = 0 this.currentShow = 0
......
<template>
<b-modal ref="modalNote" title="Editing a note" size="lg">
<b-container fluid>
<p>This is the note for the timeslot on {{ prettyDate(note.start) }}.)</p>
<b-row>
<b-col cols="2">Title:</b-col>
<b-col cols="10"><b-form-input v-model="note.title" type="text" placeholder="Enter a title"></b-form-input></b-col>
</b-row>
<b-row>
<b-col cols="2">Summary:</b-col>
<b-col cols="10"><b-form-textarea v-model="note.summary" :rows="4" placeholder="Enter a summary"></b-form-textarea></b-col>
</b-row>
<b-row>
<b-col cols="2">Content:</b-col>
<b-col cols="10"><b-form-textarea v-model="note.content" :rows="8" placeholder="Enter a text describing this timeslot"></b-form-textarea></b-col>
</b-row>
</b-container>
</b-modal>
</template>
<script>
import prettyDate from '../mixins/prettyDate'
// import axios from 'axios'
export default {
props: {
note: { type: Object, required: true }
},
mixins: [ prettyDate ],
data () {
return {
}
},
methods: {
save: function () {
}
}
}
</script>
<style scoped>
div.recenttimeslots {
margin-top: 2em;
}
.showsettings, .recenttimeslots, .nexttimeslots {
text-align: left;
}
</style>
function leadingZero (num) {
if (num < 10) return '0' + num
else return num.toString()
}
export default {
methods: {
prettyDate: function (date) {
var d = new Date(date)
// note: Date.getMonth() returns the month as an index from 0 to 11
return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth() + 1) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
},
prettyDuration: function (start, end) {
var duration = (new Date(end).getTime() - new Date(start).getTime()) / 1000
var hours = Math.floor(duration / 60 / 60)
var minutes = (duration / 60) % 60
return leadingZero(hours) + ':' + leadingZero(minutes)
}
}
}
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