joytick-configuration: Only show one protocol panel at a given time

bluerobotics · Oct 15, 2024 · 5185b1d · 5185b1d
1 parent 16819a6
commit 5185b1d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/components/ExpansiblePanel.vue b/src/components/ExpansiblePanel.vue
@@ -179,6 +179,8 @@ const warningContent = ref<HTMLElement | null>(null)
 const animateWarning = ref(true)
 const showElevationEffect = ref(isPanelExpanded.value || false)
 
+const emit = defineEmits(['update:isExpanded'])
+
 const togglePanel = (): void => {
   if (isPanelExpanded.value) {
     isPanelExpanded.value = false
@@ -189,6 +191,7 @@ const togglePanel = (): void => {
     showElevationEffect.value = true
     isPanelExpanded.value = true
   }
+  emit('update:isExpanded', isPanelExpanded.value)
 }
 
 const textSize = computed(() => {

diff --git a/src/views/ConfigurationJoystickView.vue b/src/views/ConfigurationJoystickView.vue
@@ -459,7 +459,8 @@
               mark-expanded
               darken-content
               hover-effect
-              :is-expanded="protocol === JoystickProtocol.MAVLinkManualControl"
+              :is-expanded="protocol === protocolToExpand"
+              @update:is-expanded="(isExpanded: boolean) => reactToPanelExpansion(isExpanded, protocol)"
             >
               <template #title>
                 {{ protocol }}
@@ -549,7 +550,7 @@
       </template>
       <template #actions>
         <div class="flex justify-end w-full">
-          <v-btn variant="text" class="m-1" @click="inputClickedDialog = false"> Close </v-btn>
+          <v-btn variant="text" class="m-1" @click="closeInputMappingDialog"> Close </v-btn>
         </div>
       </template>
     </InteractionDialog>
@@ -818,4 +819,16 @@ const vehicleTypesAssignedToCurrentProfile = computed({
     })
   },
 })
+
+const protocolToExpand = ref<JoystickProtocol | undefined>(undefined)
+
+const reactToPanelExpansion = (isExpanded: boolean, protocol: JoystickProtocol): void => {
+  console.log(`${protocol} is expanded: ${isExpanded}`)
+  protocolToExpand.value = isExpanded ? protocol : undefined
+}
+
+const closeInputMappingDialog = (): void => {
+  inputClickedDialog.value = false
+  protocolToExpand.value = undefined
+}
 </script>