Commit f74deeb9 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

FEAT: add modal to edit timeslot

parent b628e91e
......@@ -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>
......
<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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment