diff options
Diffstat (limited to 'src/views/_sila/Memory/Dynamic')
-rw-r--r-- | src/views/_sila/Memory/Dynamic/MemoryTemp.vue | 113 |
1 files changed, 84 insertions, 29 deletions
diff --git a/src/views/_sila/Memory/Dynamic/MemoryTemp.vue b/src/views/_sila/Memory/Dynamic/MemoryTemp.vue index f69e797a..2bc9f06f 100644 --- a/src/views/_sila/Memory/Dynamic/MemoryTemp.vue +++ b/src/views/_sila/Memory/Dynamic/MemoryTemp.vue @@ -4,34 +4,61 @@ <img src="@/assets/images/_sila/collapsed/temperature.svg" /> {{ $t('pageMemory.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('pageMemory.labels.warning')"> - <b-form-input - v-model.number="warning" - type="number" - :min="0" - :max="critical" - ></b-form-input> - </b-form-group> - </b-col> - <b-col xs="12" sm="6" xl="3" class="pt-4"> - <b-form-group :label="$t('pageMemory.labels.critical')"> - <b-form-input - v-model.number="critical" - type="number" - :min="warning" - :max="100" + <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('pageMemory.labels.warning')"> + <b-form-input + v-model.number="warning" + type="number" + :min="1" + :max="critical" + :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" xl="3" class="pt-4"> + <b-form-group :label="$t('pageMemory.labels.critical')"> + <b-form-input + v-model.number="critical" + type="number" + :min="warning" + :max="100" + :state="getValidationState($v.critical)" + @blur="$v.critical.$touch()" + > + </b-form-input> + <b-form-invalid-feedback class="absolute" role="alert"> + <div v-if="!$v.critical.between"> + {{ $t('global.form.invalidValue') }} + </div> + <div v-if="!$v.critical.required"> + {{ $t('global.form.fieldRequired') }} + </div> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + <b-col xs="12" sm="6" xl="3" class="pt-4"> + <b-button + variant="primary" + style="height: 35px" + :disabled="loading" + @click="saveLimit" > - </b-form-input> - </b-form-group> - </b-col> - <b-col xs="12" sm="6" xl="3" class="pt-4"> - <b-button variant="primary" style="height: 35px" @click="saveLimit"> - {{ $t('global.action.save') }} - </b-button> - </b-col> - </b-row> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + </b-form> <chart type="memory" :colors="colors" @@ -80,15 +107,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 { getGroups, getItems } 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, @@ -97,6 +134,7 @@ export default { }, data() { return { + loading, warning: null, critical: null, isBusy: true, @@ -133,6 +171,19 @@ export default { }; }, + validations() { + return { + warning: { + required, + between: between(1, this.critical), + }, + critical: { + required, + between: between(this.warning, 100), + }, + }; + }, + computed: { groups() { return getGroups(this.filteredSensors); @@ -193,10 +244,14 @@ export default { methods: { saveLimit() { + this.$v.$touch(); + if (this.$v.$invalid) return; + this.startLoader(); this.$store .dispatch('memory/patchLimits', { warning: this.warning, + critical: this.critical, groups: this.groups, }) .catch(({ message }) => this.errorToast(message)) |