2018-06-28 14:40:56 +02:00
|
|
|
<template>
|
|
|
|
<v-container fluid class="no-padding">
|
|
|
|
<v-layout row wrap>
|
2018-06-28 22:49:52 +02:00
|
|
|
<v-flex xs12 sm4 offset-sm4 class="text-xs-center">
|
2018-06-28 14:40:56 +02:00
|
|
|
<h2>{{ $t('menu.Settings') }}</h2>
|
|
|
|
<form>
|
|
|
|
<v-select
|
|
|
|
:items="i18nItems"
|
2018-07-10 14:32:48 +02:00
|
|
|
v-model="locale"
|
2018-07-20 15:37:14 +02:00
|
|
|
item-text="name"
|
|
|
|
item-value="iso"
|
2018-06-28 14:40:56 +02:00
|
|
|
:label="$t('settings.locale')"
|
|
|
|
required
|
|
|
|
></v-select>
|
|
|
|
|
2018-07-17 16:32:34 +02:00
|
|
|
<v-select
|
|
|
|
:items="tileServers"
|
|
|
|
v-model="tileServer"
|
|
|
|
:label="$t('settings.tileServer')"
|
|
|
|
required
|
|
|
|
></v-select>
|
|
|
|
|
2018-07-27 16:13:16 +02:00
|
|
|
<v-text-field
|
|
|
|
ref="shareLinkRef"
|
|
|
|
:hint="$t('settings.customTileServerURLHint')"
|
|
|
|
:label="$t('settings.customTileServerURL')"
|
|
|
|
v-model="customTileServerURL"
|
|
|
|
v-if="showCustomTileServerURLField"
|
|
|
|
required
|
|
|
|
>
|
|
|
|
</v-text-field>
|
2018-07-03 19:01:56 +02:00
|
|
|
|
2018-07-16 17:26:10 +02:00
|
|
|
<v-checkbox
|
|
|
|
:label="$t('settings.skipOnboarding')"
|
|
|
|
v-model="skipOnboarding"
|
|
|
|
></v-checkbox>
|
|
|
|
|
2018-07-27 16:13:16 +02:00
|
|
|
<PermissionsSwitches></PermissionsSwitches>
|
2018-06-28 14:40:56 +02:00
|
|
|
</form>
|
|
|
|
</v-flex>
|
|
|
|
</v-layout>
|
|
|
|
</v-container>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-07-17 16:32:34 +02:00
|
|
|
import { TILE_SERVERS } from '@/constants';
|
2018-07-20 15:37:14 +02:00
|
|
|
import { AVAILABLE_LOCALES } from '@/i18n';
|
2018-06-28 14:40:56 +02:00
|
|
|
|
2018-07-27 16:13:16 +02:00
|
|
|
import PermissionsSwitches from '@/components/PermissionsSwitches.vue';
|
|
|
|
|
2018-06-28 14:40:56 +02:00
|
|
|
export default {
|
2018-07-27 16:13:16 +02:00
|
|
|
components: {
|
|
|
|
PermissionsSwitches,
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
customTileServerURL: {
|
|
|
|
get() {
|
|
|
|
const tileServerStore = this.$store.state.settings.tileServer;
|
|
|
|
if (tileServerStore in TILE_SERVERS) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
const firstColon = tileServerStore.indexOf(':');
|
|
|
|
return tileServerStore.substring(firstColon + 1);
|
|
|
|
},
|
|
|
|
set(URL) {
|
|
|
|
this.$store.dispatch('setSetting', { setting: 'tileServer', value: `custom:${URL}` });
|
|
|
|
},
|
|
|
|
},
|
|
|
|
locale: {
|
|
|
|
get() {
|
|
|
|
return this.$store.state.settings.locale;
|
|
|
|
},
|
|
|
|
set(locale) {
|
|
|
|
this.$store.dispatch('setLocale', { locale });
|
|
|
|
},
|
|
|
|
},
|
|
|
|
showCustomTileServerURLField() {
|
|
|
|
return !(this.$store.state.settings.tileServer in TILE_SERVERS);
|
|
|
|
},
|
|
|
|
skipOnboarding: {
|
|
|
|
get() {
|
|
|
|
return this.$store.state.settings.skipOnboarding;
|
|
|
|
},
|
|
|
|
set(skipOnboarding) {
|
|
|
|
this.$store.dispatch('setSetting', { setting: 'skipOnboarding', value: skipOnboarding });
|
2018-08-01 11:35:49 +02:00
|
|
|
this.$store.dispatch('unmarkIntroAsSeen');
|
2018-07-27 16:13:16 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
tileServer: {
|
|
|
|
get() {
|
|
|
|
const tileServerStore = this.$store.state.settings.tileServer;
|
|
|
|
if (tileServerStore.startsWith('custom:')) {
|
|
|
|
return this.$t('settings.customTileServer');
|
|
|
|
}
|
|
|
|
return tileServerStore;
|
|
|
|
},
|
|
|
|
set(tileServer) {
|
|
|
|
if (tileServer in TILE_SERVERS) {
|
|
|
|
this.$store.dispatch('setSetting', { setting: 'tileServer', value: tileServer });
|
|
|
|
} else {
|
|
|
|
this.$store.dispatch('setSetting', { setting: 'tileServer', value: 'custom:' });
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
tileServers() {
|
|
|
|
return [].concat(Object.keys(TILE_SERVERS), this.$t('settings.customTileServer'));
|
|
|
|
},
|
|
|
|
},
|
2018-06-28 14:40:56 +02:00
|
|
|
data() {
|
|
|
|
return {
|
2018-07-20 15:37:14 +02:00
|
|
|
i18nItems: AVAILABLE_LOCALES,
|
2018-06-28 14:40:56 +02:00
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|