Mercurial > gemma
view client/src/components/fairway/AvailableFairwayDepthDialogue.vue @ 3309:80037790032d
client: fully implemented sections
- added map layer with new style
- implemented in identify tool, map popup and fairway availability dialog
- added sidebar menu item
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 17 May 2019 12:45:13 +0200 |
parents | fa7dc3f31ef3 |
children | 70676557a66f |
line wrap: on
line source
<template> <div :class="[ 'box ui-element rounded bg-white text-nowrap', { expanded: showFairwayDepth } ]" > <div style="width: 18rem"> <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" /> <div class="box-body"> <UISpinnerOverlay v-if="loading" /> <div class="mb-3 d-flex flex-row justify-content-between align-items-center" > <div> <input :value="$options.BOTTLENECKS" type="radio" v-model="type" /> <small class="ml-1 text-muted"> <translate>Bottlenecks</translate> </small> </div> <div> <input :value="$options.STRETCHES" type="radio" v-model="type" /> <small class="ml-1 text-muted"> <translate>Stretches</translate> </small> </div> <div> <input :value="$options.SECTIONS" type="radio" v-model="type" /> <small class="ml-1 text-muted"> <translate>Sections</translate> </small> </div> </div> <div class="d-flex flex-column"> <select :key="1" v-if="type === $options.BOTTLENECKS" @change="entrySelected" class="form-control form-control-sm font-weight-bold" v-model="selectedEntry" > <option :value="null">{{ empty }}</option> <optgroup v-for="(bottlenecksForCountry, cc) in orderedBottlenecks" :key="cc" :label="cc" > <option v-for="bn in bottlenecksForCountry" :key="bn.properties.name" :value="bn" > {{ bn.properties.name }} </option> </optgroup> </select> <select :key="2" v-else @change="entrySelected" class="form-control form-control-sm font-weight-bold" v-model="selectedEntry" > <option :value="null">{{ empty }}</option> <option v-for="(entry, index) in entries" :value="entry" :key="index" >{{ entry.properties.name }}</option > </select> </div> <div class="d-flex flex-column mt-3"> <div class="d-flex flex-row w-100"> <div class="d-flex flex-column mb-3 w-50 mr-1"> <small class="my-auto text-muted" ><translate>Type</translate></small > <select v-model="selectedFrequency" class="form-control form-control-sm" > <option v-for="(option, index) in $options.FREQUENCIES" :value="option" :key="index" ><translate>{{ option }}</translate></option > </select> </div> <div class="d-flex flex-column mb-3 w-50 ml-1"> <small class="my-auto text-muted" ><translate>LOS</translate></small > <select v-model="los" class="form-control form-control-sm"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </div> <div class="d-flex flex-row w-100"> <div class="d-flex flex-column w-50 mr-1"> <small for="from" class="my-auto text-muted" ><translate>Date from</translate></small ><input id="from" v-model="fromDate" class="form-control form-control-sm" type="date" /> </div> <div class="d-flex flex-column w-50 ml-1"> <small for="to" class="my-auto text-muted" ><translate>Date to</translate></small ><input id="to" v-model="toDate" class="form-control form-control-sm" type="date" /> </div> </div> </div> <div class="mt-3"> <button @click="openFairwaydepth" :disabled="isComplete" class="btn btn-info btn-sm w-100" > <translate>Available fairway depth</translate> </button> </div> <div class="mt-3"> <button @click="openFairwaydepthLNWL" :disabled="isComplete" class="btn btn-info btn-sm w-100" > <translate>Available fairway depth vs LNWL</translate> </button> </div> </div> </div> </div> </template> <style lang="scss" scoped> input, select { font-size: 0.8em; } </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): * Markus Kottländer <markus.kottlaender@intevation.de> * Thomas Junk <thomas.junk@intevation.de> */ import app from "@/main"; import { displayError } from "@/lib/errors"; import { mapState, mapGetters } from "vuex"; export default { data() { return { loading: false }; }, methods: { openFairwaydepthLNWL() { this.loading = true; this.$store .dispatch("fairwayavailability/loadAvailableFairwayDepth", { feature: this.selectedFairwayAvailabilityFeature, from: this.from, to: this.to, frequency: this.frequency, LOS: this.los }) .then(() => { this.$store.commit( "application/paneSetup", "AVAILABLEFAIRWAYDEPTHLNWL" ); }) .catch(error => { console.log(error); const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }) .finally(() => { this.loading = false; }); }, openFairwaydepth() { this.loading = true; this.$store .dispatch("fairwayavailability/loadAvailableFairwayDepth", { feature: this.selectedFairwayAvailabilityFeature, from: this.from, to: this.to, frequency: this.frequency, LOS: this.los }) .then(() => { this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH"); }) .catch(error => { console.log(error); const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }) .finally(() => { this.loading = false; }); }, close() { this.$store.commit("application/showFairwayDepth", false); this.$store.commit("application/showFairwayDepthLNWL", false); }, entrySelected() { if (this.type === this.$options.BOTTLENECKS) { this.openLayersMap() .getLayer("BOTTLENECKS") .setVisible(true); if (this.showProfiles) { this.$store.dispatch( "bottlenecks/setSelectedBottleneck", this.selectedFairwayAvailabilityFeature.properties.name ); } } if (this.type === this.$options.STRETCHES) { this.openLayersMap() .getLayer("STRETCHES") .setVisible(true); } if (this.type === this.$options.SECTIONS) { this.openLayersMap() .getLayer("SECTIONS") .setVisible(true); } if (this.selectedFairwayAvailabilityFeature) { this.$store.dispatch("map/moveToFeauture", { feature: this.selectedFairwayAvailabilityFeature, zoom: 17, preventZoomOut: true }); } }, setSelectedBottleneck() { const bn = this.bottlenecksList.filter( x => x.properties.name === this.selectedBottleneck )[0]; this.$store.commit( "fairwayavailability/setSelectedFairwayAvailability", bn ); }, setSelectedStretch() { const stretch = this.stretches.find(x => x.id === this.selectedStretchId); this.$store.commit( "fairwayavailability/setSelectedFairwayAvailability", stretch ); }, setSelectedSection() { const section = this.sections.find(x => x.id === this.selectedSectionId); this.$store.commit( "fairwayavailability/setSelectedFairwayAvailability", section ); } }, computed: { ...mapState("application", [ "showFairwayDepth", "paneSetup", "showProfiles" ]), ...mapState("fairwayavailability", [ "selectedFairwayAvailabilityFeature", "from", "to", "frequency", "LOS" ]), ...mapState("imports", [ "stretches", "sections", "selectedStretchId", "selectedSectionId" ]), ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]), ...mapGetters("map", ["openLayersMap"]), ...mapGetters("bottlenecks", ["orderedBottlenecks"]), isComplete() { return ( this.from == null || this.to == null || this.frequency == null || this.los == null || this.selectedFairwayAvailabilityFeature == null ); }, type: { get() { return this.$store.state.fairwayavailability.type; }, set(type) { this.$store.commit("fairwayavailability/type", type); } }, los: { get() { return this.LOS; }, set(value) { this.$store.commit("fairwayavailability/setLOS", value); } }, fromDate: { get() { return this.from; }, set(value) { this.$store.commit("fairwayavailability/setFrom", value); } }, toDate: { get() { return this.to; }, set(value) { this.$store.commit("fairwayavailability/setTo", value); } }, selectedFrequency: { get() { return this.frequency; }, set(value) { this.$store.commit("fairwayavailability/setFrequency", value); } }, selectedEntry: { get() { return this.selectedFairwayAvailabilityFeature; }, set(feature) { this.$store.commit( "fairwayavailability/setSelectedFairwayAvailability", feature ); } }, entries() { if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList; if (this.type === this.$options.STRETCHES) return this.stretches; if (this.type === this.$options.SECTIONS) return this.sections; return []; }, label() { return this.$gettext("Available fairway depth"); }, empty() { if (this.type === this.$options.BOTTLENECKS) return this.$gettext("Select bottleneck"); if (this.type === this.$options.STRETCHES) return this.$gettext("Select stretch"); return this.$gettext("Select section"); } }, watch: { selectedBottleneck() { this.type = this.$options.BOTTLENECKS; this.setSelectedBottleneck(); }, type() { if (this.type === this.$options.BOTTLENECKS && this.selectedBottleneck) { this.setSelectedBottleneck(); } else if ( this.type === this.$options.STRETCHES && this.selectedStretchId ) { this.openLayersMap() .getLayer("STRETCHES") .setVisible(true); this.setSelectedStretch(); } else if ( this.type === this.$options.SECTIONS && this.selectedSectionId ) { this.openLayersMap() .getLayer("SECTIONS") .setVisible(true); this.setSelectedSection(); } else { this.$store.commit( "fairwayavailability/setSelectedFairwayAvailability", null ); } }, showFairwayDepth() { if (this.showFairwayDepth) { this.loading = true; Promise.all([ this.$store.dispatch("bottlenecks/loadBottlenecksList"), this.$store.dispatch("imports/loadStretches"), this.$store.dispatch("imports/loadSections") ]) .then(() => { if (this.selectedBottleneck) this.setSelectedBottleneck(); }) .finally(() => (this.loading = false)); } } }, BOTTLENECKS: "bottlenecks", SECTIONS: "sections", STRETCHES: "stretches", AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"), FREQUENCIES: { MONTHLY: "monthly", QUARTERLY: "quarterly", YEARLY: "yearly" } }; </script>