Johannes Zellner
112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<script setup>
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const i18n = useI18n();
|
|
const t = i18n.t;
|
|
|
|
import { ref, onMounted, watch } from 'vue';
|
|
import { SingleSelect } from 'pankow';
|
|
import moment from 'moment-timezone';
|
|
import SettingsItem from '../components/SettingsItem.vue';
|
|
import Section from '../components/Section.vue';
|
|
import CloudronAccount from '../components/CloudronAccount.vue';
|
|
import SystemUpdate from '../components/SystemUpdate.vue';
|
|
import PrivateRegistry from '../components/PrivateRegistry.vue';
|
|
import CloudronModel from '../models/CloudronModel.js';
|
|
|
|
const cloudronModel = CloudronModel.create();
|
|
|
|
// Timezone
|
|
const allTimezones = moment.tz.names().map(t => { return { id: t }; });
|
|
const timeZone = ref('');
|
|
const currentTimeZone = ref('');
|
|
|
|
watch(timeZone, async (newTimeZone, oldTimeZone) => {
|
|
if (!oldTimeZone) return;
|
|
|
|
const [error] = await cloudronModel.setTimeZone(newTimeZone);
|
|
if (error) {
|
|
console.error(error);
|
|
window.pankow.notify({ text: 'Failed to set timezone. Check logs', type: 'danger' });
|
|
timeZone.value = currentTimeZone.value;
|
|
} else {
|
|
currentTimeZone.value = newTimeZone;
|
|
window.pankow.notify({ text: 'Timezone changed', type: 'success' });
|
|
}
|
|
});
|
|
|
|
// Language
|
|
const allLanguages = ref([]);
|
|
const language = ref('');
|
|
const currentLanguage = ref('');
|
|
|
|
watch(language, async (newLanguage, oldLanguage) => {
|
|
if (!oldLanguage) return;
|
|
|
|
const [error] = await cloudronModel.setLanguage(newLanguage);
|
|
if (error) {
|
|
console.error(error);
|
|
window.pankow.notify({ text: 'Failed to set language. Check logs', type: 'danger' });
|
|
language.value = currentLanguage.value;
|
|
} else {
|
|
currentLanguage.value = newLanguage;
|
|
window.pankow.notify({ text: 'Language changed', type: 'success' });
|
|
}
|
|
});
|
|
|
|
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 => {
|
|
return {
|
|
id: l,
|
|
display: t(`lang.${l}`)
|
|
};
|
|
});
|
|
|
|
[error, result] = await cloudronModel.getLanguage();
|
|
if (error) return console.error(error);
|
|
|
|
language.value = result;
|
|
currentLanguage.value = result;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="content">
|
|
<Section :title="$t('settings.title')" :padding="false">
|
|
<SettingsItem wrap>
|
|
<FormGroup>
|
|
<label>{{ $t('settings.timezone.title') }}</label>
|
|
<div v-html="$t('settings.timezone.description', { timeZone })"></div>
|
|
</FormGroup>
|
|
<div style="display: flex; gap: 6px; align-items: center;">
|
|
<SingleSelect style="min-width: 160px" v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" />
|
|
</div>
|
|
</SettingsItem>
|
|
|
|
<SettingsItem wrap>
|
|
<FormGroup>
|
|
<label>{{ $t('settings.language.title') }}</label>
|
|
<div>{{ $t('settings.language.description') }}</div>
|
|
</FormGroup>
|
|
<div style="display: flex; gap: 6px; align-items: center;">
|
|
<SingleSelect v-model="language" :options="allLanguages" option-key="id" option-label="display" />
|
|
</div>
|
|
</SettingsItem>
|
|
</Section>
|
|
|
|
<CloudronAccount />
|
|
<SystemUpdate />
|
|
<PrivateRegistry />
|
|
</div>
|
|
</template>
|