Reshuffle toplevel view names and routes

dashboard/src/views/SystemView.vue

@@ -4,113 +4,94 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, useTemplateRef, onMounted } from 'vue';
-import { Button, InputDialog } from 'pankow';
+import { ref, onMounted } from 'vue';
+import { SingleSelect } from 'pankow';
 import moment from 'moment-timezone';
-import { prettyDecimalSize, sleep } from 'pankow/utils';
+import SettingsItem from '../components/SettingsItem.vue';
 import Section from '../components/Section.vue';
-import SystemMetrics from '../components/SystemMetrics.vue';
-import DiskUsage from '../components/DiskUsage.vue';
-import SystemModel from '../models/SystemModel.js';
-import DashboardModel from '../models/DashboardModel.js';
+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 systemModel = SystemModel.create();
-const dashboardModel = DashboardModel.create();
+const cloudronModel = CloudronModel.create();
 
-const config = ref({});
-const info = ref({});
-const memory = ref({});
-const cpus = ref({});
-const uptime = ref('');
-const activeSince = ref('');
+// Timezone
+const allTimezones = moment.tz.names().map(t => { return { id: t }; });
+const timeZone = ref('');
+const currentTimeZone = ref('');
 
-const inputDialog = useTemplateRef('inputDialog');
-async function onReboot() {
-  const confirmed = await inputDialog.value.confirm({
-    title: t('main.rebootDialog.title'),
-    message: t('main.rebootDialog.description'),
-    confirmLabel: t('main.rebootDialog.rebootAction'),
-    confirmStyle: 'danger',
-    rejectLabel: t('main.dialog.cancel'),
-  });
+async function onTimeZoneChange(value) {
+  const [error] = await cloudronModel.setTimeZone(value);
+  if (error) return console.error(error);
 
-  if (!confirmed) return;
+  currentTimeZone.value = value;
+}
 
-  await systemModel.reboot();
+// Language
+const allLanguages = ref([]);
+const language = ref('');
+const currentLanguage = ref('');
 
-  // now poll until the backend does not respond anymore to trigger the unreachable overlay
-  while (true) {
-    const [error] = await dashboardModel.config();
-    if (error) break;
-    await sleep(1000);
-  }
+async function onLanguageChange(value) {
+  const [error] = await cloudronModel.setLanguage(value);
+  if (error) return console.error(error);
+
+  currentLanguage.value = value;
 }
 
 onMounted(async () => {
-  let [error, result] = await systemModel.memory();
+  let [error, result] = await cloudronModel.getTimeZone();
   if (error) return console.error(error);
-  memory.value = result;
 
-  [error, result] = await systemModel.cpus();
+  timeZone.value = result;
+  currentTimeZone.value = result;
+
+  [error, result] = await cloudronModel.languages();
   if (error) return console.error(error);
-  cpus.value = result;
 
-  [error, result] = await systemModel.info();
+  allLanguages.value = result.map(l => {
+    return {
+      id: l,
+      display: t(`lang.${l}`)
+    };
+  });
+
+  [error, result] = await cloudronModel.getLanguage();
   if (error) return console.error(error);
-  info.value = result;
 
-  uptime.value = moment.duration(info.value.uptimeSecs, 'seconds').locale(navigator.language).humanize();
-  activeSince.value = info.value.activationTime ? moment(info.value.activationTime).fromNow() : 'unknown';
-
-  [error, result] = await dashboardModel.config();
-  if (error) return console.error(error);
-  config.value = result;
+  language.value = result;
+  currentLanguage.value = result;
 });
 
 </script>
 
 <template>
   <div class="content">
-    <InputDialog ref="inputDialog"/>
+    <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" :searchThreshold="10" :options="allTimezones" option-key="id" option-label="id" @select="onTimeZoneChange" />
+        </div>
+      </SettingsItem>
 
-    <Section :title="$t('system.title')">
-      <template #header-buttons>
-        <Button href="/logs.html?id=box" target="_blank">{{ $t('main.action.logs') }}</Button>
-        <Button @click="onReboot()">{{ $t('main.action.reboot') }}</Button>
-      </template>
-
-      <div class="info-row">
-        <div class="info-label">{{ $t('system.info.platformVersion') }}</div>
-        <div class="info-value">v{{ config.version }} ({{ config.ubuntuVersion }})</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('system.info.vendor') }}</div>
-        <div class="info-value">{{ info.sysVendor }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('system.info.product') }}</div>
-        <div class="info-value">{{ info.productName }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">CPU</div>
-        <div class="info-value">{{ cpus.length ? `${cpus.length} Core "${cpus[0].model}"` : '' }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('system.info.memory') }}</div>
-        <div class="info-value">{{ prettyDecimalSize(memory.memory) }} RAM <span v-show="memory.swap">&amp; {{ prettyDecimalSize(memory.swap) }} Swap</span></div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('system.info.uptime') }}</div>
-        <div class="info-value">{{ uptime }}</div>
-      </div>
-      <div class="info-row" ng-show="info.activationTime">
-        <div class="info-label">{{ $t('system.info.activationTime') }}</div>
-        <div class="info-value">{{ activeSince }}</div>
-      </div>
+      <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" @select="onLanguageChange" />
+        </div>
+      </SettingsItem>
     </Section>
 
-    <SystemMetrics/>
-
-    <DiskUsage />
+    <CloudronAccount />
+    <SystemUpdate />
+    <PrivateRegistry />
   </div>
 </template>