171 lines
4.8 KiB
Vue
171 lines
4.8 KiB
Vue
<template>
|
|
<pn-page-template>
|
|
<template #title>
|
|
{{ $t('settings__title') }}
|
|
</template>
|
|
<q-list>
|
|
<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>
|
|
|
|
<pn-item-btm-dialog
|
|
title="settings__display_mode"
|
|
icon="mdi-overscan"
|
|
iconColor="primary"
|
|
>
|
|
<template #value>
|
|
{{ $t(displayModeLabel) }}
|
|
</template>
|
|
<pn-list-selector
|
|
v-model="displayMode"
|
|
:options="displayModeOptions"
|
|
/>
|
|
<q-banner
|
|
v-if="$isAndroid"
|
|
class="bg-negative text-white q-mt-lg"
|
|
>
|
|
<template #avatar>
|
|
<q-icon name="mdi-alert-circle-outline"/>
|
|
</template>
|
|
{{ $t('settings__display_mode_android_warning') }}
|
|
</q-banner>
|
|
</pn-item-btm-dialog>
|
|
|
|
<template v-if="authStore.isAuth">
|
|
<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>
|
|
</template>
|
|
</q-list>
|
|
</pn-page-template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, computed, onMounted } from 'vue'
|
|
import { useSettingsStore } from 'stores/settings'
|
|
import { useAuthStore } from 'stores/auth'
|
|
import pnItemBtmDialog from 'components/pnItemBtmDialog.vue'
|
|
import pnListSelector from 'components/pnListSelector.vue'
|
|
import pnTimeZoneSelector from 'components/pnTimeZoneSelector.vue'
|
|
|
|
const settingsStore = useSettingsStore()
|
|
const authStore = useAuthStore()
|
|
|
|
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 displayMode = ref<'full' | 'window'>('window')
|
|
const displayModeOptions = [
|
|
{ value: 'full', label: 'settings__display_mode_full' },
|
|
{ value: 'window', label: 'settings__display_mode_window' }
|
|
]
|
|
const displayModeLabel = computed(() =>
|
|
displayModeOptions.find(el => el.value === displayMode.value)?.label ?? ''
|
|
)
|
|
|
|
watch(displayMode, async (newValue) => {
|
|
await settingsStore.updateSettings({ displayMode: 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
|
|
fontSize.value = settingsStore.settings.fontSize
|
|
displayMode.value = settingsStore.settings.displayMode
|
|
timeZoneBot.value = settingsStore.settings.timeZoneBot
|
|
localeBot.value = settingsStore.settings.localeBot
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|