From 48a54ecdbb11c00cf730985b847e0840c5ad1353 Mon Sep 17 00:00:00 2001
From: Torsten Schulz <tsschulz@gmx.net>
Date: Mon, 17 Jun 2024 13:36:15 +0200
Subject: [PATCH] Added Worship page rendering

---
 controllers/worshipController.js              |  32 +-
 .../20240617095455-add-day-name-to-worship.js |  16 +
 models/MenuItem.js                            |   2 +-
 models/Worship.js                             |   5 +
 package-lock.json                             |  10 +
 package.json                                  |   1 +
 routes/worships.js                            |   5 +-
 src/components/ContentComponent.vue           | 115 ++--
 src/components/RenderContentComponent.vue     |  74 +++
 src/components/WorshipRender.vue              |  94 +++
 src/content/admin/AdminMenuManagement.vue     | 207 -------
 src/content/admin/EditPagesComponent.vue      |  16 +-
 src/content/admin/MenuManagement.vue          | 546 +++++++++---------
 src/content/admin/PagePreviewComponent.vue    |  41 +-
 src/content/admin/WorshipManagement.vue       |   3 +
 src/store/index.js                            |  18 +-
 src/utils/render.js                           |  15 -
 17 files changed, 637 insertions(+), 563 deletions(-)
 create mode 100644 migrations/20240617095455-add-day-name-to-worship.js
 create mode 100644 src/components/RenderContentComponent.vue
 create mode 100644 src/components/WorshipRender.vue
 delete mode 100644 src/content/admin/AdminMenuManagement.vue
 delete mode 100644 src/utils/render.js

diff --git a/controllers/worshipController.js b/controllers/worshipController.js
index b112c35..d11c950 100644
--- a/controllers/worshipController.js
+++ b/controllers/worshipController.js
@@ -1,4 +1,5 @@
-const { Worship } = require('../models');
+const { Worship, EventPlace } = require('../models');
+const { Op } = require('sequelize'); // Importieren Sie die Operatoren von Sequelize
 
 exports.getAllWorships = async (req, res) => {
   try {
@@ -14,6 +15,7 @@ exports.createWorship = async (req, res) => {
     const worship = await Worship.create(req.body);
     res.status(201).json(worship);
   } catch (error) {
+    console.log(error);
     res.status(500).json({ message: 'Fehler beim Erstellen des Gottesdienstes' });
   }
 };
@@ -45,3 +47,31 @@ exports.deleteWorship = async (req, res) => {
     res.status(500).json({ message: 'Fehler beim Löschen des Gottesdienstes' });
   }
 };
+
+exports.getFilteredWorships = async (req, res) => {
+  const { location, orderBy } = req.query;
+  const where = {};
+
+  if (location && location !== '-1') {
+    where.eventPlaceId = location;
+  }
+
+  where.date = {
+    [Op.gte]: new Date(), // Only include events from today onwards
+  };
+
+  try {
+    const worships = await Worship.findAll({
+      where,
+      include: {
+        model: EventPlace,
+        as: 'eventPlace',
+      },
+      order: [orderBy.split(' ')],
+    });
+    res.status(200).json(worships);
+  } catch (error) {
+    console.log(error);
+    res.status(500).json({ message: 'Fehler beim Abrufen der gefilterten Gottesdienste' });
+  }
+};
diff --git a/migrations/20240617095455-add-day-name-to-worship.js b/migrations/20240617095455-add-day-name-to-worship.js
new file mode 100644
index 0000000..3929961
--- /dev/null
+++ b/migrations/20240617095455-add-day-name-to-worship.js
@@ -0,0 +1,16 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.addColumn('worships', 'day_name', {
+      type: Sequelize.STRING,
+      allowNull: false,
+      default: ''
+    });
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.removeColumn('worships', 'day_name');
+  }
+};
diff --git a/models/MenuItem.js b/models/MenuItem.js
index 4ad1f33..cb53fbb 100644
--- a/models/MenuItem.js
+++ b/models/MenuItem.js
@@ -34,7 +34,7 @@ module.exports = (sequelize) => {
       allowNull: false,
       defaultValue: 0
     },
-    page_title: {  // Neuer Eintrag
+    page_title: {
       type: DataTypes.STRING,
       allowNull: true
     }
diff --git a/models/Worship.js b/models/Worship.js
index e387884..c5cd682 100644
--- a/models/Worship.js
+++ b/models/Worship.js
@@ -50,6 +50,11 @@ module.exports = (sequelize) => {
     introLine: {
       type: DataTypes.STRING,
       allowNull: true
+    },
+    dayName: {
+      type: DataTypes.STRING,
+      defaultValue: '',
+      allowNull: false
     }
   }, {
     tableName: 'worships',
diff --git a/package-lock.json b/package-lock.json
index 546fed4..cac17e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "core-js": "^3.8.3",
         "cors": "^2.8.5",
         "crypto": "^1.0.1",
+        "date-fns": "^3.6.0",
         "dotenv": "^16.4.5",
         "express": "^4.19.2",
         "jsonwebtoken": "^9.0.2",
@@ -5708,6 +5709,15 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
diff --git a/package.json b/package.json
index 551ae97..e5f95d5 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "core-js": "^3.8.3",
     "cors": "^2.8.5",
     "crypto": "^1.0.1",
+    "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "jsonwebtoken": "^9.0.2",
diff --git a/routes/worships.js b/routes/worships.js
index e39ea8f..b53dc6d 100644
--- a/routes/worships.js
+++ b/routes/worships.js
@@ -1,11 +1,12 @@
 const express = require('express');
 const router = express.Router();
-const { getAllWorships, createWorship, updateWorship, deleteWorship } = require('../controllers/worshipController');
+const { getAllWorships, createWorship, updateWorship, deleteWorship, getFilteredWorships } = require('../controllers/worshipController');
 const authMiddleware = require('../middleware/authMiddleware');
 
-router.get('/', authMiddleware, getAllWorships);
+router.get('/', getAllWorships);
 router.post('/', authMiddleware, createWorship);
 router.put('/:id', authMiddleware, updateWorship);
 router.delete('/:id', authMiddleware, deleteWorship);
+router.get('/filtered', getFilteredWorships);
 
 module.exports = router;
diff --git a/src/components/ContentComponent.vue b/src/components/ContentComponent.vue
index e3ea700..6f45833 100644
--- a/src/components/ContentComponent.vue
+++ b/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>
+  
\ No newline at end of file
diff --git a/src/components/RenderContentComponent.vue b/src/components/RenderContentComponent.vue
new file mode 100644
index 0000000..3124042
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/src/components/WorshipRender.vue b/src/components/WorshipRender.vue
new file mode 100644
index 0000000..3cd8708
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/content/admin/AdminMenuManagement.vue b/src/content/admin/AdminMenuManagement.vue
deleted file mode 100644
index 49ea0f5..0000000
--- a/src/content/admin/AdminMenuManagement.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<template>
-    <div class="admin-menu-management">
-      <h2>Menüverwaltung</h2>
-      <div>
-        <h3>Neuen Menüpunkt hinzufügen</h3>
-        <form @submit.prevent="addMenuItem">
-          <label for="name">Name:</label>
-          <input type="text" v-model="newItem.name" required />
-  
-          <label for="link">Link:</label>
-          <input type="text" v-model="newItem.link" required />
-  
-          <label for="component">Component:</label>
-          <input type="text" v-model="newItem.component" required />
-  
-          <label for="showInMenu">Im Menü anzeigen:</label>
-          <input type="checkbox" v-model="newItem.showInMenu" />
-  
-          <label for="requiresAuth">Authentifizierung erforderlich:</label>
-          <input type="checkbox" v-model="newItem.requiresAuth" />
-  
-          <label for="image">Bild:</label>
-          <input type="text" v-model="newItem.image" />
-  
-          <label for="parentId">Eltern-Menüpunkt:</label>
-          <select v-model="newItem.parentId">
-            <option :value="null">Kein Eltern-Menüpunkt</option>
-            <option v-for="item in menuItems" :key="item.id" :value="item.id">
-              {{ item.name }}
-            </option>
-          </select>
-  
-          <button type="submit">Hinzufügen</button>
-        </form>
-      </div>
-  
-      <div>
-        <h3>Menüpunkte bearbeiten</h3>
-        <ul>
-          <li v-for="item in menuItems" :key="item.id">
-            {{ item.name }}
-            <button @click="editMenuItem(item)">Bearbeiten</button>
-            <button @click="deleteMenuItem(item.id)">Löschen</button>
-          </li>
-        </ul>
-      </div>
-  
-      <div v-if="editingItem">
-        <h3>Menüpunkt bearbeiten</h3>
-        <form @submit.prevent="updateMenuItem">
-          <label for="editName">Name:</label>
-          <input type="text" v-model="editingItem.name" required />
-  
-          <label for="editLink">Link:</label>
-          <input type="text" v-model="editingItem.link" required />
-  
-          <label for="editComponent">Component:</label>
-          <input type="text" v-model="editingItem.component" required />
-  
-          <label for="editShowInMenu">Im Menü anzeigen:</label>
-          <input type="checkbox" v-model="editingItem.showInMenu" />
-  
-          <label for="editRequiresAuth">Authentifizierung erforderlich:</label>
-          <input type="checkbox" v-model="editingItem.requiresAuth" />
-  
-          <label for="editImage">Bild:</label>
-          <input type="text" v-model="editingItem.image" />
-  
-          <label for="editParentId">Eltern-Menüpunkt:</label>
-          <select v-model="editingItem.parentId">
-            <option :value="null">Kein Eltern-Menüpunkt</option>
-            <option v-for="item in menuItems" :key="item.id" :value="item.id">
-              {{ item.name }}
-            </option>
-          </select>
-  
-          <button type="submit">Aktualisieren</button>
-          <button @click="cancelEdit">Abbrechen</button>
-        </form>
-      </div>
-    </div>
-  </template>
-<script>
-import { mapState, mapActions } from 'vuex';
-
-export default {
-  name: 'AdminMenuManagement',
-  data() {
-    return {
-      newItem: {
-        name: '',
-        link: '',
-        component: '',
-        showInMenu: false,
-        requiresAuth: false,
-        image: '',
-        parentId: null
-      },
-      editingItem: null
-    };
-  },
-  computed: {
-    ...mapState(['menuData']),
-    menuItems() {
-      return this.menuData;
-    }
-  },
-  methods: {
-    ...mapActions(['loadMenuData']),
-    async addMenuItem() {
-      this.menuData.push(this.newItem);
-      await this.saveMenuData();
-      this.resetNewItem();
-    },
-    editMenuItem(item) {
-      this.editingItem = { ...item };
-    },
-    async updateMenuItem() {
-      const index = this.menuData.findIndex(item => item.id === this.editingItem.id);
-      if (index !== -1) {
-        this.menuData.splice(index, 1, this.editingItem);
-        await this.saveMenuData();
-        this.cancelEdit();
-      }
-    },
-    async deleteMenuItem(id) {
-      this.menuData = this.menuData.filter(item => item.id !== id);
-      await this.saveMenuData();
-    },
-    cancelEdit() {
-      this.editingItem = null;
-    },
-    resetNewItem() {
-      this.newItem = {
-        name: '',
-        link: '',
-        component: '',
-        showInMenu: false,
-        requiresAuth: false,
-        image: '',
-        parentId: null
-      };
-    },
-    async saveMenuData() {
-      try {
-        await fetch('/menu-data', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(this.menuData)
-        });
-        await this.loadMenuData();
-      } catch (error) {
-        console.error('Fehler beim Speichern der Menü-Daten:', error);
-      }
-    }
-  },
-  created() {
-    this.loadMenuData();
-  }
-};
-</script>
-<style scoped>
-.admin-menu-management {
-  padding: 20px;
-}
-
-form {
-  margin-bottom: 20px;
-}
-
-form label {
-  display: block;
-  margin-top: 10px;
-}
-
-form input,
-form select {
-  width: 100%;
-  padding: 5px;
-  margin-top: 5px;
-}
-
-button {
-  margin-top: 10px;
-  padding: 5px 10px;
-  cursor: pointer;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  margin: 10px 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-li button {
-  margin-left: 10px;
-}
-</style>
-  
\ No newline at end of file
diff --git a/src/content/admin/EditPagesComponent.vue b/src/content/admin/EditPagesComponent.vue
index b7e3b2d..fe2f0c3 100644
--- a/src/content/admin/EditPagesComponent.vue
+++ b/src/content/admin/EditPagesComponent.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import axios from '../../axios';
 import { EditorContent, useEditor } from '@tiptap/vue-3';
@@ -97,7 +97,7 @@ export default {
       ],
       content: '',
       onUpdate: ({ editor }) => {
-        store.commit('UPDATE_PAGE_CONTENT', editor.getHTML());
+        store.commit('SET_PAGE_CONTENT', editor.getHTML());
       },
     });
 
@@ -118,6 +118,7 @@ export default {
         const allPages = [];
         flattenPages(data, allPages);
         pages.value = allPages.sort((a, b) => a.name.localeCompare(b.name));
+        store.commit('setMenuData', data);
       } catch (error) {
         console.error('Fehler beim Abrufen der Seiten:', error);
       }
@@ -127,7 +128,6 @@ export default {
       try {
         await store.dispatch('loadPageContent', selectedPage.value);
         const content = store.getters.pageContent;
-
         const setEditorContent = () => {
           if (editor.value && editor.value.commands) {
             editor.value.commands.setContent(content, false);
@@ -135,7 +135,6 @@ export default {
             setTimeout(setEditorContent, 100);
           }
         };
-
         setEditorContent();
       } catch (error) {
         console.error('Fehler beim Laden des Seiteninhalts:', error);
@@ -167,6 +166,15 @@ export default {
       return pages.value;
     });
 
+    watch(selectedPage, (newPage) => {
+      store.dispatch('setSelectedPage', newPage);
+      const page = pages.value.find(page => page.link === newPage);
+      if (page) {
+        store.dispatch('setPageTitle', page.name);
+      }
+      loadPageContent();
+    });
+
     const openWorshipDialog = () => {
       worshipDialog.value.openWorshipDialog();
     };
diff --git a/src/content/admin/MenuManagement.vue b/src/content/admin/MenuManagement.vue
index 5e76036..d800e3a 100644
--- a/src/content/admin/MenuManagement.vue
+++ b/src/content/admin/MenuManagement.vue
@@ -1,272 +1,280 @@
 <template>
-    <div class="menu-management">
-      <h1>Menüverwaltung</h1>
-      <div class="button-container">
-        <button @click="addMenuItem">Hauptmenü hinzufügen</button>
-        <button @click="saveMenuData">Speichern</button>
-      </div>
-      <div v-if="selectedMenuItem" class="edit-form">
-        <h2>Menüpunkt bearbeiten</h2>
-        <form @submit.prevent="saveMenuData">
-          <label for="name">Name</label>
-          <input id="name" v-model="selectedMenuItem.name" placeholder="Name" />
-  
-          <label for="link">Link</label>
-          <input id="link" v-model="selectedMenuItem.link" placeholder="Link" />
-  
-          <label for="order-id">Order ID</label>
-          <input id="order-id" v-model.number="selectedMenuItem.orderId" placeholder="Order ID" type="number" class="order-id" />
-  
-          <div class="checkbox-container">
-            <label>
-              <input type="checkbox" v-model="selectedMenuItem.showInMenu" />
-              Im Menü anzeigen
-            </label>
-            <label>
-              <input type="checkbox" v-model="selectedMenuItem.requiresAuth" />
-              Authentifizierung erforderlich
-            </label>
-          </div>
-  
-          <label for="parent-id">Elternelement</label>
-          <select id="parent-id" v-model="selectedMenuItem.parent_id">
-            <option value="">Ohne Elternelement</option>
-            <option v-for="item in flattenedMenuData" :key="item.id" :value="item.id">
-              <span v-html="getIndentedName(item)"></span>
-            </option>
-          </select>
-        </form>
-      </div>
-      <div class="tree-view">
-        <ul>
-          <li v-for="menuItem in sortedMenuData" :key="menuItem.id">
-            <div class="menu-item">
-              <span @click="selectMenuItem(menuItem)">
-                {{ menuItem.name }} (ID: {{ menuItem.orderId }})
-              </span>
-              <div class="action-buttons">
-                <button @click="addSubmenu(menuItem)" class="action-button">Untermenü hinzufügen</button>
-                <button @click="removeMenuItem(menuItem)" class="action-button">Löschen</button>
-              </div>
-            </div>
-            <ul v-if="menuItem.submenu.length">
-              <li v-for="submenuItem in sortedSubmenu(menuItem)" :key="submenuItem.id">
-                <div class="menu-item">
-                  <span @click="selectMenuItem(submenuItem)">
-                    {{ submenuItem.name }} (ID: {{ submenuItem.orderId }})
-                  </span>
-                  <div class="action-buttons">
-                    <button @click="addSubmenu(menuItem)" class="action-button">Untermenü hinzufügen</button>
-                    <button @click="removeSubmenu(menuItem, submenuItem)" class="action-button">Löschen</button>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </div>
+  <div class="menu-management">
+    <h1>Menüverwaltung</h1>
+    <div class="button-container">
+      <button @click="addMenuItem">Hauptmenü hinzufügen</button>
+      <button @click="saveMenuData">Speichern</button>
     </div>
-  </template>
-    
-    <script>
-    import { ref, onMounted, computed } from 'vue';
-    import axios from '../../axios';
-    
-    export default {
-      name: 'MenuManagement',
-      setup() {
-        const menuData = ref([]);
-        const selectedMenuItem = ref(null);
-    
-        const fetchMenuData = async () => {
-          try {
-            const response = await axios.get('/menu-data');
-            menuData.value = response.data;
-          } catch (error) {
-            console.error('Fehler beim Abrufen der Menü-Daten:', error);
-          }
-        };
-    
-        const saveMenuData = async () => {
-          try {
-            const flatMenuData = flattenMenuData(menuData.value);
-            await axios.post('/menu-data', flatMenuData);
-            alert('Menü-Daten erfolgreich gespeichert');
-          } catch (error) {
-            console.error('Fehler beim Speichern der Menü-Daten:', error);
-          }
-        };
-    
-        const flattenMenuData = (data, parentId = null) => {
-          return data.reduce((acc, item) => {
-            const newItem = { ...item, parent_id: parentId };
-            const { submenu, ...rest } = newItem;
-            acc.push(rest);
-            if (submenu && submenu.length) {
-              acc.push(...flattenMenuData(submenu, newItem.id));
-            }
-            return acc;
-          }, []);
-        };
-    
-        const addMenuItem = () => {
-          const newItem = {
-            name: '',
-            link: '',
-            component: '',
-            showInMenu: true,
-            requiresAuth: false,
-            orderId: 0,
-            submenu: [],
-            parent_id: null,
-          };
-          menuData.value.push(newItem);
-          selectMenuItem(newItem);
-        };
-    
-        const addSubmenu = (menuItem) => {
-          const newSubItem = {
-            name: '',
-            link: '',
-            component: '',
-            showInMenu: true,
-            requiresAuth: false,
-            orderId: 0,
-            parent_id: menuItem.id,
-          };
-          menuItem.submenu.push(newSubItem);
-          selectMenuItem(newSubItem);
-        };
-    
-        const removeMenuItem = (menuItem) => {
-          const index = menuData.value.indexOf(menuItem);
-          if (index > -1) {
-            menuData.value.splice(index, 1);
-          }
-          selectedMenuItem.value = null;
-        };
-    
-        const removeSubmenu = (menuItem, submenuItem) => {
-          const index = menuItem.submenu.indexOf(submenuItem);
-          if (index > -1) {
-            menuItem.submenu.splice(index, 1);
-          }
-          selectedMenuItem.value = null;
-        };
-    
-        const selectMenuItem = (menuItem) => {
-          selectedMenuItem.value = menuItem;
-        };
-    
-        const sortedMenuData = computed(() => {
-          return [...menuData.value].sort((a, b) => a.orderId - b.orderId);
-        });
-    
-        const sortedSubmenu = (menuItem) => {
-          return menuItem.submenu.slice().sort((a, b) => a.orderId - b.orderId);
-        };
-    
-        const getIndentedName = (item) => {
-          return '&nbsp;'.repeat(item.indent * 2) + item.name;
-        };
-    
-        onMounted(fetchMenuData);
-    
-        return {
-          menuData,
-          sortedMenuData,
-          sortedSubmenu,
-          selectedMenuItem,
-          fetchMenuData,
-          saveMenuData,
-          addMenuItem,
-          addSubmenu,
-          removeMenuItem,
-          removeSubmenu,
-          selectMenuItem,
-          getIndentedName,
-        };
-      },
+    <div v-if="selectedMenuItem" class="edit-form">
+      <h2>Menüpunkt bearbeiten</h2>
+      <form @submit.prevent="saveMenuData">
+        <label for="name">Name</label>
+        <input id="name" v-model="selectedMenuItem.name" placeholder="Name" />
+
+        <label for="link">Link</label>
+        <input id="link" v-model="selectedMenuItem.link" placeholder="Link" />
+
+        <label for="page-title">Seitenname</label>
+        <input id="page-title" v-model="selectedMenuItem.pageTitle" placeholder="Seitenname" />
+
+        <label for="order-id">Order ID</label>
+        <input id="order-id" v-model.number="selectedMenuItem.orderId" placeholder="Order ID" type="number"
+          class="order-id" />
+
+        <div class="checkbox-container">
+          <label>
+            <input type="checkbox" v-model="selectedMenuItem.showInMenu" />
+            Im Menü anzeigen
+          </label>
+          <label>
+            <input type="checkbox" v-model="selectedMenuItem.requiresAuth" />
+            Authentifizierung erforderlich
+          </label>
+        </div>
+
+        <label for="parent-id">Elternelement</label>
+        <select id="parent-id" v-model="selectedMenuItem.parent_id">
+          <option value="">Ohne Elternelement</option>
+          <option v-for="item in flattenedMenuData" :key="item.id" :value="item.id">
+            <span v-html="getIndentedName(item)"></span>
+          </option>
+        </select>
+
+        <label for="component">Vue-Komponente</label>
+        <input id="component" v-model="selectedMenuItem.component" placeholder="Vue-Komponente" />
+      </form>
+    </div>
+    <div class="tree-view">
+      <ul>
+        <li v-for="menuItem in sortedMenuData" :key="menuItem.id">
+          <div class="menu-item">
+            <span @click="selectMenuItem(menuItem)">
+              {{ menuItem.name }} (ID: {{ menuItem.orderId }})
+            </span>
+            <div class="action-buttons">
+              <button @click="addSubmenu(menuItem)" class="action-button">Untermenü hinzufügen</button>
+              <button @click="removeMenuItem(menuItem)" class="action-button">Löschen</button>
+            </div>
+          </div>
+          <ul v-if="menuItem.submenu.length">
+            <li v-for="submenuItem in sortedSubmenu(menuItem)" :key="submenuItem.id">
+              <div class="menu-item">
+                <span @click="selectMenuItem(submenuItem)">
+                  {{ submenuItem.name }} (ID: {{ submenuItem.orderId }})
+                </span>
+                <div class="action-buttons">
+                  <button @click="addSubmenu(menuItem)" class="action-button">Untermenü hinzufügen</button>
+                  <button @click="removeSubmenu(menuItem, submenuItem)" class="action-button">Löschen</button>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from 'vue';
+import axios from '../../axios';
+
+export default {
+  name: 'MenuManagement',
+  setup() {
+    const menuData = ref([]);
+    const selectedMenuItem = ref(null);
+
+    const fetchMenuData = async () => {
+      try {
+        const response = await axios.get('/menu-data');
+        menuData.value = response.data;
+      } catch (error) {
+        console.error('Fehler beim Abrufen der Menü-Daten:', error);
+      }
     };
-    </script>
-        
-  <style scoped>
-  .menu-management {
-    width: 100%;
-    margin: auto;
-  }
-  
-  .button-container {
-    display: inline-flex;
-    gap: 10px;
-    margin-bottom: 20px;
-  }
-  
-  .tree-view {
-    margin-top: 20px;
-  }
-  
-  .tree-view ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  
-  .tree-view li {
-    margin-bottom: 5px;
-    padding-left: 20px;
-  }
-  
-  .tree-view .menu-item {
-    display: inline-flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  .tree-view span {
-    cursor: pointer;
-    color: black;
-  }
-  
-  .tree-view button {
-    border: none;
-    height: 1.6em;
-    padding: 0 0.5em;
-    margin: 1px;
-    border-radius: 5px;
-  }
-  
-  .tree-view span:hover {
-    text-decoration: underline;
-  }
-  
-  .edit-form {
-    margin-top: 20px;
-  }
-  
-  .edit-form label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
-  }
-  
-  .edit-form input:not([type="checkbox"]) {
-    display: block;
-    margin-bottom: 10px;
-  }
-  
-  .edit-form .checkbox-container {
-    display: flex;
-    flex-direction: column;
-    margin-right: 10px;
-  }
-  
-  .edit-form .order-id {
-    width: 50px;
-  }
-  
-  .edit-form button {
-    margin-top: 5px;
-  }
-  </style>
-  
\ No newline at end of file
+
+    const saveMenuData = async () => {
+      try {
+        const flatMenuData = flattenMenuData(menuData.value);
+        await axios.post('/menu-data', flatMenuData);
+        alert('Menü-Daten erfolgreich gespeichert');
+      } catch (error) {
+        console.error('Fehler beim Speichern der Menü-Daten:', error);
+      }
+    };
+
+    const flattenMenuData = (data, parentId = null) => {
+      return data.reduce((acc, item) => {
+        const newItem = { ...item, parent_id: parentId, page_title: item.pageTitle };
+        const { submenu, ...rest } = newItem;
+        acc.push(rest);
+        if (submenu && submenu.length) {
+          acc.push(...flattenMenuData(submenu, newItem.id));
+        }
+        return acc;
+      }, []);
+    };
+
+    const addMenuItem = () => {
+      const newItem = {
+        name: '',
+        link: '',
+        component: '',
+        pageTitle: '',
+        showInMenu: true,
+        requiresAuth: false,
+        orderId: 0,
+        submenu: [],
+        parent_id: null,
+      };
+      menuData.value.push(newItem);
+      selectMenuItem(newItem);
+    };
+
+    const addSubmenu = (menuItem) => {
+      const newSubItem = {
+        name: '',
+        link: '',
+        component: '',
+        pageTitle: '',
+        showInMenu: true,
+        requiresAuth: false,
+        orderId: 0,
+        parent_id: menuItem.id,
+      };
+      menuItem.submenu.push(newSubItem);
+      selectMenuItem(newSubItem);
+    };
+
+    const removeMenuItem = (menuItem) => {
+      const index = menuData.value.indexOf(menuItem);
+      if (index > -1) {
+        menuData.value.splice(index, 1);
+      }
+      selectedMenuItem.value = null;
+    };
+
+    const removeSubmenu = (menuItem, submenuItem) => {
+      const index = menuItem.submenu.indexOf(submenuItem);
+      if (index > -1) {
+        menuItem.submenu.splice(index, 1);
+      }
+      selectedMenuItem.value = null;
+    };
+
+    const selectMenuItem = (menuItem) => {
+      selectedMenuItem.value = menuItem;
+    };
+
+    const sortedMenuData = computed(() => {
+      return [...menuData.value].sort((a, b) => a.orderId - b.orderId);
+    });
+
+    const sortedSubmenu = (menuItem) => {
+      return menuItem.submenu.slice().sort((a, b) => a.orderId - b.orderId);
+    };
+
+    const getIndentedName = (item) => {
+      return '&nbsp;'.repeat(item.indent * 2) + item.name;
+    };
+
+    onMounted(fetchMenuData);
+
+    return {
+      menuData,
+      sortedMenuData,
+      sortedSubmenu,
+      selectedMenuItem,
+      fetchMenuData,
+      saveMenuData,
+      addMenuItem,
+      addSubmenu,
+      removeMenuItem,
+      removeSubmenu,
+      selectMenuItem,
+      getIndentedName,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.menu-management {
+  width: 100%;
+  margin: auto;
+}
+
+.button-container {
+  display: inline-flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.tree-view {
+  margin-top: 20px;
+}
+
+.tree-view ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.tree-view li {
+  margin-bottom: 5px;
+  padding-left: 20px;
+}
+
+.tree-view .menu-item {
+  display: inline-flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tree-view span {
+  cursor: pointer;
+  color: black;
+}
+
+.tree-view button {
+  border: none;
+  height: 1.6em;
+  padding: 0 0.5em;
+  margin: 1px;
+  border-radius: 5px;
+}
+
+.tree-view span:hover {
+  text-decoration: underline;
+}
+
+.edit-form {
+  margin-top: 20px;
+}
+
+.edit-form label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.edit-form input:not([type="checkbox"]) {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.edit-form .checkbox-container {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+}
+
+.edit-form .order-id {
+  width: 50px;
+}
+
+.edit-form button {
+  margin-top: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/content/admin/PagePreviewComponent.vue b/src/content/admin/PagePreviewComponent.vue
index 59677d2..08dd3dc 100644
--- a/src/content/admin/PagePreviewComponent.vue
+++ b/src/content/admin/PagePreviewComponent.vue
@@ -1,26 +1,55 @@
 <template>
   <div>
     <div class="previewinfo">Dies ist eine Vorschau.</div>
-    <div v-html="renderedContent"></div>
+    <h1>{{ title }}</h1>
+    <RenderContentComponent :content="content" />
   </div>
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed, watchEffect } from 'vue';
 import { useStore } from 'vuex';
-import { render } from '@/utils/render';
+import RenderContentComponent from '@/components/RenderContentComponent.vue';
 
 export default {
   name: 'PagePreview',
+  components: {
+    RenderContentComponent
+  },
   setup() {
     const store = useStore();
     const content = computed(() => store.state.pageContent);
-    const renderedContent = computed(() => render(content.value));
+    const selectedPage = computed(() => store.state.selectedPage);
+    const menuData = computed(() => store.state.menuData);
+    const title = computed(() => store.state.pageTitle);
+
+    const 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 '';
+      };
+      store.dispatch('setPageTitle', findTitle(menuData.value, link));
+    };
+
+    watchEffect(() => {
+      setTitle(selectedPage.value);
+    });
 
     return {
-      renderedContent,
+      content,
+      title
     };
-  },
+  }
 };
 </script>
 
diff --git a/src/content/admin/WorshipManagement.vue b/src/content/admin/WorshipManagement.vue
index 370fd7e..7bbdd3b 100644
--- a/src/content/admin/WorshipManagement.vue
+++ b/src/content/admin/WorshipManagement.vue
@@ -9,6 +9,9 @@
       <label for="date">Datum:</label>
       <input type="date" id="date" v-model="worshipData.date" required>
 
+      <label for="dayName">Name des Tags:</label>
+      <input type="text" id="dayName" v-model="worshipData.dayName" required>
+
       <label for="time">Uhrzeit:</label>
       <input type="time" id="time" v-model="worshipData.time" required>
 
diff --git a/src/store/index.js b/src/store/index.js
index dc3f85d..0921467 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,6 @@
 import { createStore } from 'vuex';
 import axios from 'axios';
-import router from '../router'; // Importieren des Routers
+import router from '../router'; 
 
 let user = [];
 try {
@@ -16,6 +16,8 @@ export default createStore({
     token: localStorage.getItem('token') || '',
     menuData: [],
     pageContent: '',
+    pageTitle: '',
+    selectedPage: '',
   },
   mutations: {
     setLogin(state, { user, token }) {
@@ -44,6 +46,12 @@ export default createStore({
     UPDATE_PAGE_CONTENT(state, content) {
       state.pageContent = content;
     },
+    setPageTitle(state, title) {
+      state.pageTitle = title;
+    },
+    setSelectedPage(state, page) {
+      state.selectedPage = page;
+    },
   },
   actions: {
     async loadMenuData({ commit }) {
@@ -77,6 +85,12 @@ export default createStore({
         console.error('Fehler beim Speichern des Seiteninhalts:', error);
       }
     },
+    setPageTitle({ commit }, title) {
+      commit('setPageTitle', title);
+    },
+    setSelectedPage({ commit }, page) {
+      commit('setSelectedPage', page);
+    },
     login({ commit }, { user, token }) {
       commit('setLogin', { user, token });
     },
@@ -89,5 +103,7 @@ export default createStore({
     user: state => state.user,
     menuData: state => state.menuData,
     pageContent: state => state.pageContent,
+    pageTitle: state => state.pageTitle,
+    selectedPage: state => state.selectedPage,
   }
 });
diff --git a/src/utils/render.js b/src/utils/render.js
deleted file mode 100644
index b343785..0000000
--- a/src/utils/render.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export function render(content) {
-    console.log('do render', content);
-    const worshipsPattern = /{{ worshipslist:(.*?) }}/g;
-    const renderedContent = content.replace(worshipsPattern, (match, config) => {
-      return renderWorships(config);
-    });
-  
-    return renderedContent;
-  }
-  
-  function renderWorships(config) {
-    console.log('render worships', config);
-    return `<div class="worships-list">Worships at location ${location}</div>`;
-  }
-  
\ No newline at end of file