Files
recipes/vue3/src/components/settings/CosmeticSettings.vue
2024-10-14 17:39:40 +02:00

92 lines
3.9 KiB
Vue

<template>
<v-form>
<p class="text-h6">{{ $t('Cosmetic') }}</p>
<v-divider class="mb-3"></v-divider>
<v-select
:label="$t('Language')"
v-model="$i18n.locale"
:items="availableLocalizations"
item-title="language"
item-value="code"
@update:model-value="updateLanguage()"
></v-select>
<v-label>{{$t('Nav_Color')}}</v-label>
<v-color-picker v-model="useUserPreferenceStore().userSettings.navBgColor" mode="hex" :modes="['hex']" show-swatches :swatches="[['#ddbf86'],['#b98766'],['#b55e4f'],['#82aa8b'],['#385f84']]"></v-color-picker>
<v-checkbox :label="$t('Show_Logo')" :hint="$t('Show_Logo_Help')" persistent-hint v-model="useUserPreferenceStore().userSettings.navShowLogo"></v-checkbox>
<v-checkbox :label="$t('Sticky_Nav')" :hint="$t('Sticky_Nav_Help')" persistent-hint v-model="useUserPreferenceStore().userSettings.navSticky"></v-checkbox>
<v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">{{$t('Save')}}</v-btn>
<p class="text-h6 mt-3">{{ $t('Preferences') }}</p>
<v-divider class="mb-3"></v-divider>
<v-text-field v-model="useUserPreferenceStore().userSettings.defaultUnit" :label="$t('Default_Unit')"></v-text-field>
<v-text-field v-model="useUserPreferenceStore().userSettings.ingredientDecimals" :label="$t('Decimals')"></v-text-field>
<!-- <v-select-->
<!-- :label="$t('DefaultPage')"-->
<!-- v-model="useUserPreferenceStore().userSettings.defaultPage"-->
<!-- :items="availableDefaultPages"-->
<!-- item-title="label"-->
<!-- item-value="page"-->
<!-- ></v-select>-->
<v-checkbox :label="$t('Use_Fractions')" :hint="$t('Use_Fractions_Help')" persistent-hint v-model="useUserPreferenceStore().userSettings.useFractions"></v-checkbox>
<v-checkbox :label="$t('Comments_setting')" v-model="useUserPreferenceStore().userSettings.comments"></v-checkbox>
<v-checkbox :label="$t('left_handed')" :hint="$t('left_handed_help')" persistent-hint v-model="useUserPreferenceStore().userSettings.leftHanded"></v-checkbox>
<v-checkbox :label="$t('show_step_ingredients_setting')" :hint="$t('show_step_ingredients_setting_help')" persistent-hint v-model="useUserPreferenceStore().userSettings.showStepIngredients"></v-checkbox>
<v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">{{$t('Save')}}</v-btn>
</v-form>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {ApiApi, Localization} from "@/openapi";
import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
import {useI18n} from "vue-i18n";
import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
const {locale, t} = useI18n()
const availableLocalizations = ref([] as Localization[])
const availableDefaultPages = ref([
{page: 'SEARCH', label: t('Search')},
{page: 'SHOPPING', label: t('Shopping_list')},
{page: 'PLAN', label: t('Meal_Plan')},
{page: 'BOOKS', label: t('Books')},
])
onMounted(() => {
const api = new ApiApi()
api.apiLocalizationList().then(r => {
availableLocalizations.value = r
}).catch(err => {
useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
})
})
/**
* update the django language cookie
* this is used by django to inject the language into the template which in turn
* sets the frontend language in i18n.ts when the frontend is initialized
*/
function updateLanguage() {
const expires = new Date();
expires.setTime(expires.getTime() + (100 * 365 * 24 * 60 * 60 * 1000));
document.cookie = `django_language=${locale.value}; expires=${expires.toUTCString()}; path=/`;
location.reload()
}
</script>
<style scoped>
</style>