ADD: Key mapping comms according to spec

src/renderer/src/components/config/keys/KeyMappingConfig.vue

@@ -18,45 +18,39 @@
     <ActionGroup :actions="actionsHeld" class="p-2" />
   </ConfigSection>
 </template>
-<script setup>
+<script setup lang="ts">
 import { PanelBottomClose, PanelBottomOpen, Clock2 } from 'lucide-vue-next'
 import ConfigSection from '@renderer/components/common/ConfigSection.vue'
 import { useAppStore } from '@renderer/appStore'
-import { ref } from 'vue'
+import { useDeviceStore } from '@renderer/deviceStore'
 import ActionGroup from '@renderer/components/config/actions/ActionGroup.vue'
+import { computed } from 'vue'
+import { Action } from '@renderer/deviceStore'
 
 const appStore = useAppStore()
-const actionsPressed = ref([
-  {
-    id: '1'
+const deviceStore = useDeviceStore()
+const actionsPressed = computed({
+  get() {
+    return deviceStore.keyActions(appStore.selectedKey).pressedActions as Action[]
   },
-  {
-    id: '2'
-  },
-  {
-    id: '3'
+  set(newValue) {
+    deviceStore.setKeyPressedActions(appStore.selectedKey, newValue)
   }
-])
-const actionsReleased = ref([
-  {
-    id: '4'
+})
+const actionsReleased = computed({
+  get() {
+    return deviceStore.keyActions(appStore.selectedKey).releasedActions as Action[]
   },
-  {
-    id: '5'
-  },
-  {
-    id: '6'
+  set(newValue) {
+    deviceStore.setKeyReleasedActions(appStore.selectedKey, newValue)
   }
-])
-const actionsHeld = ref([
-  {
-    id: '7'
+})
+const actionsHeld = computed({
+  get() {
+    return deviceStore.keyActions(appStore.selectedKey).heldActions as Action[]
   },
-  {
-    id: '8'
-  },
-  {
-    id: '9'
+  set(newValue) {
+    deviceStore.setKeyHeldActions(appStore.selectedKey, newValue)
   }
-])
+})
 </script>

src/renderer/src/deviceStore.ts

@@ -5,6 +5,7 @@ import { randomName } from '@renderer/randomName'
 
 // Generated from https://github.com/katbinaris/NanoD_RatchetH1/blob/runger/communications.md
 // Using https://app.quicktype.io/
+// WARNING: The tool does 80% of the work, but you need to make sure the types are correct
 export interface Profile {
   version: number
   name: string
@@ -38,9 +39,9 @@ export interface Profile {
 }
 
 export interface Key {
-  pressedActions: Action[]
-  releasedActions: Action[]
-  heldActions: Action[]
+  pressed?: Action[]
+  released?: Action[]
+  held?: Action[]
 }
 
 export interface Action {
@@ -111,6 +112,17 @@ export const useDeviceStore = defineStore('device', {
     keyColor: (state) => (key: string, pressed: boolean) => {
       const propertyName = `button${key.toUpperCase()}${pressed ? 'Press' : 'Idle'}`
       return state.currentProfile ? state.currentProfile[propertyName] : 0
+    },
+    keyActions: (state) => (key: string) => {
+      const keyIndex = state.keyLabels.indexOf(key)
+      return (
+        state.currentProfile?.keys[keyIndex] ||
+        ({
+          pressed: [],
+          released: [],
+          held: []
+        } as Key)
+      )
     }
   },
   actions: {
@@ -311,6 +323,48 @@ export const useDeviceStore = defineStore('device', {
         )
         this.setDirtyState(true)
       }
+    },
+    setKeyPressedActions(key: string, actions: Action[], updateDevice: boolean = true) {
+      const keyIndex = this.keyLabels.indexOf(key)
+      this.currentProfile!.keys[keyIndex].pressed = actions
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({
+            profile: this.currentProfileName,
+            updates: { keys: this.currentProfile!.keys }
+          })
+        )
+        this.setDirtyState(true)
+      }
+    },
+    setKeyReleasedActions(key: string, actions: Action[], updateDevice: boolean = true) {
+      const keyIndex = this.keyLabels.indexOf(key)
+      this.currentProfile!.keys[keyIndex].released = actions
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({
+            profile: this.currentProfileName,
+            updates: { keys: this.currentProfile!.keys }
+          })
+        )
+        this.setDirtyState(true)
+      }
+    },
+    setKeyHeldActions(key: string, actions: Action[], updateDevice: boolean = true) {
+      const keyIndex = this.keyLabels.indexOf(key)
+      this.currentProfile!.keys[keyIndex].held = actions
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({
+            profile: this.currentProfileName,
+            updates: { keys: this.currentProfile!.keys }
+          })
+        )
+        this.setDirtyState(true)
+      }
     }
   }
 })