cloudron-box/dashboard/src/views/SystemSettingsView.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 => {
    return {
      id: l,
      display: t(`lang.${l}`, l /* default fallback */, { locale: 'en' })
    };
  }).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>