116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
Vue
<script setup>
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const i18n = useI18n();
|
|
const t = i18n.t;
|
|
|
|
import { ref, onMounted } from 'vue';
|
|
import { SingleSelect } from '@cloudron/pankow';
|
|
import { setLanguage } from '../i18n.js';
|
|
import moment from 'moment-timezone';
|
|
import SettingsItem from '../components/SettingsItem.vue';
|
|
import Section from '../components/Section.vue';
|
|
import CloudronModel from '../models/CloudronModel.js';
|
|
import DashboardModel from '../models/DashboardModel.js';
|
|
import SystemModel from '../models/SystemModel.js';
|
|
|
|
const systemModel = SystemModel.create();
|
|
const dashboardModel = DashboardModel.create();
|
|
const cloudronModel = CloudronModel.create();
|
|
|
|
const config = ref({});
|
|
const info = ref({});
|
|
|
|
// Timezone
|
|
const allTimezones = moment.tz.names().map(t => { return { id: t }; });
|
|
const timeZone = ref('');
|
|
const currentTimeZone = ref('');
|
|
|
|
async function onTimeZoneChange(value) {
|
|
const [error] = await cloudronModel.setTimeZone(value);
|
|
if (error) return console.error(error);
|
|
|
|
currentTimeZone.value = value;
|
|
}
|
|
|
|
// Language
|
|
const allLanguages = ref([]);
|
|
const language = ref('');
|
|
const currentLanguage = ref('');
|
|
|
|
async function onLanguageChange(value) {
|
|
const [error] = await cloudronModel.setLanguage(value);
|
|
if (error) return console.error(error);
|
|
|
|
currentLanguage.value = value;
|
|
|
|
await setLanguage(value, false);
|
|
}
|
|
|
|
onMounted(async () => {
|
|
let [error, result] = await cloudronModel.getTimeZone();
|
|
if (error) return console.error(error);
|
|
|
|
timeZone.value = result;
|
|
currentTimeZone.value = result;
|
|
|
|
[error, result] = await cloudronModel.languages();
|
|
if (error) return console.error(error);
|
|
|
|
allLanguages.value = result.map(l => {
|
|
const displayNames = new Intl.DisplayNames(['en'], { type: 'language' });
|
|
|
|
// hack for chinese simplified
|
|
l = l === 'zh_Hans' ? 'zh' : l;
|
|
|
|
return {
|
|
id: l,
|
|
display: displayNames.of(l) || l,
|
|
};
|
|
}).sort((a, b) => {
|
|
return a.display.localeCompare(b.display);
|
|
});
|
|
|
|
[error, result] = await cloudronModel.getLanguage();
|
|
if (error) return console.error(error);
|
|
|
|
language.value = result;
|
|
currentLanguage.value = result;
|
|
|
|
[error, result] = await systemModel.info();
|
|
if (error) return console.error(error);
|
|
info.value = result;
|
|
|
|
[error, result] = await dashboardModel.config();
|
|
if (error) return console.error(error);
|
|
config.value = result;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="content">
|
|
<Section :title="$t('system.locale.title')">
|
|
<SettingsItem wrap>
|
|
<div>
|
|
<label>{{ $t('settings.timezone.title') }}</label>
|
|
<div v-html="$t('settings.timezone.description')"></div>
|
|
</div>
|
|
<div style="display: flex; gap: 6px; align-items: center;">
|
|
<SingleSelect style="min-width: 160px" v-model="timeZone" :searchThreshold="10" :options="allTimezones" option-key="id" option-label="id" @select="onTimeZoneChange" />
|
|
</div>
|
|
</SettingsItem>
|
|
|
|
<SettingsItem wrap>
|
|
<div>
|
|
<label>{{ $t('settings.language.title') }}</label>
|
|
<div>{{ $t('settings.language.description') }}</div>
|
|
</div>
|
|
<div style="display: flex; gap: 6px; align-items: center;">
|
|
<SingleSelect v-model="language" :options="allLanguages" option-key="id" option-label="display" @select="onLanguageChange" />
|
|
</div>
|
|
</SettingsItem>
|
|
</Section>
|
|
</div>
|
|
</template>
|