Mercurial > gemma
view client/src/components/gauge/Gauges.vue @ 2724:5bc657f60fd3
client: table body component: removed animation
since it causes weird visual behavior when filtering or changing pages
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 19 Mar 2019 12:52:22 +0100 |
parents | b79f5c5404c2 |
children | 85de42146bdb |
line wrap: on
line source
<template> <div :class="[ 'box ui-element rounded bg-white text-nowrap', { expanded: showGauges } ]" > <div style="width: 18rem"> <UIBoxHeader icon="ruler-vertical" title="Gauges" :closeCallback="close" /> <div class="box-body"> <div class="loading d-flex justify-content-center align-items-center" v-if="loading" > <font-awesome-icon icon="spinner" spin /> </div> <select @change="moveToGauge" v-model="selectedGaugeISRS" class="form-control font-weight-bold" > <option :value="null"> <translate>Select Gauge</translate> </option> <optgroup v-for="(gaugesForCountry, cc) in orderedGauges" :key="cc" :label="cc" > <option v-for="g in gaugesForCountry" :key="g.properties.isrs_code" :value="g.properties.isrs_code" > {{ gaugeLabel(g) }} </option> </optgroup> </select> <div v-if="selectedGaugeISRS" class="mt-2"> <hr class="mb-1" /> <div class="row no-gutters mb-2"> <div class="col-6 pr-1"> <small class="text-muted"><translate>From</translate>:</small> <input type="date" class="form-control form-control-sm small" :value="dateFrom && dateFrom.toISOString().split('T')[0]" @input="dateFrom = $event.target.valueAsDate" /> </div> <div class="col-6 pl-1"> <small class="text-muted"><translate>To</translate>:</small> <input type="date" class="form-control form-control-sm small" :value="dateTo && dateTo.toISOString().split('T')[0]" @input="dateTo = $event.target.valueAsDate" /> </div> </div> <button @click="showWaterlevelDiagram()" class="btn btn-sm btn-info d-block w-100" > <translate>Show Waterlevels</translate> </button> <hr /> <button class="btn btn-sm btn-info d-block w-100 mt-2" disabled> <translate>Show Hydrological Conditions</translate> </button> </div> </div> </div> </div> </template> <style lang="scss" scoped> .loading { background: rgba(255, 255, 255, 0.9); position: absolute; z-index: 99; top: 0; right: 0; bottom: 0; left: 0; } </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> */ import { mapState, mapGetters } from "vuex"; import { displayError } from "@/lib/errors.js"; export default { data() { return { loading: false }; }, computed: { ...mapState("application", ["showGauges", "activeSplitscreenId"]), ...mapState("gauges", ["gauges"]), ...mapGetters("gauges", ["selectedGauge"]), orderedGauges() { let orderedGauges = {}; this.gauges.forEach(g => { let isrsInfo = this.isrsInfo(g); if (orderedGauges.hasOwnProperty(isrsInfo.countryCode)) { orderedGauges[isrsInfo.countryCode].push(g); } else { orderedGauges[isrsInfo.countryCode] = [g]; } }); return orderedGauges; }, selectedGaugeISRS: { get() { return this.$store.state.gauges.selectedGaugeISRS; }, set(isrs) { this.$store.dispatch("gauges/selectedGaugeISRS", isrs); } }, dateFrom: { get() { return this.$store.state.gauges.dateFrom; }, set(date) { this.$store.commit("gauges/dateFrom", date); } }, dateTo: { get() { return this.$store.state.gauges.dateTo; }, set(date) { this.$store.commit("gauges/dateTo", date); } } }, watch: { selectedGaugeISRS() { if (this.activeSplitscreenId === "gauge-waterlevel") { this.showWaterlevelDiagram(); } } }, methods: { close() { this.$store.commit("application/showGauges", false); }, moveToGauge() { if (!this.selectedGauge) return; this.$store.commit("map/moveToExtent", { feature: this.selectedGauge, zoom: null, preventZoomOut: true }); }, showWaterlevelDiagram() { // for panning the map to the gauge on opening the diagram: needs to be // set outside of the expandCallback to not always refer to the currently // selectedGauge let coordinates = this.selectedGauge.geometry.coordinates; // configure splitscreen let splitscreenConf = { id: "gauge-waterlevel", component: "waterlevel", title: this.$gettext("Waterlevel") + ": " + this.gaugeLabel(this.selectedGauge), icon: "ruler-vertical", closeCallback: () => { this.$store.commit("gauges/selectedGaugeISRS", null); this.$store.commit("gauges/waterlevels", []); }, expandCallback: () => { this.$store.commit("map/moveMap", { coordinates, zoom: 17, preventZoomOut: true }); } }; this.$store.commit("application/addSplitscreen", splitscreenConf); this.$store.commit("application/activeSplitscreenId", splitscreenConf.id); this.$store.commit("application/splitscreenLoading", true); this.loading = true; this.$store.commit("application/showSplitscreen", true); this.$store .dispatch("gauges/loadWaterlevels") .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }) .finally(() => { this.$store.commit("application/splitscreenLoading", false); this.loading = false; }); }, gaugeLabel(gauge) { return `${gauge.properties.objname} (${this.isrsInfo(gauge).orc})`; }, isrsInfo(gauge) { let isrsInfo = gauge.id .split(".")[1] .replace(/[()]/g, "") .split(","); return { countryCode: isrsInfo[0], loCode: isrsInfo[1], fairwaySection: isrsInfo[2], orc: isrsInfo[3], hectometre: isrsInfo[4] }; } }, mounted() { this.$store.dispatch("gauges/loadGauges"); } }; </script>