From a1f63b1e43c934663cc3506d364da830c584948c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 15 Feb 2023 16:20:20 +0100
Subject: [PATCH] Feat: Implement rudamentary (and hacky) validation of form
 fields

---
 .../Private/Assets/js/myep/BookingEdit.vue    |  8 +++---
 .../myep/components/ParticipantSizesForm.vue  | 26 +++++++++++++------
 2 files changed, 22 insertions(+), 12 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 ea296991..32ca7b44 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
@@ -162,7 +162,7 @@
                         <textarea rows="2" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
                                   v-model="participant.data.additionRequest"
                                   @change="dirty = true"
-                                  placeholder="Sonstiges (z. B. Allergien, Verleihgrößen)"
+                                  placeholder="Sonstiges (z. B. Allergien)"
                         />
                     </div>
                 </template>
@@ -428,7 +428,7 @@
                         this.invalidParticipantData[participantId] = {
                             invalid: 'Nationalität',
                         };
-                        messages.push('Teilnehmer #'+participantId+': Nationalität')
+                        messages.push('Teilnehmer #'+participantId+': Nationalität fehlt')
                     }
                     if (!this.hasSelectedRentals(participant)) {
                         continue;
@@ -437,13 +437,13 @@
                         this.invalidParticipantData[participantId] = {
                             invalid: 'Körpergröße',
                         };
-                        messages.push('Teilnehmer #'+participantId+': Körpergröße')
+                        messages.push('Teilnehmer #'+participantId+': Körpergröße fehlt')
                     }
                     if (!participant.data.shoeSize) {
                         this.invalidParticipantData[participantId] = {
                             invalid: 'Schuhgröße',
                         };
-                        messages.push('Teilnehmer #'+participantId+': Schuhgröße')
+                        messages.push('Teilnehmer #'+participantId+': Schuhgröße fehlt')
                     }
                 }
                 return messages
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 d5e02593..6db4d8de 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"
+            <input class="form-input w-full" type="text" placeholder="Körpergröße (120-220cm)"
                    v-model="participant.data.height" :disabled="!mutable"
-                   @change="$emit('updated', participant)"
+                   @change="validate(participant.data.height, 120, 220, 'Körpergröße')"
             >
-            <input class="form-input w-full" type="text" placeholder="Schuhgröße"
-                   v-model="participant.data.shoeSize" :disabled="!mutable"
-                   @change="$emit('updated', participant)"
+            <input class="form-input w-full" type="text" placeholder="Schuhgröße (36-50)"
+                   v-model.number="participant.data.shoeSize" :disabled="!mutable"
+                   @change="validate(participant.data.shoeSize, 36, 50, 'Schuhgröße')"
             >
-            <input class="form-input w-full" type="text" placeholder="Gewicht"
-                   v-model="participant.data.weight" :disabled="!mutable"
-                   @change="$emit('updated', participant)"
+            <input class="form-input w-full" type="text" placeholder="Gewicht (50 - 200kg)"
+                   v-model.number="participant.data.weight" :disabled="!mutable"
+                   @change="validate(participant.data.weight, 50, 200, 'Gewicht')"
             >
         </div>
     </div>
@@ -45,6 +45,16 @@
                 visible: false,
             }
         },
+        methods: {
+            validate (value, min, max, label) {
+                let number = parseInt(value)
+                if (isNaN(number) || number < min || number > max) {
+                    alert(`Bitte einen Wert zwischen ${min} und ${max} für ${label} eingeben`)
+                }
+
+                this.$emit('updated', this.participant)
+            },
+        },
         computed: {
             hasSelectedRentals () {
                 let result = false;