126 lines
3.9 KiB
Vue
126 lines
3.9 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
event: Object
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<h2>Übersicht</h2>
|
|
<div class="participant-flexbox">
|
|
<div class="participant-flexbox-row top">
|
|
<div class="left">
|
|
<h3>Teilnehmende</h3>
|
|
<table class="participant-income-table" style="margin-bottom: 40px;">
|
|
<tr>
|
|
<th>Teili</th>
|
|
<td>7 Personen:</td>
|
|
<td>35,00 Euro</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Teili</th>
|
|
<td>7 Personen:</td>
|
|
<td>35,00 Euro</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Teili</th>
|
|
<td>7 Personen:</td>
|
|
<td>35,00 Euro</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th colspan="2">Sonstiges</th>
|
|
<td>{{ props.event.flatSupport }}</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th style="padding-bottom: 20px" colspan="2">Förderung</th>
|
|
<td style="padding-bottom: 20px">
|
|
{{ props.event.supportPersonCalced }}<br />
|
|
<label style="font-size: 9pt;">({{ props.event.supportPerson }} / Tag p.P.)</label>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
<th colspan="2" style="border-width: 1px; border-bottom-style: solid">Gesamt</th>
|
|
<td style="font-weight: bold; border-width: 1px; border-bottom-style: solid">{{ props.event.totalIncome }}</td>
|
|
</tr>
|
|
|
|
<tr style="color:#4caf50;" v-if="props.event.totalBalance.value >= 0">
|
|
<th style="padding-top: 20px; font-size: 12pt !important;" colspan="2">Bilanz</th>
|
|
<td style="font-weight: bold; padding-top: 20px; font-size: 12pt !important;">{{ props.event.totalBalance.text }}</td>
|
|
</tr>
|
|
|
|
<tr style="color:#f44336;" v-else>
|
|
<th style="padding-top: 20px; font-size: 12pt !important;" colspan="2">Bilanz</th>
|
|
<td style="font-weight: bold; padding-top: 20px; font-size: 12pt !important;">{{ props.event.totalBalance.text }}</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
<strong>Anmelde-URL: {{props.event.url}}</strong>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<h3>Ausgaben</h3>
|
|
<table class="event-payment-table">
|
|
<tr v-for="amount in props.event.costUnit.amounts">
|
|
<th>{{amount.name}}</th>
|
|
<td>{{amount.string}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th style="color:#f44336; border-width: 1px; border-bottom-style: solid; padding-top: 20px">Gesamt</th>
|
|
<td style="color:#f44336; border-width: 1px; border-bottom-style: solid; padding-top: 20px; font-weight: bold">{{props.event.costUnit.overAllAmount.text}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.participant-flexbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: 95%;
|
|
margin: 20px auto 0;
|
|
}
|
|
|
|
.participant-flexbox-row {
|
|
display: flex;
|
|
gap: 10px; /* Abstand zwischen den Spalten */
|
|
}
|
|
|
|
.participant-flexbox-row.top .left {
|
|
flex: 0 0 50%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.participant-flexbox.top .right {
|
|
flex: 0 0 50%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.participant-income-table,
|
|
.event-payment-table {
|
|
width: 300px;
|
|
}
|
|
|
|
.participant-income-table th {
|
|
width: 20px;
|
|
font-size: 11pt !important;
|
|
}
|
|
|
|
.participant-income-table tr td:first-child {
|
|
width: 25px !important;
|
|
font-size: 11pt;
|
|
}
|
|
</style>
|