Minor UI improvements joystick map

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

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="{
@@ -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' }}
@@ -203,7 +205,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 +315,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)
@@ -351,4 +355,8 @@ const buttonRemappingText = computed(() => {
     ? 'Input remapped.'
     : 'No input detected.'
 })
+
+const buttonActionsToShow = computed(() =>
+  controllerStore.availableButtonActions.filter((a) => JSON.stringify(a) !== JSON.stringify(modifierKeyActions.regular))
+)
 </script>