127 lines
3.6 KiB
Vue
127 lines
3.6 KiB
Vue
<template>
|
|
<pn-page-card>
|
|
<template #title>
|
|
{{ $t('settings__title') }}
|
|
</template>
|
|
|
|
<pn-scroll-list>
|
|
<q-list separator>
|
|
<q-item-label header>{{ $t('settings__software_title') }}</q-item-label>
|
|
|
|
<pn-item-btm-dialog
|
|
title="settings__language"
|
|
caption="settings__software_title"
|
|
icon="mdi-translate"
|
|
iconColor="primary"
|
|
>
|
|
<template #value>
|
|
{{ localeOptions.find(el => el.value === locale)?.label }}
|
|
</template>
|
|
<pn-list-selector
|
|
v-model="locale"
|
|
:options="localeOptions"
|
|
/>
|
|
</pn-item-btm-dialog>
|
|
|
|
<pn-item-btm-dialog
|
|
title="settings__font_size"
|
|
caption="settings__software_title"
|
|
icon="mdi-format-size"
|
|
iconColor="primary"
|
|
>
|
|
<template #value>
|
|
{{ $t(fontSizeLabel) }}
|
|
</template>
|
|
<pn-list-selector
|
|
v-model="fontSize"
|
|
:options="fontSizeOptions"
|
|
/>
|
|
</pn-item-btm-dialog>
|
|
|
|
<q-item-label class="q-mt-md" header>{{ $t('settings__bot_title') }}</q-item-label>
|
|
|
|
<pn-item-btm-dialog
|
|
title="settings__language"
|
|
caption="settings__bot_title"
|
|
icon="mdi-translate"
|
|
iconColor="primary"
|
|
>
|
|
<template #value>
|
|
{{ localeOptions.find(el => el.value === localeBot)?.label }}
|
|
</template>
|
|
<pn-list-selector
|
|
v-model="localeBot"
|
|
:options="localeOptions"
|
|
/>
|
|
</pn-item-btm-dialog>
|
|
<pn-item-btm-dialog
|
|
title="settings__timezone"
|
|
caption="settings__bot_title"
|
|
icon="mdi-map-clock-outline"
|
|
iconColor="primary"
|
|
v-if="timeZoneBot"
|
|
>
|
|
<template #value>
|
|
{{ timeZoneBot.tz }}
|
|
{{ timeZoneBot.offsetString }}
|
|
</template>
|
|
|
|
<pn-time-zone-selector
|
|
v-model="timeZoneBot"
|
|
:locale
|
|
/>
|
|
</pn-item-btm-dialog>
|
|
</q-list>
|
|
</pn-scroll-list>
|
|
</pn-page-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, computed, onMounted } from 'vue'
|
|
import { useSettingsStore } from 'stores/settings'
|
|
import pnItemBtmDialog from 'components/pnItemBtmDialog.vue'
|
|
import pnListSelector from 'components/pnListSelector.vue'
|
|
import pnTimeZoneSelector from 'components/pnTimeZoneSelector.vue'
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
const localeOptions = settingsStore.supportLocale
|
|
|
|
const locale = ref('')
|
|
watch(locale, async (newValue) => {
|
|
await settingsStore.updateSettings({ locale: newValue })
|
|
})
|
|
|
|
const localeBot = ref('')
|
|
watch(localeBot, async (newValue) => {
|
|
await settingsStore.updateSettings({ localeBot: newValue })
|
|
})
|
|
|
|
const fontSize = ref(16)
|
|
const fontSizeOptions = settingsStore.supportFontSizes
|
|
const fontSizeLabel = computed(() =>
|
|
fontSizeOptions.find(el => el.value === fontSize.value)?.label ?? ''
|
|
)
|
|
|
|
watch(fontSize, async (newValue) => {
|
|
await settingsStore.updateSettings({ fontSize: newValue })
|
|
})
|
|
|
|
const timeZoneBot = ref<{ tz: string, offset: number,offsetString: string }>()
|
|
|
|
watch(timeZoneBot, async (newValue) => {
|
|
if (newValue) await settingsStore.updateSettings({ timeZoneBot: newValue })
|
|
})
|
|
|
|
onMounted(() => {
|
|
locale.value = settingsStore.settings.locale
|
|
localeBot.value = settingsStore.settings.localeBot
|
|
fontSize.value = settingsStore.settings.fontSize
|
|
timeZoneBot.value = settingsStore.settings.timeZoneBot
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|