1<template>
2  <div>
3    <div class="form-background p-3">
4      <b-form @submit.prevent="onSubmitUpload">
5        <b-form-group
6          v-if="isTftpUploadAvailable"
7          :label="$t('pageFirmware.form.updateFirmware.fileSource')"
8          :disabled="isPageDisabled"
9        >
10          <b-form-radio v-model="isWorkstationSelected" :value="true">
11            {{ $t('pageFirmware.form.updateFirmware.workstation') }}
12          </b-form-radio>
13          <b-form-radio v-model="isWorkstationSelected" :value="false">
14            {{ $t('pageFirmware.form.updateFirmware.tftpServer') }}
15          </b-form-radio>
16        </b-form-group>
17
18        <!-- Workstation Upload -->
19        <template v-if="isWorkstationSelected">
20          <b-form-group
21            :label="$t('pageFirmware.form.updateFirmware.imageFile')"
22            label-for="image-file"
23          >
24            <form-file
25              id="image-file"
26              :disabled="isPageDisabled"
27              :state="getValidationState($v.file)"
28              aria-describedby="image-file-help-block"
29              @input="onFileUpload($event)"
30            >
31              <template #invalid>
32                <b-form-invalid-feedback role="alert">
33                  {{ $t('global.form.required') }}
34                </b-form-invalid-feedback>
35              </template>
36            </form-file>
37          </b-form-group>
38        </template>
39
40        <!-- TFTP Server Upload -->
41        <template v-else>
42          <b-form-group
43            :label="$t('pageFirmware.form.updateFirmware.fileAddress')"
44            label-for="tftp-address"
45          >
46            <b-form-input
47              id="tftp-address"
48              v-model="tftpFileAddress"
49              type="text"
50              :state="getValidationState($v.tftpFileAddress)"
51              :disabled="isPageDisabled"
52              @input="$v.tftpFileAddress.$touch()"
53            />
54            <b-form-invalid-feedback role="alert">
55              {{ $t('global.form.fieldRequired') }}
56            </b-form-invalid-feedback>
57          </b-form-group>
58        </template>
59        <b-btn
60          data-test-id="firmware-button-startUpdate"
61          type="submit"
62          variant="primary"
63          :disabled="isPageDisabled"
64        >
65          {{ $t('pageFirmware.form.updateFirmware.startUpdate') }}
66        </b-btn>
67      </b-form>
68    </div>
69
70    <!-- Modals -->
71    <modal-update-firmware @ok="updateFirmware" />
72  </div>
73</template>
74
75<script>
76import { requiredIf } from 'vuelidate/lib/validators';
77
78import BVToastMixin from '@/components/Mixins/BVToastMixin';
79import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
80import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
81
82import FormFile from '@/components/Global/FormFile';
83import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
84
85export default {
86  components: { FormFile, ModalUpdateFirmware },
87  mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
88  props: {
89    isPageDisabled: {
90      required: true,
91      type: Boolean,
92      default: false,
93    },
94    isServerOff: {
95      required: true,
96      type: Boolean,
97    },
98  },
99  data() {
100    return {
101      loading,
102      isWorkstationSelected: true,
103      file: null,
104      tftpFileAddress: null,
105      isServerPowerOffRequired:
106        process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
107    };
108  },
109  computed: {
110    isTftpUploadAvailable() {
111      return this.$store.getters['firmware/isTftpUploadAvailable'];
112    },
113  },
114  watch: {
115    isWorkstationSelected: function () {
116      this.$v.$reset();
117      this.file = null;
118      this.tftpFileAddress = null;
119    },
120  },
121  validations() {
122    return {
123      file: {
124        required: requiredIf(function () {
125          return this.isWorkstationSelected;
126        }),
127      },
128      tftpFileAddress: {
129        required: requiredIf(function () {
130          return !this.isWorkstationSelected;
131        }),
132      },
133    };
134  },
135  created() {
136    this.$store.dispatch('firmware/getUpdateServiceSettings');
137  },
138  methods: {
139    updateFirmware() {
140      this.startLoader();
141      const timerId = setTimeout(() => {
142        this.endLoader();
143        this.infoToast(this.$t('pageFirmware.toast.verifyUpdateMessage'), {
144          title: this.$t('pageFirmware.toast.verifyUpdate'),
145          refreshAction: true,
146        });
147      }, 360000);
148      this.infoToast(this.$t('pageFirmware.toast.updateStartedMessage'), {
149        title: this.$t('pageFirmware.toast.updateStarted'),
150        timestamp: true,
151      });
152      if (this.isWorkstationSelected) {
153        this.dispatchWorkstationUpload(timerId);
154      } else {
155        this.dispatchTftpUpload(timerId);
156      }
157    },
158    dispatchWorkstationUpload(timerId) {
159      this.$store
160        .dispatch('firmware/uploadFirmware', this.file)
161        .catch(({ message }) => {
162          this.endLoader();
163          this.errorToast(message);
164          clearTimeout(timerId);
165        });
166    },
167    dispatchTftpUpload(timerId) {
168      this.$store
169        .dispatch('firmware/uploadFirmwareTFTP', this.tftpFileAddress)
170        .catch(({ message }) => {
171          this.endLoader();
172          this.errorToast(message);
173          clearTimeout(timerId);
174        });
175    },
176    onSubmitUpload() {
177      this.$v.$touch();
178      if (this.$v.$invalid) return;
179      this.$bvModal.show('modal-update-firmware');
180    },
181    onFileUpload(file) {
182      this.file = file;
183      this.$v.file.$touch();
184    },
185  },
186};
187</script>
188