Maps: Add style to settings
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer
parent
09e2385c67
commit
5bea7d2a59
|
|
@ -1,4 +1,5 @@
|
|||
theme: default
|
||||
language: en
|
||||
maps:
|
||||
animate: 5000
|
||||
animate: 0
|
||||
style: streets
|
||||
|
|
|
|||
|
|
@ -38,17 +38,19 @@
|
|||
}
|
||||
},
|
||||
data() {
|
||||
const s = this.$config.values.settings.maps;
|
||||
|
||||
return {
|
||||
initialized: false,
|
||||
map: null,
|
||||
markers: {},
|
||||
markersOnScreen: {},
|
||||
loading: false,
|
||||
url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=xCDwZsNKW3rlveVG0WUU',
|
||||
url: 'https://api.maptiler.com/maps/' + s.style + '/{z}/{x}/{y}.png?key=xCDwZsNKW3rlveVG0WUU',
|
||||
attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
|
||||
options: {
|
||||
container: "map",
|
||||
style: "https://api.maptiler.com/maps/streets/style.json?key=xCDwZsNKW3rlveVG0WUU",
|
||||
style: "https://api.maptiler.com/maps/" + s.style + "/style.json?key=xCDwZsNKW3rlveVG0WUU",
|
||||
attributionControl: true,
|
||||
customAttribution: this.attribution,
|
||||
zoom: 0,
|
||||
|
|
@ -63,7 +65,7 @@
|
|||
search: this.$gettext("Search"),
|
||||
},
|
||||
config: this.$config.values,
|
||||
settings: this.$config.values.settings.maps,
|
||||
settings: s,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
<template>
|
||||
<div class="p-tab p-settings-general">
|
||||
<v-container fluid>
|
||||
<v-form lazy-validation dense
|
||||
ref="form" class="p-form-settings" accept-charset="UTF-8"
|
||||
@submit.prevent="save">
|
||||
<v-card flat tile class="px-1 application">
|
||||
<v-card-title primary-title>
|
||||
<h3 class="body-2 mb-0">User Interface</h3>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-actions>
|
||||
<v-layout wrap align-center>
|
||||
<v-flex xs12 sm6 class="pr-3">
|
||||
<v-flex xs12 sm6 class="px-2">
|
||||
<v-select
|
||||
:items="options.languages"
|
||||
:label="labels.language"
|
||||
|
|
@ -15,7 +20,7 @@
|
|||
></v-select>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs12 sm6 class="pr-3">
|
||||
<v-flex xs12 sm6 class="px-2">
|
||||
<v-select
|
||||
:items="options.themes"
|
||||
:label="labels.theme"
|
||||
|
|
@ -24,8 +29,18 @@
|
|||
flat
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<v-flex xs12 sm6 class="pr-3">
|
||||
<v-card flat tile class="mt-0 px-1 application">
|
||||
<v-card-title primary-title>
|
||||
<h3 class="body-2 mb-0">Places</h3>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-actions>
|
||||
<v-layout wrap align-center>
|
||||
<v-flex xs12 sm6 class="px-2">
|
||||
<v-select
|
||||
:items="options.mapsAnimate"
|
||||
:label="labels.mapsAnimate"
|
||||
|
|
@ -34,17 +49,30 @@
|
|||
flat
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<v-flex xs12 sm6 class="px-2">
|
||||
<v-select
|
||||
:items="options.mapsStyle"
|
||||
:label="labels.mapsStyle"
|
||||
color="secondary-dark"
|
||||
v-model="settings.maps.style"
|
||||
flat
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<v-container fluid>
|
||||
<v-btn color="secondary-dark"
|
||||
class="white--text ml-0 mt-2"
|
||||
depressed
|
||||
class="ml-1 mt-0"
|
||||
depressed dark
|
||||
@click.stop="save">
|
||||
<translate>Save</translate>
|
||||
<v-icon right dark>save</v-icon>
|
||||
</v-btn>
|
||||
</v-form>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -62,7 +90,8 @@
|
|||
labels: {
|
||||
language: this.$gettext("Language"),
|
||||
theme: this.$gettext("Theme"),
|
||||
mapsAnimate: this.$gettext("Maps Animation"),
|
||||
mapsAnimate: this.$gettext("Animation"),
|
||||
mapsStyle: this.$gettext("Style"),
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
@ -76,7 +105,7 @@
|
|||
this.settings.save().then((s) => {
|
||||
this.$config.updateSettings(s.getValues(), this.$vuetify);
|
||||
|
||||
if(reload) {
|
||||
if (reload) {
|
||||
this.$notify.info(this.$gettext("Reloading..."));
|
||||
this.$notify.blockUI();
|
||||
setTimeout(() => window.location.reload(), 100);
|
||||
|
|
|
|||
|
|
@ -54,15 +54,33 @@
|
|||
},
|
||||
{
|
||||
"text": "Fast",
|
||||
"value": 5000
|
||||
"value": 2500
|
||||
},
|
||||
{
|
||||
"text": "Medium",
|
||||
"value": 10000
|
||||
"value": 6250
|
||||
},
|
||||
{
|
||||
"text": "Slow",
|
||||
"value": 15000
|
||||
"value": 10000
|
||||
}
|
||||
],
|
||||
"mapsStyle": [
|
||||
{
|
||||
"text": "Streets",
|
||||
"value": "streets"
|
||||
},
|
||||
{
|
||||
"text": "Hybrid",
|
||||
"value": "hybrid"
|
||||
},
|
||||
{
|
||||
"text": "Topographic",
|
||||
"value": "topo"
|
||||
},
|
||||
{
|
||||
"text": "Moonlight",
|
||||
"value": "darkmatter"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import (
|
|||
|
||||
type MapsSettings struct {
|
||||
Animate int `json:"animate" yaml:"animate"`
|
||||
Style string `json:"style" yaml:"style"`
|
||||
}
|
||||
|
||||
// Settings contains Web UI settings
|
||||
|
|
@ -27,6 +28,7 @@ func NewSettings() *Settings {
|
|||
Language: "en",
|
||||
Maps: MapsSettings{
|
||||
Animate: 0,
|
||||
Style: "streets",
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
internal/config/testdata/configEmpty.yml
vendored
1
internal/config/testdata/configEmpty.yml
vendored
|
|
@ -2,3 +2,4 @@ theme: lavendel
|
|||
language: german
|
||||
maps:
|
||||
animate: 0
|
||||
style: streets
|
||||
|
|
|
|||
Loading…
Reference in a new issue