feat: populate options for advanced settings modal

src/_components/modals/AdvancedSettings.vue

@@ -4,7 +4,7 @@
     name="advanced-settings"
     :adaptive="true"
     width="90%"
-    maxWidth="600"
+    :maxWidth="600"
     height="auto"
   >
     <a class="close-btn" @click="hide">
@@ -21,20 +21,49 @@
           :placeholder="messages.field_label_bubble_name"
         />
       </div>
-      <div class="form-group">
-        <v-select :placeholder="messages.field_label_network_domain"></v-select>
+      <div class="form-group" v-if="domains">
+        <v-select
+          :placeholder="messages.field_label_network_domain"
+          :options="domains"
+          label="name"
+        >
+        </v-select>
       </div>
-      <div class="form-group">
-        <v-select :placeholder="messages.field_label_region"></v-select>
+      <div class="form-group" v-if="nearestRegions">
+        <v-select
+          :placeholder="messages.field_label_region"
+          :options="nearestRegions"
+          label="name"
+        >
+          <template v-slot:option="option">
+            {{ option.name }} {{ regionDistance(option.uuid) }}
+          </template>
+        </v-select>
       </div>
-      <div class="form-group">
-        <v-select :placeholder="messages.field_label_locale"></v-select>
+      <div class="form-group" v-if="localeTexts">
+        <v-select
+          :placeholder="messages.field_label_locale"
+          :options="localeTexts"
+          label="label"
+        >
+        </v-select>
       </div>
-      <div class="form-group">
-        <v-select :placeholder="messages.field_label_timezone"></v-select>
+      <div class="form-group" v-if="timezoneObjects">
+        <v-select
+          :placeholder="messages.field_label_timezone"
+          :options="timezoneObjects"
+          :reduce="(tz) => tz.timezoneId"
+          label="timezoneDescription"
+          type="text"
+          name="timezone"
+        ></v-select>
       </div>
-      <div class="form-group">
-        <v-select :placeholder="messages.field_label_footprint"></v-select>
+      <div class="form-group" v-if="footprintObjects">
+        <v-select
+          :placeholder="messages.field_label_footprint"
+          :options="footprintObjects"
+          label="localName"
+        ></v-select>
       </div>
       <div class="form-group">
         <v-select
@@ -100,7 +129,8 @@
 </style>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
+import { util } from '~/_helpers';
 
 import { Button, Input, Checkbox } from '../shared';
 
@@ -111,20 +141,121 @@ export default {
     Checkbox,
   },
 
+  data: () => ({}),
+
   computed: {
-    ...mapState('system', ['configs', 'messages']),
+    ...mapState('system', ['configs', 'messages', 'locales', 'timezones']),
+    ...mapState('domains', ['domains']),
+    ...mapState('networks', ['nearestRegions']),
+    ...mapState('footprints', ['footprints']),
+
+    timezoneObjects: function() {
+      const tz_objects = [];
+      for (let i = 0; i < this.timezones.length; i++) {
+        tz_objects.push({
+          timezoneId: this.timezones[i],
+          timezoneDescription: this.tzDescription(this.timezones[i]),
+        });
+      }
+      return tz_objects;
+    },
+
+    localeTexts: function() {
+      return this.locales
+        ? this.locales.map((locale) => ({
+            ...locale,
+            label: this.messages['locale_' + locale.localeCode],
+          }))
+        : [];
+    },
+
+    footprintObjects: function() {
+      return this.footprints
+        ? this.footprints.map((footprint) => ({
+            ...footprint,
+            localName: this.messages['footprint_name_' + footprint.name],
+            description: this.messages[
+              'footprint_description_' + footprint.name
+            ],
+          }))
+        : [];
+    },
   },
 
   methods: {
+    ...mapActions('domains', ['getAllDomains']),
+    ...mapActions('networks', ['getNearestRegions']),
+    ...mapActions('footprints', ['getAllFootprints']),
+
     show() {
       this.$modal.show('advanced-settings');
     },
     hide() {
       this.$modal.hide('advanced-settings');
     },
+
+    initDefaults() {
+      const currentUser = util.currentUser();
+
+      this.getAllDomains({
+        userId: currentUser.uuid,
+        messages: this.messages,
+        errors: this.errors,
+      });
+      this.getNearestRegions({
+        footprintId: null,
+        messages: this.messages,
+        errors: this.errors,
+      });
+      this.getAllFootprints({
+        userId: currentUser.uuid,
+        messages: this.messages,
+        errors: this.errors,
+      });
+    },
+
+    findRegion(uuid) {
+      if (this.nearestRegions) {
+        for (let i = 0; i < this.nearestRegions.length; i++) {
+          if (this.nearestRegions[i].uuid === uuid)
+            return this.nearestRegions[i];
+        }
+      }
+      if (uuid !== null) console.log('findRegion: uuid not found: ' + uuid);
+      return null;
+    },
+    findRegionName(uuid) {
+      const region = this.findRegion(uuid);
+      return region !== null && typeof region.name !== 'undefined'
+        ? region.name
+        : null;
+    },
+    regionDistance(uuid) {
+      const region = this.findRegion(uuid);
+      if (region === null) return null;
+      return (
+        '(~' +
+        +(region.distance / 1000).toFixed(0) +
+        ' ' +
+        this.messages.msg_km_distance_away +
+        ')'
+      );
+    },
+
+    tzDescription(tz) {
+      return (
+        this.messages['tz_name_' + tz] +
+        ' - ' +
+        this.messages['tz_description_' + tz]
+      );
+    },
   },
 
   mounted() {
+    this.initDefaults();
+    this.show();
   },
+
+  watch: {},
 };
 </script>