From 70b8eb2d92d84f88debd69082748f1ff1f308b7f Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Mon, 14 Jan 2019 23:10:09 +0100
Subject: [PATCH] Stash

---
 src/views/Settings.vue | 200 +++++++++++++++++++++++++++--------------
 1 file changed, 131 insertions(+), 69 deletions(-)

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 6077f17..2b3045a 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,98 +1,134 @@
 <template>
     <v-container fluid class="no-padding">
         <v-layout row wrap>
+            <v-dialog v-model="isDialog" max-width="250px">
+                <v-card>
+                    <template v-if="whichDialog === LOCALE">
+                        <v-card-title>
+                            {{ $t('settings.locale') }}
+                        </v-card-title>
+                        <v-card-text>
+                            <v-select
+                                :items="i18nItems"
+                                v-model="locale"
+                                item-text="name"
+                                item-value="iso"
+                                required
+                                ></v-select>
+                        </v-card-text>
+                    </template>
+                    <template v-else-if="whichDialog === TILE_SERVER">
+                        <v-card-title>
+                            {{ $t('settings.tileServer') }}
+                        </v-card-title>
+                        <v-card-text>
+                            <v-select
+                                :items="tileServers"
+                                v-model="tileServer"
+                                :label="$t('settings.tileServer')"
+                                required
+                                ></v-select>
+
+                            <v-text-field
+                                :hint="$t('settings.customTileServerURLHint')"
+                                :label="$t('settings.customTileServerURL')"
+                                v-model="customTileServerURL"
+                                v-if="showCustomTileServerURLField"
+                                required
+                                >
+                            </v-text-field>
+                        </v-card-text>
+                    </template>
+                    <template v-else-if="whichDialog === DEFAULT_ORIENTATION">
+                        <v-card-title>
+                            {{ $t('settings.defaultOrientationMode') }}
+                        </v-card-title>
+                        <v-card-text>
+                            <v-select
+                                :items="orientationModes"
+                                v-model="defaultOrientationMode"
+                                required
+                                ></v-select>
+                        </v-card-text>
+                    </template>
+                    <template v-else-if="whichDialog === TILE_CACHING">
+                        <v-card-title>
+                            {{ $t('settings.tileCachingDuration') }}
+                        </v-card-title>
+                        <v-card-text>
+                            <v-select
+                                :items="tileCachingDurationOptions"
+                                v-model="tileCachingDuration"
+                                item-text="name"
+                                item-value="duration"
+                                required
+                                v-if="tileCachingEnabled"
+                                ></v-select>
+                        </v-card-text>
+                    </template>
+                    <v-card-actions>
+                        <v-btn color="primary" flat @click="isDialog = false">Close</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
             <v-flex xs12 sm4 offset-sm4 class="text-xs-center">
-                <form>
-                    <v-select
-                        :items="i18nItems"
-                        v-model="locale"
-                        item-text="name"
-                        item-value="iso"
-                        :label="$t('settings.locale')"
-                        required
-                        ></v-select>
+                <v-list subheader two-line>
+                    <v-subheader>{{ $t('settings.general') }}</v-subheader>
 
-                    <v-select
-                        :items="tileServers"
-                        v-model="tileServer"
-                        :label="$t('settings.tileServer')"
-                        required
-                        ></v-select>
-
-                    <v-select
-                        :items="orientationModes"
-                        v-model="defaultOrientationMode"
-                        :label="$t('settings.defaultOrientationMode')"
-                        required
-                        ></v-select>
-
-                    <v-select
-                        :items="tileCachingDurationOptions"
-                        v-model="tileCachingDuration"
-                        item-text="name"
-                        item-value="duration"
-                        :label="$t('settings.tileCachingDuration')"
-                        required
-                        v-if="tileCachingEnabled"
-                        ></v-select>
-
-                    <v-text-field
-                        :hint="$t('settings.customTileServerURLHint')"
-                        :label="$t('settings.customTileServerURL')"
-                        v-model="customTileServerURL"
-                        v-if="showCustomTileServerURLField"
-                        required
-                        >
-                    </v-text-field>
-
-                    <v-checkbox
-                        :label="$t('settings.skipOnboarding')"
-                        v-model="skipOnboarding"
-                        ></v-checkbox>
-                </form>
-
-                <v-list subheader>
-                    <v-subheader>Général</v-subheader>
-
-                    <v-list-tile>
+                    <v-list-tile @click="showDialog(LOCALE)">
                         <v-list-tile-content>
                             <v-list-tile-title>
                                 {{ $t('settings.locale') }}
                             </v-list-tile-title>
+                            <v-list-tile-sub-title>
+                                {{ localeName }}
+                            </v-list-tile-sub-title>
                         </v-list-tile-content>
                     </v-list-tile>
 
-                    <v-list-tile>
+                    <v-list-tile @click="showDialog(TILE_SERVER)">
                         <v-list-tile-content>
                             <v-list-tile-title>
                                 {{ $t('settings.tileServer') }}
                             </v-list-tile-title>
+                            <v-list-tile-sub-title>
+                                {{ tileServer }}
+                            </v-list-tile-sub-title>
                         </v-list-tile-content>
                     </v-list-tile>
 
-                    <v-list-tile>
+                    <v-list-tile @click="showDialog(DEFAULT_ORIENTATION)">
                         <v-list-tile-content>
                             <v-list-tile-title>
                                 {{ $t('settings.defaultOrientationMode') }}
                             </v-list-tile-title>
+                            <v-list-tile-sub-title>
+                                {{ defaultOrientationModeName }}
+                            </v-list-tile-sub-title>
                         </v-list-tile-content>
                     </v-list-tile>
 
-                    <v-list-tile>
+                    <v-list-tile v-if="tileCachingEnabled"  @click="showDialog(TILE_CACHING)">
                         <v-list-tile-content>
                             <v-list-tile-title>
                                 {{ $t('settings.tileCachingDuration') }}
                             </v-list-tile-title>
+                            <v-list-tile-sub-title>
+                                {{ tileCachingDurationName }}
+                            </v-list-tile-sub-title>
                         </v-list-tile-content>
                     </v-list-tile>
                 </v-list>
+                <v-divider></v-divider>
                 <PermissionsSwitches></PermissionsSwitches>
+                <v-divider></v-divider>
                 <v-list subheader>
-                    <v-subheader>Divers</v-subheader>
-                    <v-list-tile>
+                    <v-subheader>{{ $t('settings.misc') }}</v-subheader>
+                    <v-list-tile @click="dialog">
                         <v-list-tile-content>
                             <v-list-tile-title>
-                                {{ $t('settings.skipOnboarding') }}
+                                {{ $t('settings.showOnboarding') }}
                             </v-list-tile-title>
                         </v-list-tile-content>
                     </v-list-tile>
@@ -139,6 +175,11 @@ export default {
                 );
             },
         },
+        defaultOrientationModeName() {
+            return this.orientationModes.find(
+                item => item.value === this.defaultOrientationMode,
+            ).text;
+        },
         locale: {
             get() {
                 return this.$store.state.settings.locale;
@@ -147,6 +188,21 @@ export default {
                 this.$store.dispatch('setLocale', { locale });
             },
         },
+        localeName() {
+            return this.i18nItems.find(item => item.iso === this.locale).name;
+        },
+        orientationModes() {
+            return [
+                {
+                    text: this.$t('settings.fixedNorth'),
+                    value: false,
+                },
+                {
+                    text: this.$t('settings.autorotate'),
+                    value: true,
+                },
+            ];
+        },
         showCustomTileServerURLField() {
             return !(this.$store.state.settings.tileServer in TILE_SERVERS);
         },
@@ -187,6 +243,11 @@ export default {
                 },
             ];
         },
+        tileCachingDurationName() {
+            return this.tileCachingDurationOptions.find(
+                item => item.duration === this.tileCachingDuration,
+            ).name;
+        },
         tileServer: {
             get() {
                 const tileServerStore = this.$store.state.settings.tileServer;
@@ -208,7 +269,6 @@ export default {
         },
     },
     data() {
-        const $t = this.$t.bind(this);
         const i18nItems = [];
         Object.keys(AVAILABLE_LOCALES).forEach(iso => i18nItems.push({
             iso,
@@ -222,19 +282,21 @@ export default {
         );
 
         return {
+            DEFAULT_ORIENTATION: 'DEFAULT_ORIENTATION',
+            LOCALE: 'LOCALE',
+            TILE_CACHING: 'TILE_CACHING',
+            TILE_SERVER: 'TILE_SERVER',
+            isDialog: false,
+            whichDialog: null,
             i18nItems,
-            orientationModes: [
-                {
-                    text: $t('settings.fixedNorth'),
-                    value: false,
-                },
-                {
-                    text: $t('settings.autorotate'),
-                    value: true,
-                },
-            ],
             tileCachingEnabled,
         };
     },
+    methods: {
+        showDialog(which) {
+            this.isDialog = true;
+            this.whichDialog = which;
+        },
+    },
 };
 </script>