Mercurial > gemma

comparison client/src/components/systemconfiguration/MapLayers.vue @ 3637:0e2605f6fddd configuration

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: configuration: look up wms capabilities and make layers configurable
author Markus Kottlaender <markus@intevation.de>
date Wed, 12 Jun 2019 12:08:50 +0200
parents a688a478e35f
children 32d7bb1afdc9
comparison
equal deleted inserted replaced
3631:9709081719ae 3637:0e2605f6fddd
3 <h5 class="py-2 px-3 mb-2 m-0"><translate>Map Layers</translate></h5> 3 <h5 class="py-2 px-3 mb-2 m-0"><translate>Map Layers</translate></h5>
4 <div class="px-3 container-fluid"> 4 <div class="px-3 container-fluid">
5 <div class="row"> 5 <div class="row">
6 <div class="col-sm-6"> 6 <div class="col-sm-6">
7 <div class="form-group"> 7 <div class="form-group">
8 <label for="ecdis-url" class="font-weight-bold">ECDIS URL</label> 8 <label for="ecdis-url" class="font-weight-bold">
9 ECDIS WMS URL
10 </label>
9 <input 11 <input
10 type="url" 12 type="url"
11 class="form-control" 13 class="form-control"
12 placeholder="https://..." 14 placeholder="https://..."
15 @input="lookupWMSCapabilities()"
13 v-model="config.ecdis_url" 16 v-model="config.ecdis_url"
14 /> 17 />
18 </div>
19 <label for="ecdis-layers">
20 <translate>Layers</translate>
21 <transition name="fade"
22 ><font-awesome-icon
23 icon="spinner"
24 spin
25 v-if="availableWMSLayersLoading"
26 class="ml-2"
27 /></transition>
28 </label>
29 <div class="container-fluid">
30 <div class="row">
31 <div
32 class="custom-control custom-checkbox col-sm-3"
33 v-for="layer in availableWMSLayers"
34 :key="'layer-' + layer"
35 >
36 <input
37 type="checkbox"
38 class="custom-control-input"
39 v-model="selectedWMSLayers"
40 :id="'layer-' + layer"
41 :value="layer"
42 />
43 <label class="custom-control-label" :for="'layer-' + layer">
44 {{ layer }}
45 </label>
46 </div>
47 </div>
15 </div> 48 </div>
16 </div> 49 </div>
17 </div> 50 </div>
18 </div> 51 </div>
19 <div class="mt-4 px-3"> 52 <div class="mt-4 px-3">
37 * 70 *
38 * Author(s): 71 * Author(s):
39 * Markus Kottländer <markus@intevation.de> 72 * Markus Kottländer <markus@intevation.de>
40 */ 73 */
41 import { mapState } from "vuex"; 74 import { mapState } from "vuex";
75 import WMSCapabilities from "ol/format/WMSCapabilities";
76 import { HTTP } from "@/lib/http";
77
78 const WMSCapabilitiesParser = new WMSCapabilities();
42 79
43 export default { 80 export default {
81 data() {
82 return {
83 selectedWMSLayers: [],
84 availableWMSLayers: [],
85 availableWMSLayersLoading: false,
86 lookupWMSCapabilitiesTimeout: null
87 };
88 },
44 computed: { 89 computed: {
45 ...mapState("application", ["config"]) 90 ...mapState("application", ["config"])
46 }, 91 },
47 methods: { 92 methods: {
93 lookupWMSCapabilities() {
94 if (this.lookupWMSCapabilitiesTimeout) {
95 clearTimeout(this.lookupWMSCapabilitiesTimeout);
96 }
97 this.lookupWMSCapabilitiesTimeout = setTimeout(() => {
98 let url;
99 try {
100 let urlParts = new URL(this.config.ecdis_url);
101 url =
102 urlParts.protocol +
103 "//" +
104 urlParts.host +
105 urlParts.pathname.trim("/") +
106 "/";
107 } catch (e) {
108 url = this.config.ecdis_url;
109 }
110 this.availableWMSLayersLoading = true;
111 HTTP.get(url + "?request=GetCapabilities&service=WMS")
112 .then(response => {
113 let capabilities = WMSCapabilitiesParser.read(response.data);
114 let layers = [];
115 capabilities.Capability.Layer.Layer.forEach(l =>
116 layers.push(l.Name)
117 );
118 this.availableWMSLayers = layers;
119 })
120 .catch(() => {
121 this.availableWMSLayers = [];
122 })
123 .finally(() => (this.availableWMSLayersLoading = false));
124 }, 500);
125 },
48 submit() { 126 submit() {
49 this.$store.dispatch("application/saveConfig", { 127 this.$store.dispatch("application/saveConfig", {
50 ecdis_url: this.config.ecdis_url 128 ecdis_url: this.config.ecdis_url,
129 ecdis_layers: this.selectedWMSLayers
130 .filter(l => this.availableWMSLayers.includes(l))
131 .join(",")
51 }); 132 });
52 } 133 }
134 },
135 mounted() {
136 this.selectedWMSLayers = this.config.ecdis_layers.split(",");
137 this.lookupWMSCapabilities();
53 } 138 }
54 }; 139 };
55 </script> 140 </script>