Finished guestbook and gallery. started diary

frontend/src/dialogues/socialnetwork/ShowImageDialog.vue

@@ -0,0 +1,65 @@
+<template>
+    <DialogWidget ref="dialog" title="socialnetwork.gallery.show_image_dialog.title" icon="image16.png"
+        :show-close="true" :buttons="buttons" :modal="true" :isTitleTranslated="true" @close="closeDialog"
+        name="ImageDialog">
+        <div>
+            <div class="image-container">
+                <img :src="image.url" alt="Image" :style="{ maxWidth: '600px', maxHeight: '600px' }" />
+            </div>
+            <div class="form-group">
+                <label for="imageTitle">{{ $t('socialnetwork.gallery.imagedialog.image_title') }} <span type="text">{{
+                        imageTitle }}</span></label>
+            </div>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from '@/components/DialogWidget.vue';
+
+export default {
+    name: "ShowImageDialog",
+    components: {
+        DialogWidget,
+    },
+    data() {
+        return {
+            image: null,
+            imageTitle: '',
+        };
+    },
+    computed: {
+        buttons() {
+            return [
+                { text: this.$t('socialnetwork.gallery.imagedialog.close'), action: this.closeDialog }
+            ];
+        },
+    },
+    methods: {
+        open(image) {
+            this.image = image;
+            this.imageTitle = image.title;
+            this.$refs.dialog.open();
+        },
+        closeDialog() {
+            this.$refs.dialog.close();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.form-group {
+    margin-bottom: 15px;
+}
+
+.image-container {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.multiselect {
+    display: inline-block;
+    width: auto;
+}
+</style>