Mercurial > gemma

comparison client/src/components/gauge/Gauges.vue @ 2598:5fa1ad39e1bc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
children 85f9bf4a6eba
comparison
equal deleted inserted replaced
2597:02d5de05291f 2598:5fa1ad39e1bc
1 <template>
2 <div
3 :class="[
4 'box ui-element rounded bg-white text-nowrap',
5 { expanded: showGauges }
6 ]"
7 >
8 <div style="width: 18rem">
9 <UIBoxHeader
10 icon="ruler-vertical"
11 title="Gauges"
12 :closeCallback="close"
13 />
14 <div class="box-body">
15 <div
16 class="loading d-flex justify-content-center align-items-center"
17 v-if="loading"
18 >
19 <font-awesome-icon icon="spinner" spin />
20 </div>
21 <select
22 @change="moveToGauge"
23 v-model="selectedGauge"
24 class="form-control font-weight-bold"
25 >
26 <option :value="null">
27 <translate>Select Gauge</translate>
28 </option>
29 <option
30 v-for="g in gauges"
31 :key="g.properties.objname"
32 :value="g.properties.objname"
33 >
34 {{ g.properties.objname }}
35 </option>
36 </select>
37 <div v-if="selectedGauge" class="mt-2">
38 <hr class="mb-1" />
39 <small class="text-muted">
40 <translate>Time period</translate>:
41 </small>
42 <select
43 v-model="waterlevelsTimePeriod"
44 class="form-control form-control-sm mb-2"
45 >
46 <option value="day">last day</option>
47 <option value="week">last week</option>
48 <option value="month">last month</option>
49 <option value="year">last year</option>
50 </select>
51 <button
52 @click="showWaterlevelDiagram()"
53 class="btn btn-sm btn-info d-block w-100"
54 >
55 <translate>Show Waterlevels</translate>
56 </button>
57 <hr />
58 <button class="btn btn-sm btn-info d-block w-100 mt-2" disabled>
59 <translate>Show Hydrological Conditions</translate>
60 </button>
61 </div>
62 </div>
63 </div>
64 </div>
65 </template>
66
67 <style lang="scss" scoped>
68 .loading {
69 background: rgba(255, 255, 255, 0.9);
70 position: absolute;
71 z-index: 99;
72 top: 0;
73 right: 0;
74 bottom: 0;
75 left: 0;
76 }
77 </style>
78
79 <script>
80 /* This is Free Software under GNU Affero General Public License v >= 3.0
81 * without warranty, see README.md and license for details.
82 *
83 * SPDX-License-Identifier: AGPL-3.0-or-later
84 * License-Filename: LICENSES/AGPL-3.0.txt
85 *
86 * Copyright (C) 2018 by via donau
87 * – Österreichische Wasserstraßen-Gesellschaft mbH
88 * Software engineering by Intevation GmbH
89 *
90 * Author(s):
91 * Markus Kottländer <markus.kottlaender@intevation.de>
92 */
93 import { mapState } from "vuex";
94
95 export default {
96 data() {
97 return {
98 loading: false,
99 waterlevelsTimePeriod: "day"
100 };
101 },
102 computed: {
103 ...mapState("application", ["showGauges"]),
104 ...mapState("gauges", ["gauges", "selectedGauge"]),
105 selectedGauge: {
106 get() {
107 return this.$store.state.gauges.selectedGauge;
108 },
109 set(name) {
110 this.$store.dispatch("gauges/selectedGauge", name);
111 }
112 }
113 },
114 methods: {
115 close() {
116 this.$store.commit("application/showGauges", false);
117 },
118 moveToGauge() {
119 let gauge = this.gauges.find(
120 g => g.properties.objname === this.selectedGauge
121 );
122 if (!gauge) return;
123 this.$store.commit("map/moveToExtent", {
124 feature: gauge,
125 zoom: 17,
126 preventZoomOut: true
127 });
128 },
129 showWaterlevelDiagram() {
130 let gauge = this.gauges.find(
131 g => g.properties.objname === this.selectedGauge
132 );
133
134 // configure splitscreen
135 let splitscreenConf = {
136 id: "gauge-waterlevel",
137 component: "waterlevel",
138 title: this.selectedGauge,
139 icon: "ruler-vertical",
140 closeCallback: () => {
141 this.$store.commit("gauges/selectedGauge", null);
142 this.$store.commit("gauges/waterlevels", []);
143 },
144 expandCallback: () => {
145 this.$store.commit("map/moveMap", {
146 coordinates: gauge.geometry.coordinates,
147 zoom: 17,
148 preventZoomOut: true
149 });
150 }
151 };
152 this.$store.commit("application/addSplitscreen", splitscreenConf);
153 this.$store.commit("application/activeSplitscreenId", splitscreenConf.id);
154 this.$store.commit("application/splitscreenLoading", true);
155 this.loading = true;
156 this.$store.commit("application/showSplitscreen", true);
157 this.$store
158 .dispatch("gauges/loadWaterlevels", this.waterlevelsTimePeriod)
159 .then(() => {
160 this.$store.commit("application/splitscreenLoading", false);
161 this.loading = false;
162 });
163 }
164 },
165 mounted() {
166 this.$store.dispatch("gauges/loadGauges");
167 }
168 };
169 </script>