Mercurial > gemma

comparison client/src/components/systemconfiguration/DataAccuracy.vue @ 3597:d1bbfb9635ca

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: configuration: unified styles of different config components
author Markus Kottlaender <markus@intevation.de>
date Tue, 04 Jun 2019 16:54:45 +0200
parents d4ff8ea19f2c
children 2be2880ad654
comparison
equal deleted inserted replaced
3596:eeeb7bf14217 3597:d1bbfb9635ca
1 <template> 1 <template>
2 <div class="d-flex flex-column mt-4 pt-4 border-top"> 2 <div class="d-flex flex-column pb-4">
3 <div class="d-flex flex-row justify-content-between"> 3 <h5 class="py-2 px-3 mb-2 m-0">
4 <h5><translate>Data Availability/Accuracy</translate></h5> 4 <translate>Data Availability/Accuracy</translate>
5 </div> 5 </h5>
6 <div class="mt-1"> 6 <div class="px-3 container-fluid">
7 <h6 class="font-weight-bold"> 7 <div class="row">
8 <translate>Currency of Bottleneck Surveys</translate> 8 <div class="col-sm-6">
9 </h6> 9 <h6 class="font-weight-bold">
10 10 <translate>Currency of Bottleneck Surveys</translate>
11 <div class="d-flex text-center"> 11 </h6>
12 <div class="card rounded-left"> 12 <div class="d-flex text-center small">
13 <div class="card-header text-white bg-success">OK</div> 13 <div class="card rounded-left">
14 <div 14 <div class="card-header text-white bg-success">OK</div>
15 class="card-body d-flex align-items-center justify-content-center" 15 <div
16 > 16 class="card-body d-flex align-items-center justify-content-center"
17 Last survey within revisiting time. 17 >
18 Last survey within revisiting time.
19 </div>
20 </div>
21 <div class="card border-left-0 border-right-0 rounded-0">
22 <div class="card-header text-white bg-warning rounded-0">
23 Warning
24 </div>
25 <div
26 class="card-body d-flex flex-column align-items-center justify-content-center"
27 >
28 <div>Last survey within revisiting time</div>
29 <div>
30 x
31 <input
32 type="number"
33 step="0.1"
34 min="1"
35 class="form-control form-control-sm d-inline"
36 style="width: 70px"
37 v-model="bn_revtime_multiplier"
38 />
39 </div>
40 </div>
41 </div>
42 <div class="card rounded-right">
43 <div class="card-header text-white bg-danger">Critical</div>
44 <div
45 class="card-body d-flex align-items-center justify-content-center"
46 >
47 <div>
48 Last survey older than revisiting time x
49 <b>{{ Number(bn_revtime_multiplier).toLocaleString() }}</b>
50 </div>
51 </div>
52 </div>
18 </div> 53 </div>
19 </div> 54 </div>
20 <div class="card border-left-0 border-right-0 rounded-0"> 55 <div class="col-sm-6">
21 <div class="card-header text-white bg-warning rounded-0">Warning</div> 56 <h6 class="font-weight-bold">
22 <div 57 <translate>Availability of Gauge Measurements</translate>
23 class="card-body d-flex flex-column align-items-center justify-content-center" 58 </h6>
24 > 59 <div class="d-flex text-center small">
25 <div>Last survey within revisiting time</div> 60 <div class="card rounded-left">
26 <div> 61 <div class="card-header text-white bg-success">OK</div>
27 x 62 <div
28 <input 63 class="card-body d-flex align-items-center justify-content-center"
29 type="number" 64 >
30 step="0.1" 65 <div>
31 min="1" 66 Latest measurement not older than
32 class="form-control form-control-sm d-inline" 67 <b>{{ Number(gm_latest_hours).toLocaleString() }}</b> hours
33 style="width: 70px" 68 and at least
34 v-model="bn_revtime_multiplier" 69 <b>{{ Number(gm_min_values_14d).toLocaleString() }}</b>
35 /> 70 measurements in the last 14 days
71 </div>
72 </div>
73 </div>
74 <div class="card border-left-0 border-right-0 rounded-0">
75 <div class="card-header text-white bg-warning rounded-0">
76 Warning
77 </div>
78 <div
79 class="card-body d-flex flex-column align-items-center justify-content-center"
80 >
81 <div>Minimum number of measurements in the last 14 days:</div>
82 <div>
83 <input
84 type="number"
85 step="1"
86 min="1"
87 class="form-control form-control-sm d-inline"
88 style="width: 90px"
89 v-model="gm_min_values_14d"
90 />
91 </div>
92 </div>
93 </div>
94 <div class="card rounded-right">
95 <div class="card-header text-white bg-danger">Critical</div>
96 <div
97 class="card-body d-flex flex-column align-items-center justify-content-center"
98 >
99 <div>Latest measurement older than</div>
100 <div>
101 <input
102 type="number"
103 step="1"
104 min="1"
105 class="form-control form-control-sm d-inline"
106 style="width: 70px"
107 v-model="gm_latest_hours"
108 />
109 hours
110 </div>
111 </div>
36 </div> 112 </div>
37 </div> 113 </div>
38 </div> 114 </div>
39 <div class="card rounded-right"> 115 <div class="col-sm-6">
40 <div class="card-header text-white bg-danger">Critical</div> 116 <h6 class="font-weight-bold">
41 <div 117 <translate>Gauge Forecast Confidence</translate>
42 class="card-body d-flex align-items-center justify-content-center" 118 </h6>
43 > 119 <div class="d-flex text-center small">
44 <div> 120 <div class="card rounded-left">
45 Last survey older than revisiting time x 121 <div class="card-header text-white bg-success">OK</div>
46 <b>{{ Number(bn_revtime_multiplier).toLocaleString() }}</b> 122 <div
123 class="card-body d-flex align-items-center justify-content-center"
124 >
125 <div>
126 Confidence offset within last 24 hours less than
127 <b
128 >{{ Number(gm_forecast_offset_24h).toLocaleString() }} cm</b
129 >
130 and within last 72 hours less than
131 <b
132 >{{ Number(gm_forecast_offset_72h).toLocaleString() }} cm</b
133 >
134 </div>
135 </div>
136 </div>
137 <div class="card border-left-0 border-right-0 rounded-0">
138 <div class="card-header text-white bg-warning rounded-0">
139 Warning
140 </div>
141 <div
142 class="card-body d-flex flex-column align-items-center justify-content-center"
143 >
144 <div>Confidence offset within last 24 hours greater than:</div>
145 <div>
146 <input
147 type="number"
148 step="1"
149 min="1"
150 class="form-control form-control-sm d-inline"
151 style="width: 70px"
152 v-model="gm_forecast_offset_24h"
153 />
154 cm
155 </div>
156 </div>
157 </div>
158 <div class="card rounded-right">
159 <div class="card-header text-white bg-danger">Critical</div>
160 <div
161 class="card-body d-flex flex-column align-items-center justify-content-center"
162 >
163 <div>Confidence offset within last 72 hours greater than:</div>
164 <div>
165 <input
166 type="number"
167 step="1"
168 min="1"
169 class="form-control form-control-sm d-inline"
170 style="width: 70px"
171 v-model="gm_forecast_offset_72h"
172 />
173 cm
174 </div>
175 </div>
176 </div>
177 </div>
178 </div>
179 <div class="col-sm-6">
180 <h6 class="font-weight-bold">
181 <translate>Gauge Forecast vs. Reality</translate>
182 </h6>
183 <div class="d-flex text-center small">
184 <div class="card rounded-left">
185 <div class="card-header text-white bg-success">OK</div>
186 <div
187 class="card-body d-flex align-items-center justify-content-center"
188 >
189 <div>
190 Nash-Sutcliffe-Coefficient for last 24 hours greater than
191 <b>{{
192 Number(gm_forecast_vs_reality_nsc_24h).toLocaleString()
193 }}</b>
194 and for last 72 hours greater than
195 <b
196 >{{
197 Number(gm_forecast_vs_reality_nsc_72h).toLocaleString()
198 }}
199 cm</b
200 >
201 </div>
202 </div>
203 </div>
204 <div class="card border-left-0 border-right-0 rounded-0">
205 <div class="card-header text-white bg-warning rounded-0">
206 Warning
207 </div>
208 <div
209 class="card-body d-flex flex-column align-items-center justify-content-center"
210 >
211 <div>
212 Nash-Sutcliffe-Coefficient for last 24 hours less than:
213 </div>
214 <div>
215 <input
216 type="number"
217 step="1"
218 class="form-control form-control-sm d-inline"
219 style="width: 70px"
220 v-model="gm_forecast_vs_reality_nsc_24h"
221 />
222 </div>
223 </div>
224 </div>
225 <div class="card rounded-right">
226 <div class="card-header text-white bg-danger">Critical</div>
227 <div
228 class="card-body d-flex flex-column align-items-center justify-content-center"
229 >
230 <div>
231 Nash-Sutcliffe-Coefficient for last 72 hours less than:
232 </div>
233 <div>
234 <input
235 type="number"
236 step="1"
237 class="form-control form-control-sm d-inline"
238 style="width: 70px"
239 v-model="gm_forecast_vs_reality_nsc_72h"
240 />
241 </div>
242 </div>
47 </div> 243 </div>
48 </div> 244 </div>
49 </div> 245 </div>
50 </div> 246 </div>
247 </div>
51 248
52 <h6 class="mt-4 font-weight-bold"> 249 <div class="mt-4">
53 <translate>Availability of Gauge Measurements</translate> 250 <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
54 </h6> 251 <translate>Send</translate>
55 252 </a>
56 <div class="d-flex text-center">
57 <div class="card rounded-left">
58 <div class="card-header text-white bg-success">OK</div>
59 <div
60 class="card-body d-flex align-items-center justify-content-center"
61 >
62 <div>
63 Latest measurement not older than
64 <b>{{ Number(gm_latest_hours).toLocaleString() }}</b> hours and at
65 least
66 <b>{{ Number(gm_min_values_14d).toLocaleString() }}</b>
67 measurements in the last 14 days
68 </div>
69 </div>
70 </div>
71 <div class="card border-left-0 border-right-0 rounded-0">
72 <div class="card-header text-white bg-warning rounded-0">Warning</div>
73 <div
74 class="card-body d-flex flex-column align-items-center justify-content-center"
75 >
76 <div>Minimum number of measurements in the last 14 days:</div>
77 <div>
78 <input
79 type="number"
80 step="1"
81 min="1"
82 class="form-control form-control-sm d-inline"
83 style="width: 90px"
84 v-model="gm_min_values_14d"
85 />
86 </div>
87 </div>
88 </div>
89 <div class="card rounded-right">
90 <div class="card-header text-white bg-danger">Critical</div>
91
92 <div
93 class="card-body d-flex flex-column align-items-center justify-content-center"
94 >
95 <div>Latest measurement older than</div>
96 <div>
97 <input
98 type="number"
99 step="1"
100 min="1"
101 class="form-control form-control-sm d-inline"
102 style="width: 70px"
103 v-model="gm_latest_hours"
104 />
105 hours
106 </div>
107 </div>
108 </div>
109 </div>
110
111 <h6 class="mt-4 font-weight-bold">
112 <translate>Gauge Forecast Confidence</translate>
113 </h6>
114
115 <div class="d-flex text-center">
116 <div class="card rounded-left">
117 <div class="card-header text-white bg-success">OK</div>
118 <div
119 class="card-body d-flex align-items-center justify-content-center"
120 >
121 <div>
122 Confidence offset within last 24 hours less than
123 <b>{{ Number(gm_forecast_offset_24h).toLocaleString() }} cm</b>
124 and within last 72 hours less than
125 <b>{{ Number(gm_forecast_offset_72h).toLocaleString() }} cm</b>
126 </div>
127 </div>
128 </div>
129 <div class="card border-left-0 border-right-0 rounded-0">
130 <div class="card-header text-white bg-warning rounded-0">Warning</div>
131 <div
132 class="card-body d-flex flex-column align-items-center justify-content-center"
133 >
134 <div>Confidence offset within last 24 hours greater than:</div>
135 <div>
136 <input
137 type="number"
138 step="1"
139 min="1"
140 class="form-control form-control-sm d-inline"
141 style="width: 70px"
142 v-model="gm_forecast_offset_24h"
143 />
144 cm
145 </div>
146 </div>
147 </div>
148 <div class="card rounded-right">
149 <div class="card-header text-white bg-danger">Critical</div>
150
151 <div
152 class="card-body d-flex flex-column align-items-center justify-content-center"
153 >
154 <div>Confidence offset within last 72 hours greater than:</div>
155 <div>
156 <input
157 type="number"
158 step="1"
159 min="1"
160 class="form-control form-control-sm d-inline"
161 style="width: 70px"
162 v-model="gm_forecast_offset_72h"
163 />
164 cm
165 </div>
166 </div>
167 </div>
168 </div>
169
170 <h6 class="mt-4 font-weight-bold">
171 <translate>Gauge Forecast vs. Reality</translate>
172 </h6>
173
174 <div class="d-flex text-center">
175 <div class="card rounded-left">
176 <div class="card-header text-white bg-success">OK</div>
177 <div
178 class="card-body d-flex align-items-center justify-content-center"
179 >
180 <div>
181 Nash-Sutcliffe-Coefficient for last 24 hours greater than
182 <b>{{
183 Number(gm_forecast_vs_reality_nsc_24h).toLocaleString()
184 }}</b>
185 and for last 72 hours greater than
186 <b
187 >{{
188 Number(gm_forecast_vs_reality_nsc_72h).toLocaleString()
189 }}
190 cm</b
191 >
192 </div>
193 </div>
194 </div>
195 <div class="card border-left-0 border-right-0 rounded-0">
196 <div class="card-header text-white bg-warning rounded-0">Warning</div>
197 <div
198 class="card-body d-flex flex-column align-items-center justify-content-center"
199 >
200 <div>Nash-Sutcliffe-Coefficient for last 24 hours less than:</div>
201 <div>
202 <input
203 type="number"
204 step="1"
205 class="form-control form-control-sm d-inline"
206 style="width: 70px"
207 v-model="gm_forecast_vs_reality_nsc_24h"
208 />
209 </div>
210 </div>
211 </div>
212 <div class="card rounded-right">
213 <div class="card-header text-white bg-danger">Critical</div>
214
215 <div
216 class="card-body d-flex flex-column align-items-center justify-content-center"
217 >
218 <div>Nash-Sutcliffe-Coefficient for last 72 hours less than:</div>
219 <div>
220 <input
221 type="number"
222 step="1"
223 class="form-control form-control-sm d-inline"
224 style="width: 70px"
225 v-model="gm_forecast_vs_reality_nsc_72h"
226 />
227 </div>
228 </div>
229 </div>
230 </div>
231
232 <div class="mt-4">
233 <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
234 <translate>Send</translate>
235 </a>
236 </div>
237 </div> 253 </div>
238 </div> 254 </div>
239 </template> 255 </template>
240 256
241 <style lang="sass" scoped> 257 <style lang="sass" scoped>
242 .card 258 .card
243 width: 33% 259 width: 33.333%
244 .rounded-left, 260 .rounded-left,
245 .rounded-left .card-header 261 .rounded-left .card-header
246 border-top-right-radius: 0 262 border-top-right-radius: 0
247 border-bottom-right-radius: 0 263 border-bottom-right-radius: 0
248 .rounded-right 264 .rounded-right