Mercurial > gemma
view client/src/components/importoverview/BottleneckDetail.vue @ 2705:eb3d7a429eb0
client: styling: fix z-index issues
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 18 Mar 2019 16:05:26 +0100 |
parents | 39a05f8c34e6 |
children | cefef8234d27 |
line wrap: on
line source
<template> <div class="bottleneckdetails"> <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)" class="small" 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 small 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> <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"; const NO_BOTTLENECK = -1; export default { name: "bottleneckdetails", props: ["entry", "details"], data() { return { bottlenecks: [], showBottleneckDetail: NO_BOTTLENECK }; }, mounted() { this.loadBottlenecks(); }, 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 = NO_BOTTLENECK; return; } this.showBottleneckDetail = index; } } }; </script> <style lang="scss" scoped> .bottleneckdetails { width: 615px; max-height: 15vh; overflow-y: auto; } </style>