From e1a2420b5cfdc8af27f2aa5cae3d08f82590854b Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 5 Dec 2023 16:35:51 -0300
Subject: [PATCH] update layout automatically

---
 src/views/ConfigurationJoystickView.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/views/ConfigurationJoystickView.vue b/src/views/ConfigurationJoystickView.vue
index 6bafe9a02..ce6254d41 100644
--- a/src/views/ConfigurationJoystickView.vue
+++ b/src/views/ConfigurationJoystickView.vue
@@ -56,7 +56,7 @@
         class="w-[95%] p-4 shadow-md rounded-2xl flex-centered flex-column position-relative"
       >
         <p class="text-xl font-semibold text-grey-darken-3">{{ joystick.model }} controller</p>
-        <div class="flex flex-col items-center justify-center w-full">
+        <div v-if="showJoystickLayout" class="flex flex-col items-center justify-center w-full">
           <JoystickPS
             class="w-[70%]"
             :model="joystick.model"
@@ -112,6 +112,7 @@
         <v-card-title class="flex justify-center w-full">Update mapping</v-card-title>
         <v-card-text class="flex justify-between align-center">
           <JoystickPS
+            v-if="showJoystickLayout"
             class="w-[50%] p-6"
             :model="currentJoystick.model"
             :left-axis-horiz="currentJoystick.state.axes[0]"
@@ -218,7 +219,7 @@
                               currentButtonActions[input.id].action.protocol == action.protocol &&
                               currentButtonActions[input.id].action.id == action.id,
                           }"
-                          @click="currentButtonActions[input.id].action = action"
+                          @click="updateButtonAction(input, action)"
                         >
                           {{ action.name }}
                         </Button>
@@ -256,9 +257,11 @@ import {
   JoystickButton,
   JoystickButtonInput,
   JoystickProtocol,
+type ProtocolAction,
 } from '@/types/joystick'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
+import { nextTick } from 'vue'
 
 const controllerStore = useControllerStore()
 
@@ -278,7 +281,7 @@ const justRemappedInput = ref<boolean>()
 const inputClickedDialog = ref(false)
 const currentModifierKey = ref(modifierKeyActions.regular)
 const availableModifierKeys = Object.values(modifierKeyActions)
-
+const showJoystickLayout = ref(true)
 watch(inputClickedDialog, () => (justRemappedInput.value = undefined))
 
 const setCurrentInputs = (joystick: Joystick, inputs: JoystickInput[]): void => {
@@ -335,6 +338,12 @@ const currentButtonActions = computed(
   () => controllerStore.protocolMapping.buttonsCorrespondencies[currentModifierKey.value.id as CockpitModifierKeyOption]
 )
 
+const updateButtonAction = (input: JoystickInput, action: ProtocolAction): void => {
+  controllerStore.protocolMapping.buttonsCorrespondencies[currentModifierKey.value.id as CockpitModifierKeyOption][input.id].action = action
+  showJoystickLayout.value = false
+  nextTick(() => (showJoystickLayout.value = true))
+}
+
 // Automatically change between modifier key tabs/layouts when they are pressed
 watch(controllerStore.joysticks, () => {
   if (currentJoystick.value === undefined) {