Newer
Older
<div>
<b-modal
ref="modalEmissionManagerCreate"
:title="$t('scheduleEditor.titleCreate', { show: selectedShow.name })"
:cancel-title="$t('cancel')"
size="lg"
@ok="create"
>
<b-alert
variant="warning"
:show="pastEventWarning"
>
<span v-html="$t('scheduleEditor.pastEventWarning')" />
<div v-if="loaded.modal && !submitting">
<b-row>
<b-col cols="12">
<label class="tw-w-full tw-font-bold">
<span class="tw-inline-block tw-pb-2">{{ $t('rrule.rrule')}}</span>
<b-form-select
v-model="valuePick.rrule"
:options="rruleOptions"
/>
</label>
<b-col cols="3">
<label class="tw-w-full tw-font-bold">
<span class="tw-inline-block tw-pb-2">{{ $t('scheduleEditor.fromDate' )}}</span>
<b-form-input
v-model="valuePick.dstart"
type="date"
/>
</label>
<b-col cols="3" v-if="valuePick.rrule != 1">
<label class="tw-w-full tw-font-bold">
<span class="tw-inline-block tw-pb-2" v-html="$t('scheduleEditor.toDate')" />
<b-form-input
v-model="valuePick.until"
type="date"
/>
</label>
<b-col cols="3">
<label class="tw-w-full tw-font-bold">
<span class="tw-inline-block tw-pb-2">{{ $t('scheduleEditor.from') }}</span>
<b-form-input
v-model="valuePick.tstart"
type="time"
/>
</label>
<b-col cols="3">
<label class="tw-w-full tw-font-bold">
<span class="tw-inline-block tw-pb-2">{{ $t('scheduleEditor.to') }}</span>
<b-form-input
v-model="valuePick.tend"
type="time"
/>
</label>
</b-col>
</b-row>
</div>
<div v-else>
<b-row>
<b-col align="center">
<img
src="/assets/radio.gif"
>
</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)
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
// 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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
} 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>