Initial commit

frontend/src/components/AppContent.vue

@@ -0,0 +1,20 @@
+<template>
+    <main>
+      <router-view></router-view>
+    </main>
+  </template>
+  
+  <script>
+  export default {
+    name: 'AppContent'
+  };
+  </script>
+  
+  <style scoped>
+  main {
+    padding: 20px;
+    background-color: #ffffff;
+    flex: 1;
+  }
+  </style>
+  

frontend/src/components/AppFooter.vue

@@ -0,0 +1,110 @@
+<template>
+  <footer>
+    <div class="logo"><img src="/images/icons/logo_color.png"></div>
+    <div class="window-bar">
+      <button v-for="dialog in openDialogs" :key="dialog.dialog.name" class="dialog-button"
+        @click="toggleDialogMinimize(dialog.dialog.name)" :title="dialog.dialog.title">
+        <img v-if="dialog.dialog.icon" :src="'/images/icons/' + dialog.dialog.icon" />
+        <span class="button-text">{{ dialog.dialog.isTitleTranslated ? $t(dialog.dialog.title) : dialog.dialog.title
+          }}</span>
+      </button>
+    </div>
+    <div class="static-block">
+      <a href="#" @click.prevent="openImprintDialog">Impressum</a>
+      <a href="#" @click.prevent="openDataPrivacyDialog">Datenschutzerklärung</a>
+    </div>
+    <ImprintDialog ref="imprintDialog" name="imprintDialog" />
+    <DataPrivacyDialog ref="dataPrivacyDialog" name="dataPrivacyDialog" />
+  </footer>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ImprintDialog from '../dialogues/standard/ImprintDialog.vue';
+import DataPrivacyDialog from '../dialogues/standard/DataPrivacyDialog.vue';
+
+export default {
+  name: 'AppFooter',
+  components: {
+    ImprintDialog,
+    DataPrivacyDialog,
+  },
+  computed: {
+    ...mapGetters('dialogs', ['openDialogs'])
+  },
+  methods: {
+    openImprintDialog() {
+      this.$refs.imprintDialog.open();
+    },
+    openDataPrivacyDialog() {
+      this.$refs.dataPrivacyDialog.open();
+    },
+    toggleDialogMinimize(dialogName) {
+      this.$store.dispatch('dialogs/toggleDialogMinimize', dialogName);
+    }
+  }
+};
+</script>
+
+<style scoped>
+footer {
+  display: flex;
+  background-color: #7BBE55;
+  height: 38px;
+  width: 100%;
+  color: #7E471B;
+}
+
+.logo,
+.window-bar,
+.static-block {
+  text-align: center;
+}
+
+.window-bar {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  padding-left: 10px;
+}
+
+.dialog-button {
+  max-width: 12em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 5px 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  background: none;
+  height: 1.8em;
+  border: 1px solid #0a4337;
+  box-shadow: 1px 1px 2px #484949;
+}
+
+.dialog-button>img {
+  height: 16px;
+}
+
+.button-text {
+  margin-left: 5px;
+}
+
+.logo>img {
+  width: 36px;
+  height: 36px;
+}
+
+.static-block {
+  line-height: 38px;
+}
+
+.static-block>a {
+  padding-right: 1.5em;
+}
+</style>

frontend/src/components/AppHeader.vue

@@ -0,0 +1,30 @@
+<template>
+  <header>
+    <div class="logo"><img src="/images/logos/logo.png" /></div>
+    <div class="advertisement">Advertisement</div>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'AppHeader'
+};
+</script>
+
+<style scoped>
+header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #f8f9fa;
+}
+.logo, .title, .advertisement {
+  text-align: center;
+}
+.advertisement {
+  flex: 1;
+}
+.logo > img {
+  max-height: 50px;
+}
+</style>

frontend/src/components/AppNavigation.vue

@@ -0,0 +1,78 @@
+<template>
+  <nav>
+    <ul>
+      <li v-for="item in menuItems" :key="item.text">
+        <a href="#">{{ $t(`navigation.${item.text}`) }}</a>
+        <ul v-if="item.submenu">
+          <li v-for="subitem in item.submenu" :key="subitem.text">
+            <a href="#">{{ $t(`navigation.${subitem.text}`) }}</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <div class="right-block">
+      <button @click="accessMailbox">{{ $t('navigation.mailbox') }}</button>
+      <button @click="logout">{{ $t('navigation.logout') }}</button>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'AppNavigation',
+  data() {
+    return {
+      menuItems: [
+        { text: 'home' },
+        { text: 'about', submenu: [{ text: 'team' }, { text: 'company' }] },
+        { text: 'services', submenu: [{ text: 'consulting' }, { text: 'development' }] }
+      ]
+    };
+  },
+  methods: {
+    accessMailbox() {
+      alert('Accessing Mailbox...');
+    },
+    logout() {
+      this.$store.dispatch('logout');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/styles.scss';
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  background-color: #343a40;
+  color: white;
+  padding: 10px;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  margin: 5px 0;
+}
+a {
+  color: white;
+  text-decoration: none;
+}
+.right-block {
+  display: flex;
+  gap: 10px;
+}
+button {
+  background-color: #495057;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #6c757d;
+}
+</style>

frontend/src/components/DialogWidget.vue

@@ -0,0 +1,200 @@
+<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">
+        <span v-if="icon" class="dialog-icon">
+          <img :src="'/images/icons/' + icon" alt="Icon" />
+        </span>
+        <span class="dialog-title">{{ isTitleTranslated ? $t(title) : title }}</span>
+        <span v-if="!modal" class="dialog-minimize" @click="minimize">_</span>
+        <span v-if="showClose" class="dialog-close" @click="close">✖</span>
+      </div>
+      <div class="dialog-body">
+        <slot></slot>
+      </div>
+      <div class="dialog-footer">
+        <button v-for="button in buttons" :key="button.text" @click="buttonClick(button.text)"
+                class="dialog-button">
+          {{ button.text }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DialogWidget',
+  props: {
+    icon: {
+      type: String,
+      default: null
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    showClose: {
+      type: Boolean,
+      default: false
+    },
+    buttons: {
+      type: Array,
+      default: () => [{ text: 'Ok' }]
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: String,
+      default: '70%'
+    },
+    height: {
+      type: String,
+      default: '60%'
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    isTitleTranslated: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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) {
+        this.$store.dispatch('dialogs/addOpenDialog', {
+          status: 'open',
+          dialog: this
+        });
+      }
+    },
+    close() {
+      this.visible = false;
+      this.$store.dispatch('dialogs/removeOpenDialog', this.name);
+    },
+    buttonClick(buttonText) {
+      this.$emit(buttonText.toLowerCase());
+      this.close();
+    },
+    handleOverlayClick() {
+      if (!this.modal) {
+        this.close();
+      }
+    },
+    minimize() {
+      this.minimized = true;
+    },
+    toggleMinimize() {
+      this.minimized = !this.minimized;
+      this.$store.dispatch('dialogs/toggleDialogMinimize', this.name);
+    }
+  },
+  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: 10px;
+  overflow-y: auto;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 20px;
+  border-top: 1px solid #ddd;
+}
+
+</style>