Mercurial > gemma
view client/src/components/Statistics.vue @ 3191:c0cd5dfec153
statistics: persist fields to vuex
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 08 May 2019 11:25:11 +0200 |
parents | 505414dfe3e7 |
children | b0328646e34f |
line wrap: on
line source
<template> <div :class="[ 'box ui-element rounded bg-white text-nowrap', { expanded: showStatistics } ]" > <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"> <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 @change="entrySelected" class="form-control 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-column mb-3"> <small class="my-auto text-muted" ><translate>Type</translate></small > <select v-model="selectedFrequency" class="form-control"> <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"> <small for="from" class="my-auto text-muted" ><translate>Date from</translate></small ><input id="from" v-model="fromDate" class="form-control" type="date" /> </div> <div class="d-flex flex-column"> <small for="to" class="my-auto text-muted" ><translate>Date to</translate></small ><input id="to" v-model="toDate" class="form-control" type="date" /> </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> </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.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 { type: this.$options.BOTTLENECKS, loading: false }; }, methods: { openFairwaydepth() { this.loading = true; this.$store .dispatch("diagram/loadAvailableFairwayDepth", { feature: this.selectedFairwayAvailabilityFeature, from: this.from, to: this.to, frequency: this.frequency }) .then(() => { this.loading = false; 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}` }); }); }, close() { this.$store.commit("application/showStatistics", 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.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("diagram/setSelectedFairwayAvailability", bn); } }, computed: { ...mapState("application", ["showStatistics", "paneSetup", "showProfiles"]), ...mapState("diagram", [ "selectedFairwayAvailabilityFeature", "from", "to", "frequency" ]), ...mapState("imports", ["stretches"]), ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]), ...mapGetters("map", ["openLayersMap"]), isComplete() { return ( this.from == null || this.to == null || this.frequency == null || this.selectedFairwayAvailabilityFeature == null ); }, fromDate: { get() { return this.from; }, set(value) { this.$store.commit("diagram/setFrom", value); } }, toDate: { get() { return this.to; }, set(value) { this.$store.commit("diagram/setTo", value); } }, selectedFrequency: { get() { return this.frequency; }, set(value) { this.$store.commit("diagram/setFrequency", value); } }, selectedEntry: { get() { return this.selectedFairwayAvailabilityFeature; }, set(feature) { this.$store.commit("diagram/setSelectedFairwayAvailability", feature); } }, entries() { if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList; if (this.type === this.$options.STRETCHES) return this.stretches; return []; }, label() { return this.$gettext("Statistics"); }, empty() { if (this.type === this.$options.BOTTLENECKS) return this.$gettext("Select bottleneck"); if (this.type === this.$options.STRETCHES) return this.$gettext("Select strectch"); 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 { this.$store.commit("diagram/setSelectedFairwayAvailability", null); } this.openLayersMap() .getLayer("STRETCHES") .setVisible(true); }, showStatistics() { if (this.showStatistics) { this.loading = true; this.$store.dispatch("bottlenecks/loadBottlenecksList").then(() => { this.$store.dispatch("imports/loadStretches").then(() => { this.loading = false; if (this.selectedBottleneck) this.setSelectedBottleneck(); }); }); } } }, BOTTLENECKS: "bottlenecks", SECTIONS: "sections", STRETCHES: "stretches", AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"), FREQUENCIES: { MONTHLY: "monthly", QUARTERLY: "quarterly", YEARLY: "yearly" } }; </script> <style></style>