cloudron-box/dashboard/src/views/SettingsView.vue

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, onMounted, watch } from 'vue';
import { Dropdown } from 'pankow';
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 = window.timezones;
const timeZone = ref('');
const currentTimeZone = ref('');

function prettyTimeZone(timeZone) {
  const tz = window.timezones.find(function (t) { return t.id === timeZone; });
  if (!tz) return '';
  return tz.display;
}

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">

    <h1>{{ $t('settings.title') }}</h1>

    <CloudronAccount />

    <Section :title="$t('settings.timezone.title')">
      <p v-html="$t('settings.timezone.description', { timeZone: prettyTimeZone(timeZone) })"></p>
      <Dropdown v-model="timeZone" :options="allTimezones" option-key="id" option-label="display" />
    </Section>

    <Section :title="$t('settings.language.title')">
      <p>{{ $t('settings.language.description') }}</p>
      <Dropdown v-model="language" :options="allLanguages" option-key="id" option-label="display" />
    </Section>

    <SystemUpdate />
    <PrivateRegistry />
  </div>
</template>