joystick-pipeline: Allow importing joystick mapping from vehicle

src/stores/controller.ts

@@ -171,6 +171,28 @@ export const useControllerStore = defineStore('controller', () => {
     Swal.fire({ icon: 'success', text: 'Joystick mapping exported to vehicle.', timer: 3000 })
   }
 
+  const importJoysticksMappingsFromVehicle = async (vehicleAddress: string): Promise<void> => {
+    const newMapping = await getKeyDataFromCockpitVehicleStorage(vehicleAddress, cockpitStdMappingsKey)
+    if (!newMapping) {
+      Swal.fire({ icon: 'error', text: 'No joystick mappings to import from vehicle.', timer: 3000 })
+      return
+    }
+    try {
+      Object.values(newMapping).forEach((mapping) => {
+        if (!mapping['name'] || !mapping['axes'] || !mapping['buttons']) {
+          throw Error('Invalid joystick mapping inside vehicle.')
+        }
+      })
+    } catch (error) {
+      Swal.fire({ icon: 'error', text: `Could not import joystick mapping from vehicle. ${error}`, timer: 3000 })
+      return
+    }
+
+    // @ts-ignore: We check for the necessary fields in the if before
+    cockpitStdMappings.value = newMapping
+    Swal.fire({ icon: 'success', text: 'Joystick mapping imported from vehicle.', timer: 3000 })
+  }
+
   const exportFunctionsMapping = (protocolActionsMapping: JoystickProtocolActionsMapping): void => {
     const blob = new Blob([JSON.stringify(protocolActionsMapping)], { type: 'text/plain;charset=utf-8' })
     saveAs(blob, `cockpit-std-profile-joystick-${protocolActionsMapping.name}.json`)
@@ -231,6 +253,7 @@ export const useControllerStore = defineStore('controller', () => {
     exportJoystickMapping,
     importJoystickMapping,
     exportJoysticksMappingsToVehicle,
+    importJoysticksMappingsFromVehicle,
     exportFunctionsMapping,
     importFunctionsMapping,
     exportFunctionsMappingToVehicle,

src/views/ConfigurationJoystickView.vue

@@ -108,6 +108,12 @@
           >
             Export joystick mapping to vehicle
           </button>
+          <button
+            class="w-auto p-3 m-2 font-medium rounded-md shadow-md text-uppercase"
+            @click="controllerStore.importJoysticksMappingsFromVehicle(globalAddress)"
+          >
+            Import joystick mapping from vehicle
+          </button>
           <div class="grow" />
           <button
             class="w-auto p-3 m-2 font-medium rounded-md shadow-md text-uppercase"