From c1d58e7c28794e2f5424d1e835bfb4ddb90f1754 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 8 Dec 2023 14:20:14 -0300
Subject: [PATCH 1/3] joystick-config-view: Improve joystick image reload logic

This way the joystick does not disappear during the process.
---
 src/stores/controller.ts                | 2 +-
 src/views/ConfigurationJoystickView.vue | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/stores/controller.ts b/src/stores/controller.ts
index a198d41ec..4fd4ab8c2 100644
--- a/src/stores/controller.ts
+++ b/src/stores/controller.ts
@@ -128,7 +128,7 @@ export const useControllerStore = defineStore('controller', () => {
       })
       protocolMapping.value.buttonsCorrespondencies[v.modKey][v.button].action = otherAvailableActions.no_function
     })
-  }, 1000)
+  }, 500)
 
   // If there's a mapping in our database that is not on the user storage, add it to the user
   // This will happen whenever a new joystick profile is added to Cockpit's database
diff --git a/src/views/ConfigurationJoystickView.vue b/src/views/ConfigurationJoystickView.vue
index e687257ed..8944aa161 100644
--- a/src/views/ConfigurationJoystickView.vue
+++ b/src/views/ConfigurationJoystickView.vue
@@ -203,7 +203,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import Button from '@/components/Button.vue'
 import JoystickPS from '@/components/joysticks/JoystickPS.vue'
@@ -313,8 +313,10 @@ const updateButtonAction = (input: JoystickInput, action: ProtocolAction): void
   controllerStore.protocolMapping.buttonsCorrespondencies[currentModifierKey.value.id as CockpitModifierKeyOption][
     input.id
   ].action = action
-  showJoystickLayout.value = false
-  setTimeout(() => (showJoystickLayout.value = true), 3000)
+  setTimeout(() => {
+    showJoystickLayout.value = false
+    nextTick(() => (showJoystickLayout.value = true))
+  }, 1000)
   buttonFunctionAssignmentFeedback.value = `Button ${input.id} remapped to function '${action.name}'.`
   showButtonFunctionAssignmentFeedback.value = true
   setTimeout(() => (showButtonFunctionAssignmentFeedback.value = false), 5000)

From c28f79d8e90f010ba6d0106c1ed0194042e4a0ee Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 8 Dec 2023 14:20:50 -0300
Subject: [PATCH 2/3] joystick-config-view: Do not show the "Regular" modifier
 key as a function option

---
 src/views/ConfigurationJoystickView.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/views/ConfigurationJoystickView.vue b/src/views/ConfigurationJoystickView.vue
index 8944aa161..d8401bedd 100644
--- a/src/views/ConfigurationJoystickView.vue
+++ b/src/views/ConfigurationJoystickView.vue
@@ -139,7 +139,7 @@
                   <span class="mx-auto text-xl font-bold">{{ protocol }}</span>
                   <div class="flex flex-col items-center px-2 py-1 overflow-y-auto">
                     <Button
-                      v-for="action in controllerStore.availableButtonActions.filter((a) => a.protocol === protocol)"
+                      v-for="action in buttonActionsToShow.filter((a) => a.protocol === protocol)"
                       :key="action.name"
                       class="w-full my-1 text-sm hover:bg-slate-700"
                       :class="{
@@ -353,4 +353,8 @@ const buttonRemappingText = computed(() => {
     ? 'Input remapped.'
     : 'No input detected.'
 })
+
+const buttonActionsToShow = computed(() =>
+  controllerStore.availableButtonActions.filter((a) => JSON.stringify(a) !== JSON.stringify(modifierKeyActions.regular))
+)
 </script>

From 5d6fb714954b799f3c106458d357274ccaeb8224 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 8 Dec 2023 14:21:21 -0300
Subject: [PATCH 3/3] joystick-config-view: Only show axis-related component
 when axis in present in the input

---
 src/views/ConfigurationJoystickView.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/ConfigurationJoystickView.vue b/src/views/ConfigurationJoystickView.vue
index d8401bedd..3bda7a63f 100644
--- a/src/views/ConfigurationJoystickView.vue
+++ b/src/views/ConfigurationJoystickView.vue
@@ -161,8 +161,10 @@
               {{ buttonFunctionAssignmentFeedback }}
             </p>
           </Transition>
-          <div class="w-[90%] h-[2px] my-5 bg-slate-900/20" />
-          <p class="flex items-center justify-center w-full text-xl font-bold text-slate-600">Axis mapping</p>
+          <template v-if="currentAxisInputs.length > 0">
+            <div class="w-[90%] h-[2px] my-5 bg-slate-900/20" />
+            <p class="flex items-center justify-center w-full text-xl font-bold text-slate-600">Axis mapping</p>
+          </template>
           <div v-for="input in currentAxisInputs" :key="input.id" class="flex items-center justify-between p-2">
             <v-icon class="mr-3">
               {{ [JoystickAxis.A0, JoystickAxis.A2].includes(input.id) ? 'mdi-pan-horizontal' : 'mdi-pan-vertical' }}