Files
label_editor/frontend/app/components/settings/settings.vue
T

150 lines
4.1 KiB
Vue

<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";
import SettingsRow from "~/components/settings/settingsRow.vue";
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, store.settings.allergens_text, store.settings.bio_info);
await store.updateSettings(settingsMhd);
break;
case "BIO":
console.log("Update BIO: " + value);
const settingsBio = new Settings(store.settings.id, store.settings.mhd, value, store.settings.allergens_text, store.settings.bio_info);
await store.updateSettings(settingsBio);
break;
case "Allergen Hinweis":
console.log("Update Allergen Text: " + value);
const settingsAllergens = new Settings(store.settings.id, store.settings.mhd, store.settings.bio, value, store.settings.bio_info);
await store.updateSettings(settingsAllergens);
break;
case "BIO Hinweis":
console.log("Update Allergen Text: " + value);
const settingsBioInfo = new Settings(store.settings.id, store.settings.mhd, store.settings.bio, store.settings.allergens_text, value);
await store.updateSettings(settingsBioInfo);
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-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"
/>
<SettingsRow
key="bio_info"
name="BIO Hinweis"
v-bind:value="store.settings.bio_info"
@update="updateSettings"
/>
<SettingsRow
key="allergens"
name="Allergen Hinweis"
v-bind:value="store.settings.allergens_text"
@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>