Mercurial > gemma
changeset 3637:0e2605f6fddd configuration
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 | 9709081719ae |
children | 158d55ec2042 |
files | client/src/components/systemconfiguration/MapLayers.vue schema/default_sysconfig.sql |
diffstat | 2 files changed, 88 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/MapLayers.vue Tue Jun 11 12:43:05 2019 +0200 +++ b/client/src/components/systemconfiguration/MapLayers.vue Wed Jun 12 12:08:50 2019 +0200 @@ -5,14 +5,47 @@ <div class="row"> <div class="col-sm-6"> <div class="form-group"> - <label for="ecdis-url" class="font-weight-bold">ECDIS URL</label> + <label for="ecdis-url" class="font-weight-bold"> + ECDIS WMS URL + </label> <input type="url" class="form-control" placeholder="https://..." + @input="lookupWMSCapabilities()" v-model="config.ecdis_url" /> </div> + <label for="ecdis-layers"> + <translate>Layers</translate> + <transition name="fade" + ><font-awesome-icon + icon="spinner" + spin + v-if="availableWMSLayersLoading" + class="ml-2" + /></transition> + </label> + <div class="container-fluid"> + <div class="row"> + <div + class="custom-control custom-checkbox col-sm-3" + v-for="layer in availableWMSLayers" + :key="'layer-' + layer" + > + <input + type="checkbox" + class="custom-control-input" + v-model="selectedWMSLayers" + :id="'layer-' + layer" + :value="layer" + /> + <label class="custom-control-label" :for="'layer-' + layer"> + {{ layer }} + </label> + </div> + </div> + </div> </div> </div> </div> @@ -39,17 +72,69 @@ * Markus Kottländer <markus@intevation.de> */ import { mapState } from "vuex"; +import WMSCapabilities from "ol/format/WMSCapabilities"; +import { HTTP } from "@/lib/http"; + +const WMSCapabilitiesParser = new WMSCapabilities(); export default { + data() { + return { + selectedWMSLayers: [], + availableWMSLayers: [], + availableWMSLayersLoading: false, + lookupWMSCapabilitiesTimeout: null + }; + }, computed: { ...mapState("application", ["config"]) }, methods: { + lookupWMSCapabilities() { + if (this.lookupWMSCapabilitiesTimeout) { + clearTimeout(this.lookupWMSCapabilitiesTimeout); + } + this.lookupWMSCapabilitiesTimeout = setTimeout(() => { + let url; + try { + let urlParts = new URL(this.config.ecdis_url); + url = + urlParts.protocol + + "//" + + urlParts.host + + urlParts.pathname.trim("/") + + "/"; + } catch (e) { + url = this.config.ecdis_url; + } + this.availableWMSLayersLoading = true; + HTTP.get(url + "?request=GetCapabilities&service=WMS") + .then(response => { + let capabilities = WMSCapabilitiesParser.read(response.data); + let layers = []; + capabilities.Capability.Layer.Layer.forEach(l => + layers.push(l.Name) + ); + this.availableWMSLayers = layers; + }) + .catch(() => { + this.availableWMSLayers = []; + }) + .finally(() => (this.availableWMSLayersLoading = false)); + }, 500); + }, submit() { this.$store.dispatch("application/saveConfig", { - ecdis_url: this.config.ecdis_url + ecdis_url: this.config.ecdis_url, + ecdis_layers: this.selectedWMSLayers + .filter(l => this.availableWMSLayers.includes(l)) + .join(",") }); } + }, + mounted() { + this.selectedWMSLayers = this.config.ecdis_layers.split(","); + this.lookupWMSCapabilities(); } }; </script>
--- a/schema/default_sysconfig.sql Tue Jun 11 12:43:05 2019 +0200 +++ b/schema/default_sysconfig.sql Wed Jun 12 12:08:50 2019 +0200 @@ -27,6 +27,7 @@ -- Settings -- INSERT INTO sys_admin.system_config VALUES ('ecdis_url', 'https://service.d4d-portal.info/wms/'); +INSERT INTO sys_admin.system_config VALUES ('ecdis_layers', 'd4d'); INSERT INTO sys_admin.system_config VALUES ('bn_revtime_multiplier', 1.5); INSERT INTO sys_admin.system_config VALUES ('gm_min_values_14d', 1224); INSERT INTO sys_admin.system_config VALUES ('gm_latest_hours', 24);