xref: /aosp_15_r20/development/tools/otagui/src/views/JobConfigure.vue (revision 90c8c64db3049935a07c6143d7fd006e26f8ecca) 
1<template>
2  <v-row>
3    <v-col
4      id="dynamic-component-demo"
5      cols="12"
6      md="6"
7    >
8      <button
9        v-for="tab in tabs"
10        :key="tab.label"
11        :class="['tab-button', { active: currentTab === tab.component }]"
12        @click="currentTab = tab.component"
13      >
14        {{ tab.label }}
15      </button>
16      <component
17        :is="currentTab"
18        class="tab-component"
19        :targetDetails="targetDetails"
20        @update:handler="setHandler"
21      />
22    </v-col>
23    <v-divider vertical />
24    <v-col
25      cols="12"
26      md="6"
27      class="library"
28    >
29      <!-- the key-binding refresh has to be used to reload the methods-->
30      <BuildLibrary
31        :refresh="refresh"
32        :isIncremental="checkIncremental"
33        @update:incrementalSource="addIncrementalSource"
34        @update:targetBuild="addTargetBuild"
35        @update:targetDetails="targetDetails = $event"
36      />
37    </v-col>
38  </v-row>
39</template>
40
41<script>
42import SingleOTAOptions from '@/components/SingleOTAOptions.vue'
43import BatchOTAOptions from '@/components/BatchOTAOptions.vue'
44import ChainOTAOptions from '@/components/ChainOTAOptions.vue'
45import BuildLibrary from '@/components/BuildLibrary.vue'
46
47export default {
48  components: {
49    SingleOTAOptions,
50    BatchOTAOptions,
51    ChainOTAOptions,
52    BuildLibrary,
53  },
54  data() {
55    return {
56      targetDetails: [],
57      currentTab: 'SingleOTAOptions',
58      refresh: false,
59      tabs: [
60        {label: 'Single OTA', component: 'SingleOTAOptions'},
61        {label: 'Batch OTA', component: 'BatchOTAOptions'},
62        {label: 'Chain OTA', component: 'ChainOTAOptions'}
63      ],
64    }
65  },
66  computed: {
67    checkIncremental() {
68      return this.$store.state.otaConfig.isIncremental
69    },
70  },
71  methods: {
72    setHandler(addIncrementalSource, addTargetBuild) {
73      this.refresh = true,
74      this.addIncrementalSource = addIncrementalSource
75      this.addTargetBuild = addTargetBuild
76      this.refresh = false
77    },
78    addIncrementalSource: () => {},
79    addTargetBuild: () => {}
80  }
81}
82</script>
83
84<style scoped>
85.library {
86  overflow: scroll;
87  height: calc(100vh - 80px);
88}
89
90.tab-component {
91  border: 3px solid #eee;
92  border-radius: 2px;
93  padding: 20px;
94}
95
96.tab-button {
97  padding: 6px 10px;
98  border-top-left-radius: 3px;
99  border-top-right-radius: 3px;
100  border: 1px solid #ccc;
101  cursor: pointer;
102  background: #f0f0f0;
103  margin-bottom: -1px;
104  margin-right: -1px;
105}
106.tab-button:hover {
107  background: #e0e0e0;
108}
109.tab-button.active {
110  background: #e0e0e0;
111}
112.demo-tab {
113  border: 1px solid #ccc;
114  padding: 10px;
115}
116</style>>