Mercurial > gemma
changeset 2598:5fa1ad39e1bc
client: added missing files for Gauges dialog
In 8774054959a7 I forgot to add these files......
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 12 Mar 2019 13:23:20 +0100 |
parents | 02d5de05291f |
children | 61aba7e78d3a |
files | client/src/components/gauge/Gauges.vue client/src/components/toolbar/Gauges.vue |
diffstat | 2 files changed, 203 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/gauge/Gauges.vue Tue Mar 12 13:23:20 2019 +0100 @@ -0,0 +1,169 @@ +<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="selectedGauge" + class="form-control font-weight-bold" + > + <option :value="null"> + <translate>Select Gauge</translate> + </option> + <option + v-for="g in gauges" + :key="g.properties.objname" + :value="g.properties.objname" + > + {{ g.properties.objname }} + </option> + </select> + <div v-if="selectedGauge" class="mt-2"> + <hr class="mb-1" /> + <small class="text-muted"> + <translate>Time period</translate>: + </small> + <select + v-model="waterlevelsTimePeriod" + class="form-control form-control-sm mb-2" + > + <option value="day">last day</option> + <option value="week">last week</option> + <option value="month">last month</option> + <option value="year">last year</option> + </select> + <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 } from "vuex"; + +export default { + data() { + return { + loading: false, + waterlevelsTimePeriod: "day" + }; + }, + computed: { + ...mapState("application", ["showGauges"]), + ...mapState("gauges", ["gauges", "selectedGauge"]), + selectedGauge: { + get() { + return this.$store.state.gauges.selectedGauge; + }, + set(name) { + this.$store.dispatch("gauges/selectedGauge", name); + } + } + }, + methods: { + close() { + this.$store.commit("application/showGauges", false); + }, + moveToGauge() { + let gauge = this.gauges.find( + g => g.properties.objname === this.selectedGauge + ); + if (!gauge) return; + this.$store.commit("map/moveToExtent", { + feature: gauge, + zoom: 17, + preventZoomOut: true + }); + }, + showWaterlevelDiagram() { + let gauge = this.gauges.find( + g => g.properties.objname === this.selectedGauge + ); + + // configure splitscreen + let splitscreenConf = { + id: "gauge-waterlevel", + component: "waterlevel", + title: this.selectedGauge, + icon: "ruler-vertical", + closeCallback: () => { + this.$store.commit("gauges/selectedGauge", null); + this.$store.commit("gauges/waterlevels", []); + }, + expandCallback: () => { + this.$store.commit("map/moveMap", { + coordinates: gauge.geometry.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", this.waterlevelsTimePeriod) + .then(() => { + this.$store.commit("application/splitscreenLoading", false); + this.loading = false; + }); + } + }, + mounted() { + this.$store.dispatch("gauges/loadGauges"); + } +}; +</script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/toolbar/Gauges.vue Tue Mar 12 13:23:20 2019 +0100 @@ -0,0 +1,34 @@ +<template> + <div + @click="$store.commit('application/showGauges', !showGauges)" + class="toolbar-button" + > + <font-awesome-icon + icon="ruler-vertical" + :class="{ 'text-info': showGauges }" + ></font-awesome-icon> + </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> + */ +import { mapState } from "vuex"; + +export default { + computed: { + ...mapState("application", ["showGauges"]) + } +}; +</script>