Initial move from angular shell to vue

dashboard/src/views/SettingsView.vue

@@ -6,6 +6,7 @@ const t = i18n.t;
 
 import { ref, onMounted, watch } from 'vue';
 import { Dropdown } from 'pankow';
+import moment from 'moment-timezone';
 import Section from '../components/Section.vue';
 import CloudronAccount from '../components/CloudronAccount.vue';
 import SystemUpdate from '../components/SystemUpdate.vue';
@@ -15,7 +16,7 @@ import CloudronModel from '../models/CloudronModel.js';
 const cloudronModel = CloudronModel.create();
 
 // Timezone
-const allTimezones = window.timezones;
+const allTimezones = moment.tz.names().map(t => { return { id: t }; });
 const timeZone = ref('');
 const currentTimeZone = ref('');
 
@@ -92,8 +93,8 @@ onMounted(async () => {
     <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" />
+      <p v-html="$t('settings.timezone.description', { timeZone })"></p>
+      <Dropdown v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" />
     </Section>
 
     <Section :title="$t('settings.language.title')">