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.$invalid">
64                  {{ $t('global.form.fieldRequired') }}
65                </template>
66                <template v-else-if="v$.powerCapValue.between.$invalid">
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 { useVuelidate } from '@vuelidate/core';
91
92import BVToastMixin from '@/components/Mixins/BVToastMixin';
93import { requiredIf, between } from '@vuelidate/validators';
94import { mapGetters } from 'vuex';
95import { useI18n } from 'vue-i18n';
96
97export default {
98  name: 'Power',
99  components: { PageTitle },
100  mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
101  beforeRouteLeave(to, from, next) {
102    this.hideLoader();
103    next();
104  },
105  setup() {
106    return {
107      v$: useVuelidate(),
108    };
109  },
110  data() {
111    return {
112      $t: useI18n().t,
113      loading,
114    };
115  },
116  computed: {
117    ...mapGetters({
118      powerConsumptionValue: 'powerControl/powerConsumptionValue',
119    }),
120
121    /**
122      Computed property isPowerCapFieldEnabled is used to enable or disable the input field.
123      The input field is enabled when the powercapValue property is not null.
124   **/
125    isPowerCapFieldEnabled: {
126      get() {
127        return this.powerCapValue !== null;
128      },
129      set(value) {
130        this.v$.$reset();
131        let newValue = null;
132        if (value) {
133          if (this.powerCapValue) {
134            newValue = this.powerCapValue;
135          } else {
136            newValue = '';
137          }
138        }
139        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', newValue);
140      },
141    },
142    powerCapValue: {
143      get() {
144        return this.$store.getters['powerControl/powerCapValue'];
145      },
146      set(value) {
147        this.v$.$touch();
148        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value);
149      },
150    },
151  },
152  created() {
153    this.startLoader();
154    this.$store
155      .dispatch('powerControl/getPowerControl')
156      .finally(() => this.endLoader());
157  },
158  validations: {
159    powerCapValue: {
160      between: between(1, 10000),
161      required: requiredIf(function () {
162        return this.isPowerCapFieldEnabled;
163      }),
164    },
165  },
166  methods: {
167    submitForm() {
168      this.v$.$touch();
169      if (this.v$.$invalid) return;
170      this.startLoader();
171      this.$store
172        .dispatch('powerControl/setPowerControl', this.powerCapValue)
173        .then((message) => this.successToast(message))
174        .catch(({ message }) => this.errorToast(message))
175        .finally(() => this.endLoader());
176    },
177  },
178};
179</script>
180