94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<template>
|
|
<div v-if="loggedUser">
|
|
<section>
|
|
<div class="setting-title">
|
|
<h2>{{ t("Settings") }}</h2>
|
|
</div>
|
|
<div>
|
|
<h3>{{ t("Language") }}</h3>
|
|
<p>
|
|
{{
|
|
t(
|
|
"This setting will be used to display the website and send you emails in the correct language."
|
|
)
|
|
}}
|
|
</p>
|
|
<div class="has-text-centered">
|
|
<o-select
|
|
:loading="loading"
|
|
v-model="locale"
|
|
:placeholder="t('Select a language')"
|
|
>
|
|
<option v-for="(language, lang) in langs" :value="lang" :key="lang">
|
|
{{ language }}
|
|
</option>
|
|
</o-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>{{ t("Timezone") }}</h3>
|
|
<p>
|
|
{{
|
|
t(
|
|
"We use your timezone to make sure you get notifications for an event at the correct time."
|
|
)
|
|
}}
|
|
{{
|
|
t("Your timezone was detected as {timezone}.", {
|
|
timezone,
|
|
})
|
|
}}
|
|
<o-notification
|
|
variant="danger"
|
|
v-if="!loading && !supportedTimezone"
|
|
>
|
|
{{ t("Your timezone {timezone} isn't supported.", { timezone }) }}
|
|
</o-notification>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { useTimezones } from "@/composition/apollo/config";
|
|
import {
|
|
doUpdateSetting,
|
|
updateLocale,
|
|
useUserSettings,
|
|
} from "@/composition/apollo/user";
|
|
import { saveLocaleData } from "@/utils/auth";
|
|
import { computed, onMounted, watch } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import langs from "../../i18n/langs.json";
|
|
|
|
const { timezones, loading } = useTimezones();
|
|
|
|
const { t, locale } = useI18n({ useScope: "global" });
|
|
|
|
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
|
|
const { loggedUser } = useUserSettings();
|
|
|
|
onMounted(() => {
|
|
updateLocale(locale as unknown as string);
|
|
doUpdateSetting({ timezone });
|
|
});
|
|
|
|
watch(locale, () => {
|
|
if (locale.value) {
|
|
updateLocale(locale.value as string);
|
|
saveLocaleData(locale.value as string);
|
|
}
|
|
});
|
|
|
|
const supportedTimezone = computed((): boolean => {
|
|
return (timezones.value ?? []).includes(timezone);
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
h3 {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|