comparison client/src/components/systemconfiguration/DataAccuracy.vue @ 3617:bcf9713ee359

client: configuration: prepared fetching data accuracy values from backend
author Markus Kottlaender <markus@intevation.de>
date Wed, 05 Jun 2019 14:57:44 +0200
parents 307ddc52a5b9
children a688a478e35f
comparison
equal deleted inserted replaced
3616:307ddc52a5b9 3617:bcf9713ee359
34 type="number" 34 type="number"
35 step="0.1" 35 step="0.1"
36 min="1" 36 min="1"
37 class="form-control form-control-sm mx-1" 37 class="form-control form-control-sm mx-1"
38 style="width: 60px" 38 style="width: 60px"
39 v-model="bn_revtime_multiplier" 39 v-model="config.bn_revtime_multiplier"
40 /> 40 />
41 <translate>times the revisiting time.</translate> 41 <translate>times the revisiting time.</translate>
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
47 <div 47 <div
48 class="card-body d-flex align-items-center justify-content-center" 48 class="card-body d-flex align-items-center justify-content-center"
49 > 49 >
50 <span 50 <span
51 v-translate="{ 51 v-translate="{
52 multiplier: Number(bn_revtime_multiplier).toLocaleString() 52 multiplier: Number(
53 config.bn_revtime_multiplier
54 ).toLocaleString()
53 }" 55 }"
54 >The latest survey is older than <b>%{multiplier}</b> times 56 >The latest survey is older than <b>%{multiplier}</b> times
55 the revisiting time.</span 57 the revisiting time.</span
56 > 58 >
57 </div> 59 </div>
68 <div 70 <div
69 class="card-body d-flex align-items-center justify-content-center" 71 class="card-body d-flex align-items-center justify-content-center"
70 > 72 >
71 <span 73 <span
72 v-translate="{ 74 v-translate="{
73 hours: Number(gm_latest_hours).toLocaleString(), 75 hours: Number(config.gm_latest_hours).toLocaleString(),
74 values: Number(gm_min_values_14d).toLocaleString() 76 values: Number(config.gm_min_values_14d).toLocaleString()
75 }" 77 }"
76 >The latest measurement is not older than 78 >The latest measurement is not older than
77 <b>%{hours}</b> hours and there are at least 79 <b>%{hours}</b> hours and there are at least
78 <b>%{values}</b> measurements in the last 14 days.</span 80 <b>%{values}</b> measurements in the last 14 days.</span
79 > 81 >
92 type="number" 94 type="number"
93 step="1" 95 step="1"
94 min="1" 96 min="1"
95 class="form-control form-control-sm mx-1" 97 class="form-control form-control-sm mx-1"
96 style="width: 70px" 98 style="width: 70px"
97 v-model="gm_min_values_14d" 99 v-model="config.gm_min_values_14d"
98 /> 100 />
99 <translate>measurements in the last 14 days.</translate> 101 <translate>measurements in the last 14 days.</translate>
100 </div> 102 </div>
101 </div> 103 </div>
102 </div> 104 </div>
111 type="number" 113 type="number"
112 step="1" 114 step="1"
113 min="1" 115 min="1"
114 class="form-control form-control-sm mx-1" 116 class="form-control form-control-sm mx-1"
115 style="width: 55px" 117 style="width: 55px"
116 v-model="gm_latest_hours" 118 v-model="config.gm_latest_hours"
117 /> 119 />
118 <translate>days.</translate> 120 <translate>days.</translate>
119 </div> 121 </div>
120 </div> 122 </div>
121 </div> 123 </div>
131 <div 133 <div
132 class="card-body d-flex align-items-center justify-content-center" 134 class="card-body d-flex align-items-center justify-content-center"
133 > 135 >
134 <span 136 <span
135 v-translate="{ 137 v-translate="{
136 gm24: Number(gm_forecast_offset_24h).toLocaleString(), 138 gm24: Number(
137 gm72: Number(gm_forecast_offset_72h).toLocaleString() 139 config.gm_forecast_offset_24h
140 ).toLocaleString(),
141 gm72: Number(config.gm_forecast_offset_72h).toLocaleString()
138 }" 142 }"
139 >The highest confidence value is less than 143 >The highest confidence value is less than
140 <b>%{gm24} cm</b> 144 <b>%{gm24} cm</b>
141 within the last 24 hours and less than 145 within the last 24 hours and less than
142 <b>%{gm72} cm</b> 146 <b>%{gm72} cm</b>
160 type="number" 164 type="number"
161 step="1" 165 step="1"
162 min="1" 166 min="1"
163 class="form-control form-control-sm mx-1" 167 class="form-control form-control-sm mx-1"
164 style="width: 55px" 168 style="width: 55px"
165 v-model="gm_forecast_offset_72h" 169 v-model="config.gm_forecast_offset_72h"
166 /> 170 />
167 cm. 171 cm.
168 </div> 172 </div>
169 </div> 173 </div>
170 </div> 174 </div>
182 type="number" 186 type="number"
183 step="1" 187 step="1"
184 min="1" 188 min="1"
185 class="form-control form-control-sm mx-1" 189 class="form-control form-control-sm mx-1"
186 style="width: 55px" 190 style="width: 55px"
187 v-model="gm_forecast_offset_24h" 191 v-model="config.gm_forecast_offset_24h"
188 /> 192 />
189 cm. 193 cm.
190 </div> 194 </div>
191 </div> 195 </div>
192 </div> 196 </div>
203 class="card-body d-flex align-items-center justify-content-center" 207 class="card-body d-flex align-items-center justify-content-center"
204 > 208 >
205 <span 209 <span
206 v-translate="{ 210 v-translate="{
207 nsc24: Number( 211 nsc24: Number(
208 gm_forecast_vs_reality_nsc_24h 212 config.gm_forecast_vs_reality_nsc_24h
209 ).toLocaleString(), 213 ).toLocaleString(),
210 nsc72: Number( 214 nsc72: Number(
211 gm_forecast_vs_reality_nsc_72h 215 config.gm_forecast_vs_reality_nsc_72h
212 ).toLocaleString() 216 ).toLocaleString()
213 }" 217 }"
214 >The Nash-Sutcliffe coefficient is greater than 218 >The Nash-Sutcliffe coefficient is greater than
215 <b>%{nsc24}</b> 219 <b>%{nsc24}</b>
216 for last 24 hours and greater than 220 for last 24 hours and greater than
234 <input 238 <input
235 type="number" 239 type="number"
236 step="0.1" 240 step="0.1"
237 class="form-control form-control-sm mx-1" 241 class="form-control form-control-sm mx-1"
238 style="width: 70px" 242 style="width: 70px"
239 v-model="gm_forecast_vs_reality_nsc_72h" 243 v-model="config.gm_forecast_vs_reality_nsc_72h"
240 /> 244 />
241 </div> 245 </div>
242 </div> 246 </div>
243 </div> 247 </div>
244 <div class="card rounded-right"> 248 <div class="card rounded-right">
254 <input 258 <input
255 type="number" 259 type="number"
256 step="0.1" 260 step="0.1"
257 class="form-control form-control-sm mx-1" 261 class="form-control form-control-sm mx-1"
258 style="width: 70px" 262 style="width: 70px"
259 v-model="gm_forecast_vs_reality_nsc_24h" 263 v-model="config.gm_forecast_vs_reality_nsc_24h"
260 /> 264 />
261 </div> 265 </div>
262 </div> 266 </div>
263 </div> 267 </div>
264 </div> 268 </div>
316 * 320 *
317 * Author(s): 321 * Author(s):
318 * Markus Kottländer <markus@intevation.de> 322 * Markus Kottländer <markus@intevation.de>
319 */ 323 */
320 324
325 import { mapState } from "vuex";
326
321 export default { 327 export default {
322 data() { 328 computed: {
323 return { 329 ...mapState("application", ["config"])
324 bn_revtime_multiplier: 1.5,
325 gm_min_values_14d: 1124,
326 gm_latest_hours: 24,
327 gm_forecast_offset_24h: 15,
328 gm_forecast_offset_72h: 15,
329 gm_forecast_vs_reality_nsc_24h: -12.5,
330 gm_forecast_vs_reality_nsc_72h: -12.5
331 };
332 }, 330 },
333 methods: { 331 methods: {
334 submit() { 332 submit() {
335 console.log(this.bottleneck_surveys_revtime_multiplier); 333 this.$store.commit("application/config", this.config);
336 } 334 }
337 } 335 }
338 }; 336 };
339 </script> 337 </script>