Mercurial > gemma

comparison client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 4282:5d6a4dd3efa1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve input validation in sys-config for Bottleneck Morphology Classbreaks * deactivate the html built-in validation * add input validation which meets our demands * adjust code to send only valid values.
author Fadi Abbud <fadi.abbud@intevation.de>
date Thu, 29 Aug 2019 17:12:03 +0200
parents 851c0ccba59b
children 69f46e9c44e2
comparison
equal deleted inserted replaced
4281:c470d2202823 4282:5d6a4dd3efa1
50 v-model="morphologyClassbreaks[i][1]" 50 v-model="morphologyClassbreaks[i][1]"
51 @input="color => (morphologyClassbreaks[i][1] = color.hex)" 51 @input="color => (morphologyClassbreaks[i][1] = color.hex)"
52 /> 52 />
53 </div> 53 </div>
54 </div> 54 </div>
55 <!-- deactivate the built-in validation -->
56 <form id="novalidatedform" novalidate />
55 <input 57 <input
56 v-model="morphologyClassbreaks[i][0]" 58 v-model.number="morphologyClassbreaks[i][0]"
57 type="number" 59 type="number"
58 min="0" 60 min="0"
59 step="0.1" 61 step="0.1"
62 form="novalidatedform"
60 class="form-control form-control-sm" 63 class="form-control form-control-sm"
61 /> 64 />
62 <div class="input-group-append"> 65 <div class="input-group-append">
63 <button 66 <button
64 class="btn btn-sm btn-outline-secondary" 67 class="btn btn-sm btn-outline-secondary"
85 </div> 88 </div>
86 </div> 89 </div>
87 <div class="mb-4 px-3"> 90 <div class="mb-4 px-3">
88 <a 91 <a
89 @click.prevent="submitClassbreaks" 92 @click.prevent="submitClassbreaks"
90 class="btn btn-info btn-sm text-white" 93 :class="[
94 'btn btn-info btn-sm text-white',
95 { disabled: !checkValidity || hasNegativValue }
96 ]"
91 > 97 >
92 <translate>Send</translate> 98 <translate>Send</translate>
93 </a> 99 </a>
94 <a 100 <a
95 @click.prevent="resetClassbreaks" 101 @click.prevent="resetClassbreaks"
96 class="btn btn-outline-info btn-sm ml-2" 102 class="btn btn-outline-info btn-sm ml-2"
97 > 103 >
98 <translate>Reset to defaults</translate> 104 <translate>Reset to defaults</translate>
99 </a> 105 </a>
106 <span class="text-danger" v-if="!checkValidity">
107 &nbsp;<translate>Same value is used in multiple fields.</translate>
108 </span>
109 <span class="text-danger" v-if="hasNegativValue">
110 &nbsp;<translate>Negative value is not allowed.</translate>
111 </span>
100 </div> 112 </div>
101 <div class="px-3"> 113 <div class="px-3">
102 <h6 class="font-weight-bold"> 114 <h6 class="font-weight-bold">
103 <translate>Sounding Result Comparison</translate> 115 <translate>Sounding Result Comparison</translate>
104 </h6> 116 </h6>
153 " 165 "
154 /> 166 />
155 </div> 167 </div>
156 </div> 168 </div>
157 <input 169 <input
158 v-model="morphologyClassbreaksCompare[i][0]" 170 v-model.number="morphologyClassbreaksCompare[i][0]"
159 type="number" 171 type="number"
160 step="0.1" 172 step="0.1"
173 form="novalidatedform"
161 class="form-control form-control-sm" 174 class="form-control form-control-sm"
162 /> 175 />
163 <div class="input-group-append"> 176 <div class="input-group-append">
164 <button 177 <button
165 class="btn btn-sm btn-outline-secondary" 178 class="btn btn-sm btn-outline-secondary"
186 </div> 199 </div>
187 </div> 200 </div>
188 <div class="px-3"> 201 <div class="px-3">
189 <a 202 <a
190 @click.prevent="submitClassbreaksCompare" 203 @click.prevent="submitClassbreaksCompare"
191 class="btn btn-info btn-sm text-white" 204 :class="[
205 'btn btn-info btn-sm text-white',
206 { disabled: !checkValidityForMCCompare }
207 ]"
192 > 208 >
193 <translate>Send</translate> 209 <translate>Send</translate>
194 </a> 210 </a>
195 <a 211 <a
196 @click.prevent="resetClassbreaksCompare" 212 @click.prevent="resetClassbreaksCompare"
197 class="btn btn-outline-info btn-sm ml-2" 213 class="btn btn-outline-info btn-sm ml-2"
198 > 214 >
199 <translate>Reset to defaults</translate> 215 <translate>Reset to defaults</translate>
200 </a> 216 </a>
217 <span class="text-danger" v-if="!checkValidityForMCCompare">
218 &nbsp;<translate>Same value is used in multiple fields.</translate>
219 </span>
201 </div> 220 </div>
202 </div> 221 </div>
203 </template> 222 </template>
204 223
205 <style lang="sass" scoped> 224 <style lang="sass" scoped>
271 }, 290 },
272 computed: { 291 computed: {
273 ...mapState("application", ["config"]), 292 ...mapState("application", ["config"]),
274 colorPickerTitle() { 293 colorPickerTitle() {
275 return this.$gettext("Choose color"); 294 return this.$gettext("Choose color");
295 },
296 // check if the same value is used for more than one field.
297 checkValidity() {
298 let values = [];
299 for (let i = 0; i < this.morphologyClassbreaks.length; i++) {
300 values[i] = Number(this.morphologyClassbreaks[i][0]);
301 }
302 return new Set(values).size === values.length;
303 },
304 // check if there is a negative value
305 hasNegativValue() {
306 return this.morphologyClassbreaks
307 .map(m => {
308 return m[0];
309 })
310 .some(v => v < 0);
311 },
312 checkValidityForMCCompare() {
313 let values = [];
314 for (let i = 0; i < this.morphologyClassbreaksCompare.length; i++) {
315 values[i] = Number(this.morphologyClassbreaksCompare[i][0]);
316 }
317 return new Set(values).size === values.length;
276 } 318 }
277 }, 319 },
278 methods: { 320 methods: {
279 addClassbreak(classbreaks, i) { 321 addClassbreak(classbreaks, i) {
280 classbreaks.splice( 322 classbreaks.splice(