ModalEdit.vue 7.81 KB
Newer Older
1
2
3
4
5
6
7
<template>
  <div>
    <b-modal
      ref="modalEmissionManagerEdit"
      title="Edit a schedule"
      size="lg"
    >
8
9
      <p v-if="loaded.shows">
        Editing a timeslot/schedule for show: <b>{{ selectedShow.name }}</b>
10
11
      </p>

12
      <div v-if="timeslot && loaded.schedule">
13
        This timeslot starts at
14
        <b-badge variant="info">
15
16
17
          {{ prettyDateTime(timeslot.start) }}
        </b-badge>
        and ends at
18
        <b-badge variant="info">
19
20
          {{ prettyDateTime(timeslot.end) }}
        </b-badge>
21
22

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

70
71
72
73
74
75
76
77
78
79
        <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>
80
81
                <span v-else-if="schedule.rrule === 1">Delete both</span>
                <span v-else>Delete schedule + all timeslots</span>
82
              </b-button>
83

84
85
86
87
88
89
90
91
              <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>
92

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

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

<script>
145
import { mapGetters } from 'vuex'
146
147
import prettyDate from '../../mixins/prettyDate'
import rrules from '../../mixins/rrules'
148
149
150
151
152
153
154

export default {
  mixins: [ prettyDate, rrules ],

  data () {
    return {
      timeslot: null,
155
156
157
      deletion: {
        amount: 0,
        count: 0,
158
159
160
161
      }
    }
  },

162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
  computed: {
    loaded () {
      return {
        shows: this.$store.state.shows.loaded.shows,
        schedule: this.$store.state.shows.loaded.schedule,
        scheduleTimeslots: this.$store.state.shows.loaded.scheduleTimeslots,
      }
    },

    ...mapGetters({
      selectedShow: 'shows/selectedShow',
      schedule: 'shows/schedule',
      scheduleTimeslots: 'shows/scheduleTimeslots',
    })
  },

178
  methods: {
179
    deleteFullSchedule (id) {
180
181
182
183
184
185
186
      this.$store.dispatch('shows/deleteSchedule', {
        show: this.selectedShow.id,
        schedule: id,
        callback: () => {
          this.$refs.modalEmissionManagerEdit.hide()
          this.$parent.renderView(null)
        }
187
188
189
      })
    },

190
    deleteSingleTimeslot (scheduleId, timeslotId) {
191
192
193
194
195
196
197
198
      this.$store.dispatch('shows/deleteTimeslot', {
        show: this.selectedShow.id,
        schedule: scheduleId,
        timeslot: timeslotId,
        callback: () => {
          this.$refs.modalEmissionManagerEdit.hide()
          this.$parent.renderView(null)
        }
199
200
201
      })
    },

202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
    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()

        for (let i in toDelete) {
          this.$log.debug('Deleting timeslot', toDelete[i])
223
224
225
226
227
228
229
230
231
232
233
234
          this.$store.dispatch('shows/deleteTimeslot', {
            show: this.selectedShow.id,
            schedule: scheduleId,
            timeslot: toDelete[i],
            callback: () => {
              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()
              }
235
236
237
238
            }
          })
        }
      }
239
240
    },

241
242
243
244
245
246
247
    loadSchedule (scheduleId) {
      this.$store.dispatch('shows/fetchSchedule', {
        show: this.selectedShow.id,
        schedule: scheduleId,
        callback: () => {
          this.loadScheduleTimeslots(scheduleId)
        }
248
249
250
      })
    },

251
252
253
254
255
256
    loadScheduleTimeslots (scheduleId) {
      this.$store.dispatch('shows/fetchTimeslots', {
        id: this.selectedShow.id,
        schedule: scheduleId,
        start: this.schedule.dstart,
        end: this.schedule.until,
257
258
      })
    },
259
260

    // initialise a new schedule and open the modal
261
    open (timeslot) {
262
263
      this.timeslot = timeslot
      this.$refs.modalEmissionManagerEdit.show()
264
      this.loadSchedule(timeslot.schedule)
265
    },
266

267
268
269
270
271
272
  }
}
</script>

<style scoped>
</style>