rename views

dashboard/src/views/SystemSettingsView.vue

@@ -0,0 +1,110 @@
+<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>