Skip to content
GitLab
Commit 56491736 authored by Andrea Ida Malkah Klaura's avatar Andrea Ida Malkah Klaura
Browse files

modal for notes & prettyDate mixins

parent 10a74dcb
Hide whitespace changes
Inline Side-by-side
src/components/ShowManager.vue
View file @ 56491736
......@@ -36,6 +36,8 @@
</b-row>
</div>
<div v-else>
<app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes>
<p align="left">Die nächsten <select v-model="numUpcoming">
<option>8</option>
<option>16</option>
......@@ -50,7 +52,7 @@
{{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
<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" v-on:click="notYetImplemented" />
<img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="editNote(timeslot.id)" />
</div>
</b-col>
</b-row>
......@@ -256,15 +258,15 @@
</template>
<script>
import modalNotes from './ShowManagerModalNotes.vue'
import timeslotSort from '../mixins/timeslotSort'
import prettyDate from '../mixins/prettyDate'
import axios from 'axios'
function leadingZero (num) {
if (num < 10) return '0' + num
else return num.toString()
}
export default {
components: {
'app-modalNotes': modalNotes
},
data () {
return {
shows: [], // an array of objects describing our shows (empty at load, will be populated on created())
......@@ -293,11 +295,12 @@ export default {
topics: [],
musicfocus: [],
rtrcategory: [],
type: []
type: [],
note: {}
}
}
},
mixins: [ timeslotSort ],
mixins: [ timeslotSort, prettyDate ],
computed: {
timeslotsFutureShow: function () {
if (this.numUpcoming === 'all') return this.timeslotsFuture
......@@ -335,14 +338,14 @@ export default {
this.getRTRCategory()
this.getType()
// 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.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
// for bigger data sets it might be preferable to fetch only the notes for those
// 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.loaded.notes = true
}).catch(error => {
......@@ -354,6 +357,15 @@ export default {
})
// 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) {
for (var n in this.notes) {
if (this.notes[n].timeslot === timeslotID && this.notes[n].title !== undefined) {
......@@ -362,17 +374,6 @@ export default {
}
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) {
var note = this.getTimeslotNote(timeslotID)
if (note !== null) {
......@@ -396,7 +397,7 @@ export default {
this.loaded.categories = true
} else {
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)
}).catch(error => {
loadingError = true
......@@ -413,7 +414,7 @@ export default {
this.loaded.hosts = true
} else {
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)
}).catch(error => {
loadingError = true
......@@ -430,7 +431,7 @@ export default {
this.loaded.categories = true
} else {
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)
}).catch(error => {
loadingError = true
......@@ -447,7 +448,7 @@ export default {
this.loaded.topics = true
} else {
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)
}).catch(error => {
loadingError = true
......@@ -464,7 +465,7 @@ export default {
this.loaded.musicfocus = true
} else {
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)
}).catch(error => {
loadingError = true
......@@ -480,7 +481,7 @@ export default {
if (typeof this.shows[this.currentShow].rtrcategory !== 'number') {
this.loaded.rtrcategory = true
} 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)
}).catch(error => {
loadingError = true
......@@ -492,13 +493,10 @@ export default {
getType: function () {
this.current.type = []
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') {
this.loaded.type = true
} else {
axios.get(process.env.API_STEERING + 'types/' + this.shows[this.currentShow].type).then(response => {
console.log(response.data)
axios.get(process.env.API_STEERING + 'types/' + this.shows[this.currentShow].type, {withCredentials: true}).then(response => {
this.current.type.push(response.data)
}).catch(error => {
loadingError = true
......@@ -512,7 +510,7 @@ export default {
}
},
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.currentShowID = this.shows[0].id
this.currentShow = 0
......
src/components/ShowManagerModalNotes.vue 0 → 100644
View file @ 56491736
<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>
src/mixins/prettyDate.js 0 → 100644
View file @ 56491736
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)
}
}
}
Supports Markdown
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