Commit 18ce2b7c authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

refactor emission manager modals to vuex

parent b7bced95
<template> <template>
<b-container> <b-container>
<b-row v-if="loaded.shows"> <show-selector
<b-col> title="Emissions"
<b-alert :callback="showHasSwitched"
:show="showChangedAlert.countdown"
@dismiss-count-down="showChangedAlertCountdown"
>
Selected new show: <b>{{ shows[currentShow].name }}</b>
<b-progress
variant="info"
animated
:max="showChangedAlert.seconds"
:value="showChangedAlert.countdown"
height="3px"
/> />
</b-alert>
<b-alert
:show="!showChangedAlert.countdown"
variant="light"
>
Currently selected show: <b>{{ shows[currentShow].name }}</b>
</b-alert>
</b-col>
<b-col align="right">
<b-dropdown
id="ddshows"
text="Sendereihe auswählen"
variant="outline-info"
>
<b-dropdown-item
v-for="(show, index) in shows"
:key="show.id"
@click="switchShow(index)"
>
{{ show.name }}
</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
<b-row v-else>
<b-col cols="12">
<div align="center">
... loading show data ...
</div>
</b-col>
</b-row>
<hr> <hr>
<b-alert <b-alert
...@@ -136,8 +94,10 @@ ...@@ -136,8 +94,10 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'
import { FullCalendar } from 'vue-full-calendar' import { FullCalendar } from 'vue-full-calendar'
import 'fullcalendar/dist/fullcalendar.css' import 'fullcalendar/dist/fullcalendar.css'
import showSelector from './ShowSelector.vue'
import modalEmissionManagerCreate from './emissions/ModalCreate.vue' import modalEmissionManagerCreate from './emissions/ModalCreate.vue'
import modalEmissionManagerResolve from './emissions/ModalResolve.vue' import modalEmissionManagerResolve from './emissions/ModalResolve.vue'
import modalEmissionManagerEdit from './emissions/ModalEdit.vue' import modalEmissionManagerEdit from './emissions/ModalEdit.vue'
...@@ -146,6 +106,7 @@ import rrules from '../mixins/rrules' ...@@ -146,6 +106,7 @@ import rrules from '../mixins/rrules'
export default { export default {
components: { components: {
FullCalendar, FullCalendar,
'show-selector': showSelector,
'app-modalEmissionManagerCreate': modalEmissionManagerCreate, 'app-modalEmissionManagerCreate': modalEmissionManagerCreate,
'app-modalEmissionManagerResolve': modalEmissionManagerResolve, 'app-modalEmissionManagerResolve': modalEmissionManagerResolve,
'app-modalEmissionManagerEdit': modalEmissionManagerEdit, 'app-modalEmissionManagerEdit': modalEmissionManagerEdit,
...@@ -155,14 +116,8 @@ export default { ...@@ -155,14 +116,8 @@ export default {
data () { data () {
return { return {
currentShow: 0,
calendarSlots: [], calendarSlots: [],
showChangedAlert: {
countdown: 0,
seconds: 3
},
// flag for when submitting resolve data // flag for when submitting resolve data
submitting: false, submitting: false,
...@@ -203,34 +158,43 @@ export default { ...@@ -203,34 +158,43 @@ export default {
}, },
computed: { computed: {
shows () { return this.$store.state.shows.shows },
timeslots () { return this.$store.state.shows.timeslots },
loaded () { loaded () {
return { return {
shows: this.$store.state.shows.loaded['shows'], shows: this.$store.state.shows.loaded['shows'],
timeslots: this.$store.state.shows.loaded['timeslots'], timeslots: this.$store.state.shows.loaded['timeslots'],
} }
}, },
...mapGetters({
shows: 'shows/shows',
selectedShow: 'shows/selectedShow',
timeslots: 'shows/timeslots',
getPlaylistById: 'playlists/getPlaylistById',
files: 'files/files',
getFileById: 'files/getFileById',
})
}, },
created () { created () {
if (this.$route.query.show) { this.$store.dispatch('shows/fetchShows', {
this.currentShow = this.$route.query.show callback: () => {
} else { this.showHasSwitched()
this.currentShow = 0
} }
this.loadShows() })
}, },
methods: { methods: {
switchShow (index) { switchShow () {
this.currentShow = index
this.loadCalendarSlots() this.loadCalendarSlots()
this.showChangedAlert.countdown = this.showChangedAlert.seconds
}, },
showChangedAlertCountdown(countdown) { // This is the callback function that is activated by the show-selector
this.showChangedAlert.countdown = countdown // component, whenever the user switches to a different show
showHasSwitched () {
this.$log.debug('show has switched to', this.selectedShow.name)
let start = this.$refs.calendar.fireMethod('getView').start.format()
let end = this.$refs.calendar.fireMethod('getView').end.format()
this.loadTimeslots(start, end)
}, },
getShowTitleById (id) { getShowTitleById (id) {
...@@ -271,10 +235,10 @@ export default { ...@@ -271,10 +235,10 @@ export default {
// currently selected show. // currently selected show.
else { else {
let timeslot = this.timeslots.find(slot => slot.id === event.id) let timeslot = this.timeslots.find(slot => slot.id === event.id)
if (timeslot.show !== this.shows[this.currentShow].id) { if (timeslot.show !== this.selectedShow.id) {
this.switchShow(this.getShowIndexById(timeslot.show)) this.switchShow(this.getShowIndexById(timeslot.show))
} else { } else {
this.$refs.appModalEmissionManagerEdit.open(timeslot, this.shows[this.currentShow]) this.$refs.appModalEmissionManagerEdit.open(timeslot)
} }
} }
}, },
...@@ -514,7 +478,7 @@ export default { ...@@ -514,7 +478,7 @@ export default {
this.$log.debug('resolveSubmit: schedule:', resolvedSchedule) this.$log.debug('resolveSubmit: schedule:', resolvedSchedule)
this.submitting = true this.submitting = true
this.$store.dispatch('shows/submitSchedule', { this.$store.dispatch('shows/submitSchedule', {
showId: this.shows[this.currentShow].id, showId: this.selectedShow.id,
schedule: resolvedSchedule, schedule: resolvedSchedule,
callback: (response) => { callback: (response) => {
this.submitting = false this.submitting = false
...@@ -535,7 +499,7 @@ export default { ...@@ -535,7 +499,7 @@ export default {
this.calendarSlots = [] this.calendarSlots = []
for (let i in this.timeslots) { for (let i in this.timeslots) {
let highlighting = 'otherShow' let highlighting = 'otherShow'
if (this.timeslots[i].show === this.shows[this.currentShow].id) { if (this.timeslots[i].show === this.selectedShow.id) {
highlighting = 'currentShow' highlighting = 'currentShow'
} }
this.calendarSlots.push({ this.calendarSlots.push({
...@@ -553,22 +517,11 @@ export default { ...@@ -553,22 +517,11 @@ export default {
start: start, start: start,
end: end, end: end,
callback: () => { callback: () => {
this.$log.debug('loadTimeslots callback executed')
this.loadCalendarSlots() this.loadCalendarSlots()
} }
}) })
}, },
loadShows () {
this.$store.dispatch('shows/fetchShows', {
callback: () => {
let start = this.$refs.calendar.fireMethod('getView').start.format()
let end = this.$refs.calendar.fireMethod('getView').end.format()
this.loadTimeslots(start, end)
}
})
},
notYetImplemented: function () { notYetImplemented: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.') alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
}, },
......
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
Creating schedule for: Creating schedule for:
</b-col> </b-col>
<b-col cols="9"> <b-col cols="9">
<b v-if="$parent.loaded.shows"> <b v-if="loaded.shows">
{{ $parent.shows[$parent.currentShow].name }} {{ selectedShow.name }}
</b>! </b>!
</b-col> </b-col>
</b-row> </b-row>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
Try again or change the start date to something in the future. Try again or change the start date to something in the future.
</b-alert> </b-alert>
<div v-if="loaded && !submitting"> <div v-if="loaded.modal && !submitting">
<b-row> <b-row>
<b-col cols="2"> <b-col cols="2">
Start: Start:
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
</template> </template>
<script> <script>
import axios from 'axios' import { mapGetters } from 'vuex'
import prettyDate from '../../mixins/prettyDate' import prettyDate from '../../mixins/prettyDate'
import rrules from '../../mixins/rrules' import rrules from '../../mixins/rrules'
...@@ -99,7 +99,7 @@ export default { ...@@ -99,7 +99,7 @@ export default {
data () { data () {
return { return {
newSchedule: null, newSchedule: null,
loaded: false, loadedModal: false,
submitting: false, submitting: false,
pastEventWarning: false, pastEventWarning: false,
valuePick: { valuePick: {
...@@ -112,6 +112,19 @@ export default { ...@@ -112,6 +112,19 @@ export default {
} }
}, },
computed: {
loaded () {
return {
shows: this.$store.state.shows.loaded['shows'],
modal: this.loadedModal,
}
},
...mapGetters({
selectedShow: 'shows/selectedShow',
})
},
methods: { methods: {
create (event) { create (event) {
// prevent the modal from closing automatically on click // prevent the modal from closing automatically on click
...@@ -135,13 +148,13 @@ export default { ...@@ -135,13 +148,13 @@ export default {
this.newSchedule.schedule.until = this.valuePick.until this.newSchedule.schedule.until = this.valuePick.until
this.newSchedule.schedule.rrule = this.valuePick.rrule this.newSchedule.schedule.rrule = this.valuePick.rrule
this.newSchedule.schedule.byweekday = this.getWeekdayFromApiDate(this.valuePick.dstart) this.newSchedule.schedule.byweekday = this.getWeekdayFromApiDate(this.valuePick.dstart)
// now generate the URL and POST our new schedule
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.$parent.shows[this.$parent.currentShow].id + '/schedules/' // ok then, let's submit and see if any conflicts arise
this.submitting = true this.submitting = true
axios.post(uri, this.newSchedule, { this.$store.dispatch('shows/submitSchedule', {
withCredentials: true, showId: this.selectedShow.id,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token } schedule: this.newSchedule,
}).then(response => { callback: (response) => {
// we have to check if there are any conflicts with existing timeslots // we have to check if there are any conflicts with existing timeslots
let conflicts = false let conflicts = false
for (let i in response.data.projected) { for (let i in response.data.projected) {
...@@ -161,21 +174,16 @@ export default { ...@@ -161,21 +174,16 @@ export default {
this.$parent.resolve(response.data) this.$parent.resolve(response.data)
this.$refs.modalEmissionManagerCreate.hide() this.$refs.modalEmissionManagerCreate.hide()
} }
}).catch(error => { },
this.submitting = false callbackCancel: () => { this.submitting = false }
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not create schedule. See console for details.')
// and we leave the modal open, so no call to its .hide function here
}) })
}, },
submit () { submit () {
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.$parent.shows[this.$parent.currentShow].id + '/schedules/' this.$store.dispatch('shows/submitSchedule', {
axios.post(uri, this.newSchedule, { showId: this.selectedShow.id,
withCredentials: true, schedule: this.newSchedule,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token } callback: (response) => {
}).then(response => {
this.submitting = false this.submitting = false
// if for some reason a new conflict arose, e.g. because in the meantime // if for some reason a new conflict arose, e.g. because in the meantime
// someone else inserted a conflicting schedule, we have to resolve. // someone else inserted a conflicting schedule, we have to resolve.
...@@ -188,12 +196,8 @@ export default { ...@@ -188,12 +196,8 @@ export default {
this.$parent.resolve(response.data) this.$parent.resolve(response.data)
} }
this.$refs.modalEmissionManagerCreate.hide() this.$refs.modalEmissionManagerCreate.hide()
}).catch(error => { },
this.submitting = false callbackCancel: () => { this.submitting = false }
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not submit final schedule. See console for details.')
// and we leave the modal open, so no call to its .hide function here
}) })
}, },
...@@ -230,7 +234,7 @@ export default { ...@@ -230,7 +234,7 @@ export default {
automation_id: 0, automation_id: 0,
} }
} }
this.loaded = true this.loadedModal = true
this.submitting = false this.submitting = false
this.$refs.modalEmissionManagerCreate.show() this.$refs.modalEmissionManagerCreate.show()
}, },
......
...@@ -5,14 +5,11 @@ ...@@ -5,14 +5,11 @@
title="Edit a schedule" title="Edit a schedule"
size="lg" size="lg"
> >
<p> <p v-if="loaded.shows">
Editing a timeslot/schedule for show: Editing a timeslot/schedule for show: <b>{{ selectedShow.name }}</b>
<b v-if="loaded.modal">
<b>{{ show.name }}</b>
</b>
</p> </p>
<p v-if="loaded.modal"> <div v-if="timeslot && loaded.schedule">
This timeslot starts at This timeslot starts at
<b-badge variant="info"> <b-badge variant="info">
{{ prettyDateTime(timeslot.start) }} {{ prettyDateTime(timeslot.start) }}
...@@ -21,9 +18,7 @@ ...@@ -21,9 +18,7 @@
<b-badge variant="info"> <b-badge variant="info">
{{ prettyDateTime(timeslot.end) }} {{ prettyDateTime(timeslot.end) }}
</b-badge> </b-badge>
</p>
<div v-if="loaded.schedule">
<div v-if="schedule.rrule === 1"> <div v-if="schedule.rrule === 1">
<p> <p>
This is a single emission. This is a single emission.
...@@ -147,7 +142,7 @@ ...@@ -147,7 +142,7 @@
</template> </template>
<script> <script>
import axios from 'axios' import { mapGetters } from 'vuex'
import prettyDate from '../../mixins/prettyDate' import prettyDate from '../../mixins/prettyDate'
import rrules from '../../mixins/rrules' import rrules from '../../mixins/rrules'
...@@ -157,14 +152,6 @@ export default { ...@@ -157,14 +152,6 @@ export default {
data () { data () {
return { return {
timeslot: null, timeslot: null,
schedule: null,
scheduleTimeslots: null,
show: null,
loaded: {
modal: false,
schedule: false,
scheduleTimeslots: false,
},
deletion: { deletion: {
amount: 0, amount: 0,
count: 0, count: 0,
...@@ -172,35 +159,43 @@ export default { ...@@ -172,35 +159,43 @@ export default {
} }
}, },
computed: {
loaded () {
return {
shows: this.$store.state.shows.loaded.shows,
schedule: this.$store.state.shows.loaded.schedule,
scheduleTimeslots: this.$store.state.shows.loaded.scheduleTimeslots,
}
},
...mapGetters({
selectedShow: 'shows/selectedShow',
schedule: 'shows/schedule',
scheduleTimeslots: 'shows/scheduleTimeslots',
})
},
methods: { methods: {
deleteFullSchedule (id) { deleteFullSchedule (id) {
let uri = process.env.VUE_APP_API_STEERING + 'shows/' + this.show.id + '/schedules/' + id + '/' this.$store.dispatch('shows/deleteSchedule', {
axios.delete(uri, { show: this.selectedShow.id,
withCredentials: true, schedule: id,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token } callback: () => {
}).then(() => {
this.$refs.modalEmissionManagerEdit.hide() this.$refs.modalEmissionManagerEdit.hide()
this.$parent.renderView(null) this.$parent.renderView(null)
}).catch(error => { }
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not delete full schedule. See console for details.')
}) })
}, },
deleteSingleTimeslot (scheduleId, timeslotId) { deleteSingleTimeslot (scheduleId, timeslotId) {
let uri = process.env.VUE_APP_API_STEERING + 'shows/' + this.show.id + this.$store.dispatch('shows/deleteTimeslot', {
'/schedules/' + scheduleId + '/timeslots/' + timeslotId + '/' show: this.selectedShow.id,
axios.delete(uri, { schedule: scheduleId,
withCredentials: true, timeslot: timeslotId,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token } callback: () => {
}).then(() => {
this.$refs.modalEmissionManagerEdit.hide() this.$refs.modalEmissionManagerEdit.hide()
this.$parent.renderView(null) this.$parent.renderView(null)
}).catch(error => { }
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not delete full schedule. See console for details.')
}) })
}, },
...@@ -223,13 +218,13 @@ export default { ...@@ -223,13 +218,13 @@ export default {
this.deletion.count = 0 this.deletion.count = 0
this.$refs.modalEmissionManagerDeleteTimeslots.show() this.$refs.modalEmissionManagerDeleteTimeslots.show()
let uri = process.env.VUE_APP_API_STEERING + 'shows/' + this.show.id + '/schedules/' + scheduleId + '/'
for (let i in toDelete) { for (let i in toDelete) {
this.$log.debug('Deleting timeslot', toDelete[i]) this.$log.debug('Deleting timeslot', toDelete[i])
axios.delete(uri + 'timeslots/' + toDelete[i] + '/', { this.$store.dispatch('shows/deleteTimeslot', {
withCredentials: true, show: this.selectedShow.id,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token } schedule: scheduleId,
}).then(() => { timeslot: toDelete[i],
callback: () => {
this.deletion.count++ this.deletion.count++
this.$log.debug('deleted ' + this.deletion.count + ' timeslots') this.$log.debug('deleted ' + this.deletion.count + ' timeslots')
if (this.deletion.count === this.deletion.amount) { if (this.deletion.count === this.deletion.amount) {
...@@ -237,62 +232,38 @@ export default { ...@@ -237,62 +232,38 @@ export default {
this.$refs.modalEmissionManagerDeleteTimeslots.hide() this.$refs.modalEmissionManagerDeleteTimeslots.hide()
this.$refs.modalEmissionManagerEdit.hide() this.$refs.modalEmissionManagerEdit.hide()