126 lines
3.9 KiB
Vue
126 lines
3.9 KiB
Vue
<script setup>
|
|
import ErrorText from "../../../../../../Views/Components/ErrorText.vue";
|
|
import {reactive} from "vue";
|
|
|
|
const props = defineProps({ formData: Object, event: Object })
|
|
const emit = defineEmits(['next', 'back'])
|
|
|
|
const errors = reactive({
|
|
ansprechpartner: '',
|
|
telefon_2: '',
|
|
email_2: '',
|
|
badeerlaubnis: '',
|
|
first_aid: '',
|
|
})
|
|
|
|
const next = () => {
|
|
errors.ansprechpartner = ''
|
|
errors.telefon_2 = ''
|
|
errors.email_2 = ''
|
|
errors.badeerlaubnis = ''
|
|
errors.first_aid = ''
|
|
|
|
let hasError = false
|
|
|
|
if (!props.formData.ansprechpartner) {
|
|
errors.ansprechpartner = 'Bitte eine Kontaktperson angeben.'
|
|
hasError = true
|
|
}
|
|
|
|
if (!props.formData.telefon_2) {
|
|
errors.telefon_2 = 'Bitte eine Telefonnummer angeben.'
|
|
hasError = true
|
|
}
|
|
|
|
if (!props.formData.email_2) {
|
|
errors.email_2 = 'Bitte eine E-Mail-Adresse angeben.'
|
|
hasError = true
|
|
}
|
|
|
|
if (props.formData.badeerlaubnis === '-1') {
|
|
errors.badeerlaubnis = 'Bitte triff eine Entscheidung. Bist du dir unsicher, kontaktiere bitte die Aktionsleitung'
|
|
hasError = true
|
|
}
|
|
|
|
if (props.formData.first_aid === '-1') {
|
|
errors.first_aid = 'Bitte triff eine Entscheidung. Bist du dir unsicher, kontaktiere bitte die Aktionsleitung.'
|
|
hasError = true
|
|
}
|
|
|
|
if (hasError) {
|
|
return
|
|
}
|
|
|
|
emit('next', 3)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h3>Kontaktperson</h3>
|
|
<table class="form-table">
|
|
<tr>
|
|
<td>Name (Nachname, Vorname):</td>
|
|
<td>
|
|
<input type="text" v-model="formData.ansprechpartner" />
|
|
<ErrorText :message="errors.ansprechpartner" />
|
|
</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>Telefon:</td>
|
|
<td>
|
|
<input type="text" v-model="formData.telefon_2" />
|
|
<ErrorText :message="errors.telefon_2" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-Mail:</td>
|
|
<td>
|
|
<input type="text" v-model="formData.email_2" />
|
|
<ErrorText :message="errors.email_2" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Badeerlaubnis:</td>
|
|
<td>
|
|
<select v-model="formData.badeerlaubnis">
|
|
<option value="-1">Bitte wählen</option>
|
|
|
|
<option
|
|
v-for="swimmingPermission in props.event.swimmingPermissions"
|
|
:value="swimmingPermission.slug">{{swimmingPermission.name}}</option>
|
|
</select>
|
|
<ErrorText :message="errors.badeerlaubnis" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Erweiterte Erste Hilfe erlaubt:*</td>
|
|
<td>
|
|
<select v-model="formData.first_aid">
|
|
<option value="-1">Bitte wählen</option>
|
|
|
|
<option
|
|
v-for="firstAidPermission in props.event.firstAidPermissions"
|
|
:value="firstAidPermission.slug">{{firstAidPermission.name}}</option>
|
|
</select><br />
|
|
<span style="font-size: 0.8rem; color: #6b7280;">
|
|
Nicht dringend-notwendige Erste-Hilfe-Maßnahmen, beinhaltet das Entfernen von Zecken und Splittern sowie das Kleben von Pflastern.
|
|
</span>
|
|
<ErrorText :message="errors.first_aid" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="btn-row">
|
|
<button type="button" class="btn-primary" @click="next">Weiter →</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</template>
|