Mercurial > gemma
view client/src/components/systemconfiguration/MapLayers.vue @ 4231:6f31a99cd92d
clinet: fix translations process and update source strings
* move strings for translations from *.po files to the component itself to let gettext() mark only the strings without the html elements.
(make makemessages complains to have html elements in the .po files and stops the process).
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 21 Aug 2019 11:13:12 +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>