Events renderable

src/components/EventRender.vue

@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <table v-if="events.length > 1" class="event-table">
+            <tr v-for="event in events" :key="event.id">
+                <td>
+                    <div v-if="shouldDisplay('name')" class="event-name">{{ event.name }}</div>
+                    <div>{{ formatDateOrDay(event.date, event.dayOfWeek) }}</div>
+                    <div v-if="shouldDisplay('time')">{{ event.time }} <span v-if="event.endTime"> - {{ event.endTime }}</span> Uhr</div>
+                    <div v-if="shouldDisplay('place')">{{ event.eventPlace?.name }}</div>
+                    <div v-if="shouldDisplay('description')" class="description">{{ event.description }}</div>
+                    <div v-if="shouldDisplay('contactPerson')">{{ event.contactPersons.map(cp => cp.name).join(', ') }}</div>
+                    <div v-if="shouldDisplay('institution')">{{ event.institution?.name }}</div>
+                    <div v-if="shouldDisplay('type')">{{ event.eventType?.caption }}</div>
+                </td>
+            </tr>
+        </table>
+        <div v-else-if="events.length === 1" :class="events[0].alsoOnHomepage && config.id === 'home' ? 'homepage' : ''">
+            <div v-if="shouldDisplay('name')" class="event-name">{{ events[0].name }}</div>
+            <div>{{ formatDateOrDay(events[0].date, events[0].dayOfWeek) }}</div>
+            <div v-if="shouldDisplay('time')">{{ events[0].time }} <span v-if="events[0].endTime"> - {{ events[0].endTime }}</span> Uhr</div>
+            <div v-if="shouldDisplay('place')">{{ events[0].eventPlace?.name }}</div>
+            <div v-if="shouldDisplay('description')" class="description">{{ events[0].description }}</div>
+            <div v-if="shouldDisplay('contactPerson')">{{ events[0].contactPersons.map(cp => cp.name).join(', ') }}</div>
+            <div v-if="shouldDisplay('institution')">{{ events[0].institution?.name }}</div>
+            <div v-if="shouldDisplay('type')">{{ events[0].eventType?.caption }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from '@/axios';
+import { format } from 'date-fns'; // Importiere date-fns für die Datumsformatierung
+
+export default {
+    name: 'EventRender',
+    props: {
+        config: {
+            type: Object,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            events: [],
+        };
+    },
+    async created() {
+        await this.fetchEvents();
+    },
+    methods: {
+        async fetchEvents() {
+            try {
+                const response = await axios.get('/events/filter', {
+                    params: this.config
+                });
+                console.log('Fetched events:', response.data.events);
+                this.events = response.data.events;
+            } catch (error) {
+                console.error('Fehler beim Abrufen der Events', error);
+            }
+        },
+        shouldDisplay(field) {
+            const displayFields = this.config.display.split('|');
+            return displayFields.includes(field);
+        },
+        formatDateOrDay(date, dayOfWeek) {
+            if (date) {
+                return format(new Date(date), 'dd.MM.yyyy');
+            } else if (dayOfWeek !== null && dayOfWeek !== undefined) {
+                const daysOfWeek = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
+                return daysOfWeek[dayOfWeek];
+            }
+            return '';
+        }
+    }
+};
+</script>
+
+<style scoped>
+.event-name {
+    font-weight: bold;
+}
+.event-table {
+    border-collapse: collapse;
+}
+.event-table td {
+    border: 1px solid black;
+}
+.homepage {
+    border: 1px solid #9400ff;
+    padding: 0.5em;
+    text-align: center;
+}
+.description {
+    padding: 0.5em 0;
+}
+</style>