FEAT: implement whole schedule deletion

src/components/EmissionManagerModalEdit.vue

@@ -14,21 +14,83 @@
 
       <p v-if="loaded.modal">
         This timeslot starts at
-        <b-badge>
+        <b-badge variant="info">
           {{ prettyDateTime(timeslot.start) }}
         </b-badge>
         and ends at
-        <b-badge>
+        <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 axios from 'axios'
 import prettyDate from '../mixins/prettyDate'
 import rrules from '../mixins/rrules'
 
@@ -39,25 +101,77 @@ export default {
     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.$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()
+      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>