ModalEdit.vue

<template>
  <div>
    <b-modal
      ref="modalEmissionManagerEdit"
      title="Edit a schedule"
      size="lg"
    >
      <p>
        Editing a timeslot/schedule for show:
        <b v-if="loaded.modal">
          <b>{{ show.name }}</b>
        </b>
      </p>

      <p v-if="loaded.modal">
        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>
      </p>

      <div v-if="loaded.schedule">
        <div v-if="schedule.rrule === 1">
          <p>
            This is a single emission.
            <span v-if="!loaded.scheduleTimeslots">
              <br>
              <img
                src="../../assets/radio.gif"
                alt="loading schedule data"
              >
            </span>
            <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>
                <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>

    <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 axios from 'axios'
import prettyDate from '../../mixins/prettyDate'
import rrules from '../../mixins/rrules'

export default {
  mixins: [ prettyDate, rrules ],

  data () {
    return {
      timeslot: null,
      schedule: null,
      scheduleTimeslots: null,
      show: null,
      loaded: {
        modal: false,
        schedule: false,
        scheduleTimeslots: false,
      },
      deletion: {
        amount: 0,
        count: 0,
      }
    }
  },

  methods: {
    deleteFullSchedule (id) {
      let uri = process.env.VUE_APP_API_STEERING + 'shows/' + this.show.id + '/schedules/' + id + '/'
      axios.delete(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(() => {
        this.$refs.modalEmissionManagerEdit.hide()
        this.$parent.renderView(null)
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not delete full schedule. See console for details.')
      })
    },

    deleteSingleTimeslot (scheduleId, timeslotId) {
      let uri = process.env.VUE_APP_API_STEERING + 'shows/' + this.show.id +
        '/schedules/' + scheduleId + '/timeslots/' + timeslotId + '/'
      axios.delete(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(() => {
        this.$refs.modalEmissionManagerEdit.hide()
        this.$parent.renderView(null)
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not delete full schedule. See console for details.')
      })
    },

    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()

        let uri = process.env.VUE_APP_API_STEERING + 'shows/' + this.show.id + '/schedules/' + scheduleId + '/'
        for (let i in toDelete) {
          this.$log.debug('Deleting timeslot', toDelete[i])
          axios.delete(uri + 'timeslots/' + toDelete[i] + '/', {
            withCredentials: true,
            headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
          }).then(() => {
            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()
            }
          }).catch(error => {
            this.$log.error(error.response.status + ' ' + error.response.statusText)
            this.$log.error(error.response)
            alert('Error: could not delete full timeslot. See console for details.')
          })
        }
      }

    },

    loadSchedule (id) {
      this.loaded.schedule = false
      let uri = process.env.VUE_APP_API_STEERING + 'shows/' + this.show.id + '/schedules/' + id + '/'
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        this.schedule = response.data
        this.loaded.schedule = true
        this.loadScheduleTimeslots(this.schedule.id)
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not load schedule. See console for details.')
      })
    },

    loadScheduleTimeslots (id) {
      this.loaded.scheduleTimeslots = false
      let uri = process.env.VUE_APP_API_STEERING + 'shows/' + this.show.id + '/schedules/' + id + '/timeslots/'
      uri += '?start=' + this.schedule.dstart + '&end=' + this.schedule.until
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        this.scheduleTimeslots = response.data
        this.loaded.scheduleTimeslots = true
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not load timeslots of this schedule. See console for details.')
      })
    },

    // initialise a new schedule and open the modal
    open (timeslot, show) {
      this.timeslot = timeslot
      this.show = show
      this.loaded.modal = true
      this.$refs.modalEmissionManagerEdit.show()
      this.loadSchedule(timeslot.schedule)
    },

      notYetImplemented: function () {
        alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
      },
  }
}
</script>

<style scoped>
</style>