Mercurial > gemma
view client/src/components/systemconfiguration/MapLayers.vue @ 4434:0ca5e6c4f195
Added tag v4-preview20190918 for changeset b5619087e3e9
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Wed, 18 Sep 2019 18:04:39 +0200 |
parents | efe0904b1d45 |
children |
line wrap: on
line source
<template> <div class="d-flex flex-column py-4"> <div class="px-3 container-fluid"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <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_wms_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-4" 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 text-break" :for="'layer-' + layer" > {{ layer }} </label> </div> </div> </div> </div> </div> </div> <div class="mt-4 px-3"> <a @click.prevent="submit" class="btn btn-info btn-sm text-white"> <translate>Send</translate> </a> <a @click.prevent="reset" class="btn btn-outline-info btn-sm ml-2"> <translate>Reset to defaults</translate> </a> </div> </div> </template> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus@intevation.de> */ import { mapState } from "vuex"; import WMSCapabilities from "ol/format/WMSCapabilities"; import { HTTP } from "@/lib/http"; import defaults from "./defaults"; const WMSCapabilitiesParser = new WMSCapabilities(); export default { data() { return { selectedWMSLayers: [], availableWMSLayers: [], availableWMSLayersLoading: false, lookupWMSCapabilitiesTimeout: null, wmsVersion: "" }; }, 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_wms_url); url = urlParts.protocol + "//" + urlParts.host + urlParts.pathname.trim("/") + "/"; } catch (e) { url = this.config.ecdis_wms_url; } this.availableWMSLayersLoading = true; HTTP.get(url + "?request=GetCapabilities&service=WMS") .then(response => { let capabilities = WMSCapabilitiesParser.read(response.data); this.wmsVersion = capabilities.version; this.availableWMSLayers = []; this.getLayersRecursive(capabilities.Capability.Layer.Layer); }) .catch(() => { this.availableWMSLayers = []; }) .finally(() => (this.availableWMSLayersLoading = false)); }, 500); }, getLayersRecursive(layers) { layers.forEach(l => { if (l.hasOwnProperty("Layer")) { this.getLayersRecursive(l.Layer); } else { this.availableWMSLayers.push(l.Name); } }); }, reset() { this.config.ecdis_wms_url = defaults.ecdis_wms_url; let ecdisWmsParams = JSON.parse(defaults.ecdis_wms_params); this.selectedWMSLayers = ecdisWmsParams.LAYERS.split(","); this.lookupWMSCapabilities(); }, submit() { const layers = this.selectedWMSLayers .filter(l => this.availableWMSLayers.find(al => al === l)) .join(","); const wmsParams = JSON.stringify({ LAYERS: layers, VERSION: this.wmsVersion, TILED: true }); this.$store .dispatch("application/saveConfig", { ecdis_wms_url: this.config.ecdis_wms_url, ecdis_wms_params: wmsParams }) .then(() => { this.config.ecdis_wms_params = wmsParams; }); } }, mounted() { let ecdisWmsParams = JSON.parse(this.config.ecdis_wms_params); if (ecdisWmsParams.LAYERS) { this.selectedWMSLayers = ecdisWmsParams.LAYERS.split(","); } this.lookupWMSCapabilities(); } }; </script>