Show participation details

This commit is contained in:
2026-04-06 20:30:52 +02:00
parent 43f8621053
commit 653e85b781

View File

@@ -0,0 +1,241 @@
<script setup>
const props = defineProps({
editMode: Boolean,
participant: Object,
})
const emit = defineEmits(['closeParticipantDetails', 'markCocExisting','paymentComplete', 'cancelParticipation'])
function markCocExisting(participant) {
emit('markCocExisting', participant)
close()
}
function paymentComplete(participant) {
emit('paymentComplete', participant)
close()
}
function close() {
emit('closeParticipantDetails')
}
function cancelParticipation(participant) {
emit('cancelParticipation', participant)
close()
}
</script>
<template>
<div>
<h2>Anmeldedetails</h2>
<div class="participationData">
<div>
<h3>Persönliche Daten</h3>
<table>
<tr>
<th>Name</th>
<td>
<span v-if="!props.editMode">
{{props.participant.firstname}} {{props.participant.lastname}}
</span>
</td>
</tr>
<tr>
<th>Pfadiname</th>
<td>
<span v-if="!props.editMode">{{props.participant.nickname}}</span>
</td>
</tr>
<tr>
<th>Anschrift</th>
<td>
<span v-if="!props.editMode">
{{props.participant.address_1}}<br />
{{props.participant.address_2}}<br />
{{props.participant.postcode}}
{{props.participant.city}}
</span>
</td>
</tr>
<tr>
<th>Stamm</th>
<td>
<span v-if="!props.editMode">{{props.participant.localgroup}}</span>
</td>
</tr>
<tr>
<th>Geburtsdatum</th>
<td>
<span v-if="!props.editMode">
{{props.participant.birthday}}
</span>
</td>
</tr>
</table>
</div>
<div>
<h3>Kontaktdaten</h3>
<table>
<tr>
<th>E-Mail</th>
<td>
<span v-if="!props.editMode">{{props.participant.email_1}}</span>
</td>
</tr>
<tr>
<th>Telefon</th>
<td>
<span v-if="!props.editMode">{{props.participant.phone_1}}</span>
</td>
</tr>
<tr>
<th>Ansprechperson</th>
<td>
<span v-if="!props.editMode">{{props.participant.contact_person}}</span>
</td>
</tr>
<tr>
<th>Ansprechperson E-Mail</th>
<td>
<span v-if="!props.editMode">{{props.participant.email_2}}</span>
</td>
</tr>
<tr>
<th>Ansprechperson Telefon</th>
<td>
<span v-if="!props.editMode">{{props.participant.phone_2}}</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="participationData">
<div>
<h3>Teilnahmedetails</h3>
<table>
<tr>
<th>Anreise</th>
<td>
<span v-if="!props.editMode">{{props.participant.arrival}}</span>
</td>
</tr>
<tr>
<th>Abreise</th>
<td>
<span v-if="!props.editMode">{{props.participant.departure}}</span>
</td>
</tr>
<tr>
<th>Teilnahmegruppe</th>
<td>
<span v-if="!props.editMode">{{props.participant.participationType}}</span>
</td>
</tr>
<tr>
<th>Ernährung</th>
<td>
<span v-if="!props.editMode">{{props.participant.eatingHabit}}</span>
</td>
</tr>
<tr>
<th>eFZ-Status</th>
<td>
<span v-if="!props.editMode">{{props.participant.efzStatusReadable}}</span>
</td>
</tr>
<tr>
<th>Beitrag</th>
<td>
<span v-if="!props.editMode">{{props.participant.amountPaid.readable}} / {{props.participant.amountExpected.readable}}</span>
</td>
</tr>
</table>
</div>
<div>
<h3>Medizinische Informationen</h3>
<table>
<tr>
<th>Allergien</th>
<td>
<span v-if="!props.editMode">{{props.participant.allergies}}</span>
</td>
</tr>
<tr>
<th>Unverträglichkeiten</th>
<td>
<span v-if="!props.editMode">{{props.participant.intolerances}}</span>
</td>
</tr>
<tr>
<th>Medikamente</th>
<td>
<span v-if="!props.editMode">{{props.participant.medications}}</span>
</td>
</tr>
<tr>
<th>Erweiterte Erste Hilfe</th>
<td>
<span v-if="!props.editMode">{{props.participant.extendedFirstAid}}</span>
</td>
</tr>
<tr>
<th>Badeerlaubnis</th>
<td>
<span v-if="!props.editMode">{{props.participant.swimmingPermission}}</span>
</td>
</tr>
<tr>
<th>Letzte Tetanus-Impfung</th>
<td>
<span v-if="!props.editMode">{{props.participant.tetanusVaccination}}</span>
</td>
</tr>
<tr>
<th>Anmerkungen</th>
<td>
<span v-if="!props.editMode">{{props.participant.notes}}</span>
</td>
</tr>
</table>
</div>
</div>
<button class="button">Bearbeiten</button>
<button class="button" @click="paymentComplete(props.participant)">Zahlung vollständig</button>
<button class="button" @click="markCocExisting(props.participant)">eFZ liegt vor</button>
<button class="button" @click="cancelParticipation(props.participant)">Abmelden</button>
<button class="button" @click="close">Schließen</button>
</template>
<style scoped>
.participationData {
display: flex;
margin-bottom: 20px;
}
.participationData div {
flex: 1;
vertical-align: top;
}
</style>