FEAT: add modal to edit timeslot

src/components/EmissionManager.vue

@@ -64,7 +64,6 @@
 
     <full-calendar
       ref="calendar"
-      editable="false"
       default-view="agendaWeek"
       :events="calendarSlots"
       :config="calendarConfig"
@@ -81,6 +80,9 @@
     <app-modalEmissionManagerResolve
       ref="appModalEmissionManagerResolve"
     />
+    <app-modalEmissionManagerEdit
+      ref="appModalEmissionManagerEdit"
+    />
   </b-container>
 </template>
 
@@ -90,6 +92,7 @@ import { FullCalendar } from 'vue-full-calendar'
 import 'fullcalendar/dist/fullcalendar.css'
 import modalEmissionManagerCreate from './EmissionManagerModalCreate.vue'
 import modalEmissionManagerResolve from './EmissionManagerModalResolve.vue'
+import modalEmissionManagerEdit from './EmissionManagerModalEdit.vue'
 import rrules from '../mixins/rrules'
 
 export default {
@@ -97,6 +100,7 @@ export default {
     FullCalendar,
     'app-modalEmissionManagerCreate': modalEmissionManagerCreate,
     'app-modalEmissionManagerResolve': modalEmissionManagerResolve,
+    'app-modalEmissionManagerEdit': modalEmissionManagerEdit,
   },
 
   mixins: [ rrules ],
@@ -139,6 +143,7 @@ export default {
             timeFormat: 'k:mm',
             slotLabelFormat: 'k:mm',
             allDaySlot: false,
+            editable: false,
           },
         },
         // here we add a simple tooltip to every event, so that the full title
@@ -174,7 +179,12 @@ export default {
       }
     },
 
+    // 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 opend, otherwise the resolution modal
       if (this.conflictMode) {
         if (event.hash === undefined) {
           return
@@ -184,16 +194,32 @@ export default {
           this.$refs.appModalEmissionManagerResolve.open(event)
         }
       }
+      // standard mode only those events are clickable that belong to the
+      // currently selected show.
+      else {
+        let timeslot = this.timeslots.find(slot => slot.id === event.id)
+        if (timeslot.show !== this.shows[this.currentShow].id) { return }
+        this.$refs.appModalEmissionManagerEdit.open(timeslot, this.shows[this.currentShow])
+      }
     },
 
+    // currently this will not be called, as our events are not editable
+    // if editable is set to true in the calendar config, this handler will
+    // be called if a timeslot was dragged somewhere else
     eventDrop (event) {
       this.$log.debug('eventDrop', event)
+      this.notYetImplemented()
     },
 
+    // currently this will not be called, as our events are not editable
+    // if editable is set to true in the calendar config, this handler will
+    // be called if a timeslot was resized
     eventResize (event) {
       this.$log.debug('eventResize', event)
+      this.notYetImplemented()
     },
 
+    // this handler is called when the user creates a new timeslot
     eventCreated (event) {
       this.$refs.appModalEmissionManagerCreate.open(event.start, event.end)
     },
@@ -335,6 +361,7 @@ export default {
           highlighting = 'currentShow'
         }
         this.calendarSlots.push({
+          id: this.timeslots[i].id,
           start: this.timeslots[i].start,
           end: this.timeslots[i].end,
           title: this.getShowTitleById(this.timeslots[i].show),
@@ -380,6 +407,10 @@ export default {
         alert('Error: could not load shows. See console for details.')
       })
     },
+
+    notYetImplemented: function () {
+      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
+    },
   },
 }
 </script>

src/components/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>
+          {{ prettyDateTime(timeslot.start) }}
+        </b-badge>
+        and ends at
+        <b-badge>
+          {{ prettyDateTime(timeslot.end) }}
+        </b-badge>
+        .
+      </p>
+    </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,
+      show: null,
+      loaded: {
+        modal: false,
+        schedule: false,
+      }
+    }
+  },
+
+  methods: {
+
+    // initialise a new schedule and open the modal
+    open (timeslot, show) {
+      this.$log.debug('ModalEdit.open(): timeslot:', timeslot)
+      this.$log.debug('ModalEdit.open(): show:', show)
+      this.timeslot = timeslot
+      this.show = show
+      this.loaded.modal = true
+      this.$refs.modalEmissionManagerEdit.show()
+    },
+  }
+}
+</script>
+
+<style scoped>
+</style>