Mercurial > gemma
changeset 4299:43f28ef473c7
validator for morpology classbreaks
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 02 Sep 2019 13:17:38 +0200 |
parents | 10bbaa57227c |
children | 8b730ee6f17b |
files | client/src/components/systemconfiguration/MorphologyClassbreaks.vue |
diffstat | 1 files changed, 41 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue Mon Sep 02 09:34:29 2019 +0200 +++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue Mon Sep 02 13:17:38 2019 +0200 @@ -53,14 +53,13 @@ </div> </div> <!-- deactivate the built-in validation --> - <form id="novalidatedform" novalidate /> + <form id="novalidatedform" /> <input v-model.number="morphologyClassbreaks[i][0]" type="number" min="0" - step="0.1" - form="novalidatedform" - class="form-control form-control-sm" + step="0.01" + class="form-control form-control-sm numfield" /> <div class="input-group-append"> <button @@ -92,7 +91,7 @@ @click.prevent="submitClassbreaks" :class="[ 'btn btn-info btn-sm text-white', - { disabled: !checkValidity } + { disabled: !classbreaksAreValid || hasDoublettes } ]" > <translate>Send</translate> @@ -103,8 +102,8 @@ > <translate>Reset to defaults</translate> </a> - <span class="text-danger" v-if="!checkValidity"> - <translate>Same value is used in multiple fields.</translate> + <span class="text-danger" v-if="hasDoublettes || !classbreaksAreValid"> + {{ validationMessage }} </span> </div> <div class="px-3"> @@ -166,9 +165,8 @@ <input v-model.number="morphologyClassbreaksCompare[i][0]" type="number" - step="0.1" - form="novalidatedform" - class="form-control form-control-sm" + step="0.01" + class="form-control form-control-sm numfield" /> <div class="input-group-append"> <button @@ -219,6 +217,10 @@ </template> <style lang="sass" scoped> +.numfield:invalid + border: 2px solid + border-color: #ff0000 + .classbreak width: 142px .btn-outline-secondary @@ -290,13 +292,40 @@ colorPickerTitle() { return this.$gettext("Choose color"); }, + validationMessage() { + const doublettes = this.$gettext( + "Same value is used in multiple fields." + ); + const invalidForm = this.$gettext( + "There are invalid classbreak values. Please check" + ); + if (this.hasDoublettes && !this.classbreaksAreValid) + return `${doublettes} ${invalidForm}`; + if (this.hasDoublettes) return doublettes; + if (!this.classbreaksAreValid) return invalidForm; + return ""; + }, + classbreaksAreValid() { + let values = this.morphologyClassbreaks.map(e => { + const element = e[0]; + if (!isNaN(element)) { + if (element === "") return false; + if (!isNaN(element)) { + const numberParts = String(element).split("."); + return numberParts.length == 2 ? numberParts[1].length < 3 : true; + } + } + return false; + }); + return values.every(e => e === true); + }, // check if the same value is used for more than one field. - checkValidity() { + hasDoublettes() { let values = []; for (let i = 0; i < this.morphologyClassbreaks.length; i++) { values[i] = Number(this.morphologyClassbreaks[i][0]); } - return new Set(values).size === values.length; + return new Set(values).size !== values.length; }, checkValidityForMCCompare() { let values = [];