114 lines
3.7 KiB
Vue
114 lines
3.7 KiB
Vue
<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>
|