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';
49import { useVuelidate } from '@vuelidate/core';
50
51import FormFile from '@/components/Global/FormFile';
52import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
53import { useI18n } from 'vue-i18n';
54import i18n from '@/i18n';
55
56export default {
57  components: { FormFile, ModalUpdateFirmware },
58  mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
59  props: {
60    isPageDisabled: {
61      required: true,
62      type: Boolean,
63      default: false,
64    },
65    isServerOff: {
66      required: true,
67      type: Boolean,
68    },
69  },
70  setup() {
71    return {
72      v$: useVuelidate(),
73    };
74  },
75  data() {
76    return {
77      $t: useI18n().t,
78      loading,
79      file: null,
80      isServerPowerOffRequired:
81        process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
82    };
83  },
84  validations: {
85    file: {
86      required,
87    },
88  },
89  created() {
90    this.$store.dispatch('firmware/getUpdateServiceSettings');
91  },
92  methods: {
93    updateFirmware() {
94      this.startLoader();
95      const timerId = setTimeout(() => {
96        this.endLoader();
97        this.infoToast(
98          i18n.global.t('pageFirmware.toast.verifyUpdateMessage'),
99          {
100            title: i18n.global.t('pageFirmware.toast.verifyUpdate'),
101            refreshAction: true,
102          },
103        );
104      }, 360000);
105      this.infoToast(i18n.global.t('pageFirmware.toast.updateStartedMessage'), {
106        title: i18n.global.t('pageFirmware.toast.updateStarted'),
107        timestamp: true,
108      });
109      this.dispatchWorkstationUpload(timerId);
110    },
111    dispatchWorkstationUpload(timerId) {
112      this.$store
113        .dispatch('firmware/uploadFirmware', {
114          image: this.file,
115        })
116        .catch(({ message }) => {
117          this.endLoader();
118          this.errorToast(message);
119          clearTimeout(timerId);
120        });
121    },
122    onSubmitUpload() {
123      this.v$.$touch();
124      if (this.v$.$invalid) return;
125      this.$bvModal.show('modal-update-firmware');
126    },
127    onFileUpload(file) {
128      this.file = file;
129      this.v$.file.$touch();
130    },
131  },
132};
133</script>
134