core: frontend: split vehicle setup configurations

core/frontend/src/components/vehiclesetup/Configure.vue

@@ -1,56 +1,60 @@
 <template>
-  <div>
-    <v-row class="mt-5">
-      <v-col
-        cols="12"
-        sm="7"
+  <v-container fluid>
+    <v-tabs
+      v-model="page_selected"
+      centered
+      show-arrows
+    >
+      <v-tabs-slider />
+      <v-tab
+        v-for="page in pages"
+        :key="page.value"
       >
-        <v-card class="pa-5 ma-2">
-          <vehicle-viewer
-            noannotations
-            :autorotate="true"
-          />
-        </v-card>
-      </v-col>
-      <v-col
-        cols="12"
-        sm="5"
+        {{ page.title }}
+        <!-- <v-icon>{{ page.icon }}</v-icon> -->
+      </v-tab>
+    </v-tabs>
+    <v-tabs-items v-model="page_selected">
+      <v-tab-item
+        v-for="page in pages"
+        :key="page.value"
       >
-        <vehicle-info :autorotate="true" />
-        <param-sets />
-      </v-col>
-    </v-row>
-    <v-sheet class="d-flex">
-      <lights-info />
-      <gripper-info />
-      <leak-info />
-      <power-info />
-    </v-sheet>
-  </div>
+        <param-sets v-if="page.value === 'parameters'" />
+      </v-tab-item>
+    </v-tabs-items>
+  </v-container>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 
-import VehicleInfo from '@/components/vehiclesetup/overview/VehicleInfo.vue'
-import VehicleViewer from '@/components/vehiclesetup/viewers/VehicleViewer.vue'
-
-import GripperInfo from './overview/gripper.vue'
-import LeakInfo from './overview/LeakInfo.vue'
-import LightsInfo from './overview/LightsInfo.vue'
 import ParamSets from './overview/ParamSets.vue'
-import PowerInfo from './overview/PowerInfo.vue'
+
+export interface Item {
+  title: string,
+  icon: string,
+  value: string,
+}
 
 export default Vue.extend({
   name: 'Configure',
   components: {
-    VehicleViewer,
-    VehicleInfo,
-    GripperInfo,
-    PowerInfo,
-    LightsInfo,
-    LeakInfo,
     ParamSets,
   },
+  data() {
+    return {
+      page_selected: null as string | null,
+      pages: [
+        { title: 'Parameters', value: 'parameters' },
+        { title: 'Accelerometer', value: 'acc' },
+        { title: 'Compass', value: 'compass' },
+        { title: 'Baro', value: 'baro' },
+        { title: 'Gripper', value: 'gripper' },
+        { title: 'Lights', value: 'lights' },
+        { title: 'Camera Mount', value: 'mount' },
+
+      ] as Item[],
+    }
+  },
 })
 </script>