Mercurial > gemma
view client/src/components/importoverview/BottleneckDetail.vue @ 2894:95e40c87a943
client: applied component name change where it is used
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 02 Apr 2019 12:17:52 +0200 |
parents | 6538ee93df72 |
children | 399b03e59411 |
line wrap: on
line source
<template> <div :class="{ bottleneckdetails: true, full: !showLogs, split: showLogs }" > <div v-for="(bottleneck, index) in bottlenecks" :key="index" class="d-flex flex-row" > <div class="d-flex flex-column"> <div class="d-flex flex-row"> <div @click="showBottleneckDetails(index)" class="mt-auto mb-auto text-info text-left" > <font-awesome-icon class="pointer" v-if="showBottleneckDetail === index" icon="angle-down" fixed-width ></font-awesome-icon> <font-awesome-icon class="pointer" v-if="!(showBottleneckDetail === index)" icon="angle-right" fixed-width ></font-awesome-icon> </div> <a @click="moveToBottleneck(index)" href="#"> {{ bottleneck.properties.objnam }} </a> </div> <div class="ml-3 d-flex flex-row" v-if="showBottleneckDetail === index"> <table> <tr v-for="(info, index) in Object.keys(bottleneck.properties)" :key="index" class="mr-1 condensed text-muted" > <td class="text-left">{{ info }}</td> <td class="pl-3 text-left"> {{ bottleneck.properties[info] }} </td> </tr> </table> </div> </div> </div> </div> </template> <style lang="sass" scoped> .bottleneckdetails width: 100% overflow-y: auto .split max-height: 35vh .full max-height: 70vh </style> <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): * Thomas Junk <thomas.junk@intevation.de> */ import { LAYERS } from "@/store/map.js"; import { HTTP } from "@/lib/http"; import { WFS } from "ol/format.js"; import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter.js"; import { displayError } from "@/lib/errors.js"; import { mapState } from "vuex"; const NO_BOTTLENECK = -1; export default { name: "bottleneckdetails", props: ["entry"], data() { return { bottlenecks: [], showBottleneckDetail: NO_BOTTLENECK }; }, mounted() { this.loadBottlenecks(); }, computed: { ...mapState("imports", ["showLogs", "details"]) }, methods: { loadBottlenecks() { const generateFilter = () => { const { bottlenecks } = this.details.summary; if (bottlenecks.length === 1) return equalToFilter("bottleneck_id", bottlenecks[0]); const orExpressions = bottlenecks.map(x => { return equalToFilter("bottleneck_id", x); }); return orFilter(...orExpressions); }; const filterExpression = generateFilter(); const bottleneckFeatureCollectionRequest = new WFS().writeGetFeature({ srsName: "EPSG:4326", featureNS: "gemma", featurePrefix: "gemma", featureTypes: ["bottlenecks_geoserver"], outputFormat: "application/json", filter: filterExpression }); HTTP.post( "/internal/wfs", new XMLSerializer().serializeToString( bottleneckFeatureCollectionRequest ), { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } } ) .then(response => { this.bottlenecks = response.data.features; }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); }, moveToBottleneck(index) { this.$store.commit("map/setLayerVisible", LAYERS.BOTTLENECKS); this.moveToExtent(this.bottlenecks[index]); }, moveToExtent(feature) { this.$store.commit("map/moveToExtent", { feature: feature, zoom: 17, preventZoomOut: true }); }, showBottleneckDetails(index) { if (index == this.showBottleneckDetail) { this.showBottleneckDetail = false; return; } this.showBottleneckDetail = index; } } }; </script>