From a6230152d5185f06545b655195d528d9a2ad231f Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sat, 23 Mar 2024 14:47:32 +0100
Subject: [PATCH] UPD: Show key action keycode

---
 .../src/components/config/actions/ActionCard.vue  | 15 +++++++--------
 .../src/components/config/actions/ActionGroup.vue |  2 +-
 .../components/config/actions/SendKeyAction.vue   | 11 +++++++++++
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/components/config/actions/ActionCard.vue b/src/renderer/src/components/config/actions/ActionCard.vue
index 7d1fe22..02a9be1 100644
--- a/src/renderer/src/components/config/actions/ActionCard.vue
+++ b/src/renderer/src/components/config/actions/ActionCard.vue
@@ -81,6 +81,7 @@
       :is="
         actionTypeOptions[inputValue]?.component ? actionTypeOptions[inputValue]?.component : WIP
       "
+      :action="action"
     />
   </div>
 </template>
@@ -105,23 +106,21 @@ import SendStringAction from '@renderer/components/config/actions/SendStringActi
 import ScrambleText from '@renderer/components/common/ScrambleText.vue'
 import { ChevronsUpDown, Check, GripHorizontal, Trash2, X } from 'lucide-vue-next'
 import { useElementSize } from '@vueuse/core'
+import { Action } from '@renderer/deviceStore'
 
 defineProps({
   actionIndex: {
     type: Number,
     required: false
+  },
+  action: {
+    type: Object as () => Action,
+    required: true
   }
 })
 
 const actionTypeOptions = ref({
-  sendKey: { label: 'Press Key or Combination', component: SendKeyAction },
-  sendString: { label: 'Type a String', component: SendStringAction },
-  sendMouse: { label: 'Move, Scroll or Click', component: 'SendMouseAction' },
-  sendGamepad: { label: 'Send a Gamepad Input', component: 'SendGamepadAction' },
-  sendMidi: { label: 'Send a MIDI Message', component: 'SendMidiAction' },
-  sendOsc: { label: 'Send an OSC Message', component: 'SendOscAction' },
-  sendSerial: { label: 'Send a Serial Message', component: 'SendSerialAction' },
-  changeProfile: { label: 'Change Device Profile', component: 'ChangeProfileAction' }
+  key: { label: 'Press a Key', component: SendKeyAction }
 })
 
 const comboboxButton = ref(null)
diff --git a/src/renderer/src/components/config/actions/ActionGroup.vue b/src/renderer/src/components/config/actions/ActionGroup.vue
index 1e1ec5a..47270d0 100644
--- a/src/renderer/src/components/config/actions/ActionGroup.vue
+++ b/src/renderer/src/components/config/actions/ActionGroup.vue
@@ -11,7 +11,7 @@
     >
       <template #item="dragAction">
         <div :key="dragAction.element.id">
-          <ActionCard :action-index="dragAction.index + 1" />
+          <ActionCard :action-index="dragAction.index + 1" :action="dragAction.element" />
         </div>
       </template>
     </draggable>
diff --git a/src/renderer/src/components/config/actions/SendKeyAction.vue b/src/renderer/src/components/config/actions/SendKeyAction.vue
index 8b260e3..76e7b1e 100644
--- a/src/renderer/src/components/config/actions/SendKeyAction.vue
+++ b/src/renderer/src/components/config/actions/SendKeyAction.vue
@@ -10,11 +10,22 @@
     <div v-if="lastEvent" class="mt-6 text-center font-mono text-sm text-muted-foreground">
       Key: {{ lastEvent?.key }} | Code: {{ lastEvent?.keyCode }} | Type: {{ lastEvent?.type }}
     </div>
+    <div class="mt-6 text-center font-mono text-sm text-muted-foreground">
+      Keycode: {{ action.keyCodes ? action.keyCodes.join(', ') : 'None' }}
+    </div>
   </div>
 </template>
 <script setup lang="ts">
 import { Button } from '@renderer/components/ui/button'
 import { ref, Ref } from 'vue'
+import { Action } from '@renderer/deviceStore'
+
+defineProps({
+  action: {
+    type: Object as () => Action,
+    required: true
+  }
+})
 
 const isCapturing = ref(false)
 const listener = (e: KeyboardEvent) => {