Init.

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

frontend/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

frontend/app/app.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import { createApp } from 'vue'
+  import { createPinia } from 'pinia'
+  import App from './app.vue'
+
+  const pinia = createPinia()
+  const app = createApp(App)
+
+  app.use(pinia)
+  app.mount('#app')
+</script>
+
+<template>
+  <v-app>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </v-app>
+</template>
+
+<style scoped>
+
+</style>

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>

frontend/app/layouts/default.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+
+  import CustomHeader from "~/components/layout/customHeader.vue";
+  import CustomFooter from "~/components/layout/customFooter.vue";
+
+  export default {
+    name: 'DefaultLayout',
+    components: {CustomFooter, CustomHeader},
+  }
+
+
+</script>
+
+<template>
+  <v-layout>
+
+    <CustomHeader/>
+
+    <v-main>
+      <slot/>
+    </v-main>
+
+    <NotificationBaseComponent/>
+
+    <CustomFooter/>
+
+  </v-layout>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/pages/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>Test Index</v-card-title>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/plugins/vuetify.ts

@@ -0,0 +1,12 @@
+// import this after install `@mdi/font` package
+import '@mdi/font/css/materialdesignicons.css'
+
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+
+export default defineNuxtPlugin((app) => {
+  const vuetify = createVuetify({
+    // ... your configuration
+  })
+  app.vueApp.use(vuetify)
+})

frontend/app/store/labelEditorStore.ts

@@ -0,0 +1,128 @@
+import {defineStore} from "pinia";
+import type {Entity} from "~/types/entity";
+import {NotificationMessage} from "~/types/notificationMessage";
+import type {RuntimeConfig} from "nuxt/schema";
+
+interface State {
+  config: RuntimeConfig,
+
+  // Notification
+  notifications: NotificationMessage[],
+  notificationQueue: NotificationMessage[],
+
+  // Entity
+  entity: Entity | null,
+}
+
+export const useLabelEditorStore = defineStore('label_editor_store', {
+  state: (): State => ({
+    config: useRuntimeConfig(),
+
+    // Notification
+    notifications: [],
+    notificationQueue: [],
+
+    // Entity
+    entity: null,
+  }),
+  actions: {
+    // Notification
+    addNotification(error: boolean, message: string) {
+      const notification: NotificationMessage = new NotificationMessage(error, message);
+
+      if (import.meta.client) {
+        const localStoreNotification = localStorage.getItem("label_editor_notifications");
+
+        if (localStoreNotification != null) {
+          this.notifications = JSON.parse(localStoreNotification);
+        }
+      }
+
+      this.notificationQueue.push(notification);
+      this.notifications.push(notification);
+
+      if (import.meta.client) {
+        localStorage.setItem('label_editor_notifications', JSON.stringify(this.notifications));
+      }
+
+      if (notification.error) {
+        setTimeout(() => this.removeNotification(notification.id), 5000);
+      } else {
+        setTimeout(() => this.removeNotification(notification.id), 2000);
+      }
+    },
+
+    removeNotification(id: string) {
+      const index = this.notificationQueue.findIndex(notification => notification.id == id);
+
+      if (index > -1) {
+        this.notificationQueue.splice(index, 1);
+      }
+    },
+
+    getNotifications(): NotificationMessage[] {
+      let oldNotifications: NotificationMessage[] = [];
+
+      if (import.meta.client) {
+        const localStoreNotification = localStorage.getItem("label_editor_notifications");
+
+        if (localStoreNotification != null) {
+          oldNotifications = JSON.parse(localStoreNotification);
+
+          oldNotifications.reverse();
+          return oldNotifications;
+        }
+      }
+
+      return [];
+    },
+
+    clearNotifications() {
+      this.notifications = [];
+
+      if (import.meta.client) {
+        localStorage.setItem('label_editor_notifications', JSON.stringify(this.notifications));
+      }
+
+      this.addNotification(false, "Benachrichtigungen gelöscht")
+    },
+
+
+    // Entity
+    async loadEntity(entityID: number) {
+      try {
+        const entity: Entity = await $fetch<Entity>(this.config.public.url + '/entity/' + entityID, {
+          method: 'GET',
+        });
+
+        this.entity = entity;
+        this.addNotification(false, 'Artikel geladen: ' + this.entity.name);
+      } catch {
+        this.entity = null;
+        this.addNotification(true, 'Fehler beim laden des Artikel. ID:' + entityID);
+      }
+    },
+
+    async updateEntity(entity: Entity) {
+      if (this.entity != null) {
+        try {
+          const entity: Entity = await $fetch<Entity>(this.config.public.url + '/entity/update', {
+            method: 'POST',
+            body: JSON.stringify(this.entity),
+          });
+
+          this.entity = entity;
+          this.addNotification(false, 'Artikel "' + this.entity.name + '" aktualisiert');
+        } catch {
+          this.addNotification(true, 'Fehler beim aktualisieren des Artikel: ' + this.entity.name);
+        }
+      } else {
+        this.addNotification(true, 'Es ist kein Artikel ausgewählt');
+      }
+    },
+
+    clearEntity() {
+      this.entity = null;
+    },
+  },
+});

frontend/app/types/entity.ts

@@ -0,0 +1,26 @@
+import type {Variant} from "~/types/variant";
+
+export class Entity {
+  readonly id: number;
+  name: string;
+  bio: boolean;
+  origin: string;
+  description: string;
+  ingredients: string;
+  variants: Array<Variant>;
+
+  constructor(id: number, name: string, bio: boolean, origin: string, description: string, ingredients: string, variants: Array<Variant> | null) {
+    this.id = id;
+    this.name = name;
+    this.bio = bio;
+    this.origin = origin;
+    this.description = description;
+    this.ingredients = ingredients;
+
+    if (variants == null) {
+      this.variants = [];
+    } else {
+      this.variants = variants;
+    }
+  }
+}

frontend/app/types/notificationMessage.ts

@@ -0,0 +1,15 @@
+export class NotificationMessage {
+    id: string;
+    dateTime: string;
+    error: boolean;
+    message: string;
+
+    constructor(error: boolean, message: string) {
+        let dateTime = new Date();
+
+        this.id = crypto.randomUUID();
+        this.dateTime = dateTime.getUTCHours().toString().padStart(2, '0') + ':' + dateTime.getUTCMinutes().toString().padStart(2, '0') + " - " + dateTime.getUTCDate().toString().padStart(2, '0')+ '.' + dateTime.getUTCMonth().toString().padStart(2, '0') + '.' + dateTime.getFullYear();
+        this.error = error;
+        this.message = message;
+    }
+}

frontend/app/types/variant.ts

@@ -0,0 +1,17 @@
+export class Variant {
+  readonly id: number;
+  weight: string;
+  ean: string;
+  name: string | null;
+  description: string | null;
+  ingredients: string | null;
+
+  constructor(id: number, weight: string, ean: string, name: string|null, description:string|null, ingredients: string|null) {
+    this.id = id;
+    this.weight = weight;
+    this.ean = ean;
+    this.name = name;
+    this.description = description;
+    this.ingredients = ingredients;
+  }
+}

frontend/nuxt.config.ts

@@ -0,0 +1,40 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+export default defineNuxtConfig({
+  app: {
+    head: {
+      title: "Label Editor",
+    },
+  },
+
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+
+  ssr: false,
+  pages: true,
+  components: true,
+
+  plugins: ['~/plugins/vuetify.ts'],
+
+  css: [
+    'vuetify/styles',
+    '@mdi/font/css/materialdesignicons.min.css',
+  ],
+
+  build: {
+    transpile: ['vuetify'],
+  },
+
+  vite: {
+    plugins: [
+      vuetify({ autoImport: true }),
+    ],
+    vue: {
+      template: {
+        transformAssetUrls,
+      },
+    },
+  }
+})

frontend/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "frontend",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "5.2.9",
+    "@mdi/font": "7.4.47",
+    "@pinia/nuxt": "0.11.3",
+    "nuxt": "4.2.2",
+    "pinia": "^3.0.4",
+    "vue": "3.5.26",
+    "vue-router": "4.6.4"
+  },
+  "devDependencies": {
+    "vite-plugin-vuetify": "2.1.2",
+    "vuetify": "3.11.6"
+  }
+}

frontend/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

frontend/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}