Skip to content
Snippets Groups Projects
EmissionManagerModalCreate.vue 6.9 KiB
Newer Older
  • Learn to ignore specific revisions
  • <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-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">
            <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>
    
        </b-modal>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    
    import prettyDate from '../mixins/prettyDate'
    
    import rrules from '../mixins/rrules'
    
      mixins: [ prettyDate, rrules ],
    
      data () {
        return {
          newSchedule: null,
    
          loaded: false,
          pastEventWarning: false,
          valuePick: {
            dstart: null,
            tstart: null,
            tend: null,
            until: null,
            rrule: 1
          },
    
        }
      },
    
      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)
    
          // 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/'
          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.$parent.resolve(response.data)
              this.$refs.modalEmissionManagerCreate.hide()
    
            }
          }).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)
            } else {
    
              this.$log.debug('Timeslot conflict. Switching to resolve mode.')
    
              this.$parent.resolve(response.data)
    
            this.$refs.modalEmissionManagerCreate.hide()
    
          }).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
          })
        },
    
        // 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
          } 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,
    
              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.loaded = true
          this.$refs.modalEmissionManagerCreate.show()
        },
      }
    }
    </script>
    
    <style scoped>