mareike/app/Domains/Event/Views/Partials/Overview.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";
    import Modal from "../../../../Views/Components/Modal.vue";

    const props = defineProps({
        data: Object,
    })

    const dynamicProps = reactive({
        event : null,
    });

    const displayData = ref('main');
    const showEventData = ref(false);


    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';
    }

    async function eventData() {
        showEventData.value = true;
    }

    onMounted(async () => {
        const response = await fetch("/api/v1/event/details/" + props.data.event.id + '/summary');
        const data = await response.json();
        Object.assign(dynamicProps, data);
    });

</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 v-if="dynamicProps.event" :event="dynamicProps.event" /></div>
            <div class="right">
                <a :href="'/event/details/' + props.data.event.identifier + '/pdf/first-aid-list'">
                    <input type="button" value="Erste-Hilfe-Liste (PDF)" />
                </a><br/>

                <a :href="'/event/details/' + props.data.event.identifier + '/csv/participant-list'">
                    <input type="button" value="Teili-Liste (CSV)" />
                </a><br/>

                <a :href="'/event/details/' + props.data.event.identifier + '/pdf/kitchen-list'">
                    <input type="button" value="Küchenübersicht (PDF)" />
                </a><br/>

                <a :href="'/event/details/' + props.data.event.identifier + '/pdf/amount-list'">
                    <input type="button" value="Beitragsliste (PDF)" />
                </a><br/>

                <a :href="'/event/details/' + props.data.event.identifier + '/pdf/drinking-list'">
                    <input type="button" value="Getränkeliste (PDF)" />
                </a><br/>

                <a :href="'/event/details/' + props.data.event.identifier + '/pdf/photo-permission-list'">
                    <input type="button" value="Foto-Erlaubnis (PDF)" />
                </a><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> &nbsp;
            <label style="font-size: 9pt;" class="link" @click="showEventManagement">Veranstaltungsleitung</label> &nbsp;
            <label style="font-size: 9pt;" class="link" @click="eventData()">Details für Einladung</label> &nbsp;
            <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>

    <Modal title="Veranstaltungsdetails" v-if="showEventData" :show="showEventData" @close="showEventData = false">

        <table>
            <tr>
                <th>Beginn</th>
                <td>{{ dynamicProps.event.eventBegin }}</td>
            </tr>

            <tr>
                <th>Ende</th>
                <td>{{ dynamicProps.event.eventEnd }}</td>
            </tr>

            <tr>
                <th>Anmeldeschluss</th>
                <td>{{dynamicProps.event.earlyBirdEnd.formatted}}</td>
            </tr>

            <tr>
                <th>Nachmeldeschluss</th>
                <td>{{dynamicProps.event.registrationFinalEnd.formatted}}</td>
            </tr>

            <tr>
                <th>Anmelde-URL</th>
                <td>
                    {{dynamicProps.event.url}}<br />
                    <img :src="'/print-event-code/' + dynamicProps.event.identifier" alt="Event Code" style="width: 150px; height: 150px; margin-top: 20px;" />
                </td>
            </tr>
        </table>
    </Modal>

</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;
    padding: 10px;
}

.event-flexbox-row.bottom {

    padding: 10px;
}

.event-flexbox-row.top .right input[type="button"] {
    width: 100% !important;
    margin-bottom: 10px;
}

</style>