This commit is contained in:
Lucas Verney 2019-01-14 23:10:09 +01:00
parent 64fe52a0bf
commit 70b8eb2d92

View File

@ -1,17 +1,27 @@
<template> <template>
<v-container fluid class="no-padding"> <v-container fluid class="no-padding">
<v-layout row wrap> <v-layout row wrap>
<v-flex xs12 sm4 offset-sm4 class="text-xs-center"> <v-dialog v-model="isDialog" max-width="250px">
<form> <v-card>
<template v-if="whichDialog === LOCALE">
<v-card-title>
{{ $t('settings.locale') }}
</v-card-title>
<v-card-text>
<v-select <v-select
:items="i18nItems" :items="i18nItems"
v-model="locale" v-model="locale"
item-text="name" item-text="name"
item-value="iso" item-value="iso"
:label="$t('settings.locale')"
required required
></v-select> ></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 <v-select
:items="tileServers" :items="tileServers"
v-model="tileServer" v-model="tileServer"
@ -19,23 +29,6 @@
required required
></v-select> ></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 <v-text-field
:hint="$t('settings.customTileServerURLHint')" :hint="$t('settings.customTileServerURLHint')"
:label="$t('settings.customTileServerURL')" :label="$t('settings.customTileServerURL')"
@ -44,55 +37,98 @@
required required
> >
</v-text-field> </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-checkbox <v-flex xs12 sm4 offset-sm4 class="text-xs-center">
:label="$t('settings.skipOnboarding')" <v-list subheader two-line>
v-model="skipOnboarding" <v-subheader>{{ $t('settings.general') }}</v-subheader>
></v-checkbox>
</form>
<v-list subheader> <v-list-tile @click="showDialog(LOCALE)">
<v-subheader>Général</v-subheader>
<v-list-tile>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title> <v-list-tile-title>
{{ $t('settings.locale') }} {{ $t('settings.locale') }}
</v-list-tile-title> </v-list-tile-title>
<v-list-tile-sub-title>
{{ localeName }}
</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
<v-list-tile> <v-list-tile @click="showDialog(TILE_SERVER)">
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title> <v-list-tile-title>
{{ $t('settings.tileServer') }} {{ $t('settings.tileServer') }}
</v-list-tile-title> </v-list-tile-title>
<v-list-tile-sub-title>
{{ tileServer }}
</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
<v-list-tile> <v-list-tile @click="showDialog(DEFAULT_ORIENTATION)">
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title> <v-list-tile-title>
{{ $t('settings.defaultOrientationMode') }} {{ $t('settings.defaultOrientationMode') }}
</v-list-tile-title> </v-list-tile-title>
<v-list-tile-sub-title>
{{ defaultOrientationModeName }}
</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
<v-list-tile> <v-list-tile v-if="tileCachingEnabled" @click="showDialog(TILE_CACHING)">
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title> <v-list-tile-title>
{{ $t('settings.tileCachingDuration') }} {{ $t('settings.tileCachingDuration') }}
</v-list-tile-title> </v-list-tile-title>
<v-list-tile-sub-title>
{{ tileCachingDurationName }}
</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
<v-divider></v-divider>
<PermissionsSwitches></PermissionsSwitches> <PermissionsSwitches></PermissionsSwitches>
<v-divider></v-divider>
<v-list subheader> <v-list subheader>
<v-subheader>Divers</v-subheader> <v-subheader>{{ $t('settings.misc') }}</v-subheader>
<v-list-tile> <v-list-tile @click="dialog">
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title> <v-list-tile-title>
{{ $t('settings.skipOnboarding') }} {{ $t('settings.showOnboarding') }}
</v-list-tile-title> </v-list-tile-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
@ -139,6 +175,11 @@ export default {
); );
}, },
}, },
defaultOrientationModeName() {
return this.orientationModes.find(
item => item.value === this.defaultOrientationMode,
).text;
},
locale: { locale: {
get() { get() {
return this.$store.state.settings.locale; return this.$store.state.settings.locale;
@ -147,6 +188,21 @@ export default {
this.$store.dispatch('setLocale', { locale }); 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() { showCustomTileServerURLField() {
return !(this.$store.state.settings.tileServer in TILE_SERVERS); 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: { tileServer: {
get() { get() {
const tileServerStore = this.$store.state.settings.tileServer; const tileServerStore = this.$store.state.settings.tileServer;
@ -208,7 +269,6 @@ export default {
}, },
}, },
data() { data() {
const $t = this.$t.bind(this);
const i18nItems = []; const i18nItems = [];
Object.keys(AVAILABLE_LOCALES).forEach(iso => i18nItems.push({ Object.keys(AVAILABLE_LOCALES).forEach(iso => i18nItems.push({
iso, iso,
@ -222,19 +282,21 @@ export default {
); );
return { return {
DEFAULT_ORIENTATION: 'DEFAULT_ORIENTATION',
LOCALE: 'LOCALE',
TILE_CACHING: 'TILE_CACHING',
TILE_SERVER: 'TILE_SERVER',
isDialog: false,
whichDialog: null,
i18nItems, i18nItems,
orientationModes: [
{
text: $t('settings.fixedNorth'),
value: false,
},
{
text: $t('settings.autorotate'),
value: true,
},
],
tileCachingEnabled, tileCachingEnabled,
}; };
}, },
methods: {
showDialog(which) {
this.isDialog = true;
this.whichDialog = which;
},
},
}; };
</script> </script>