Mercurial > gemma
changeset 3177:fc008b32c593
client: layers: loading animation for refreshing layer sources
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 07 May 2019 12:18:07 +0200 |
parents | 1cb6676d1510 |
children | 5ec34e08b01d |
files | client/src/components/layers/Layers.vue client/src/components/map/Map.vue client/src/components/ui/UIBoxHeader.vue client/src/store/map.js |
diffstat | 4 files changed, 22 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/layers/Layers.vue Mon May 06 18:18:17 2019 +0200 +++ b/client/src/components/layers/Layers.vue Tue May 07 12:18:07 2019 +0200 @@ -10,7 +10,9 @@ icon="layer-group" :title="label" :closeCallback="close" - :actions="[{ callback: refreshLayers, icon: 'sync' }]" + :actions="[ + { callback: refreshLayers, icon: mapsLoading ? 'spinner' : 'sync' } + ]" /> <div class="small" v-if="openLayersMaps.length"> <Layerselect layerId="OPENSTREETMAP" /> @@ -59,7 +61,7 @@ }, computed: { ...mapState("application", ["showLayers"]), - ...mapState("map", ["openLayersMaps"]), + ...mapState("map", ["openLayersMaps", "mapsLoading"]), label() { return this.$gettext("Layers"); } @@ -70,6 +72,7 @@ }, refreshLayers() { this.openLayersMaps.forEach(map => { + this.$store.commit("map/increaseMapsLoading"); let layers = map.getLayers().getArray(); for (let i = 0; i < layers.length; i++) { let layer = layers[i];
--- a/client/src/components/map/Map.vue Mon May 06 18:18:17 2019 +0200 +++ b/client/src/components/map/Map.vue Tue May 07 12:18:07 2019 +0200 @@ -15,6 +15,7 @@ background-image: linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8), linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8) background-size: 20px 20px background-position: 0 0, 10px 10px + &.nocursor cursor: none </style> @@ -175,6 +176,10 @@ }); this.map.getLayer = id => this.layers.get(id); + this.map.on("rendercomplete", () => { + this.$store.commit("map/decreaseMapsLoading"); + }); + // store map position on every move // will be obsolete once we abandoned the separated admin context this.map.on("moveend", event => {
--- a/client/src/components/ui/UIBoxHeader.vue Mon May 06 18:18:17 2019 +0200 +++ b/client/src/components/ui/UIBoxHeader.vue Tue May 07 12:18:07 2019 +0200 @@ -16,7 +16,10 @@ :key="index" @click="action.callback" > - <font-awesome-icon :icon="action.icon" /> + <font-awesome-icon + :icon="action.icon" + :spin="action.icon === 'spinner'" + /> </span> <span class="box-control"
--- a/client/src/store/map.js Mon May 06 18:18:17 2019 +0200 +++ b/client/src/store/map.js Tue May 07 12:18:07 2019 +0200 @@ -32,6 +32,7 @@ openLayersMaps: [], syncedMaps: [], syncedView: null, + mapsLoading: 0, initialLoad: true, extent: { lat: 6155376, @@ -63,6 +64,13 @@ } }, mutations: { + increaseMapsLoading: state => { + state.mapsLoading++; + }, + decreaseMapsLoading: state => { + state.mapsLoading--; + if (state.mapsLoading < 0) state.mapsLoading = 0; + }, initialLoad: (state, initialLoad) => { state.initialLoad = initialLoad; },