Init.

frontend/app/components/layout/customFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <v-footer
+      :app="true"
+      :rounded="true"
+      color="red"
+  >
+    <div class="px-4 py-2 bg-black text-center w-100">
+      {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
+    </div>
+  </v-footer>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/components/layout/customHeader.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import Notifications from "~/components/notification/notifications.vue";
+</script>
+
+<template>
+  <v-app-bar
+      density="compact"
+      :elevation="1"
+  >
+    <v-app-bar-title>Label Editor</v-app-bar-title>
+
+    <v-divider
+        :vertical="true"
+    />
+
+    <Notifications/>
+
+  </v-app-bar>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/components/notification/notificationBaseComponent.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+
+  let store = useLabelEditorStore();
+</script>
+
+<template>
+  <div class="notificationContainer">
+    <v-slide-y-reverse-transition
+        :group="true"
+    >
+      <div
+          v-for="notificationMessage in store.notificationQueue"
+          :key="notificationMessage.id"
+      >
+        <v-alert
+            v-if="notificationMessage.error"
+            :closable="true"
+            type="error"
+        >
+          {{ notificationMessage.message }}
+        </v-alert>
+
+        <v-alert
+            v-else
+            :closable="true"
+            type="success"
+        >
+          {{ notificationMessage.message }}
+        </v-alert>
+      </div>
+
+    </v-slide-y-reverse-transition>
+  </div>
+</template>
+
+<style scoped>
+  .notificationContainer {
+    position: fixed;
+    bottom: 75px;
+    right: 10px;
+    display: grid;
+    grid-gap: 0.5em;
+    width: 300px;
+    z-index: 99;
+  }
+</style>

frontend/app/components/notification/notifications.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+  import type {Ref} from "vue";
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import type {NotificationMessage} from "~/types/notificationMessage";
+
+  let store = useLabelEditorStore();
+
+  let dialog: Ref<boolean> = ref<boolean>(false);
+
+  let pageCount: Ref<number> = ref<number>(1);
+  let page: Ref<number> = ref<number>(1);
+
+  let notifications: Ref<NotificationMessage[]> = ref<NotificationMessage[]>([]);
+  let notificationPages: Ref<NotificationMessage[][]> = ref<NotificationMessage[][]>([]);
+
+  const pageItemCount = 25;
+
+  watch(dialog, async (oldDialog) => {
+    loadNotifications();
+  })
+
+  function loadNotifications() {
+    notifications.value = store.getNotifications();
+    const length = notifications.value.length;
+    pageCount.value = Math.ceil(length / pageItemCount);
+
+    for (let i = 0; i < pageCount.value; i++) {
+      notificationPages.value[i] = notifications.value.slice((i * pageItemCount), ((i + 1) * pageItemCount));
+    }
+  }
+
+  function clear() {
+    store.clearNotifications();
+    loadNotifications();
+  }
+
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialog"
+      :scrollable="true"
+      width="800"
+      max-height="750"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          :flat="true"
+          v-bind="props"
+      >
+        <v-icon>mdi-bell</v-icon>
+        <v-tooltip
+            activator="parent"
+            location="bottom"
+        >
+          Benachrichtigungen
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title>
+        <v-icon size="small">
+          mdi-bell
+        </v-icon>
+
+        Benachrichtigungen
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text>
+        <div
+            v-for="notification in notificationPages[page - 1]"
+            :key="notification.id"
+        >
+          <v-row no-gutters>
+            <v-col cols="2">
+              <v-sheet>
+                <v-icon v-if="notification.error" color="red">mdi-alert-circle-outline</v-icon>
+                <v-icon v-else color="green">mdi-check</v-icon>
+
+                {{ notification.error ? 'Fehler' : 'Okay' }}
+              </v-sheet>
+            </v-col>
+            <v-col  cols="3">
+              <v-sheet>
+                {{ notification.dateTime }}
+              </v-sheet>
+            </v-col>
+            <v-col>
+              <v-sheet>
+                {{ notification.message }}
+              </v-sheet>
+            </v-col>
+          </v-row>
+        </div>
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-pagination
+          v-model="page"
+          :length="pageCount"
+      ></v-pagination>
+
+      <v-divider/>
+
+      <v-card-actions>
+        <v-btn
+            variant="text"
+            @click="clear();"
+        >
+          <v-icon>mdi-delete</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="right"
+          >
+            Benachrichtigungen löschen
+          </v-tooltip>
+        </v-btn>
+
+        <v-spacer/>
+
+        <v-divider :vertical="true"/>
+
+        <v-btn
+            variant="text"
+            @click="dialog = false"
+        >
+          Schließen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>