diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-08-17 15:27:13 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-08-17 15:27:13 +0300 |
commit | f73b682a5cc44f2b4e60a4b22622b0c59a9b4a9a (patch) | |
tree | 48a407a81c5bbaa71682d5b19f0265105a14b423 /src/views/_sila/Motherboard | |
parent | 67dab376eb97139c5dba14b441c6d9cede62fb2e (diff) | |
download | webui-vue-f73b682a5cc44f2b4e60a4b22622b0c59a9b4a9a.tar.xz |
SILABMC-256: add validation and upd limits layout
Diffstat (limited to 'src/views/_sila/Motherboard')
-rw-r--r-- | src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue | 78 |
1 files changed, 59 insertions, 19 deletions
diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue index 5fac0a89..fc962f11 100644 --- a/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue +++ b/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue @@ -5,23 +5,40 @@ {{ $t('pageMotherboard.temperature') }} </b-col> - <b-row class="align-items-end limit-container"> - <b-col xs="12" sm="6" xl="3" class="pt-4"> - <b-form-group :label="$t('pageMotherboard.labels.warning')"> - <b-form-input - v-model.number="warning" - type="number" - :min="0" - :max="100" - ></b-form-input> - </b-form-group> - </b-col> - <b-col xs="12" sm="6" class="pt-4"> - <b-button variant="primary" style="height: 35px" @click="saveLimit"> - {{ $t('global.action.save') }} - </b-button> - </b-col> - </b-row> + <b-form novalidate> + <b-row class="align-items-end limit-container"> + <b-col xs="12" sm="6" xl="3" class="pt-4"> + <b-form-group :label="$t('pageMotherboard.labels.warning')"> + <b-form-input + v-model.number="warning" + type="number" + :min="1" + :max="100" + :state="getValidationState($v.warning)" + @blur="$v.warning.$touch()" + ></b-form-input> + <b-form-invalid-feedback class="absolute" role="alert"> + <div v-if="!$v.warning.between"> + {{ $t('global.form.invalidValue') }} + </div> + <div v-if="!$v.warning.required"> + {{ $t('global.form.fieldRequired') }} + </div> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + <b-col xs="12" sm="6" class="pt-4"> + <b-button + variant="primary" + style="height: 35px" + :disabled="loading" + @click="saveLimit" + > + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + </b-form> <chart type="motherboard" :time-scale="timeScale" @@ -69,15 +86,25 @@ import Chart from '@/components/_sila/Global/Chart'; import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; -import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import LoadingBarMixin, { + loading, +} from '@/components/_sila/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; +import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; import { getItems, getGroups } from '@/utilities/_sila/metricProperties'; +import { between, required } from 'vuelidate/lib/validators'; export default { components: { Chart }, - mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin, BVToastMixin], + mixins: [ + DataFormatterMixin, + LoadingBarMixin, + TableFilterMixin, + BVToastMixin, + VuelidateMixin, + ], props: { timeScale: { type: String, @@ -86,6 +113,7 @@ export default { }, data() { return { + loading, warning: null, isBusy: true, fields: [ @@ -121,6 +149,15 @@ export default { }; }, + validations() { + return { + warning: { + required, + between: between(1, 100), + }, + }; + }, + computed: { groups() { return getGroups(this.filteredSensors); @@ -174,6 +211,9 @@ export default { methods: { saveLimit() { + this.$v.$touch(); + if (this.$v.$invalid) return; + this.startLoader(); this.$store .dispatch('motherboard/patchLimits', { |