ModalResolve.vue 5.03 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
<template>
  <div>
    <b-modal
      ref="modalEmissionManagerResolve"
      title="Resolve a timeslot conflict"
      size="lg"
      @ok="resolve"
    >
      <p>
        Resolving a conflict for a new schedule of the show:
11
12
        <b v-if="loaded.shows">
          <b>{{ selectedShow.name }}</b>
13
14
        </b>
      </p>
15
      <p v-if="loaded.modal">
16
17
18
19
20
21
22
23
24
25
26
27
28
29
        The new projected slot starts at
        <b-badge variant="danger">
          {{ toResolve.start.format('YYYY-DD-MM HH:mm') }}
        </b-badge>
        and ends at
        <b-badge variant="danger">
          {{ toResolve.end.format('YYYY-DD-MM HH:mm') }}
        </b-badge>
        .
      </p>

      <p>
        It conflicts with the following timeslots:
      </p>
30
      <ul v-if="loaded.modal">
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
        <li
          v-for="col in toResolve.collisions"
          :key="col.id"
        >
          <i>{{ col.show_name }}</i> from
          <b-badge variant="success">
            {{ col.start.slice(0,16) }}
          </b-badge>
          to
          <b-badge variant="success">
            {{ col.end.slice(0,16) }}
          </b-badge>
        </li>
      </ul>

      <p>
        What should we do?
      </p>
      <div align="center">
50
        <b-button-group v-if="loaded.modal">
51
52
53
54
          <b-button
            v-if="toResolve.solutionChoices.indexOf('ours') >= 0"
            variant="danger"
            size="sm"
55
            @click="resolve('ours')"
56
57
58
59
60
61
62
63
64
          >
            Create new,<br>
            delete existing.
          </b-button>

          <b-button
            v-if="toResolve.solutionChoices.indexOf('theirs') >= 0"
            variant="success"
            size="sm"
65
            @click="resolve('theirs')"
66
67
68
69
70
71
72
73
74
          >
            Discard new,<br>
            keep existing.
          </b-button>

          <b-button
            v-if="toResolve.solutionChoices.indexOf('theirs-start') >= 0"
            variant="info"
            size="sm"
75
            @click="resolve('theirs-start')"
76
77
78
79
80
81
82
83
84
          >
            theirs-start<br>
            TODO: describe
          </b-button>

          <b-button
            v-if="toResolve.solutionChoices.indexOf('theirs-end') >= 0"
            variant="info"
            size="sm"
85
            @click="resolve('theirs-end')"
86
87
88
89
90
91
92
93
94
          >
            theirs-end<br>
            TODO: describe
          </b-button>

          <b-button
            v-if="toResolve.solutionChoices.indexOf('theirs-both') >= 0"
            variant="info"
            size="sm"
95
            @click="resolve('theirs-both')"
96
97
98
99
100
101
102
103
104
          >
            theirs-both<br>
            TODO: describe
          </b-button>

          <b-button
            v-if="toResolve.solutionChoices.indexOf('ours-start') >= 0"
            variant="info"
            size="sm"
105
            @click="resolve('ours-start')"
106
107
108
109
110
111
112
113
114
          >
            ours-start<br>
            TODO: describe
          </b-button>

          <b-button
            v-if="toResolve.solutionChoices.indexOf('ours-end') >= 0"
            variant="info"
            size="sm"
115
            @click="resolve('ours-end')"
116
117
118
119
120
121
122
123
124
          >
            ours-end<br>
            TODO: describe
          </b-button>

          <b-button
            v-if="toResolve.solutionChoices.indexOf('ours-both') >= 0"
            variant="info"
            size="sm"
125
            @click="resolve('ours-both')"
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
          >
            ours-both<br>
            TODO: describe
          </b-button>
        </b-button-group>
      </div>
    </b-modal>

    <b-modal
      ref="modalEmissionManagerResolveNotNeeded"
      title="No conflict"
      size="sm"
    >
      <div align="center">
        <p>This timeslot has no conflict.</p>
        <p>All fine.</p>
      </div>
    </b-modal>
  </div>
</template>

<script>
148
import { mapGetters } from 'vuex'
149
150
151
152

export default {
  data () {
    return {
153
      loadedModal: false,
154
155
156
157
      toResolve: null,
    }
  },

158
159
160
161
162
163
164
165
166
167
168
169
170
  computed: {
    loaded () {
      return {
        shows: this.$store.state.shows.loaded.shows,
        modal: this.loadedModal,
      }
    },

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

171
  methods: {
172
173
174
175
    resolve (mode) {
      switch (mode) {
        case 'ours':
        case 'theirs':
176
177
178
179
180
181
        case 'theirs-start':
        case 'theirs-end':
        case 'theirs-both':
        case 'ours-start':
        case 'ours-end':
        case 'ours-both':
182
183
184
185
186
187
188
189
          this.$parent.resolveEvent(this.toResolve, mode)
          this.$refs.modalEmissionManagerResolve.hide()
          break

        default:
          this.notYetImplemented()
          break
      }
190
191
192
193
194
    },

    // initialise properties and open the modal
    open (event) {
      this.toResolve = event
195
      this.loadedModal = true
196
197
198
199
200
201
202
      this.$refs.modalEmissionManagerResolve.show()
    },

    // opens the modal signaling that there is no conflict to resolve
    openNotNeeded () {
      this.$refs.modalEmissionManagerResolveNotNeeded.show()
    },
203
204
205
206

    notYetImplemented: function () {
      alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
    },
207
208
209
210
211
212
213
214
215
  }
}
</script>

<style scoped>
.row {
  margin-bottom: 1em;
}
</style>