Newer
Older
<div>
<b-modal
ref="modalEmissionManagerCreate"
title="Create a new schedule"
size="lg"
@ok="create"
>
<b-row>
<b-col cols="3">
Creating schedule for:
</b-col>
<b-col cols="9">
<b v-if="loaded.shows">
{{ selectedShow.name }}
</b>!
</b-col>
</b-row>
<b-alert
variant="warning"
:show="pastEventWarning"
>
Past events will be ignored. Start date was set to today!<br>
Try again or change the start date to something in the future.
</b-alert>
<div v-if="loaded.modal && !submitting">
<b-row>
<b-col cols="2">
Start:
</b-col>
<b-col cols="3">
<b-form-input
v-model="valuePick.dstart"
type="date"
/>
</b-col>
<b-col cols="3">
<b-form-input
v-model="valuePick.tstart"
type="time"
/>
</b-col>
<b-col cols="1">
End:
</b-col>
<b-col cols="3">
<b-form-input
v-model="valuePick.tend"
type="time"
/>
</b-col>
</b-row>
<b-row>
<b-col cols="2">
Type of event:
</b-col>
<b-col cols="6">
<b-form-select
v-model="valuePick.rrule"
:options="rruleOptions"
/>
</b-col>
<b-col v-if="valuePick.rrule != 1">
Until:
</b-col>
<b-col v-if="valuePick.rrule != 1">
<b-form-input
v-model="valuePick.until"
type="date"
/>
</b-col>
</b-row>
</div>
<div v-else>
<b-row>
<b-col align="center">
<img
src="/assets/radio.gif"
alt="submitting new schedule"
>
</b-col>
</b-row>
</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 {
newSchedule: null,
loadedModal: false,
submitting: false,
pastEventWarning: false,
valuePick: {
dstart: null,
tstart: null,
tend: null,
until: null,
rrule: 1
},
}
},
computed: {
loaded() {
return {
shows: this.$store.state.shows.loaded['shows'],
modal: this.loadedModal,
}
},
...mapGetters({
selectedShow: 'shows/selectedShow',
})
},
methods: {
create(event) {
// prevent the modal from closing automatically on click
event.preventDefault()
// check for past dates; as past dates will be ignored by steering we
// want to make the user aware - otherwise it might get confusing in
// conflict resolution
let now = this.apiDate(new Date())
if (this.valuePick.dstart < now) {
// this.valuePick.dstart = now
// this.pastEventWarning = true
//return
} else {
this.pastEventWarning = false
}
// take all values that have been picked and put them into our new
// schedule. so far we do not need any transformations.
this.newSchedule.schedule.dstart = this.valuePick.dstart
this.newSchedule.schedule.tstart = this.valuePick.tstart
this.newSchedule.schedule.tend = this.valuePick.tend
this.newSchedule.schedule.until = this.valuePick.until
this.newSchedule.schedule.rrule = this.valuePick.rrule
this.newSchedule.schedule.byweekday = this.getWeekdayFromApiDate(this.valuePick.dstart)
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
// ok then, let's submit and see if any conflicts arise
this.submitting = true
this.$store.dispatch('shows/submitSchedule', {
showId: this.selectedShow.id,
schedule: this.newSchedule,
callback: (response) => {
// we have to check if there are any conflicts with existing timeslots
let conflicts = false
for (let i in response.data.projected) {
if (response.data.projected[i].collisions.length > 0) {
conflicts = true
break
}
}
// if there are no conflicts we can set an empty solutions object
// in our newSchedule and submit it.
if (!conflicts) {
this.newSchedule.solutions = {}
this.submit()
// otherwise we have to resolve the conflict first.
} else {
this.submitting = false
this.$parent.resolve(response.data)
this.$refs.modalEmissionManagerCreate.hide()
}
},
callbackCancel: () => {
this.submitting = false
}
})
},
submit() {
this.$store.dispatch('shows/submitSchedule', {
showId: this.selectedShow.id,
schedule: this.newSchedule,
callback: (response) => {
this.submitting = false
// if for some reason a new conflict arose, e.g. because in the meantime
// someone else inserted a conflicting schedule, we have to resolve.
// TODO: based on single event schedule
// TODO: check for complex schedules with resolved conflicts
if (response.data.projected === undefined) {
this.$parent.renderView(null)
} else {
this.$log.debug('Timeslot conflict. Switching to resolve mode.')
this.$parent.resolve(response.data)
}
this.$refs.modalEmissionManagerCreate.hide()
},
callbackCancel: () => {
this.submitting = false
}
})
},
// initialise a new schedule and open the modal
open(start, end) {
let dstart = start.format('YYYY-MM-DD')
let tstart = start.format('HH:mm')
let tend = end.format('HH:mm')
let until = end.format('YYYY-MM-DD')
let now = this.apiDate(new Date())
if (dstart < now) {
// dstart = now
// this.pastEventWarning = true
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
} else {
this.pastEventWarning = false
}
this.valuePick.dstart = dstart
this.valuePick.tstart = tstart
this.valuePick.tend = tend
this.valuePick.until = until
this.newSchedule = {
schedule: {
rrule: 1,
show: 0,
byweekday: 0,
dstart: dstart,
tstart: tstart,
tend: tend,
until: until,
is_repetition: false,
add_days_no: 0,
add_business_days_only: false,
fallback_id: 0,
automation_id: 0,
}
}
this.loadedModal = true
this.submitting = false
this.$refs.modalEmissionManagerCreate.show()
},
</script>
<style scoped>