Added images

src/components/AddImageDialog.vue

@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <div v-if="isOpen" class="dialog-overlay">
+            <div class="dialog-content">
+                <h3>Bild auswählen</h3>
+                <div class="images-container">
+                    <div v-for="image in images" :key="image.id" class="image-block" @click="selectImage(image)" :class="{ selected: image.id === selectedImage?.id }">
+                        <img :src="'/images/uploads/' + image.filename" />
+                        <span v-if="image.description" :title="image.description">{{ image.title }}</span>
+                        <span v-else>{{ image.title }}</span>
+                    </div>
+                </div>
+                <div>
+                    <button @click="confirmAddImageConfiguration">Bestätigen</button>
+                    <button @click="closeAddImageDialog">Schließen</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import axios from '@/axios';
+
+export default {
+    name: 'AddImageDialog',
+    emits: ['confirm'],
+    setup(props, { emit }) {
+        const isOpen = ref(false);
+        const images = ref([]);
+        const selectedImage = ref(null);
+
+        const openAddImageDialog = () => {
+            isOpen.value = true;
+            fetchImages();
+        };
+
+        const closeAddImageDialog = () => {
+            isOpen.value = false;
+        };
+
+        const confirmAddImageConfiguration = () => {
+            if (selectedImage.value) {
+                console.log('->', selectImage.value);
+                emit('confirm', `${selectedImage.value.id}`);
+            }
+            closeAddImageDialog();
+        };
+
+        const fetchImages = async () => {
+            try {
+                const response = await axios.get('/image');
+                images.value = response.data;
+            } catch (error) {
+                console.error('Fehler beim Laden der Bilder:', error);
+                images.value = [];
+            }
+        };
+
+        const selectImage = (image) => {
+            console.log(image);
+            selectedImage.value = image;
+        };
+
+        return {
+            isOpen,
+            images,
+            selectedImage,
+            openAddImageDialog,
+            closeAddImageDialog,
+            confirmAddImageConfiguration,
+            selectImage,
+        };
+    },
+};
+</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;
+}
+
+.images-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.images-container img {
+    cursor: pointer;
+    border: 2px solid transparent;
+}
+
+.images-container img:hover {
+    border-color: #007bff;
+}
+
+.image-block {
+    display: inline-block;
+    margin: 2.5px;
+}
+
+.image-block img {
+    max-width: 150px;
+    max-height: 150px;
+}
+
+.selected {
+    border: 2px solid black;
+}
+</style>

src/components/ImageRender.vue

@@ -0,0 +1,50 @@
+<template>
+    <img v-if="image.filename" :src="`/images/uploads/${image.filename}`" :alt="image.title" :title="image.title"
+        class="image" />
+</template>
+
+<script>
+import axios from '@/axios';
+import { reactive } from 'vue';
+
+export default {
+    name: 'ImageRender',
+    props: {
+        id: {
+            type: Number,
+            required: true,
+        },
+    },
+    setup(props) {
+        const image = reactive({
+            filename: '',
+            title: '',
+            description: '',
+            uploadDate: '',
+            pageId: null,
+        });
+
+        const fetchImage = async () => {
+            try {
+                const response = await axios.get('/image/' + props.id);
+                Object.assign(image, response.data);
+            } catch (error) {
+                console.log('Fehler beim Abrufen eines Bildes', error);
+            }
+        };
+
+        fetchImage();
+
+        return {
+            image,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.image {
+    max-width: 400px;
+    max-height: 300px;
+}
+</style>

src/components/RenderContentComponent.vue

@@ -1,74 +1,100 @@
 <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
-      }
+  <div v-html="parsedContent"></div>
+</template>
+
+<script>
+import { createApp, h, ref, watch } from 'vue';
+import WorshipRender from './WorshipRender.vue';
+import ImageRender from './ImageRender.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);
-            }
+  },
+  setup(props) {
+    const parsedContent = ref('');
+
+    const renderContent = (content) => {
+      let result = renderWorship(content);
+      result = renderImage(content);
+      return result;
+    };
+
+    const renderWorship = (content) => {
+      const worshipsPattern = /{{ worshipslist:(.*?) }}/g;
+      let result = content;
+      result = result.replace(worshipsPattern, (match, config) => {
+        const props = parseConfig(config);
+        const placeholderId = `worship-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
+        setTimeout(() => {
+          const placeholder = document.getElementById(placeholderId);
+          if (placeholder) {
+            const app = createApp({
+              render() {
+                return h(WorshipRender, props);
+              },
+            });
+            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;
-      }
+        }, 0);
+        return `<div id="${placeholderId}"></div>`;
+      });
+      return result;
     }
+
+    const renderImage = (content) => {
+      const imagePattern = /{{ image:(.*?) }}/g;
+      let result = content;
+      result = result.replace(imagePattern, (match, config) => {
+        const placeholderId = `image-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
+        setTimeout(() => {
+          const placeholder = document.getElementById(placeholderId);
+          if (placeholder) {
+            const app = createApp({
+              render() {
+                console.log(config);
+                return h(ImageRender, { 'id': config });
+              },
+            });
+            app.mount(placeholder);
+          }
+        }, 0);
+        return `<span id="${placeholderId}"></span>`;
+      });
+      return result;
+    }
+
+  const 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>
-  
+
+  watch(
+      () => props.content,
+  (newContent) => {
+    parsedContent.value = renderContent(newContent);
+  },
+  { immediate: true }
+    );
+
+return {
+  parsedContent,
+};
+  },
+};
+</script>
+
+<style scoped>
+/* Add styles if needed */
+</style>