Mercurial > gemma
view client/src/components/map/MapPopup.vue @ 4837:3b0ec9b56d7c
Merged
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Fri, 08 Nov 2019 13:10:56 +0100 |
parents | d62de00e4c28 |
children | 19715261750e |
line wrap: on
line source
<template> <div class="map-popup rounded" ref="map-popup"> <UIBoxHeader :title="title" :closeCallback="close" small /> <div class="p-1 small text-nowrap" style="margin-top: -0.25rem"> <div class="d-flex flex-nowrap justify-content-between align-items-center mt-1" v-if="bottlenecks.length" v-for="bottleneck in bottlenecks" :key="bottleneck.get('objnam')" > <div class="mr-2"> <font-awesome-icon icon="ship" class="mr-1" fixed-width /> {{ bottleneck.get("objnam") }} </div> <div> <button class="btn btn-xs btn-info" v-tooltip="surveysLabel" @click="openSurveys(bottleneck)" > <font-awesome-icon icon="chart-area" fixed-width /> </button> <button class="btn btn-xs btn-info ml-1" v-tooltip="fairwayAvailabilityLabel" @click="openFairwayAvailabilityForBottleneck(bottleneck)" > <font-awesome-icon icon="chart-line" fixed-width /> </button> </div> </div> <div class="d-flex flex-nowrap justify-content-between align-items-center mt-1" v-if="gauges.length" v-for="gauge in gauges" :key="gauge.get('objname')" > <div class="mr-2"> <font-awesome-icon icon="ruler-vertical" class="mr-1" fixed-width /> {{ gauge.get("objname") }} </div> <button class="btn btn-xs btn-info" v-tooltip="waterlevelsLabel" @click="openGauges(gauge)" > <font-awesome-icon icon="ruler-vertical" fixed-width /> </button> </div> <div class="d-flex flex-nowrap justify-content-between align-items-center mt-1" v-if="stretches.length" v-for="stretch in stretches" :key="stretch.get('objnam')" > <div class="mr-2"> <font-awesome-icon icon="road" class="mr-1" fixed-width /> {{ stretch.get("objnam") }} </div> <button class="btn btn-xs btn-info" v-tooltip="fairwayAvailabilityLabel" @click="openFairwayAvailabilityForStretch(stretch)" > <font-awesome-icon icon="chart-line" fixed-width /> </button> </div> <div class="d-flex flex-nowrap justify-content-between align-items-center mt-1" v-if="sections.length" v-for="section in sections" :key="section.get('objnam')" > <div class="mr-2"> <font-awesome-icon icon="road" class="mr-1" fixed-width /> {{ section.get("objnam") }} </div> <button class="btn btn-xs btn-info" v-tooltip="fairwayAvailabilityLabel" @click="openFairwayAvailabilityForSection(section)" > <font-awesome-icon icon="chart-line" fixed-width /> </button> </div> </div> <div v-if="identifiedCoordinates" class="border-top text-muted p-1 coordinates" > Lat: {{ identifiedCoordinates[1].toFixed(8) }}, Lon: {{ identifiedCoordinates[0].toFixed(8) }} </div> </div> </template> <style lang="sass"> .map-popup position: absolute background: #fff min-width: 200px min-height: 85px box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2) border-top-left-radius: 0 !important margin-left: 10px &::before content: "" position: absolute top: 0 left: -10px border: 5px solid transparent border-top: 5px solid white border-right: 5px solid white .coordinates font-size: 70% </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> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; import Overlay from "ol/Overlay.js"; import { TYPES } from "@/store/fairwayavailability"; export default { computed: { ...mapState("map", [ "mapPopup", "identifiedFeatures", "identifiedCoordinates" ]), title() { return this.$gettext("Identified Features"); }, bottlenecks() { return this.identifiedFeatures.filter(f => /^bottlenecks/.test(f.getId()) ); }, gauges() { return this.identifiedFeatures.filter(f => /^gauges/.test(f.getId())); }, stretches() { return this.identifiedFeatures.filter(f => /^stretches/.test(f.getId())); }, sections() { return this.identifiedFeatures.filter(f => /^sections/.test(f.getId())); }, surveysLabel() { return this.$gettext("Surveys"); }, fairwayAvailabilityLabel() { return this.$gettext("Fairway Availability"); }, waterlevelsLabel() { return this.$gettext("Waterlevels"); } }, methods: { close() { this.mapPopup.setPosition(undefined); }, openSurveys(bottleneck) { this.$store.commit("application/showProfiles", true); this.$store.dispatch( "bottlenecks/setSelectedBottleneck", bottleneck.get("objnam") ); this.$store.dispatch("map/moveToBoundingBox", { boundingBox: bottleneck .getGeometry() .clone() .transform("EPSG:3857", "EPSG:4326") .getExtent(), zoom: 16 }); this.close(); }, openGauges(gauge) { this.$store.commit("application/showGauges", true); this.$store.dispatch("gauges/selectedGaugeISRS", gauge.get("isrs_code")); this.close(); }, openFairwayAvailability() { this.$store.commit("application/showFairwayDepth", true); this.close(); }, openFairwayAvailabilityForBottleneck(bottleneck) { this.$store.commit("fairwayavailability/type", TYPES.BOTTLENECK); this.$store.dispatch( "bottlenecks/setSelectedBottleneck", bottleneck.get("objnam") ); this.$store.dispatch("map/moveToBoundingBox", { boundingBox: bottleneck .getGeometry() .clone() .transform("EPSG:3857", "EPSG:4326") .getExtent(), zoom: 16 }); this.openFairwayAvailability(); }, openFairwayAvailabilityForStretch(stretch) { this.$store.commit("fairwayavailability/type", TYPES.STRETCH); this.$store.commit("imports/selectedStretchId", stretch.getId()); this.$store.dispatch("map/moveToFeauture", { feature: stretch, zoom: 17 }); this.openFairwayAvailability(); }, openFairwayAvailabilityForSection(section) { this.$store.commit("fairwayavailability/type", TYPES.SECTION); this.$store.commit("imports/selectedSectionId", section.getId()); this.$store.dispatch("map/moveToFeauture", { feature: section, zoom: 17 }); this.openFairwayAvailability(); } }, mounted() { const mapPopup = new Overlay({ element: this.$refs["map-popup"], autoPan: true, autoPanAnimation: { duration: 250 } }); this.$store.commit("map/mapPopup", mapPopup); } }; </script>