1<template>
2  <div>
3    <div class="form-background p-3">
4      <b-form @submit.prevent="onSubmitUpload">
5        <!-- Workstation Upload -->
6        <template>
7          <b-form-group
8            :label="$t('pageFirmware.form.updateFirmware.imageFile')"
9            label-for="image-file"
10          >
11            <form-file
12              id="image-file"
13              :disabled="isPageDisabled"
14              :state="getValidationState($v.file)"
15              aria-describedby="image-file-help-block"
16              @input="onFileUpload($event)"
17            >
18              <template #invalid>
19                <b-form-invalid-feedback role="alert">
20                  {{ $t('global.form.required') }}
21                </b-form-invalid-feedback>
22              </template>
23            </form-file>
24          </b-form-group>
25        </template>
26
27        <b-btn
28          data-test-id="firmware-button-startUpdate"
29          type="submit"
30          variant="primary"
31          :disabled="isPageDisabled"
32        >
33          {{ $t('pageFirmware.form.updateFirmware.startUpdate') }}
34        </b-btn>
35      </b-form>
36    </div>
37
38    <!-- Modals -->
39    <modal-update-firmware @ok="updateFirmware" />
40  </div>
41</template>
42
43<script>
44import { required } from 'vuelidate/lib/validators';
45
46import BVToastMixin from '@/components/Mixins/BVToastMixin';
47import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
48import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
49
50import FormFile from '@/components/Global/FormFile';
51import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
52
53export default {
54  components: { FormFile, ModalUpdateFirmware },
55  mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
56  props: {
57    isPageDisabled: {
58      required: true,
59      type: Boolean,
60      default: false,
61    },
62    isServerOff: {
63      required: true,
64      type: Boolean,
65    },
66  },
67  data() {
68    return {
69      loading,
70      file: null,
71      isServerPowerOffRequired:
72        process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
73    };
74  },
75  validations() {
76    return {
77      file: {
78        required,
79      },
80    };
81  },
82  created() {
83    this.$store.dispatch('firmware/getUpdateServiceSettings');
84  },
85  methods: {
86    updateFirmware() {
87      this.startLoader();
88      const timerId = setTimeout(() => {
89        this.endLoader();
90        this.infoToast(this.$t('pageFirmware.toast.verifyUpdateMessage'), {
91          title: this.$t('pageFirmware.toast.verifyUpdate'),
92          refreshAction: true,
93        });
94      }, 360000);
95      this.infoToast(this.$t('pageFirmware.toast.updateStartedMessage'), {
96        title: this.$t('pageFirmware.toast.updateStarted'),
97        timestamp: true,
98      });
99      this.dispatchWorkstationUpload(timerId);
100    },
101    dispatchWorkstationUpload(timerId) {
102      this.$store
103        .dispatch('firmware/uploadFirmware', this.file)
104        .catch(({ message }) => {
105          this.endLoader();
106          this.errorToast(message);
107          clearTimeout(timerId);
108        });
109    },
110    onSubmitUpload() {
111      this.$v.$touch();
112      if (this.$v.$invalid) return;
113      this.$bvModal.show('modal-update-firmware');
114    },
115    onFileUpload(file) {
116      this.file = file;
117      this.$v.file.$touch();
118    },
119  },
120};
121</script>
122