ModalEdit.vue 9.83 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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
17
        <b-badge variant="info">
18
19
20
          {{ prettyDateTime(timeslot.start) }}
        </b-badge>
        and ends at
21
        <b-badge variant="info">
22
23
24
          {{ prettyDateTime(timeslot.end) }}
        </b-badge>
      </p>
25
26
27

      <div v-if="loaded.schedule">
        <div v-if="schedule.rrule === 1">
28
29
          <p>
            This is a single emission.
30
31
32
            <span v-if="!loaded.scheduleTimeslots">
              <br>
              <img
33
                src="../../assets/radio.gif"
34
35
36
                alt="loading schedule data"
              >
            </span>
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
            <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>
54
55
56
        </div>
        <div v-else>
          <p>This is a recurring event: <b>{{ rruleRender(schedule.rrule) }}</b>, until: {{ prettyDate(schedule.until) }}</p>
57
          <p>All timeslots of this schedule:</p>
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
          <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>

75
76
77
78
79
80
81
82
83
84
        <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>
85
86
                <span v-else-if="schedule.rrule === 1">Delete both</span>
                <span v-else>Delete schedule + all timeslots</span>
87
              </b-button>
88

89
90
91
92
93
94
95
96
              <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>
97

98
99
100
101
102
103
104
105
106
107
108
109
110
              <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
111
            src="../../assets/radio.gif"
112
113
            alt="loading timeslot data"
          >
114
115
116
117
        </div>
      </div>
      <div v-else>
        <img
118
          src="../../assets/radio.gif"
119
120
121
          alt="loading schedule data"
        >
      </div>
122
    </b-modal>
123
124
125
126
127
128
129
130
131
132
133
134

    <b-modal
      ref="modalEmissionManagerDeleteTimeslots"
      title="Deleting timeslots"
      size="lg"
      centered
      hide-footer
      no-close-on-esc
      no-close-on-backdrop
    >
      <div align="center">
        <img
135
          src="../../assets/radio.gif"
136
137
138
139
140
141
142
143
144
145
          alt="loading schedule data"
        >
        <b-progress
          :value="deletion.count"
          :max="deletion.amount"
          variant="info"
          animated
        />
      </div>
    </b-modal>
146
147
148
149
  </div>
</template>

<script>
150
import axios from 'axios'
151
152
import prettyDate from '../../mixins/prettyDate'
import rrules from '../../mixins/rrules'
153
154
155
156
157
158
159
160

export default {
  mixins: [ prettyDate, rrules ],

  data () {
    return {
      timeslot: null,
      schedule: null,
161
      scheduleTimeslots: null,
162
163
164
165
      show: null,
      loaded: {
        modal: false,
        schedule: false,
166
        scheduleTimeslots: false,
167
168
169
170
      },
      deletion: {
        amount: 0,
        count: 0,
171
172
173
174
175
      }
    }
  },

  methods: {
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
    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.')
      })
    },

191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
    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.')
      })
    },

207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
    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.')
          })
        }
      }

248
249
    },

250
251
252
253
254
255
256
257
258
    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
259
        this.loadScheduleTimeslots(this.schedule.id)
260
261
262
263
264
265
266
267
268
269
      }).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/'
270
      uri += '?start=' + this.schedule.dstart + '&end=' + this.schedule.until
271
272
273
274
275
276
277
278
279
280
281
282
      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.')
      })
    },
283
284
285
286
287
288
289

    // 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()
290
      this.loadSchedule(timeslot.schedule)
291
    },
292
293
294
295

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

<style scoped>
</style>