Mercurial > gemma
annotate client/src/components/layers/Layers.vue @ 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 | 85734c763652 |
children | c122a064fd5e |
rev | line source |
---|---|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
1480 | 2 <div |
3 :class="[ | |
4 'box ui-element rounded bg-white text-nowrap', | |
5 { expanded: showLayers } | |
6 ]" | |
7 > | |
3055
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
8 <div class="position-relative" style="width: 18rem; min-height: 350px;"> |
3167
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
9 <UIBoxHeader |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
10 icon="layer-group" |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
11 :title="label" |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
12 :closeCallback="close" |
3177
fc008b32c593
client: layers: loading animation for refreshing layer sources
Markus Kottlaender <markus@intevation.de>
parents:
3167
diff
changeset
|
13 :actions="[ |
fc008b32c593
client: layers: loading animation for refreshing layer sources
Markus Kottlaender <markus@intevation.de>
parents:
3167
diff
changeset
|
14 { callback: refreshLayers, icon: mapsLoading ? 'spinner' : 'sync' } |
fc008b32c593
client: layers: loading animation for refreshing layer sources
Markus Kottlaender <markus@intevation.de>
parents:
3167
diff
changeset
|
15 ]" |
3167
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
16 /> |
3055
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
17 <div class="small" v-if="openLayersMaps.length"> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
18 <Layerselect layerId="OPENSTREETMAP" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
19 <Layerselect layerId="INLANDECDIS" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
20 <Layerselect layerId="WATERWAYAREA" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
21 <Layerselect layerId="STRETCHES" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
22 <Layerselect layerId="FAIRWAYDIMENSIONSLOS3" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
23 <Layerselect layerId="FAIRWAYDIMENSIONSLOS2" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
24 <Layerselect layerId="FAIRWAYDIMENSIONSLOS1" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
25 <Layerselect layerId="WATERWAYAXIS" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
26 <Layerselect layerId="WATERWAYPROFILES" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
27 <Layerselect layerId="BOTTLENECKS" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
28 <Layerselect layerId="BOTTLENECKISOLINE" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
29 <Layerselect layerId="DIFFERENCES" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
30 <Layerselect layerId="BOTTLENECKSTATUS" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
31 <Layerselect layerId="DISTANCEMARKS" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
32 <Layerselect layerId="DISTANCEMARKSAXIS" /> |
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
33 <Layerselect layerId="GAUGES" /> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
34 </div> |
3055
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
35 <UISpinnerOverlay v-else style="top: 34px;" /> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 </div> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
37 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 </template> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 <script> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1361
diff
changeset
|
41 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 * without warranty, see README.md and license for details. |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
43 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 * SPDX-License-Identifier: AGPL-3.0-or-later |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 * License-Filename: LICENSES/AGPL-3.0.txt |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
46 * |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
47 * Copyright (C) 2018 by via donau |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 * – Österreichische Wasserstraßen-Gesellschaft mbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 * Software engineering by Intevation GmbH |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
50 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 * Author(s): |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 * Thomas Junk <thomas.junk@intevation.de> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 * Markus Kottländer <markus.kottlaender@intevation.de> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 */ |
3055
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
55 import { mapState } from "vuex"; |
3167
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
56 import { Vector as VectorLayer } from "ol/layer"; |
2870
35f6e4383161
layer structure overhaul
Thomas Junk <thomas.junk@intevation.de>
parents:
2851
diff
changeset
|
57 |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 export default { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 components: { |
1669
16fb9667ddf8
refac: use dynamic imports for components
Thomas Junk <thomas.junk@intevation.de>
parents:
1558
diff
changeset
|
60 Layerselect: () => import("./Layerselect") |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 computed: { |
2754
d0f6c222f4f9
client:correct a set of strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2534
diff
changeset
|
63 ...mapState("application", ["showLayers"]), |
3177
fc008b32c593
client: layers: loading animation for refreshing layer sources
Markus Kottlaender <markus@intevation.de>
parents:
3167
diff
changeset
|
64 ...mapState("map", ["openLayersMaps", "mapsLoading"]), |
3055
b3c24c47931c
client: layers legend: support multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
65 label() { |
2754
d0f6c222f4f9
client:correct a set of strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2534
diff
changeset
|
66 return this.$gettext("Layers"); |
d0f6c222f4f9
client:correct a set of strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2534
diff
changeset
|
67 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 methods: { |
2387
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2260
diff
changeset
|
70 close() { |
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2260
diff
changeset
|
71 this.$store.commit("application/showLayers", false); |
3167
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
72 }, |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
73 refreshLayers() { |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
74 this.openLayersMaps.forEach(map => { |
3177
fc008b32c593
client: layers: loading animation for refreshing layer sources
Markus Kottlaender <markus@intevation.de>
parents:
3167
diff
changeset
|
75 this.$store.commit("map/increaseMapsLoading"); |
3167
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
76 let layers = map.getLayers().getArray(); |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
77 for (let i = 0; i < layers.length; i++) { |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
78 let layer = layers[i]; |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
79 if ( |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
80 layer instanceof VectorLayer && |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
81 layer.get("source").loader_.name != "VOID" |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
82 ) { |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
83 layer.getSource().clear(true); |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
84 layer.getSource().refresh({ force: true }); |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
85 } |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
86 } |
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3055
diff
changeset
|
87 }); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 } |
2957
b74ebeb2bdc8
client: layers: improved structure of layer configuration
Markus Kottlaender <markus@intevation.de>
parents:
2952
diff
changeset
|
89 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 </script> |