From 3f325df13306ccc143a07ad546d9e7cf59e46c7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Mon, 9 Sep 2024 20:25:55 +0200
Subject: [PATCH] feat: individual transportation types for participants

---
 .../Private/Assets/js/myep/BookingEdit.vue    | 34 ++++-------
 .../myep/components/ParticipantSizesForm.vue  | 12 ++--
 .../js/myep/components/PickupSelect.vue       |  9 ++-
 .../myep/components/TransportationSelect.vue  | 59 +++++++++++++------
 4 files changed, 67 insertions(+), 47 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
index 9019c600..67e4a616 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
@@ -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 =>  {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantSizesForm.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantSizesForm.vue
index 8c23a656..f718f9a5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantSizesForm.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantSizesForm.vue
@@ -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>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/PickupSelect.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/PickupSelect.vue
index d8962038..ed7b63e1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/PickupSelect.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/PickupSelect.vue
@@ -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 => {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/TransportationSelect.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/TransportationSelect.vue
index edaf34f7..58830a75 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/TransportationSelect.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/TransportationSelect.vue
@@ -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>