EmissionManager.vue

<template>
  <div class="tw-flex tw-flex-col tw-h-full">
    <PageHeader :title="$t('navigation.calendar')">
      <b-button-group v-if="selectedShow">
        <b-button :variant="view === 'day' ? 'primary' : 'secondary'" @click="view = 'day'">
          {{ $t('calendar.view.day') }}
        </b-button>
        <b-button :variant="view === 'week' ? 'primary' : 'secondary'" @click="view = 'week'">
          {{ $t('calendar.view.week') }}
        </b-button>
      </b-button-group>
    </PageHeader>

    <template v-if="!loaded.shows">
      <div class="tw-text-center">
        {{ $t('loading') }}
      </div>
    </template>

    <auth-wall v-else-if="selectedShow" class="tw-flex-1 tw-flex tw-flex-col">
      <b-alert
        class="tw-flex-none"
        :variant="conflictCount > 0 ? 'danger' : 'success'"
        :show="conflictMode"
      >
        <div v-if="conflictMode">
          <h4>{{ $t('conflictResolution.title') }}</h4>
          <p
            :class="{
              'tw-mb-4': resolvedScheduleRRule?.count === 1,
              'tw-mb-0': resolvedScheduleRRule?.count !== 1,
            }"
            v-html="
              $t('conflictResolution.newSchedule', {
                firstDate: prettyDate(resolveData.schedule.firstDate),
                startTime: resolveData.schedule.startTime,
                endTime: resolveData.schedule.endTime,
              })
            "
          />

          <p
            v-if="resolvedScheduleRRule && resolvedScheduleRRule.count !== 1"
            v-html="
              $t('conflictResolution.recurringSchedule', {
                rrule: resolvedScheduleRRule.name,
                lastDate: prettyDate(resolveData.schedule.lastDate),
              })
            "
          />

          <div v-if="submitting">
            <b-row>
              <b-col align="center">
                <img src="/assets/radio.gif" :alt="$t('loading')" />
              </b-col>
            </b-row>
          </div>
          <div v-else>
            <div v-if="conflictCount > 0">
              <p>{{ $t('conflictResolution.leftToResolve', { smart_count: conflictCount }) }}</p>

              <b-button variant="danger" size="sm" @click="resolveCancel">
                {{ $t('cancel') }}
              </b-button>
            </div>
            <div v-else>
              <p>{{ $t('conflictResolution.noneLeftToResolve') }}</p>
              <b-button variant="success" @click="resolveSubmit">
                {{ $t('conflictResolution.applySolution') }}
              </b-button>
              &nbsp;
              <b-button variant="danger" @click="resolveCancel">
                {{ $t('cancel') }}
              </b-button>
            </div>
          </div>
        </div>
      </b-alert>

      <server-errors class="tw-flex-none" :errors="serverErrors" />

      <div class="tw-flex-1 tw-basis-full">
        <KeepAlive>
          <div v-if="view === 'week'" class="tw-h-full">
            <FullCalendar ref="calendar" :options="calendarConfig" />
          </div>
        </KeepAlive>

        <CalendarDayView
          v-if="view === 'day'"
          :selected-day="selectedDay"
          @change-day="changeDay($event)"
          @edit-timeslot="editTimeslot($event)"
        />
      </div>

      <app-modalEmissionManagerCreate
        ref="appModalEmissionManagerCreate"
        @conflict="enterConflictMode"
        @update="loadTimeslots()"
      />
      <app-modalEmissionManagerResolve
        ref="appModalEmissionManagerResolve"
        @resolve-conflict="resolveConflict"
      />
      <app-modalEmissionManagerEdit
        ref="appModalEmissionManagerEdit"
        @conflict="enterConflictMode"
        @update="loadTimeslots()"
      />
    </auth-wall>
  </div>
</template>

<script>
import { addDays, parseISO } from 'date-fns'
import { h } from 'vue'
import { mapGetters } from 'vuex'

import FullCalendar from '@fullcalendar/vue3'
import fullCalendarTimeGridPlugin from '@fullcalendar/timegrid'
import fullCalendarInteractionPlugin from '@fullcalendar/interaction'

import modalEmissionManagerCreate from '@/components/emissions/ModalCreate.vue'
import modalEmissionManagerResolve from '@/components/emissions/ModalResolve.vue'
import modalEmissionManagerEdit from '@/components/emissions/ModalEdit.vue'
import AuthWall from '@/components/AuthWall.vue'
import prettyDate from '@/mixins/prettyDate'
import playlist from '@/mixins/playlist'
import ServerErrors from '@/components/ServerErrors.vue'
import { getISODateString } from '@/utilities'
import PageHeader from '@/components/PageHeader.vue'
import {
  calculateDurationSeconds,
  getClosestSlot,
  getNextAvailableSlot,
  sanitizeHTML,
} from '@/util'
import CalendarDayView from '@/components/CalendarDayView.vue'
import { mapStores } from 'pinia'
import { useRRuleStore } from '@/stores/rrules'

export default {
  components: {
    CalendarDayView,
    PageHeader,
    ServerErrors,
    FullCalendar,
    AuthWall,
    'app-modalEmissionManagerCreate': modalEmissionManagerCreate,
    'app-modalEmissionManagerResolve': modalEmissionManagerResolve,
    'app-modalEmissionManagerEdit': modalEmissionManagerEdit,
  },

  mixins: [prettyDate, playlist],

  data() {
    return {
      view: this.$route.query.view ?? 'week',
      adminUrl: `${import.meta.env.VUE_APP_BASEURI_STEERING}/admin`,
      calendarSlots: [],
      selectedDay: this.$route.query.day ? parseISO(this.$route.query.day) : new Date(),

      // flag for when submitting resolve data
      submitting: false,

      // this flag signifies if we are in conflict resolution mode
      conflictMode: false,

      // when conflict mode is activated, this should hold the steering response
      // from schedule creation, with all the conflicts and solutions
      resolveData: null,
      conflictCount: 0,
      conflictSolutions: [],
      serverErrors: [],
      currentStart: this.$route.query.week ? parseISO(this.$route.query.week) : new Date(),
      currentEnd: undefined,
      stopRenderWatcher: () => {
        /* noop */
      },
    }
  },

  computed: {
    ...mapGetters({
      getShow: 'shows/getShowByDataParam',
    }),

    ...mapStores(useRRuleStore),

    resolvedScheduleRRule() {
      return this.rrulesStore.itemMap.get(this.resolveData.schedule.rruleId)
    },

    loaded() {
      return {
        shows: this.$store.state.shows.loaded['shows'],
        timeslots: this.$store.state.shows.loaded['timeslots'],
        playlists: this.$store.state.playlists.loaded['playlists'],
      }
    },

    /**
     * this is the whole configuration for our schedule calendar, including
     * simple event handlers that do not need the whole components scope
     * @returns {CalendarOptions}
     */
    calendarConfig() {
      const selectDay = this.selectDay.bind(this)
      const slotDurationMinutes = 15

      return {
        plugins: [fullCalendarTimeGridPlugin, fullCalendarInteractionPlugin],
        initialView: 'timeGridWeek',
        locale: this.$activeLocale(),
        initialDate: this.currentStart,
        height: '100%',
        stickyHeaderDates: true,
        firstDay: 1,
        navLinks: true,
        events: this.calendarSlots,
        buttonText: {
          today: this.$t('calendar.today'),
        },
        headerToolbar: {
          left: 'title',
          center: '',
          right: 'today prev,next',
        },
        dayHeaderFormat: { day: 'numeric', month: 'numeric', weekday: 'short' },
        eventTimeFormat: { hour: 'numeric', minute: '2-digit' },
        slotLabelFormat: { hour: 'numeric', minute: '2-digit' },
        allDaySlot: false,
        editable: false,
        nowIndicator: true,
        eventContent({ event, timeText }) {
          // The eventContent function doesn’t quite seem to work like documented in the fullcalendar docs:
          // * the slot is broken because it doesn’t receive a context object ('arg' is undefined)
          // * the Preact createElement/h function that is passed as the second argument to this function
          //   doesn’t render anything
          // * returning { html: '<i>hello</i>' } doesn’t render anything
          // * returning { domNodes: [(() => { const i = document.createElement('i'); i.textContent = 'hello'; return i })()] }
          //   doesn’t render anything
          //
          // Instead, this comment [1] mentions that one should use the Vue createElement/h function.
          // Surprisingly this works.
          //
          // It is unclear to me why all these (documented) options fail. One major difference is that we run Vue 3 in
          // Vue 2 compat mode which might be a source of errors.
          //
          // [1]: https://github.com/fullcalendar/fullcalendar/issues/7175#issuecomment-1409519357

          const { durationMinutes, title } = event.extendedProps
          // don’t render any content if it would be crammed anyway
          const content =
            durationMinutes > slotDurationMinutes
              ? [
                  h('div', { class: 'fc-event-time' }, timeText),
                  h('div', { class: 'fc-event-title-container' }, [
                    h('div', { class: 'fc-event-title fc-sticky' }, title),
                  ]),
                ]
              : []

          return h('div', { class: 'fc-event-main-frame' }, content)
        },
        eventDidMount({ el, event, timeText }) {
          const { durationMinutes } = event.extendedProps
          let { title } = event.extendedProps
          if (durationMinutes < slotDurationMinutes) {
            title = `${timeText}: ${title}`
          }
          // here we add a simple tooltip to every event, so that the full title
          // of a show can be viewed
          el.setAttribute('title', title)
        },
        datesSet: (view) => {
          if (
            this.currentStart?.toISOString?.() !== view.start.toISOString() ||
            this.currentEnd?.toISOString?.() !== view.end.toISOString()
          ) {
            this.$router.replace({
              name: this.$route.name,
              params: { ...this.$route.params },
              query: {
                ...this.$route.query,
                view: this.view,
                day: getISODateString(this.selectedDay),
                week: getISODateString(view.start),
              },
            })
            this.currentStart = view.start
            this.currentEnd = view.end
          }
        },
        eventClick: this.eventSelected,
        select: this.createEvent,
        selectable: true,
        selectMirror: true,
        slotDuration: `00:${slotDurationMinutes.toString().padStart(2, '0')}:00`,
        eventMinHeight: 1,
        selectAllow({ start }) {
          return start >= getClosestSlot(slotDurationMinutes)
        },
        navLinkDayClick(selectedDate) {
          selectDay(selectedDate)
          document
            .querySelectorAll('thead .fc-day[data-date]')
            .forEach((el) => el.classList.remove('fc-day-selected'))
          document
            .querySelector(`thead .fc-day[data-date="${getISODateString(selectedDate)}"]`)
            .classList.add('fc-day-selected')
        },
      }
    },
    ...mapGetters({
      shows: 'shows/shows',
      playlists: 'playlists/playlists',
      selectedShow: 'shows/selectedShow',
      timeslots: 'shows/timeslots',
      getPlaylistById: 'playlists/getPlaylistById',
      files: 'files/files',
      getFileById: 'files/getFileById',
    }),
  },
  watch: {
    view(newView) {
      void this.$router.replace({
        name: this.$route.name,
        params: { ...this.$route.params },
        query: { ...this.$route.query, view: newView },
      })
    },
    selectedDay(newDate) {
      void this.$router.replace({
        name: this.$route.name,
        params: { ...this.$route.params },
        query: { ...this.$route.query, day: getISODateString(newDate) },
      })
    },
    selectedShow: {
      immediate: true,
      handler(newShow) {
        if (newShow) {
          this.$store.dispatch('playlists/fetch', { showSlug: newShow.slug })
          this.loadTimeslots()
        }
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      try {
        document
          .querySelectorAll('.fc-day-header[data-date]')
          .forEach((el) => el.classList.remove('fc-day-selected'))
        document
          .querySelector(`.fc-day-header[data-date="${getISODateString()}"]`)
          .classList.add('fc-day-selected')
      } catch (e) {
        // Full Calendar might not be initialized yet.
      }
    })

    // Watches all relevant properties for timeslot updates
    // and executes the timeslot updater when a change is detected.
    // Array joining in the source is done because arrays are compared by identity in JavaScript.
    // Also… this would look so much nicer as a watchEffect(() => { ... })
    // but would obviously require a Composition-API rewrite.
    this.stopRenderWatcher = this.$watch(
      (em) =>
        [
          em.loaded.shows,
          em.loaded.playlists,
          em.conflictMode,
          em.currentStart?.toISOString?.(),
          em.currentEnd?.toISOString?.(),
        ].join('-'),
      () => {
        // this is called when the user changes the calendar view, so we just
        // re-fetch the timeslots with the updated visible date range
        if (this.loaded.shows && this.loaded.playlists) {
          // we only load new timeslots, if we are not in conflict mode
          if (!this.conflictMode) {
            this.loadTimeslots()
          }
        }
      },
    )
  },
  unmounted() {
    this.stopRenderWatcher()
  },
  methods: {
    changeDay(delta) {
      this.selectedDay = addDays(this.selectedDay, delta)
    },

    selectDay(date) {
      this.selectedDay = date
    },

    switchShow(index) {
      this.$store.commit('shows/switchShow', index)
      this.loadCalendarSlots()
    },

    getShowTitleById(id) {
      const i = this.shows.findIndex((show) => show.id === id)
      if (i >= 0) {
        return this.shows[i].name
      } else {
        return 'Error: no show found for this timeslot'
      }
    },

    getShowIndexById(id) {
      const i = this.shows.findIndex((show) => show.id === id)
      if (i >= 0) {
        return i
      } else {
        this.$log.error('No show found for id ' + id)
        return 0
      }
    },

    editTimeslot(timeslot) {
      this.$refs.appModalEmissionManagerEdit.open(timeslot)
    },

    // this handler will be called whenever the user clicks on one of the
    // displayed timeslots
    eventSelected({ event }) {
      // in conflict resolution mode only the newly generated events are
      // clickable. if there is no conflict for an event, only a modal
      // with a short notice should be opened, otherwise the resolution modal
      if (this.conflictMode) {
        const projectedTimeslot = event.extendedProps
        if (this.conflictSolutions[projectedTimeslot.hash] === undefined) {
          this.$refs.appModalEmissionManagerResolve.openNotNeeded()
        } else {
          this.$refs.appModalEmissionManagerResolve.open(projectedTimeslot)
        }
      }
      // standard mode only those events are clickable that belong to the
      // currently selected show.
      else {
        const selectedTimeslotId = event.extendedProps.id
        const timeslot = this.timeslots.find((slot) => slot.id === selectedTimeslotId)
        if (timeslot.showId !== this.selectedShow.id) {
          this.switchShow(this.getShowIndexById(timeslot.showId))
        } else {
          this.$refs.appModalEmissionManagerEdit.open(timeslot)
        }
      }
    },

    // this handler is called when the user creates a new timeslot
    createEvent({ start, end }) {
      if (!this.conflictMode) {
        this.$refs.appModalEmissionManagerCreate.open(
          start < new Date() ? getNextAvailableSlot(5) : start,
          end,
        )
      }
    },
    enterConflictMode(data) {
      this.resolveData = data
      this.conflictMode = true
      this.conflictCount = 0
      this.conflictSolutions = data.solutions
      this.calendarSlots = []
      try {
        for (const projectedTimeslot of data.projected) {
          // we need a numeric ID for the event for later selection by the user.
          // with converting the hash to a number (in this case a float), we
          // do not risk using a number that is already used by a timeslot id
          // of a conflicting timeslot
          const id = Number(projectedTimeslot.hash)
          const newSlot = {
            id,
            start: projectedTimeslot.start,
            end: projectedTimeslot.end,
            title: this.$t('conflictResolution.conflictingSlot'),
            className: 'noconflict',
            editable: false,
            extendedProps: {
              id,
              // the hash is needed to compare against solutions and conflicts
              hash: projectedTimeslot.hash,
              start: projectedTimeslot.start,
              end: projectedTimeslot.end,
              collisions: [],
              solutionChoices: [],
              title: this.$t('conflictResolution.conflictingSlot'),
            },
          }

          if (projectedTimeslot.collisions.length > 0) {
            newSlot.className = 'conflict'
            newSlot.extendedProps.solutionChoices = projectedTimeslot.solutionChoices
            for (const collision of projectedTimeslot.collisions) {
              const conflictingSlot = {
                id: collision.id,
                start: collision.start,
                end: collision.end,
                title: collision.showName,
                className: 'otherShow',
                editable: false,
                extendedProps: {
                  id: collision.id,
                  start: collision.start,
                  end: collision.end,
                  title: collision.showName,
                },
              }
              this.calendarSlots.push(conflictingSlot)
              this.conflictCount++
              newSlot.extendedProps.collisions.push(collision)
            }
          }
          this.calendarSlots.push(newSlot)
        }
      } catch (err) {
        this.$log.error(err)
      }
    },

    resolveConflict(toResolve, mode) {
      const calendarSlot = this.calendarSlots.find((s) => s.id === toResolve.id)
      const originalSlot = this.resolveData.projected.find((s) => s.hash === toResolve.hash)
      // we only need the conflicting slot specifically for theirs-both mode, where there should be only one collision
      const conflictingSlot = this.calendarSlots.find((s) => s.id === toResolve.collisions[0].id)

      // we only reduce the conflict count, if there was no other solution set already
      if (this.conflictSolutions[toResolve.hash] === '') {
        this.conflictCount -= toResolve.collisions.length
      }

      // if there already was a resolution chosen before, that added a second timeslot
      // because either the "ours" or "theirs" was split, we have to clean it up before
      // in the calendar before setting a new resolution
      const oldResolutionSlot = this.calendarSlots.findIndex((s) => s.id === calendarSlot.id * 10)
      if (oldResolutionSlot > -1) {
        this.calendarSlots.splice(oldResolutionSlot, 1)
      }

      // and in case their was a ours-* choice before, we have to reset the (one)
      // conflicting slot to its original start and end time
      conflictingSlot.start = toResolve.collisions[0].start
      conflictingSlot.end = toResolve.collisions[0].end

      // for a detailed description of the resolution modes, see https://docs.aura.radio/en/latest/user/timeslot-collision-detection.html
      // and https://docs.aura.radio/en/latest/developer/misc/conflict-resolution.html
      switch (mode) {
        case 'theirs':
          this.conflictSolutions[toResolve.hash] = mode
          calendarSlot.className = 'timeslot-discarded'
          calendarSlot.title = this.$t('conflictResolution.conflictingSlot')
          calendarSlot.start = originalSlot.start
          calendarSlot.end = originalSlot.end
          for (const theirs of toResolve.collisions) {
            this.calendarSlots.find((s) => s.id === theirs.id).className = 'timeslot-accepted'
          }
          break

        case 'ours':
          this.conflictSolutions[toResolve.hash] = mode
          calendarSlot.className = 'timeslot-accepted'
          calendarSlot.title = this.$t('conflictResolution.conflictingSlot')
          calendarSlot.start = originalSlot.start
          calendarSlot.end = originalSlot.end
          for (const theirs of toResolve.collisions) {
            this.calendarSlots.find((s) => s.id === theirs.id).className = 'timeslot-discarded'
          }
          break

        case 'theirs-start':
        case 'theirs-end':
        case 'theirs-both':
          this.conflictSolutions[toResolve.hash] = mode
          calendarSlot.className = 'timeslot-partly'
          calendarSlot.title = 'new [' + mode + ']'
          if (mode === 'theirs-start') {
            calendarSlot.start = toResolve.collisions[0].end
            calendarSlot.end = originalSlot.end
          } else if (mode === 'theirs-end') {
            calendarSlot.start = originalSlot.start
            calendarSlot.end = toResolve.collisions[0].start
          } else {
            calendarSlot.start = originalSlot.start
            calendarSlot.end = toResolve.collisions[0].start
            // TODO: that id generation seems __very__ weird
            const id = calendarSlot.id * 10
            this.calendarSlots.push({
              id,
              start: toResolve.collisions[0].end,
              end: originalSlot.end,
              title: 'new [theirs-both]',
              className: 'timeslot-partly',
              editable: false,
              extendedProps: {
                id,
                start: toResolve.collisions[0].end,
                end: originalSlot.end,
                title: 'new [theirs-both]',
              },
            })
          }
          for (const theirs of toResolve.collisions) {
            this.calendarSlots.find((s) => s.id === theirs.id).className = 'timeslot-accepted'
          }
          break

        case 'ours-start':
        case 'ours-end':
        case 'ours-both':
          this.conflictSolutions[toResolve.hash] = mode
          calendarSlot.className = 'timeslot-accepted'
          calendarSlot.title = 'new [' + mode + ']'
          if (mode === 'ours-start') {
            conflictingSlot.start = toResolve.collisions[0].start
            conflictingSlot.end = originalSlot.start
          } else if (mode === 'ours-end') {
            conflictingSlot.start = originalSlot.end
            conflictingSlot.end = toResolve.collisions[0].end
          } else {
            conflictingSlot.start = toResolve.collisions[0].start
            conflictingSlot.end = originalSlot.start
            // TODO: that id generation seems __very__ weird
            const id = calendarSlot.id * 10
            this.calendarSlots.push({
              id,
              start: originalSlot.end,
              end: toResolve.collisions[0].end,
              title: conflictingSlot.title,
              className: 'timeslot-partly',
              editable: false,
              extendedProps: {
                id,
                start: originalSlot.end,
                end: toResolve.collisions[0].end,
                title: conflictingSlot.title,
              },
            })
          }
          for (const theirs of toResolve.collisions) {
            this.calendarSlots.find((s) => s.id === theirs.id).className = 'timeslot-partly'
          }
          break

        default:
          this.$log.error('EmissionManager.resolveEvent')
          this.$log.error('toResolve:', toResolve)
          this.$log.error('mode:', mode)
          alert('Error: an undefined conflict resolution mode was chosen. See console for details')
          break
      }
    },

    resolveCancel() {
      this.conflictMode = false
    },

    // submit a conflict-resolved schedule to steering
    async resolveSubmit() {
      // TODO: check why steering returns undefined and null values here
      if (this.resolveData.schedule.addBusinessDaysOnly === undefined) {
        this.resolveData.schedule.addBusinessDaysOnly = false
      }
      if (this.resolveData.schedule.addDaysNo === null) {
        this.resolveData.schedule.addDaysNo = 0
      }
      if (this.resolveData.schedule.isRepetition === undefined) {
        this.resolveData.schedule.isRepetition = false
      }
      if (this.resolveData.schedule.defaultPlaylistId === null) {
        this.resolveData.schedule.defaultPlaylistId = 0
      }
      if (this.resolveData.schedule.automationId === null) {
        this.resolveData.schedule.automationId = 0
      }
      if (this.resolveData.schedule.byWeekday === undefined) {
        this.resolveData.schedule.byWeekday = 0
      }

      // create the resolved schedule object including solutions
      const resolvedSchedule = {
        schedule: this.resolveData.schedule,
        solutions: this.resolveData.solutions,
      }

      this.$log.debug('resolveSubmit: schedule:', resolvedSchedule)
      this.submitting = true
      this.serverErrors = []
      try {
        await this.$store.dispatch('shows/submitSchedule', {
          showId: this.selectedShow.id,
          schedule: resolvedSchedule,
        })
        this.conflictMode = false
      } catch (e) {
        if (e.response?.status === 409) {
          this.enterConflictMode(e.response.data)
        } else {
          this.serverErrors = e.errors
        }
      } finally {
        this.submitting = false
      }
    },

    loadCalendarSlots() {
      this.calendarSlots = []
      for (const timeslot of this.timeslots) {
        const isEmpty = !timeslot.playlistId
        let emptyText = ''
        let highlighting = 'otherShow'

        if (timeslot.showId === this.selectedShow.id) {
          highlighting = 'currentShow '
          highlighting += isEmpty ? 'emptySlot' : ''
          emptyText = isEmpty ? this.$t('calendar.empty') : ''
        }
        const title = sanitizeHTML(this.getShowTitleById(timeslot.showId)) + `\n${emptyText}`

        this.calendarSlots.push({
          id: timeslot.id,
          start: timeslot.start,
          end: timeslot.end,
          title,
          className: highlighting,
          extendedProps: {
            id: timeslot.id,
            start: timeslot.start,
            end: timeslot.end,
            title,
            durationMinutes:
              calculateDurationSeconds(parseISO(timeslot.start), parseISO(timeslot.end)) / 60,
          },
        })
      }
    },

    loadTimeslots(start, end) {
      this.$store.dispatch('shows/fetchTimeslots', {
        start: getISODateString(start ?? this.currentStart),
        end: getISODateString(end ?? this.currentEnd),
        callback: () => {
          this.loadCalendarSlots()
        },
      })
    },
  },
}
</script>