1<template>
2  <v-row>
3    <v-col
4      cols="12"
5      md="6"
6    >
7      <PayloadDetail
8        v-if="zipFile && payload"
9        :zipFile="zipFile"
10        :payload="payload"
11      />
12    </v-col>
13    <v-divider
14      vertical
15    />
16    <v-col
17      cols="12"
18      md="6"
19    >
20      <PayloadComposition
21        v-if="zipFile && payload.manifest"
22        :manifest="payload.manifest"
23        :demo="true"
24      />
25    </v-col>
26  </v-row>
27</template>
28
29<script>
30import axios from 'axios'
31import PayloadDetail from '@/components/PayloadDetail.vue'
32import PayloadComposition from '@/components/PayloadComposition.vue'
33import { Payload } from '@/services/payload.js'
34
35export default {
36  components: {
37    PayloadDetail,
38    PayloadComposition,
39  },
40  data() {
41    return {
42      zipFile: null,
43      payload: null,
44    }
45  },
46  async created() {
47    // put cf_x86_demo.zip and cf_x86_target_file_demo into
48    // this directory: /public/files
49    try {
50      const download = await axios.get(
51        './files/cf_x86_demo.zip',
52        {responseType: 'blob'}
53      )
54      this.zipFile = new File([download.data], 'ota_demo.zip')
55      this.payload = new Payload(this.zipFile)
56      await this.payload.init()
57    } catch (err) {
58      console.log('Please put a proper example OTA in /public/files/')
59    }
60  },
61  methods: {
62    async unpackOTA(files) {
63      this.zipFile = files[0]
64      try {
65        this.payload = new Payload(this.zipFile)
66        await this.payload.init()
67      } catch (err) {
68        alert('Please check if this is a correct OTA package (.zip).')
69        console.log(err)
70      }
71    },
72  },
73}
74</script>
75