Mercurial > gemma

changeset 3177:fc008b32c593

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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;
     },