EmissionManagerModalEdit.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. No other timeslots in this schedule.</p>
        </div>
        <div v-else>
          <p>This is a recurring event: <b>{{ rruleRender(schedule.rrule) }}</b>, until: {{ prettyDate(schedule.until) }}</p>
          <p>All <i>upcoming</i> 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>

        <p>What do you want to do with it?</p>
        <div align="center">
          <b-button-group>
            <b-button
              variant="danger"
              size="sm"
              @click="deleteFullSchedule(schedule.id)"
            >
              <span v-if="schedule.rrule === 1">Delete</span>
              <span v-else>Delete schedule + all timeslots</span>
            </b-button>

            <b-button
              v-if="schedule.rrule > 1"
              variant="danger"
              size="sm"
              @click="notYetImplemented()"
            >
              Delete only this timeslot
            </b-button>

            <b-button
              v-if="schedule.rrule > 1"
              variant="danger"
              size="sm"
              @click="notYetImplemented()"
            >
              Delete this + all future timeslots
            </b-button>
          </b-button-group>
        </div>
      </div>
      <div v-else>
        <img
          src="../assets/radio.gif"
          alt="loading schedule data"
        >
      </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,
      }
    }
  },

  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.')
      })
    },

    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
      }).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/'
      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)
      this.loadScheduleTimeslots(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>