Added settings to backend and frontend.

frontend/app/components/layout/customHeader.vue

@@ -14,6 +14,12 @@
         :vertical="true"
     />
 
+    <Settings/>
+
+    <v-divider
+        :vertical="true"
+    />
+
     <Label/>
 
     <v-divider

frontend/app/components/settings/settings.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import type {Ref} from "vue";
+  import LabelCreate from "~/components/label/labelCreate.vue";
+  import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
+  import {Label} from "~/types/label";
+  import {Settings} from "~/types/settings";
+
+  let store = useLabelEditorStore();
+  let dialog: Ref<boolean> = ref<boolean>(false);
+  let loading: Ref<boolean> = ref<boolean>(false);
+
+  watch(dialog, async (oldDialog) => {
+    if (oldDialog) {
+      loading.value = true;
+
+      await store.loadSettings();
+
+      loading.value = false;
+    }
+  })
+
+  async function updateSettings(name: string, value: string) {
+    if (store.settings != null) {
+      switch (name) {
+        case "MHD":
+          console.log("Update MHD: " + value);
+          const settingsMhd = new Settings(store.settings.id, value, store.settings.bio);
+          await store.updateSettings(settingsMhd);
+
+          break;
+        case "BIO":
+          console.log("Update BIO: " + value);
+          const settingsBio = new Settings(store.settings.id, store.settings.mhd, value);
+          await store.updateSettings(settingsBio);
+
+          break;
+        default:
+          console.log("Error: Unbekannter Wert für Einstellungen");
+      }
+    }
+  }
+
+  function closeDialog() {
+    dialog.value = false;
+  }
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialog"
+      :scrollable="true"
+      width="800"
+      max-height="750"
+      height="750"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          :flat="true"
+          v-bind="props"
+          size="small"
+      >
+        <v-icon>mdi-archive</v-icon>
+        <v-tooltip
+            activator="parent"
+            location="bottom"
+        >
+          Einstellungen
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title>
+        <v-row style="padding-top: 10px">
+          <v-icon size="small">
+            mdi-archive
+          </v-icon>
+
+          Einstellungen
+
+          <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
+
+          <v-spacer/>
+          <v-divider vertical/>
+
+          <LabelCreate/>
+        </v-row>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text v-if="store.settings != null">
+        <SettingsRow
+            key="mhd"
+            name="MHD"
+            v-bind:value="store.settings.mhd"
+            @update="updateSettings"
+        />
+
+        <SettingsRow
+            key="bio"
+            name="BIO"
+            v-bind:value="store.settings.bio"
+            @update="updateSettings"
+        />
+      </v-card-text>
+
+      <v-card-text v-else>
+        Fehler beim laden der Einstellungen
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions>
+        <v-spacer/>
+
+        <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="closeDialog()"
+        >
+          Schließen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/components/settings/settingsRow.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+  const props = defineProps({
+    name: {type: String, required: true},
+    value: {type: String, required: true},
+  });
+
+  const emit = defineEmits(['update']);
+
+  let edit: Ref<boolean> = ref<boolean>(false);
+  let value: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.value)));
+
+  function toggleEdit() {
+    if (edit.value) {
+      disableEdit();
+    } else {
+      enableEdit();
+    }
+  }
+
+  function enableEdit() {
+    edit.value = true;
+  }
+
+  function disableEdit() {
+    value.value = JSON.parse(JSON.stringify(props.value));
+    edit.value = false;
+  }
+
+  async function updateSetting() {
+    if (value.value != null && value.value.trim().length > 0) {
+
+      emit('update', props.name, value.value);
+
+      disableEdit();
+    }
+  }
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>
+      <v-row style="padding-top: 10px">
+
+        {{ props.name }}
+
+        <v-spacer />
+
+        <v-divider vertical/>
+
+        <v-btn
+            :flat="true"
+            :disabled="!edit"
+            :hidden="edit"
+            @click="disableEdit()"
+        >
+          <v-icon>mdi-cancel</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="bottom"
+          >
+            Abbrechen
+          </v-tooltip>
+        </v-btn>
+
+        <v-btn
+            :flat="true"
+            :disabled="!edit"
+            :hidden="edit"
+            @click="updateSetting()"
+        >
+          <v-icon>mdi-content-save</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="bottom"
+          >
+            Speichern
+          </v-tooltip>
+        </v-btn>
+
+        <v-divider vertical/>
+
+        <v-btn
+            :flat="true"
+            @click="toggleEdit();"
+        >
+          <v-icon>mdi-pencil</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="bottom"
+          >
+            Bearbeiten
+          </v-tooltip>
+        </v-btn>
+      </v-row>
+    </v-card-title>
+
+    <v-divider/>
+
+    <v-card-text>
+      <v-text-field
+          v-model.trim="value"
+          :readonly="!edit"
+      />
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>