feat: individual transportation types for participants
This commit is contained in:
Björn Fromme
@@ -119,13 +119,17 @@
|
||||
:participant="participant"
|
||||
:mutable="mutableFields.services.mutable"
|
||||
v-on:updated="onParticipantDataUpdated($event, index)"/>
|
||||
<transportation-select :services="services.transportation"
|
||||
:participant="participant"
|
||||
:mutable="mutableFields.transportation.mutable"
|
||||
v-on:updated="onTransportationUpdated($event)"
|
||||
/>
|
||||
<pickup-select
|
||||
:pickups="services.pickups"
|
||||
:participant="participant"
|
||||
:mutable="mutableFields.transportation.mutable"
|
||||
v-on:selected="onPickupSelected($event, index)"
|
||||
v-if="services.pickups"
|
||||
v-show="showPickups"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-2 gap-4 p-2">
|
||||
@@ -402,9 +406,14 @@
|
||||
this.dirty = true;
|
||||
},
|
||||
onTransportationUpdated (event) {
|
||||
let factor = event.action === 'select' ? -1 : 1;
|
||||
this.services.transportation[event.service.id].available += this.participantData.length * factor;
|
||||
this.bookingData.selectedTransportationIds = event.selectedTransportationIds;
|
||||
let services = this.services.transportation
|
||||
if (event.action === 'select') {
|
||||
services[event.service.id].available--;
|
||||
} else {
|
||||
services[event.service.id].available++;
|
||||
}
|
||||
this.services.transportation = services
|
||||
|
||||
this.dirty = true;
|
||||
},
|
||||
hasSelectedRentals (participant) {
|
||||
@@ -463,7 +472,6 @@
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
participantData: this.participantData,
|
||||
selectedTransportations: this.selectedTransportations,
|
||||
remarks: this.bookingData.remarks,
|
||||
})
|
||||
}
|
||||
@@ -501,22 +509,6 @@
|
||||
}
|
||||
return filteredContingents;
|
||||
},
|
||||
selectedTransportations () {
|
||||
let selectedTransportations = [];
|
||||
for (let id of this.bookingData.selectedTransportationIds) {
|
||||
selectedTransportations.push(this.services.transportation[id]);
|
||||
}
|
||||
return selectedTransportations;
|
||||
},
|
||||
showPickups () {
|
||||
for (let id of this.bookingData.selectedTransportationIds) {
|
||||
if ('BUS' === this.services.transportation[id].subType) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
totalPrice () {
|
||||
let totalPrice = 0;
|
||||
this.participantData.forEach(participant => {
|
||||
|
||||
+6
-6
@@ -7,17 +7,17 @@
|
||||
<svg class="w-4 h-4" fill="none" :class="{ 'rotate-180': visible }" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</button>
|
||||
<div class="absolute top-100 left-0 z-50 mt-4 border shadow-md p-4 bg-white w-screen max-w-xs space-y-2" v-show="visible">
|
||||
<input class="form-input w-full" type="text" placeholder="Körpergröße (120-220cm)"
|
||||
<input class="form-input w-full" type="number" placeholder="Körpergröße (140-210cm)"
|
||||
v-model.number="participant.data.height" :disabled="!mutable"
|
||||
@change="validate(participant.data.height, 120, 220, 'Körpergröße')"
|
||||
@change="validate(participant.data.height, 140, 210, 'Körpergröße')"
|
||||
>
|
||||
<input class="form-input w-full" type="text" placeholder="Schuhgröße (36-50)"
|
||||
<input class="form-input w-full" type="number" placeholder="Schuhgröße (35-49, EU-Größe)"
|
||||
v-model.number="participant.data.shoeSize" :disabled="!mutable"
|
||||
@change="validate(participant.data.shoeSize, 36, 50, 'Schuhgröße')"
|
||||
@change="validate(participant.data.shoeSize, 35, 49, 'Schuhgröße')"
|
||||
>
|
||||
<input class="form-input w-full" type="text" placeholder="Gewicht (50 - 200kg)"
|
||||
<input class="form-input w-full" type="number" placeholder="Gewicht (40 - 130kg)"
|
||||
v-model.number="participant.data.weight" :disabled="!mutable"
|
||||
@change="validate(participant.data.weight, 50, 200, 'Gewicht')"
|
||||
@change="validate(participant.data.weight, 40, 130, 'Gewicht')"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+8
-1
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="relative" ref="target">
|
||||
<div class="relative" ref="target" v-show="hasSelectedBus">
|
||||
<button class="button bg-button button--small" @click.prevent="visible = !visible">
|
||||
<span>
|
||||
Zustieg
|
||||
@@ -47,6 +47,13 @@
|
||||
pickupId: this.participant.pickupId
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasSelectedBus () {
|
||||
return this.participant.transportations.some((transportation) => {
|
||||
return 'BUS' === transportation.subType
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
let self = this
|
||||
document.addEventListener('click', e => {
|
||||
|
||||
+40
-19
@@ -1,17 +1,28 @@
|
||||
<template>
|
||||
<div class="flex flex-col space-y-2" v-if="hasServices">
|
||||
<label class="flex items-center"
|
||||
v-for="service in services" :key="service.id">
|
||||
<input type="checkbox"
|
||||
class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
|
||||
v-model="selectedTransportationIds"
|
||||
:value="service.id"
|
||||
:disabled="isServiceUnavailable(service) || !mutable"
|
||||
@change="selectService(service, $event)"/>
|
||||
<span class="ml-2">
|
||||
{{ service.name }}
|
||||
<div class="relative" ref="target">
|
||||
<button class="button bg-button button--small" @click.prevent="visible = !visible">
|
||||
<span>
|
||||
Anreise
|
||||
</span>
|
||||
</label>
|
||||
<svg class="w-4 h-4" fill="none" :class="{ 'rotate-180': visible }" stroke="currentColor"
|
||||
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="absolute top-100 left-0 z-50 mt-4 border shadow-md p-4 bg-white w-screen max-w-xs" v-show="visible">
|
||||
<div class="flex flex-col space-y-2" v-if="hasServices">
|
||||
<label class="flex items-center"
|
||||
v-for="service in services" :key="service.id">
|
||||
<input type="checkbox"
|
||||
class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
|
||||
v-model="selectedTransportationIds"
|
||||
:value="service.id"
|
||||
:disabled="isServiceUnavailable(service) || !mutable"
|
||||
@change="selectService(service, $event)"/>
|
||||
<span class="ml-2">{{ service.name }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -23,9 +34,9 @@
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
initialTransportationIds: {
|
||||
type: Array,
|
||||
required: true
|
||||
participant: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
mutable: {
|
||||
type: Boolean,
|
||||
@@ -34,22 +45,32 @@
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedTransportationIds: this.initialTransportationIds
|
||||
visible: false,
|
||||
selectedTransportationIds: this.participant.transportations.map((transportation) => transportation.busproId),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectService(service, event) {
|
||||
// uncheck transportation ids with same direction to make them unique
|
||||
let direction = service.direction
|
||||
let serviceIdsToUncheck = Object.entries(this.services).filter(item => direction === item[1].direction && item[1].id !== service.id).map(item => item[1].id)
|
||||
this.selectedTransportationIds = this.selectedTransportationIds.filter(id => !serviceIdsToUncheck.includes(id))
|
||||
this.participant.transportations = this.selectedTransportations
|
||||
|
||||
let action = event.target.checked ? 'select' : 'unselect';
|
||||
this.$emit('updated', { action, service, selectedTransportationIds: this.selectedTransportationIds });
|
||||
this.$emit('updated', { action, service });
|
||||
},
|
||||
isServiceUnavailable(service) {
|
||||
return service.available === 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasServices () {
|
||||
hasServices() {
|
||||
return Object.keys(this.services).length > 0;
|
||||
}
|
||||
},
|
||||
selectedTransportations() {
|
||||
return this.selectedTransportationIds.map((id) => this.services[id])
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user