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        let newValue = value ? '' : null;
122        this.$v.$reset();
123        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', newValue);
124      },
125    },
126    powerCapValue: {
127      get() {
128        return this.$store.getters['powerControl/powerCapValue'];
129      },
130      set(value) {
131        this.$v.$touch();
132        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value);
133      },
134    },
135  },
136  created() {
137    this.startLoader();
138    this.$store
139      .dispatch('powerControl/getPowerControl')
140      .finally(() => this.endLoader());
141  },
142  validations: {
143    powerCapValue: {
144      between: between(1, 10000),
145      required: requiredIf(function () {
146        return this.isPowerCapFieldEnabled;
147      }),
148    },
149  },
150  methods: {
151    submitForm() {
152      this.$v.$touch();
153      if (this.$v.$invalid) return;
154      this.startLoader();
155      this.$store
156        .dispatch('powerControl/setPowerControl', this.powerCapValue)
157        .then((message) => this.successToast(message))
158        .catch(({ message }) => this.errorToast(message))
159        .finally(() => this.endLoader());
160    },
161  },
162};
163</script>
164