Multiple changes

src/components/ContentComponent.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <h1>{{ title }}</h1>
+        <div v-html="renderedContent"></div>
+    </div>
+</template>
+
+<script>
+import axios from '@/axios';
+import { mapState, mapGetters } from 'vuex';
+import { render } from '@/utils/render';
+
+export default {
+    name: 'ContentComponent',
+    props: {
+        link: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            content: '',
+            title: '',
+        };
+    },
+    computed: {
+        ...mapState(['menuData']),
+        ...mapGetters(['getMenuData']),
+        renderedContent() {
+            return render(this.content);
+        }
+    },
+    watch: {
+        link: {
+            immediate: true,
+            handler(newLink) {
+                this.fetchContent(newLink);
+                this.setTitle(newLink);
+            },
+        },
+    },
+    methods: {
+        async fetchContent(link) {
+            try {
+                const response = await axios.get(`/page-content?link=${link}`);
+                this.content = response.data.content;
+            } catch (error) {
+                console.error('Fehler beim Abrufen des Inhalts:', error);
+            }
+        },
+        setTitle(link) {
+            const findTitle = (menuItems, link) => {
+                for (const item of menuItems) {
+                    if (item.link === link) {
+                        return item.pageTitle || item.name;
+                    }
+                    if (item.submenu && item.submenu.length > 0) {
+                        const found = findTitle(item.submenu, link);
+                        if (found) {
+                            return `${found}`;
+                        }
+                    }
+                }
+                return '';
+            };
+            this.title = findTitle(this.menuData, link);
+        },
+    },
+};
+</script>
+
+<style scoped></style>

src/components/WorshipDialog.vue

@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <div v-if="isOpen" class="dialog-overlay">
+            <div class="dialog-content">
+                <h3>Gottesdienst-Konfiguration</h3>
+                <div>
+                    <label for="location-select">Bitte wählen Sie den Ort für den Gottestdienst aus:</label>
+                </div>
+                <div>
+                    <select id="location-select" v-model="selectedLocation">
+                        <option :value="-1">Alle Orte</option>
+                        <option v-for="location in locations" :key="location.id" :value="location.id">
+                            {{ location.name }}
+                        </option>
+                    </select>
+                </div>
+                <div>
+                    <button @click="confirmWorshipConfiguration">Bestätigen</button>
+                    <button @click="closeWorshipDialog">Schließen</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import axios from '@/axios';
+
+export default {
+    name: 'WorshipDialog',
+    emits: ['confirm'],
+    setup(props, { emit }) {
+        const isOpen = ref(false);
+        const locations = ref([]);
+        const selectedLocation = ref(-1);
+
+        const openWorshipDialog = () => {
+            isOpen.value = true;
+            fetchLocations();
+        };
+
+        const closeWorshipDialog = () => {
+            isOpen.value = false;
+        };
+
+        const fetchLocations = async () => {
+            try {
+                const response = await axios.get('/event-places');
+                locations.value = response.data;
+            } catch (error) {
+                console.error('Fehler beim Laden der Orte:', error);
+            }
+        };
+
+        const confirmWorshipConfiguration = () => {
+            emit('confirm', selectedLocation.value);
+            closeWorshipDialog();
+        };
+
+        return {
+            isOpen,
+            locations,
+            selectedLocation,
+            openWorshipDialog,
+            closeWorshipDialog,
+            confirmWorshipConfiguration,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.dialog-content {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+}
+</style>