1<template>
2  <b-container fluid="xl">
3    <page-title :description="$t('pagePower.description')" />
4
5    <b-row>
6      <b-col sm="8" md="6" xl="12">
7        <dl>
8          <dt>{{ $t('pagePower.powerConsumption') }}</dt>
9          <dd>
10            {{
11              powerConsumptionValue
12                ? `${powerConsumptionValue} W`
13                : $t('global.status.notAvailable')
14            }}
15          </dd>
16        </dl>
17      </b-col>
18    </b-row>
19
20    <b-form @submit.prevent="submitForm">
21      <b-form-group :disabled="loading">
22        <b-row>
23          <b-col sm="8" md="6" xl="12">
24            <b-form-group :label="$t('pagePower.powerCapSettingLabel')">
25              <b-form-checkbox
26                v-model="isPowerCapFieldEnabled"
27                data-test-id="power-checkbox-togglePowerCapField"
28                name="power-cap-setting"
29              >
30                {{ $t('pagePower.powerCapSettingData') }}
31              </b-form-checkbox>
32            </b-form-group>
33          </b-col>
34        </b-row>
35
36        <b-row>
37          <b-col sm="8" md="6" xl="3">
38            <b-form-group
39              id="input-group-1"
40              :label="$t('pagePower.powerCapLabel')"
41              label-for="input-1"
42            >
43              <b-form-text id="power-help-text">
44                {{
45                  $t('pagePower.powerCapLabelTextInfo', {
46                    min: 1,
47                    max: 10000,
48                  })
49                }}
50              </b-form-text>
51
52              <b-form-input
53                id="input-1"
54                v-model.number="powerCapValue"
55                :disabled="!isPowerCapFieldEnabled"
56                data-test-id="power-input-powerCapValue"
57                type="number"
58                aria-describedby="power-help-text"
59                :state="getValidationState($v.powerCapValue)"
60              ></b-form-input>
61
62              <b-form-invalid-feedback id="input-live-feedback" role="alert">
63                <template v-if="!$v.powerCapValue.required">
64                  {{ $t('global.form.fieldRequired') }}
65                </template>
66                <template v-else-if="!$v.powerCapValue.between">
67                  {{ $t('global.form.invalidValue') }}
68                </template>
69              </b-form-invalid-feedback>
70            </b-form-group>
71          </b-col>
72        </b-row>
73
74        <b-button
75          variant="primary"
76          type="submit"
77          data-test-id="power-button-savePowerCapValue"
78        >
79          {{ $t('global.action.save') }}
80        </b-button>
81      </b-form-group>
82    </b-form>
83  </b-container>
84</template>
85
86<script>
87import PageTitle from '@/components/Global/PageTitle';
88import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
89import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
90import BVToastMixin from '@/components/Mixins/BVToastMixin';
91import { requiredIf, between } from 'vuelidate/lib/validators';
92import { mapGetters } from 'vuex';
93
94export default {
95  name: 'Power',
96  components: { PageTitle },
97  mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
98  beforeRouteLeave(to, from, next) {
99    this.hideLoader();
100    next();
101  },
102  data() {
103    return {
104      loading,
105    };
106  },
107  computed: {
108    ...mapGetters({
109      powerConsumptionValue: 'powerControl/powerConsumptionValue',
110    }),
111
112    /**
113      Computed property isPowerCapFieldEnabled is used to enable or disable the input field.
114      The input field is enabled when the powercapValue property is not null.
115   **/
116    isPowerCapFieldEnabled: {
117      get() {
118        return this.powerCapValue !== null;
119      },
120      set(value) {
121        this.$v.$reset();
122        let newValue = null;
123        if (value) {
124          if (this.powerCapValue) {
125            newValue = this.powerCapValue;
126          } else {
127            newValue = '';
128          }
129        }
130        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', newValue);
131      },
132    },
133    powerCapValue: {
134      get() {
135        return this.$store.getters['powerControl/powerCapValue'];
136      },
137      set(value) {
138        this.$v.$touch();
139        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value);
140      },
141    },
142  },
143  created() {
144    this.startLoader();
145    this.$store
146      .dispatch('powerControl/getPowerControl')
147      .finally(() => this.endLoader());
148  },
149  validations: {
150    powerCapValue: {
151      between: between(1, 10000),
152      required: requiredIf(function () {
153        return this.isPowerCapFieldEnabled;
154      }),
155    },
156  },
157  methods: {
158    submitForm() {
159      this.$v.$touch();
160      if (this.$v.$invalid) return;
161      this.startLoader();
162      this.$store
163        .dispatch('powerControl/setPowerControl', this.powerCapValue)
164        .then((message) => this.successToast(message))
165        .catch(({ message }) => this.errorToast(message))
166        .finally(() => this.endLoader());
167    },
168  },
169};
170</script>
171