Creation and editing of events
This commit is contained in:
258
app/Domains/Event/Views/Partials/CommonSettings.vue
Normal file
258
app/Domains/Event/Views/Partials/CommonSettings.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import ErrorText from "../../../../Views/Components/ErrorText.vue";
|
||||
import AmountInput from "../../../../Views/Components/AmountInput.vue";
|
||||
import {request} from "../../../../../resources/js/components/HttpClient.js";
|
||||
import {toast} from "vue3-toastify";
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
event: Object,
|
||||
})
|
||||
|
||||
|
||||
const dynmicProps = reactive({
|
||||
localGroups: [],
|
||||
eatingHabits:[]
|
||||
});
|
||||
|
||||
const contributingLocalGroups = ref([])
|
||||
const eatingHabits = ref([]);
|
||||
|
||||
const errors = reactive({})
|
||||
|
||||
const formData = reactive({
|
||||
contributingLocalGroups: contributingLocalGroups.value,
|
||||
eventName: props.event.name,
|
||||
eventLocation: props.event.location,
|
||||
postalCode: props.event.postalCode,
|
||||
email: props.event.email,
|
||||
earlyBirdEnd: props.event.earlyBirdEnd.internal,
|
||||
registrationFinalEnd: props.event.registrationFinalEnd.internal,
|
||||
alcoholicsAge: props.event.alcoholicsAge,
|
||||
eatingHabits: eatingHabits.value,
|
||||
sendWeeklyReports: props.event.sendWeeklyReports,
|
||||
registrationAllowed: props.event.registrationAllowed,
|
||||
flatSupport: props.event.flatSupportEdit,
|
||||
supportPerson: props.event.supportPersonEdit,
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
const response = await fetch('/api/v1/core/retrieve-event-setting-data');
|
||||
const data = await response.json();
|
||||
Object.assign(dynmicProps, data);
|
||||
|
||||
contributingLocalGroups.value = props.event.contributingLocalGroups?.map(t => t.id) ?? []
|
||||
eatingHabits.value = props.event.eatingHabits?.map(t => t.id) ?? []
|
||||
});
|
||||
|
||||
async function save() {
|
||||
const response = await request('/api/v1/event/details/' + props.event.id + '/common-settings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: {
|
||||
eventName: formData.eventName,
|
||||
eventLocation: formData.eventLocation,
|
||||
postalCode: formData.postalCode,
|
||||
email: formData.email,
|
||||
earlyBirdEnd: formData.earlyBirdEnd,
|
||||
registrationFinalEnd: formData.registrationFinalEnd,
|
||||
alcoholicsAge: formData.alcoholicsAge,
|
||||
sendWeeklyReports: formData.sendWeeklyReports,
|
||||
registrationAllowed: formData.registrationAllowed,
|
||||
flatSupport: formData.flatSupport,
|
||||
supportPerson: formData.supportPerson,
|
||||
contributingLocalGroups: contributingLocalGroups.value,
|
||||
eatingHabits: eatingHabits.value,
|
||||
}
|
||||
})
|
||||
|
||||
if (response.status === 'success') {
|
||||
toast.success('Einstellungen wurden erfolgreich gespeichert.')
|
||||
emit('close')
|
||||
} else {
|
||||
toast.error('Beim Speichern ist ein Fehler aufgetreten.')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2>Einstellungen</h2>
|
||||
<div class="container">
|
||||
<div class="row top">
|
||||
<div class="left">
|
||||
<table class="event-settings-table" style="width: 80%;">
|
||||
<tr>
|
||||
<th>Veranstaltungsname</th>
|
||||
<td>
|
||||
<input type="text" v-model="formData.eventName" class="width-full" /><br />
|
||||
<ErrorText :message="errors.eventName" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Veranstaltungsort</th>
|
||||
<td>
|
||||
<input type="text" v-model="formData.eventLocation" class="width-full" /><br />
|
||||
<ErrorText :message="errors.eventLocation" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Postleitzahl des Veranstaltungsorts</th>
|
||||
<td>
|
||||
<input type="text" v-model="formData.postalCode" class="width-full" /><br />
|
||||
<ErrorText :message="errors.eventPostalCode" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>E-Mail-Adresse der Veranstaltungsleitung</th>
|
||||
<td>
|
||||
<input type="text" v-model="formData.email" class="width-full" /><br />
|
||||
<ErrorText :message="errors.eventEmail" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Ende der EarlyBird-Phase</th>
|
||||
<td>
|
||||
<input type="date" v-model="formData.earlyBirdEnd" class="width-full" /><br />
|
||||
<ErrorText :message="errors.earlyBirdEnd" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Finaler Anmeldeschluss</th>
|
||||
<td>
|
||||
<input type="date" v-model="formData.registrationFinalEnd" class="width-full" /><br />
|
||||
<ErrorText :message="errors.registrationFinalEnd" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Fördermittel</th>
|
||||
<td>
|
||||
<amountInput v-model="formData.supportPerson" clasS="width-small" /> Euro p.P. / Tag
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Zuschüsse</th>
|
||||
<td>
|
||||
<amountInput v-model="formData.flatSupport" clasS="width-small" /> Euro pauschal
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Mindestalter für Alkoholkonsum</th>
|
||||
<td>
|
||||
<input type="number" v-model="formData.alcoholicsAge" class="width-tiny" /><br />
|
||||
<ErrorText :message="errors.alcoholicsAge" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="2" style="height: 25px !important;">
|
||||
<input type="checkbox" v-model="formData.sendWeeklyReports" id="sendWeeklyReports" />
|
||||
<label for="sendWeeklyReports">Wöchentliche Zusammenfassung per E-Mail an Stämme schicken</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<input type="checkbox" v-model="formData.registrationAllowed" id="registrationAllowed" />
|
||||
<label for="registrationAllowed">Veranstaltung ist für Anmeldungen geöffnet</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="right">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Teilnehmende Stämme</th>
|
||||
</tr>
|
||||
<tr v-for="localGroup in dynmicProps.localGroups">
|
||||
<td>
|
||||
<input type="checkbox" :id="'localgroup_' + localGroup.id" :value="localGroup.id" v-model="contributingLocalGroups" />
|
||||
<label style="padding-left: 5px;" :for="'localgroup_' + localGroup.id">{{localGroup.name}}</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th style="padding-top: 40px !important;">Angebotene Ernährung</th>
|
||||
</tr>
|
||||
|
||||
<tr v-for="eatingHabit in dynmicProps.eatingHabits">
|
||||
<td>
|
||||
<input type="checkbox" :id="'eatinghabit' + eatingHabit.id" :value="eatingHabit.id" v-model="eatingHabits" />
|
||||
<label style="padding-left: 5px;" :for="'eatinghabit' + eatingHabit.id">{{eatingHabit.name}}</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row bott">
|
||||
<input type="button" value="Speichern" @click="save" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px; /* Abstand zwischen den Zeilen */
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 10px; /* Abstand zwischen den Spalten */
|
||||
}
|
||||
|
||||
.row.top .left {
|
||||
flex: 0 0 70%; /* feste Breite von 80% */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.row.top .right {
|
||||
flex: 0 0 30%; /* feste Breite von 20% */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.row.bottom {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.event-settings-table {
|
||||
|
||||
}
|
||||
|
||||
.event-settings-table tr {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.event-settings-table td {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.event-settings-table th {
|
||||
vertical-align: top;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
</style>
|
||||
63
app/Domains/Event/Views/Partials/EventManagement.vue
Normal file
63
app/Domains/Event/Views/Partials/EventManagement.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup>
|
||||
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import {toast} from "vue3-toastify";
|
||||
import {request} from "../../../../../resources/js/components/HttpClient.js";
|
||||
const selectedManagers = ref([])
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const props = defineProps({
|
||||
event: Object
|
||||
})
|
||||
|
||||
|
||||
const commonProps = reactive({
|
||||
activeUsers: [],
|
||||
});
|
||||
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
const response = await fetch('/api/v1/core/retrieve-global-data');
|
||||
const data = await response.json();
|
||||
Object.assign(commonProps, data);
|
||||
|
||||
selectedManagers.value = props.event.managers?.map(t => t.id) ?? []
|
||||
});
|
||||
|
||||
|
||||
async function updateManagers() {
|
||||
|
||||
const response = await request('/api/v1/event/details/' + props.event.id + '/event-managers', {
|
||||
method: "POST",
|
||||
body: {
|
||||
selectedManagers: selectedManagers.value,
|
||||
}
|
||||
});
|
||||
|
||||
if (response.status === 'success') {
|
||||
toast.success('Einstellungen wurden erfolgreich gespeichert.')
|
||||
emit('close')
|
||||
} else {
|
||||
toast.error('Beim Speichern ist ein Fehler aufgetreten.')
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h3>Aktionsleitung:</h3>
|
||||
<p v-for="user in commonProps.activeUsers">
|
||||
<input
|
||||
type="checkbox"
|
||||
:id="'user_' + user.id"
|
||||
:value="user.id"
|
||||
v-model="selectedManagers"
|
||||
/>
|
||||
<label :for="'user_' + user.id">{{user.fullname}}</label>
|
||||
</p>
|
||||
|
||||
<input type="button" value="Speichern" @click="updateManagers" />
|
||||
</template>
|
||||
|
||||
113
app/Domains/Event/Views/Partials/Overview.vue
Normal file
113
app/Domains/Event/Views/Partials/Overview.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import ParticipationFees from "./ParticipationFees.vue";
|
||||
import ParticipationSummary from "./ParticipationSummary.vue";
|
||||
import CommonSettings from "./CommonSettings.vue";
|
||||
import EventManagement from "./EventManagement.vue";
|
||||
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
})
|
||||
|
||||
const dynamicProps = reactive({
|
||||
event : null,
|
||||
});
|
||||
|
||||
const displayData = ref('main');
|
||||
|
||||
async function showMain() {
|
||||
const response = await fetch("/api/v1/event/details/" + props.data.event.id + '/summary');
|
||||
const data = await response.json();
|
||||
Object.assign(dynamicProps, data);
|
||||
displayData.value = 'main';
|
||||
}
|
||||
|
||||
async function showCommonSettings() {
|
||||
displayData.value = 'commonSettings';
|
||||
}
|
||||
|
||||
async function showParticipationFees() {
|
||||
displayData.value = 'participationFees';
|
||||
}
|
||||
|
||||
async function showEventManagement() {
|
||||
displayData.value = 'eventManagement';
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const response = await fetch("/api/v1/event/details/" + props.data.event.id + '/summary');
|
||||
const data = await response.json();
|
||||
Object.assign(dynamicProps, data);
|
||||
|
||||
console.log(dynamicProps.event)
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ParticipationFees v-if="displayData === 'participationFees'" :event="dynamicProps.event" @close="showMain" />
|
||||
<CommonSettings v-else-if="displayData === 'commonSettings'" :event="dynamicProps.event" @close="showMain" />
|
||||
<EventManagement v-else-if="displayData === 'eventManagement'" :event="dynamicProps.event" @close="showMain" />
|
||||
|
||||
|
||||
|
||||
<div class="event-flexbox" v-else>
|
||||
<div class="event-flexbox-row top">
|
||||
<div class="left"><ParticipationSummary :event="dynamicProps.event" /></div>
|
||||
<div class="right">
|
||||
<input type="button" value="Erste-Hilfe-Liste (PDF)" /><br/>
|
||||
<input type="button" value="Teili-Liste (CSV)" /><br/>
|
||||
<input type="button" value="KSV-Daten (CSV)" /><br/>
|
||||
<input type="button" value="Küchenübersicht (PDF)" /><br/>
|
||||
<input type="button" value="Beitragsliste (PDF)" /><br/>
|
||||
<input type="button" value="Getränkeliste (PDF)" /><br/>
|
||||
<input type="button" value="Foto-Erlaubnis (PDF)" /><br/>
|
||||
<input type="button" class="fix-button" value="Zahlungserinnerung senden" /><br/>
|
||||
<input type="button" class="deny-button" value="Letzte Mahnung senden" /><br/>
|
||||
<input type="button" value="Rundmail senden" /><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-flexbox-row bottom">
|
||||
<label style="font-size: 9pt;" class="link" @click="showCommonSettings">Allgemeine Einstellungen</label>
|
||||
<label style="font-size: 9pt;" class="link" @click="showEventManagement">Veranstaltungsleitung</label>
|
||||
<label style="font-size: 9pt;" class="link" @click="showParticipationFees">Teilnahmegebühren</label>
|
||||
<a style="font-size: 9pt;" class="link" :href="'/cost-unit/' + props.data.event.costUnit.id">Ausgabenübersicht</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.event-flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 95%;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
|
||||
.event-flexbox-row {
|
||||
display: flex;
|
||||
gap: 10px; /* Abstand zwischen den Spalten */
|
||||
}
|
||||
|
||||
.event-flexbox-row.top .left {
|
||||
flex: 0 0 calc(100% - 300px);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.event-flexbox-row.top .right {
|
||||
flex: 0 0 250px; /* feste Breite von 20% */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.event-flexbox-row.bottom {
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.event-flexbox-row.top .right input[type="button"] {
|
||||
width: 100% !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
231
app/Domains/Event/Views/Partials/ParticipationFees.vue
Normal file
231
app/Domains/Event/Views/Partials/ParticipationFees.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<script setup>
|
||||
import AppLayout from "../../../../../resources/js/layouts/AppLayout.vue";
|
||||
import ShadowedBox from "../../../../Views/Components/ShadowedBox.vue";
|
||||
import {reactive, watch} from "vue";
|
||||
import AmountInput from "../../../../Views/Components/AmountInput.vue";
|
||||
import ErrorText from "../../../../Views/Components/ErrorText.vue";
|
||||
import {toast} from "vue3-toastify";
|
||||
import {request} from "../../../../../resources/js/components/HttpClient.js";
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const props = defineProps({
|
||||
event: Object,
|
||||
})
|
||||
|
||||
const errors = reactive({})
|
||||
const formData = reactive({
|
||||
"pft_1_active": true,
|
||||
"pft_1_amount": props.event.participationFee_1.amount,
|
||||
"pft_1_description": props.event.participationFee_1.description,
|
||||
|
||||
"pft_2_active": props.event.participationFee_2.active,
|
||||
"pft_2_amount": props.event.participationFee_2.amount,
|
||||
"pft_2_description": props.event.participationFee_2.description,
|
||||
|
||||
"pft_3_active": props.event.participationFee_3.active,
|
||||
"pft_3_amount": props.event.participationFee_3.amount,
|
||||
"pft_3_description": props.event.participationFee_3.description,
|
||||
|
||||
"pft_4_active": props.event.participationFee_4.active,
|
||||
"pft_4_amount": props.event.participationFee_4.amount,
|
||||
"pft_4_description": props.event.participationFee_4.description,
|
||||
|
||||
'maxAmount': props.event.maxAmount,
|
||||
|
||||
})
|
||||
|
||||
function validateInput() {
|
||||
var noErrors = true;
|
||||
|
||||
if (formData.pft_1_description === '' && !props.event.solidarityPayment) {
|
||||
errors.pft_1_description = 'Eine Beschreibung für diese Gruppe ist erforderlich';
|
||||
noErrors = false;
|
||||
}
|
||||
|
||||
if (formData.pft_2_description === '' && formData.pft_2_active && !props.event.solidarityPayment) {
|
||||
errors.pft_2_description = 'Eine Beschreibung für diese Gruppe ist erforderlich';
|
||||
noErrors = false;
|
||||
}
|
||||
|
||||
if (formData.pft_3_description === '' && formData.pft_3_active && !props.event.solidarityPayment) {
|
||||
errors.pft_3_description = 'Eine Beschreibung für diese Gruppe ist erforderlich';
|
||||
noErrors = false;
|
||||
}
|
||||
|
||||
if (formData.pft_4_description === '' && formData.pft_4_active) {
|
||||
errors.pft_4_description = 'Eine Beschreibung für diese Gruppe ist erforderlich';
|
||||
noErrors = false;
|
||||
}
|
||||
|
||||
return noErrors;
|
||||
|
||||
}
|
||||
|
||||
async function saveParticipationFees() {
|
||||
if (!validateInput()) {
|
||||
toast.error('Bitte prüfe alle Eingaben auf Fehler')
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await request('/api/v1/event/details/' + props.event.id + '/participation-fees', {
|
||||
method: "POST",
|
||||
body: {
|
||||
event_id: props.event.id,
|
||||
pft_1_active: formData.pft_1_active,
|
||||
pft_1_amount: formData.pft_1_amount,
|
||||
pft_1_description: formData.pft_1_description,
|
||||
|
||||
pft_2_active: formData.pft_2_active,
|
||||
pft_2_amount: formData.pft_2_amount,
|
||||
pft_2_description: formData.pft_2_description,
|
||||
|
||||
pft_3_active: formData.pft_3_active,
|
||||
pft_3_amount: formData.pft_3_amount,
|
||||
pft_3_description: formData.pft_3_description,
|
||||
|
||||
pft_4_active: formData.pft_4_active,
|
||||
pft_4_amount: formData.pft_4_amount,
|
||||
pft_4_description: formData.pft_4_description,
|
||||
|
||||
maxAmount: formData.maxAmount,
|
||||
}
|
||||
})
|
||||
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function recalculateMaxAmount(newValue) {
|
||||
if (formData.maxAmount === 0) return;
|
||||
|
||||
var newAmount = parseFloat(newValue.replace(',', '.'));
|
||||
if (props.event.payPerDay) {
|
||||
newAmount = newAmount * props.event.duration;
|
||||
}
|
||||
|
||||
var currentMaxAmount = formData.maxAmount.replace(',', '.');
|
||||
|
||||
if (newAmount > currentMaxAmount) {
|
||||
formData.maxAmount = newAmount.toFixed(2).replace('.', ',');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td>Aktiv</td>
|
||||
<td>Preisgruppe</td>
|
||||
<td>Betrag</td>
|
||||
<td>Beschreibung</td>
|
||||
</tr>
|
||||
<tr style="height: 65px; vertical-align: top">
|
||||
<td>
|
||||
<input type="checkbox" v-model="formData.participationFeeType_1" checked disabled/>
|
||||
</td>
|
||||
<td v-if="props.event.solidarityPayment">
|
||||
Regulärer Beitrag
|
||||
</td>
|
||||
<td v-else>
|
||||
Teilnehmende
|
||||
</td>
|
||||
<td>
|
||||
<AmountInput v-model="formData.pft_1_amount" class="width-small" @blur="recalculateMaxAmount(formData.pft_1_amount)" />
|
||||
<label v-if="props.event.payPerDay"> Euro / Tag</label>
|
||||
<label v-else> Euro Gesamt</label>
|
||||
</td>
|
||||
<td>
|
||||
<input v-if="!props.event.solidarityPayment" type="text" v-model="formData.pft_1_description" style="width: 300px;" />
|
||||
<label v-else></label>
|
||||
<ErrorText :message="errors.pft_1_description" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="height: 65px; vertical-align: top;">
|
||||
<td>
|
||||
<input id="use_pft_2" type="checkbox" v-model="formData.pft_2_active" :checked="formData.pft_2_active" />
|
||||
</td>
|
||||
<td v-if="props.event.solidarityPayment">
|
||||
<label for="use_pft_2" style="cursor: default">
|
||||
Solidaritätsbeitrag
|
||||
</label>
|
||||
</td>
|
||||
<td v-else>
|
||||
<label for="use_pft_2" style="cursor: default">
|
||||
Kernteam
|
||||
</label>
|
||||
</td>
|
||||
<td v-if="formData.pft_2_active">
|
||||
<AmountInput v-model="formData.pft_2_amount" class="width-small" @blur="recalculateMaxAmount(formData.pft_2_amount)" />
|
||||
<label v-if="props.event.payPerDay"> Euro / Tag</label>
|
||||
<label v-else> Euro Gesamt</label>
|
||||
</td>
|
||||
<td v-if="formData.pft_2_active">
|
||||
<input v-if="!props.event.solidarityPayment" type="text" v-model="formData.pft_2_description" style="width: 300px;" />
|
||||
<label v-else></label>
|
||||
<ErrorText :message="errors.pft_2_description" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="height: 65px; vertical-align: top;">
|
||||
<td>
|
||||
<input id="use_pft_3" type="checkbox" v-model="formData.pft_3_active" :checked="formData.pft_3_active" />
|
||||
</td>
|
||||
<td v-if="props.event.solidarityPayment">
|
||||
<label for="use_pft_3" style="cursor: default">
|
||||
Reduzierter Beitrag
|
||||
</label>
|
||||
</td>
|
||||
<td v-else>
|
||||
<label for="use_pft_3" style="cursor: default">
|
||||
Unterstützende
|
||||
</label>
|
||||
</td>
|
||||
<td v-if="formData.pft_3_active">
|
||||
<AmountInput v-model="formData.pft_3_amount" class="width-small" @blur="recalculateMaxAmount(formData.pft_3_amount)" />
|
||||
<label v-if="props.event.payPerDay"> Euro / Tag</label>
|
||||
<label v-else> Euro Gesamt</label>
|
||||
</td>
|
||||
<td v-if="formData.pft_3_active">
|
||||
<input v-if="!props.event.solidarityPayment" type="text" v-model="formData.pft_3_description" style="width: 300px;" />
|
||||
<label v-else>Nach Verfügbarkeit</label>
|
||||
<ErrorText :message="errors.pft_3_description" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="height: 65px; vertical-align: top;" v-if="!props.event.solidarityPayment">
|
||||
<td>
|
||||
<input id="use_pft_4" type="checkbox" v-model="formData.pft_4_active" :checked="formData.pft_4_active" />
|
||||
</td>
|
||||
<td>
|
||||
<label for="use_pft_4" style="cursor: default">
|
||||
Sonstige
|
||||
</label>
|
||||
</td>
|
||||
<td v-if="formData.pft_4_active">
|
||||
<AmountInput v-model="formData.pft_4_amount" class="width-small" @blur="recalculateMaxAmount(formData.pft_4_amount)" />
|
||||
<label v-if="props.event.payPerDay"> Euro / Tag</label>
|
||||
<label v-else> Euro Gesamt</label>
|
||||
</td>
|
||||
<td v-if="formData.pft_4_active">
|
||||
<input type="text" v-model="formData.pft_4_description" style="width: 300px;" />
|
||||
<ErrorText :message="errors.pft_4_description" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
Maximaler Beitrag für Veranstaltung:
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<AmountInput v-model="formData.maxAmount" class="width-small" /> Euro Gesamt
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<input type="button" value="Speichern" @click="saveParticipationFees" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
125
app/Domains/Event/Views/Partials/ParticipationSummary.vue
Normal file
125
app/Domains/Event/Views/Partials/ParticipationSummary.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user