Start migration of System view

2025-01-23 18:36:30 +01:00
parent 84a1f40115
commit 2d1f24ca0f
6 changed files with 191 additions and 13 deletions
--- a/dashboard/src/views/SettingsView.vue
+++ b/dashboard/src/views/SettingsView.vue
@@ -0,0 +1,111 @@
+<script setup>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+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 SystemUpdate from '../components/SystemUpdate.vue';
+import CloudronModel from '../models/CloudronModel.js';
+
+const cloudronModel = CloudronModel.create(API_ORIGIN, localStorage.token);
+
+// 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>
+
+    <h1>{{ $t('settings.title') }}</h1>
+
+    <Section :title="$t('settings.appstoreAccount.title')">
+    </Section>
+
+    <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 />
+
+    <Section :title="$t('settings.privateDockerRegistry.title')">
+      <p v-html="$t('settings.privateDockerRegistry.description', { customAppsLink: 'https://docs.cloudron.io/custom-apps/tutorial/' })"></p>
+    </Section>
+  </div>
+</template>