Added Worship page rendering

src/components/WorshipRender.vue

@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <table v-if="worships.length" class="worships">
+            <tr v-for="worship in worships" :key="worship.id" :style="worship.eventPlace && worship.eventPlace.backgroundColor ? `background-color:${worship.eventPlace.backgroundColor}` : ''">
+                <td>
+                    <div>{{ formatDate(worship.date) }}</div>
+                    <div>{{ worship.dayName }}</div>
+                </td>
+                <td>
+                    <div v-if="worship.neighborInvitation" class="neighborhood-invitation">Einladung zum Gottesdienst im Nachbarschaftsraum:</div>
+                    <h3>
+                        <span :class="worship.highlightTime ? 'highlight-time' : ''">{{ formatTime(worship.time) }}</span>&nbsp;-&nbsp;
+                        {{ !worship.neighborInvitation ? worship.title : '' }}
+                    </h3>
+                    <div v-if="worship.organizer">Gestaltung: {{ worship.organizer }}</div>
+                    <div v-if="worship.collection">Kollekte: {{ worship.collection }}</div>
+                    <div v-if="worship.eventPlace.id && worship.eventPlace.id">
+                        Adresse: {{ worship.eventPlace.name }}, {{ worship.eventPlace.street }}, {{ worship.eventPlace.city }}
+                    </div>
+                    <div v-if="worship.selfInformation" class="selfinformation">Bitte informieren Sie sich auch auf den Internetseiten dieser Gemeinde!</div>
+                </td>
+            </tr>
+        </table>
+        <p v-else>Keine Gottesdienste verfügbar.</p>
+    </div>
+</template>
+
+<script>
+import axios from '@/axios';
+import { formatTime, formatDate } from '@/utils/strings';
+
+export default {
+    name: 'WorshipRender',
+    props: {
+        location: {
+            type: Number,
+            required: true
+        },
+        orderBy: {
+            type: String,
+            default: 'date ASC'
+        }
+    },
+    data() {
+        return {
+            worships: []
+        };
+    },
+    async created() {
+        await this.fetchWorships();
+    },
+    methods: {
+        formatTime,
+        formatDate,
+        async fetchWorships() {
+            try {
+                const response = await axios.get('/worships/filtered', {
+                    params: {
+                        location: this.location,
+                        orderBy: this.orderBy
+                    }
+                });
+                this.worships = response.data;
+            } catch (error) {
+                console.error('Fehler beim Abrufen der Gottesdienste:', error);
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+table.worships {
+    border-collapse: collapse;
+    width: 100%;
+}
+table.worships td {
+    border: 1px solid #000;
+    text-align: center;
+}
+h3 {
+    margin: 0;
+}
+table.worships td div{
+    margin: 5px;
+}
+.highlight-time {
+    text-decoration: underline;
+}
+.neighborhood-invitation {
+    font-weight: bold;
+    color: #0020e0;
+}
+</style>