Added movability of dialogs

frontend/src/components/AppFooter.vue

@@ -10,11 +10,13 @@
       </button>
     </div>
     <div class="static-block">
-      <a href="#" @click.prevent="openImprintDialog">Impressum</a>
-      <a href="#" @click.prevent="openDataPrivacyDialog">Datenschutzerklärung</a>
+      <a href="#" @click.prevent="openImprintDialog">{{ $t('imprint.button') }}</a>
+      <a href="#" @click.prevent="openDataPrivacyDialog">{{ $t('dataPrivacy.button') }}</a>
+      <a href="#" @click.prevent="openContactDialog">{{ $t('contact.button') }}</a>
     </div>
     <ImprintDialog ref="imprintDialog" name="imprintDialog" />
     <DataPrivacyDialog ref="dataPrivacyDialog" name="dataPrivacyDialog" />
+    <ContactDialog ref="contactDialog" name="contactDialog" />
   </footer>
 </template>
 
@@ -22,12 +24,14 @@
 import { mapGetters } from 'vuex';
 import ImprintDialog from '../dialogues/standard/ImprintDialog.vue';
 import DataPrivacyDialog from '../dialogues/standard/DataPrivacyDialog.vue';
+import ContactDialog from '../dialogues/standard/ContactDialog.vue';
 
 export default {
   name: 'AppFooter',
   components: {
     ImprintDialog,
     DataPrivacyDialog,
+    ContactDialog,
   },
   computed: {
     ...mapGetters('dialogs', ['openDialogs'])
@@ -39,6 +43,9 @@ export default {
     openDataPrivacyDialog() {
       this.$refs.dataPrivacyDialog.open();
     },
+    openContactDialog() {
+      this.$refs.contactDialog.open();
+    },
     toggleDialogMinimize(dialogName) {
       this.$store.dispatch('dialogs/toggleDialogMinimize', dialogName);
     }

frontend/src/components/AppHeader.vue

@@ -16,7 +16,7 @@ header {
   display: flex;
   justify-content: space-between;
   padding: 10px;
-  background-color: #f8f9fa;
+  background-color: #f8a22b;
 }
 .logo, .title, .advertisement {
   text-align: center;

frontend/src/components/AppNavigation.vue

@@ -59,6 +59,7 @@ nav>ul {
   padding: 0;
   flex-direction: row;
   margin: 0;
+  cursor: pointer;
 }
 
 ul {

frontend/src/components/DialogWidget.vue

@@ -1,8 +1,9 @@
 <template>
   <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal }]" @click.self="handleOverlayClick">
-    <div class="dialog" :class="{ minimized: minimized }" :style="{ width: dialogWidth, height: dialogHeight }"
-      v-if="!minimized">
-      <div class="dialog-header">
+    <div class="dialog" :class="{ minimized: minimized }"
+      :style="{ width: dialogWidth, height: dialogHeight, top: dialogTop, left: dialogLeft, position: 'absolute' }"
+      v-if="!minimized" ref="dialog">
+      <div class="dialog-header" @mousedown="startDragging">
         <span v-if="icon" class="dialog-icon">
           <img :src="icon" alt="Icon" />
         </span>
@@ -66,12 +67,19 @@ export default {
   data() {
     return {
       visible: false,
-      minimized: false
+      minimized: false,
+      dialogTop: '50%',
+      dialogLeft: '50%',
+      isDragging: false,
+      dragOffsetX: 0,
+      dragOffsetY: 0,
     };
   },
   computed: {
     dialogWidth() {
-      return this.width || '70%';
+      const val = this.width || '70%';
+      console.log(val);
+      return val;
     },
     dialogHeight() {
       return this.height || '60%';
@@ -80,7 +88,7 @@ export default {
   watch: {
     visible(newValue) {
       if (!newValue) {
-        this.minimized = false;  // Reset minimized state when dialog is closed
+        this.minimized = false;
       }
     }
   },
@@ -101,7 +109,7 @@ export default {
     buttonClick(action) {
       this.$emit(action);
       if (action === 'close') {
-        this.close(); // Close dialog after button click if action is close
+        this.close();
       }
     },
     handleOverlayClick() {
@@ -115,7 +123,26 @@ export default {
     toggleMinimize() {
       this.minimized = !this.minimized;
       this.$store.dispatch('dialogs/toggleDialogMinimize', this.name);
-    }
+    },
+    startDragging(event) {
+      this.isDragging = true;
+      const dialog = this.$refs.dialog;
+      this.dragOffsetX = event.clientX - dialog.offsetLeft;
+      this.dragOffsetY = event.clientY - dialog.offsetTop;
+      document.addEventListener('mousemove', this.onDrag);
+      document.addEventListener('mouseup', this.stopDragging);
+      console.log('dragging started');
+    },
+    onDrag(event) {
+      if (!this.isDragging) return;
+      this.dialogLeft = `${event.clientX - this.dragOffsetX}px`;
+      this.dialogTop = `${event.clientY - this.dragOffsetY}px`;
+    },
+    stopDragging() {
+      this.isDragging = false;
+      document.removeEventListener('mousemove', this.onDrag);
+      document.removeEventListener('mouseup', this.stopDragging);
+    },
   },
   mounted() {
     this.$store.subscribe((mutation) => {
@@ -153,6 +180,8 @@ export default {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   pointer-events: all;
+  position: absolute;
+  transform: translate(-50%, -50%);
 }
 
 .dialog.minimized {
@@ -167,6 +196,7 @@ export default {
   padding: 10px 20px;
   border-bottom: 1px solid #ddd;
   background-color: #F9A22C;
+  cursor: move;
 }
 
 .dialog-icon {

frontend/src/components/MessageboxWidget.vue

@@ -0,0 +1,183 @@
+<template>
+    <div v-if="visible" :class="['dialog-overlay', { 'non-modal': false }]">
+        <div class="dialog" :class="{ minimized: minimized }" :style="{ width: dialogWidth, height: dialogHeight }">
+            <div class="dialog-header">
+                <span class="dialog-title">{{ getHeadLine() }}</span>
+                <span class="dialog-close" @click="close">✖</span>
+            </div>
+            <div class="dialog-body">
+                {{ message }}
+            </div>
+            <div class="dialog-footer">
+                <button @click="close()" class="dialog-button">Ok</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'MessageboxWidget',
+    props: {
+        type: {
+            type: String,
+            required: true
+        },
+        width: {
+            type: String,
+            default: '300px'
+        },
+        height: {
+            type: String,
+            default: '200px'
+        },
+        message: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            visible: false,
+            minimized: false
+        };
+    },
+    computed: {
+        dialogWidth() {
+            return this.width || '70%';
+        },
+        dialogHeight() {
+            return this.height || '60%';
+        }
+    },
+    watch: {
+        visible(newValue) {
+            if (!newValue) {
+                this.minimized = false;  // Reset minimized state when dialog is closed
+            }
+        }
+    },
+    methods: {
+        open() {
+            this.visible = true;
+            if (this.modal === false) {
+                this.$store.dispatch('dialogs/addOpenDialog', {
+                    status: 'open',
+                    dialog: this
+                });
+            }
+        },
+        close() {
+            this.visible = false;
+            this.$store.dispatch('dialogs/removeOpenDialog', this.name);
+        },
+        getHeadLine() {
+            switch (this.type) {
+                case 'error':
+                    return this.$t('error-title');
+                case 'warning':
+                    return this.$t('warning-title');
+                case 'info':
+                    return this.$t('info-title');
+                default:
+                    return this.$t('info-title');
+            }
+        }
+    },
+    mounted() {
+        this.$store.subscribe((mutation) => {
+            if (mutation.type === 'dialogs/toggleDialogMinimize' && mutation.payload === this.name) {
+                this.minimized = !this.minimized;
+            }
+        });
+    }
+};
+</script>
+
+<style scoped>
+.dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.dialog-overlay.non-modal {
+    background: transparent;
+    pointer-events: none;
+}
+
+.dialog {
+    background: white;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    pointer-events: all;
+}
+
+.dialog.minimized {
+    height: auto;
+    overflow: hidden;
+}
+
+.dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    border-bottom: 1px solid #ddd;
+    background-color: #F9A22C;
+}
+
+.dialog-icon {
+    margin-right: 10px;
+}
+
+.dialog-title {
+    flex-grow: 1;
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+.dialog-close,
+.dialog-minimize {
+    cursor: pointer;
+    font-size: 1.5em;
+    margin-left: 10px;
+}
+
+.dialog-body {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 20px;
+    border-top: 1px solid #ddd;
+}
+
+.dialog-button {
+    margin-left: 10px;
+    padding: 10px 20px;
+    cursor: pointer;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    transition: background 0.3s;
+}
+
+.dialog-button:hover {
+    background: #0056b3;
+}
+</style>