WiP

app/Domains/Event/Views/Partials/Overview.vue

@@ -3,7 +3,8 @@ 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 EventManagement from "./EventManagement.vue";
+    import Modal from "../../../../Views/Components/Modal.vue";
 
     const props = defineProps({
         data: Object,
@@ -14,6 +15,8 @@ import EventManagement from "./EventManagement.vue";
     });
 
     const displayData = ref('main');
+    const showEventData = ref(false);
+
 
     async function showMain() {
         const response = await fetch("/api/v1/event/details/" + props.data.event.id + '/summary');
@@ -34,12 +37,14 @@ import EventManagement from "./EventManagement.vue";
         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);
-
-        console.log(dynamicProps.event)
     });
 
 </script>
@@ -53,7 +58,7 @@ import EventManagement from "./EventManagement.vue";
 
     <div class="event-flexbox" v-else>
         <div class="event-flexbox-row top">
-            <div class="left"><ParticipationSummary :event="dynamicProps.event" /></div>
+            <div class="left"><ParticipationSummary v-if="dynamicProps.event" :event="dynamicProps.event" /></div>
             <div class="right">
                 <input type="button" value="Erste-Hilfe-Liste (PDF)" /><br/>
                 <input type="button" value="Teili-Liste (CSV)" /><br/>
@@ -70,10 +75,45 @@ import EventManagement from "./EventManagement.vue";
         <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>
@@ -96,7 +136,7 @@ import EventManagement from "./EventManagement.vue";
 }
 
 .event-flexbox-row.top .right {
-    flex: 0 0 250px; /* feste Breite von 20% */
+    flex: 0 0 250px;
     padding: 10px;
 }