Added Worship page rendering

src/components/ContentComponent.vue

@@ -1,73 +1,74 @@
 <template>
     <div>
-        <h1>{{ title }}</h1>
-        <div v-html="renderedContent"></div>
+      <h1>{{ title }}</h1>
+      <RenderContentComponent :content="content" />
     </div>
-</template>
-
-<script>
-import axios from '@/axios';
-import { mapState, mapGetters } from 'vuex';
-import { render } from '@/utils/render';
-
-export default {
+  </template>
+  
+  <script>
+  import axios from '@/axios';
+  import { mapState, mapGetters } from 'vuex';
+  import RenderContentComponent from '@/components/RenderContentComponent.vue';
+  
+  export default {
     name: 'ContentComponent',
+    components: {
+      RenderContentComponent
+    },
     props: {
-        link: {
-            type: String,
-            required: true,
-        },
+      link: {
+        type: String,
+        required: true,
+      },
     },
     data() {
-        return {
-            content: '',
-            title: '',
-        };
+      return {
+        content: '',
+        title: '',
+      };
     },
     computed: {
-        ...mapState(['menuData']),
-        ...mapGetters(['getMenuData']),
-        renderedContent() {
-            return render(this.content);
-        }
+      ...mapState(['menuData']),
+      ...mapGetters(['getMenuData']),
     },
     watch: {
-        link: {
-            immediate: true,
-            handler(newLink) {
-                this.fetchContent(newLink);
-                this.setTitle(newLink);
-            },
+      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);
+      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;
             }
-        },
-        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);
-        },
+            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>
+  };
+  </script>
+  
+  <style scoped></style>
+  

src/components/RenderContentComponent.vue

@@ -0,0 +1,74 @@
+<template>
+    <div>
+      <component :is="dynamicComponent" v-bind="componentProps"></component>
+    </div>
+  </template>
+  
+  <script>
+  import { createApp, h } from 'vue';
+  import WorshipRender from './WorshipRender.vue';
+  
+  export default {
+    name: 'RenderContentComponent',
+    props: {
+      content: {
+        type: String,
+        required: true
+      }
+    },
+    data() {
+      return {
+        dynamicComponent: null,
+        componentProps: {}
+      };
+    },
+    watch: {
+      content: {
+        immediate: true,
+        handler(newContent) {
+          this.renderContent(newContent);
+        }
+      }
+    },
+    methods: {
+      renderContent(content) {
+        const worshipsPattern = /{{ worshipslist:(.*?) }}/g;
+        content.replace(worshipsPattern, (match, config) => {
+          const props = this.parseConfig(config);
+          this.dynamicComponent = WorshipRender;
+          this.componentProps = props;
+          return '<div id="worship-render-placeholder"></div>';
+        });
+        this.$nextTick(() => {
+          if (this.dynamicComponent) {
+            const placeholder = document.getElementById('worship-render-placeholder');
+            if (placeholder) {
+              const app = createApp({
+                render() {
+                  return h(this.dynamicComponent, this.componentProps);
+                }
+              });
+              app.mount(placeholder);
+            }
+          }
+        });
+      },
+      parseConfig(configString) {
+        const config = {};
+        const configArray = configString.split(',');
+        configArray.forEach(item => {
+          const [key, value] = item.split('=');
+          if (key && value !== undefined) {
+            config[key.trim()] = isNaN(value) ? value.trim() : Number(value);
+          }
+        });
+        return config;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  /* Add styles if needed */
+  </style>
+  

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>