Newer
Older
<template>
<div>
<b-modal
ref="modalEmissionManagerEdit"
title="Edit a schedule"
size="lg"
>
<p v-if="loaded.shows">
Editing a timeslot/schedule for show: <b>{{ selectedShow.name }}</b>
<div v-if="timeslot && loaded.schedule">
This timeslot starts at
<b-badge variant="info">
{{ prettyDateTime(timeslot.start) }}
</b-badge>
and ends at
<b-badge variant="info">
{{ prettyDateTime(timeslot.end) }}
</b-badge>
<div v-if="schedule.rrule === 1">

jackie / Andrea Ida Malkah Klaura
committed
<p>
This is a single emission.

jackie / Andrea Ida Malkah Klaura
committed
<span v-if="!loaded.scheduleTimeslots">
<br>
<img
src="../../assets/radio.gif"

jackie / Andrea Ida Malkah Klaura
committed
alt="loading schedule data"
>
</span>

jackie / Andrea Ida Malkah Klaura
committed
<span v-else>
<span v-if="scheduleTimeslots.length > 1">
But due to a previous conflict resolution there is a second timeslot, from
<b-badge variant="info">
<span v-if="timeslot.start === scheduleTimeslots[0].start">{{ prettyDateTime(scheduleTimeslots[1].start) }}</span>
<span v-else>{{ prettyDateTime(scheduleTimeslots[0].start) }}</span>
</b-badge>
to
<b-badge variant="info">
<span v-if="timeslot.start === scheduleTimeslots[0].start">{{ prettyDateTime(scheduleTimeslots[1].end) }}</span>
<span v-else>{{ prettyDateTime(scheduleTimeslots[0].end) }}</span>
</b-badge>
.
</span>
<span v-else>No other timeslots in this schedule.</span>
</span>
</p>
</div>
<div v-else>
<p>This is a recurring event: <b>{{ rruleRender(schedule.rrule) }}</b>, until: {{ prettyDate(schedule.until) }}</p>
<p>All timeslots of this schedule:</p>
<ul v-if="loaded.scheduleTimeslots">
<li
v-for="slot in scheduleTimeslots"
:key="slot.id"
>
from
<b-badge :variant="timeslot.id === slot.id ? 'info' : 'light'">
{{ prettyDateTime(slot.start) }}
</b-badge>
to
<b-badge :variant="timeslot.id === slot.id ? 'info' : 'light'">
{{ prettyDateTime(slot.end) }}
</b-badge>
</li>
</ul>
</div>
<div v-if="loaded.scheduleTimeslots">
<p>What do you want to do?</p>
<div align="center">
<b-button-group>
<b-button
variant="danger"
size="sm"
@click="deleteFullSchedule(schedule.id)"
>
<span v-if="scheduleTimeslots.length === 1">Delete</span>

jackie / Andrea Ida Malkah Klaura
committed
<span v-else-if="schedule.rrule === 1">Delete both</span>
<span v-else>Delete schedule + all timeslots</span>
</b-button>
<b-button
v-if="schedule.rrule > 1 && scheduleTimeslots.length > 1"
variant="danger"
size="sm"
@click="deleteSingleTimeslot(schedule.id, timeslot.id)"
>
Delete only this timeslot
</b-button>
<b-button
v-if="schedule.rrule > 1 && scheduleTimeslots.length > 1"
variant="danger"
size="sm"
@click="deleteAllFutureTimeslots(schedule.id, timeslot.id)"
>
Delete this + all future timeslots
</b-button>
</b-button-group>
</div>
</div>
<div v-else>
<img
src="../../assets/radio.gif"
alt="loading timeslot data"
>
</div>
</div>
<div v-else>
<img
src="../../assets/radio.gif"
alt="loading schedule data"
>
</div>
<b-modal
ref="modalEmissionManagerDeleteTimeslots"
title="Deleting timeslots"
size="lg"
centered
hide-footer
no-close-on-esc
no-close-on-backdrop
>
<div align="center">
<img
src="../../assets/radio.gif"
alt="loading schedule data"
>
<b-progress
:value="deletion.count"
:max="deletion.amount"
variant="info"
animated
/>
</div>
</b-modal>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import prettyDate from '../../mixins/prettyDate'
import rrules from '../../mixins/rrules'
export default {
mixins: [ prettyDate, rrules ],
data () {
return {
timeslot: null,
deletion: {
amount: 0,
count: 0,
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',
})
},
deleteFullSchedule (id) {
this.$store.dispatch('shows/deleteSchedule', {
show: this.selectedShow.id,
schedule: id,
callback: () => {
this.$refs.modalEmissionManagerEdit.hide()
this.$parent.renderView(null)
}
})
},
deleteSingleTimeslot (scheduleId, timeslotId) {
this.$store.dispatch('shows/deleteTimeslot', {
show: this.selectedShow.id,
schedule: scheduleId,
timeslot: timeslotId,
callback: () => {
this.$refs.modalEmissionManagerEdit.hide()
this.$parent.renderView(null)
}
})
},
deleteAllFutureTimeslots (scheduleId) {
let startDate = new Date(this.timeslot.start)
let toDelete = []
for (let slot of this.scheduleTimeslots) {
if (new Date(slot.start) >= startDate) {
toDelete.push(slot.id)
}
}
if (toDelete.length === this.scheduleTimeslots.length) {
this.$log.debug('deleting full schedule')
this.deleteFullSchedule(scheduleId)
}
else {
this.deletion.amount = toDelete.length
this.deletion.count = 0
this.$refs.modalEmissionManagerDeleteTimeslots.show()
for (let i in toDelete) {
this.$log.debug('Deleting timeslot', toDelete[i])
this.$store.dispatch('shows/deleteTimeslot', {
show: this.selectedShow.id,
schedule: scheduleId,
timeslot: toDelete[i],
callback: () => {
this.deletion.count++
this.$log.debug('deleted ' + this.deletion.count + ' timeslots')
if (this.deletion.count === this.deletion.amount) {
this.$parent.renderView(null)
this.$refs.modalEmissionManagerDeleteTimeslots.hide()
this.$refs.modalEmissionManagerEdit.hide()
}
}
})
}
}
loadSchedule (scheduleId) {
this.$store.dispatch('shows/fetchSchedule', {
show: this.selectedShow.id,
schedule: scheduleId,
callback: () => {
this.loadScheduleTimeslots(scheduleId)
}
})
},
loadScheduleTimeslots (scheduleId) {
this.$store.dispatch('shows/fetchTimeslots', {
id: this.selectedShow.id,
schedule: scheduleId,
start: this.schedule.dstart,
end: this.schedule.until,
// initialise a new schedule and open the modal
open (timeslot) {
this.timeslot = timeslot
this.$refs.modalEmissionManagerEdit.show()
this.loadSchedule(timeslot.schedule)
}
}
</script>
<style scoped>
</style>