Commit 6753fbe5 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

FEAT: add modal for schedule creation

parent 8a4671b7
......@@ -37,6 +37,14 @@
:events="calendarSlots"
:config="calendarConfig"
@view-render="renderView"
@event-selected="eventSelected"
@event-drop="eventDrop"
@event-resize="eventResize"
@event-created="eventCreated"
/>
<app-modalEmissionManagerCreate
ref="appModalEmissionManagerCreate"
/>
</b-container>
</template>
......@@ -45,11 +53,14 @@
import axios from 'axios'
import { FullCalendar } from 'vue-full-calendar'
import 'fullcalendar/dist/fullcalendar.css'
import modalEmissionManagerCreate from './EmissionManagerModalCreate.vue'
export default {
components: {
FullCalendar,
'app-modalEmissionManagerCreate': modalEmissionManagerCreate,
},
data () {
return {
currentShow: 0,
......@@ -113,12 +124,38 @@ export default {
}
},
eventSelected (event, jsEvent, view) {
this.$log.debug('eventSelected', event, jsEvent, view)
},
eventDrop (event) {
this.$log.debug('eventDrop', event)
},
eventResize (event) {
this.$log.debug('eventResize', event)
},
eventCreated (event) {
this.$refs.appModalEmissionManagerCreate.open(event.start, event.end)
},
// this is called when the user changes the calendar view, so we just
// refetch the timeslots with the updated visible date range
renderView (view) {
if (this.loaded.shows) {
this.$log.debug('refetching')
this.loadTimeslots(view.start.format(), view.end.format())
let start = null
let end = null
// in case it gets called from a modal, we use the current view
// otherwise we use the new dates from the view received by the renderView event
if (view === null) {
start = this.$refs.calendar.fireMethod('getView').start.format()
end = this.$refs.calendar.fireMethod('getView').end.format()
} else {
start = view.start.format()
end = view.end.format()
}
this.loadTimeslots(start, end)
}
},
......
<template>
<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="$parent.loaded.shows">
{{ $parent.shows[$parent.currentShow].name }}
</b>!
</b-col>
</b-row>
<b-row v-if="loaded">
<b-col cols="2">
Start:
</b-col>
<b-col cols="4">
{{ newSchedule.schedule.dstart }} {{ newSchedule.schedule.tstart }}
</b-col>
<b-col cols="2">
End:
</b-col>
<b-col cols="4">
{{ newSchedule.schedule.tend }}
</b-col>
</b-row>
</b-modal>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
newSchedule: null,
loaded: false
}
},
methods: {
create (event) {
// prevent the modal from closing automatically on click
event.preventDefault()
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.$parent.shows[this.$parent.currentShow].id + '/schedules/'
axios.post(uri, this.newSchedule, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(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.resolve(response.data)
}
}).catch(error => {
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 () {
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.$parent.shows[this.$parent.currentShow].id + '/schedules/'
axios.post(uri, this.newSchedule, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
// 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)
this.$refs.modalEmissionManagerCreate.hide()
} else {
this.resolve(response.data)
}
}).catch(error => {
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
})
},
resolve (data) {
this.$log.debug('resolve', data)
},
// initialise a new schedule and open the modal
open (start, end) {
this.newSchedule = {
schedule: {
rrule: 1,
show: 21,
byweekday: 0,
dstart: start.format('YYYY-MM-DD'),
tstart: start.format('HH:mm'),
tend: end.format('HH:mm'),
until: end.format('YYYY-MM-DD'),
is_repetition: false,
add_days_no: 0,
add_business_days_only: false,
fallback_id: 0,
automation_id: 0,
}
}
this.loaded = true
this.$refs.modalEmissionManagerCreate.show()
},
}
}
</script>
<style scoped>
.slug {
color: gray;
}
</style>
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