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

View File

@ -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>