16dba4be6SSandeepa Singh<template> 26dba4be6SSandeepa Singh <b-container fluid="xl"> 36dba4be6SSandeepa Singh <page-title :description="$t('pagePower.description')" /> 46dba4be6SSandeepa Singh 56dba4be6SSandeepa Singh <b-row> 66dba4be6SSandeepa Singh <b-col sm="8" md="6" xl="12"> 76dba4be6SSandeepa Singh <dl> 86dba4be6SSandeepa Singh <dt>{{ $t('pagePower.powerConsumption') }}</dt> 96dba4be6SSandeepa Singh <dd> 106dba4be6SSandeepa Singh {{ 116dba4be6SSandeepa Singh powerConsumptionValue 126dba4be6SSandeepa Singh ? `${powerConsumptionValue} W` 136dba4be6SSandeepa Singh : $t('global.status.notAvailable') 146dba4be6SSandeepa Singh }} 156dba4be6SSandeepa Singh </dd> 166dba4be6SSandeepa Singh </dl> 176dba4be6SSandeepa Singh </b-col> 186dba4be6SSandeepa Singh </b-row> 196dba4be6SSandeepa Singh 206dba4be6SSandeepa Singh <b-form @submit.prevent="submitForm"> 216dba4be6SSandeepa Singh <b-form-group :disabled="loading"> 226dba4be6SSandeepa Singh <b-row> 236dba4be6SSandeepa Singh <b-col sm="8" md="6" xl="12"> 246dba4be6SSandeepa Singh <b-form-group :label="$t('pagePower.powerCapSettingLabel')"> 256dba4be6SSandeepa Singh <b-form-checkbox 266dba4be6SSandeepa Singh v-model="isPowerCapFieldEnabled" 276dba4be6SSandeepa Singh data-test-id="power-checkbox-togglePowerCapField" 286dba4be6SSandeepa Singh name="power-cap-setting" 296dba4be6SSandeepa Singh > 306dba4be6SSandeepa Singh {{ $t('pagePower.powerCapSettingData') }} 316dba4be6SSandeepa Singh </b-form-checkbox> 326dba4be6SSandeepa Singh </b-form-group> 336dba4be6SSandeepa Singh </b-col> 346dba4be6SSandeepa Singh </b-row> 356dba4be6SSandeepa Singh 366dba4be6SSandeepa Singh <b-row> 376dba4be6SSandeepa Singh <b-col sm="8" md="6" xl="3"> 386dba4be6SSandeepa Singh <b-form-group 396dba4be6SSandeepa Singh id="input-group-1" 406dba4be6SSandeepa Singh :label="$t('pagePower.powerCapLabel')" 416dba4be6SSandeepa Singh label-for="input-1" 426dba4be6SSandeepa Singh > 436dba4be6SSandeepa Singh <b-form-text id="power-help-text"> 446dba4be6SSandeepa Singh {{ 456dba4be6SSandeepa Singh $t('pagePower.powerCapLabelTextInfo', { 466dba4be6SSandeepa Singh min: 1, 476dba4be6SSandeepa Singh max: 10000, 486dba4be6SSandeepa Singh }) 496dba4be6SSandeepa Singh }} 506dba4be6SSandeepa Singh </b-form-text> 516dba4be6SSandeepa Singh 526dba4be6SSandeepa Singh <b-form-input 536dba4be6SSandeepa Singh id="input-1" 546dba4be6SSandeepa Singh v-model.number="powerCapValue" 556dba4be6SSandeepa Singh :disabled="!isPowerCapFieldEnabled" 566dba4be6SSandeepa Singh data-test-id="power-input-powerCapValue" 576dba4be6SSandeepa Singh type="number" 586dba4be6SSandeepa Singh aria-describedby="power-help-text" 596dba4be6SSandeepa Singh :state="getValidationState($v.powerCapValue)" 606dba4be6SSandeepa Singh ></b-form-input> 616dba4be6SSandeepa Singh 626dba4be6SSandeepa Singh <b-form-invalid-feedback id="input-live-feedback" role="alert"> 636dba4be6SSandeepa Singh <template v-if="!$v.powerCapValue.required"> 646dba4be6SSandeepa Singh {{ $t('global.form.fieldRequired') }} 656dba4be6SSandeepa Singh </template> 666dba4be6SSandeepa Singh <template v-else-if="!$v.powerCapValue.between"> 676dba4be6SSandeepa Singh {{ $t('global.form.invalidValue') }} 686dba4be6SSandeepa Singh </template> 696dba4be6SSandeepa Singh </b-form-invalid-feedback> 706dba4be6SSandeepa Singh </b-form-group> 716dba4be6SSandeepa Singh </b-col> 726dba4be6SSandeepa Singh </b-row> 736dba4be6SSandeepa Singh 746dba4be6SSandeepa Singh <b-button 756dba4be6SSandeepa Singh variant="primary" 766dba4be6SSandeepa Singh type="submit" 776dba4be6SSandeepa Singh data-test-id="power-button-savePowerCapValue" 786dba4be6SSandeepa Singh > 796dba4be6SSandeepa Singh {{ $t('global.action.save') }} 806dba4be6SSandeepa Singh </b-button> 816dba4be6SSandeepa Singh </b-form-group> 826dba4be6SSandeepa Singh </b-form> 836dba4be6SSandeepa Singh </b-container> 846dba4be6SSandeepa Singh</template> 856dba4be6SSandeepa Singh 866dba4be6SSandeepa Singh<script> 876dba4be6SSandeepa Singhimport PageTitle from '@/components/Global/PageTitle'; 886dba4be6SSandeepa Singhimport LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; 896dba4be6SSandeepa Singhimport VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; 906dba4be6SSandeepa Singhimport BVToastMixin from '@/components/Mixins/BVToastMixin'; 916dba4be6SSandeepa Singhimport { requiredIf, between } from 'vuelidate/lib/validators'; 926dba4be6SSandeepa Singhimport { mapGetters } from 'vuex'; 936dba4be6SSandeepa Singh 946dba4be6SSandeepa Singhexport default { 956dba4be6SSandeepa Singh name: 'Power', 966dba4be6SSandeepa Singh components: { PageTitle }, 976dba4be6SSandeepa Singh mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin], 986dba4be6SSandeepa Singh beforeRouteLeave(to, from, next) { 996dba4be6SSandeepa Singh this.hideLoader(); 1006dba4be6SSandeepa Singh next(); 1016dba4be6SSandeepa Singh }, 1026dba4be6SSandeepa Singh data() { 1036dba4be6SSandeepa Singh return { 1046dba4be6SSandeepa Singh loading, 1056dba4be6SSandeepa Singh }; 1066dba4be6SSandeepa Singh }, 1076dba4be6SSandeepa Singh computed: { 1086dba4be6SSandeepa Singh ...mapGetters({ 1096dba4be6SSandeepa Singh powerConsumptionValue: 'powerControl/powerConsumptionValue', 1106dba4be6SSandeepa Singh }), 1116dba4be6SSandeepa Singh 1126dba4be6SSandeepa Singh /** 1136dba4be6SSandeepa Singh Computed property isPowerCapFieldEnabled is used to enable or disable the input field. 1146dba4be6SSandeepa Singh The input field is enabled when the powercapValue property is not null. 1156dba4be6SSandeepa Singh **/ 1166dba4be6SSandeepa Singh isPowerCapFieldEnabled: { 1176dba4be6SSandeepa Singh get() { 1186dba4be6SSandeepa Singh return this.powerCapValue !== null; 1196dba4be6SSandeepa Singh }, 1206dba4be6SSandeepa Singh set(value) { 1216dba4be6SSandeepa Singh this.$v.$reset(); 122*f4328edfSMichalX Szopinski let newValue = null; 123*f4328edfSMichalX Szopinski if (value) { 124*f4328edfSMichalX Szopinski if (this.powerCapValue) { 125*f4328edfSMichalX Szopinski newValue = this.powerCapValue; 126*f4328edfSMichalX Szopinski } else { 127*f4328edfSMichalX Szopinski newValue = ''; 128*f4328edfSMichalX Szopinski } 129*f4328edfSMichalX Szopinski } 1306dba4be6SSandeepa Singh this.$store.dispatch('powerControl/setPowerCapUpdatedValue', newValue); 1316dba4be6SSandeepa Singh }, 1326dba4be6SSandeepa Singh }, 1336dba4be6SSandeepa Singh powerCapValue: { 1346dba4be6SSandeepa Singh get() { 1356dba4be6SSandeepa Singh return this.$store.getters['powerControl/powerCapValue']; 1366dba4be6SSandeepa Singh }, 1376dba4be6SSandeepa Singh set(value) { 1386dba4be6SSandeepa Singh this.$v.$touch(); 1396dba4be6SSandeepa Singh this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value); 1406dba4be6SSandeepa Singh }, 1416dba4be6SSandeepa Singh }, 1426dba4be6SSandeepa Singh }, 1436dba4be6SSandeepa Singh created() { 1446dba4be6SSandeepa Singh this.startLoader(); 1456dba4be6SSandeepa Singh this.$store 1466dba4be6SSandeepa Singh .dispatch('powerControl/getPowerControl') 1476dba4be6SSandeepa Singh .finally(() => this.endLoader()); 1486dba4be6SSandeepa Singh }, 1496dba4be6SSandeepa Singh validations: { 1506dba4be6SSandeepa Singh powerCapValue: { 1516dba4be6SSandeepa Singh between: between(1, 10000), 1526dba4be6SSandeepa Singh required: requiredIf(function () { 1536dba4be6SSandeepa Singh return this.isPowerCapFieldEnabled; 1546dba4be6SSandeepa Singh }), 1556dba4be6SSandeepa Singh }, 1566dba4be6SSandeepa Singh }, 1576dba4be6SSandeepa Singh methods: { 1586dba4be6SSandeepa Singh submitForm() { 1596dba4be6SSandeepa Singh this.$v.$touch(); 1606dba4be6SSandeepa Singh if (this.$v.$invalid) return; 1616dba4be6SSandeepa Singh this.startLoader(); 1626dba4be6SSandeepa Singh this.$store 1636dba4be6SSandeepa Singh .dispatch('powerControl/setPowerControl', this.powerCapValue) 1646dba4be6SSandeepa Singh .then((message) => this.successToast(message)) 1656dba4be6SSandeepa Singh .catch(({ message }) => this.errorToast(message)) 1666dba4be6SSandeepa Singh .finally(() => this.endLoader()); 1676dba4be6SSandeepa Singh }, 1686dba4be6SSandeepa Singh }, 1696dba4be6SSandeepa Singh}; 1706dba4be6SSandeepa Singh</script> 171