1<template>
2  <h4> {{ partition.partitionName }} </h4>
3  <p v-if="partition.estimateCowSize">
4    <strong> Estimate COW Size: </strong> {{ partition.estimateCowSize }} Bytes
5  </p>
6  <div
7    class="toggle"
8    @click="toggle('showInfo')"
9  >
10    <h4> Partition Infos </h4>
11    <ul v-if="showInfo">
12      <li v-if="partition.oldPartitionInfo">
13        <strong>
14          Old Partition Size:
15        </strong>
16        {{ partition.oldPartitionInfo.size }} Bytes
17      </li>
18      <li v-if="partition.oldPartitionInfo">
19        <strong>
20          Old Partition Hash:
21        </strong>
22        {{ octToHex(partition.oldPartitionInfo.hash, false, 16) }}
23      </li>
24      <li>
25        <strong>
26          New Partition Size:
27        </strong>
28        {{ partition.newPartitionInfo.size }} Bytes
29      </li>
30      <li v-if="partition.newPartitionInfo.hash">
31        <strong>
32          New Partition Hash:
33        </strong>
34        {{ octToHex(partition.newPartitionInfo.hash, false, 16) }}
35      </li>
36    </ul>
37  </div>
38  <div
39    class="toggle"
40    @click="toggle('showOPs')"
41  >
42    <h4> Total Operations: {{ partition.operations.length }} </h4>
43    <ul
44      v-if="showOPs"
45    >
46      <li
47        v-for="operation in partition.operations"
48        :key="operation.dataSha256Hash"
49      >
50        <OperationDetail
51          :operation="operation"
52          :mapType="opType.mapType"
53        />
54      </li>
55    </ul>
56  </div>
57</template>
58
59<script>
60import { OpType, octToHex } from '@/services/payload.js'
61import OperationDetail from '@/components/OperationDetail.vue'
62
63export default {
64  components: {
65    OperationDetail,
66  },
67  props: {
68    partition: {
69      type: Object,
70      required: true,
71    },
72  },
73  data() {
74    return {
75      showOPs: false,
76      showInfo: false,
77      opType: null,
78    }
79  },
80  created() {
81    this.opType = new OpType()
82  },
83  methods: {
84    toggle(key) {
85      this[key] = !this[key]
86    },
87    octToHex: octToHex,
88  },
89}
90</script>
91
92<style scoped>
93.toggle {
94  display: block;
95  cursor: pointer;
96  color: #762ace;
97}
98
99li {
100  list-style-type: none;
101}
102</style>