1<template>
2  <v-row>
3    <v-col
4      cols="12"
5      md="6"
6    >
7      <BaseFile
8        label="Please drag and drop an OTA package or Select one"
9        @file-select="unpackOTA"
10      />
11      <PayloadDetail
12        v-if="zipFile && payload"
13        :zipFile="zipFile"
14        :payload="payload"
15      />
16    </v-col>
17    <v-divider
18      vertical
19    />
20    <v-col
21      cols="12"
22      md="6"
23    >
24      <PayloadComposition
25        v-if="zipFile && payload.manifest"
26        :manifest="payload.manifest"
27      />
28    </v-col>
29  </v-row>
30</template>
31
32<script>
33import BaseFile from '@/components/BaseFile.vue'
34import PayloadDetail from '@/components/PayloadDetail.vue'
35import PayloadComposition from '@/components/PayloadComposition.vue'
36import { Payload } from '@/services/payload.js'
37
38export default {
39  components: {
40    BaseFile,
41    PayloadDetail,
42    PayloadComposition,
43  },
44  data() {
45    return {
46      zipFile: null,
47      payload: null,
48    }
49  },
50  methods: {
51    async unpackOTA(files) {
52      this.zipFile = files[0]
53      try {
54        this.payload = new Payload(this.zipFile)
55        await this.payload.init()
56      } catch (err) {
57        alert('Please check if this is a correct OTA package (.zip).')
58        console.log(err)
59      }
60    },
61  },
62}
63</script>
64