From c1e10385b855e3de8ef0bb0583d6017a2ebe4b80 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 1 May 2024 20:46:14 +0200
Subject: [PATCH] UPD: Display the actual knob values

---
 .../config/keys/KeyMappingConfig.vue          |  1 +
 .../config/knob/KnobMappingConfig.vue         | 27 ++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/renderer/src/components/config/keys/KeyMappingConfig.vue b/src/renderer/src/components/config/keys/KeyMappingConfig.vue
index 103469d..7fbe3a7 100644
--- a/src/renderer/src/components/config/keys/KeyMappingConfig.vue
+++ b/src/renderer/src/components/config/keys/KeyMappingConfig.vue
@@ -31,6 +31,7 @@ import { storeToRefs } from 'pinia'
 const appStore = useAppStore()
 const deviceStore = useDeviceStore()
 const { keyActions } = storeToRefs(deviceStore)
+// TODO: Only set the actions if they are different, only send those actions to the device
 const pressedActions = computed({
   get() {
     return (keyActions.value(appStore.selectedKey).pressed as Action[]) || []
diff --git a/src/renderer/src/components/config/knob/KnobMappingConfig.vue b/src/renderer/src/components/config/knob/KnobMappingConfig.vue
index 7c06752..cc14973 100644
--- a/src/renderer/src/components/config/knob/KnobMappingConfig.vue
+++ b/src/renderer/src/components/config/knob/KnobMappingConfig.vue
@@ -1,23 +1,30 @@
 <template>
   <ConfigSection title="Knob Values" :icon-component="PlusCircle">
     <template #title>
-      <span class="text-zinc-500">&nbsp;({{ values.length }})</span></template
+      <span class="text-zinc-500">&nbsp;({{ knobValues.length }})</span></template
     >
-    <ValueGroup :values="values" class="p-2" />
+    <ValueGroup :values="knobValues" class="p-2" />
   </ConfigSection>
 </template>
-<script setup>
+<script setup lang="ts">
 import { PlusCircle } from 'lucide-vue-next'
 import ConfigSection from '@renderer/components/common/ConfigSection.vue'
-import { ref } from 'vue'
 import ValueGroup from '@renderer/components/config/values/ValueGroup.vue'
+import { useDeviceStore } from '@renderer/deviceStore'
+import { computed } from 'vue'
 
-const values = ref([
-  {
-    id: '1'
+const deviceStore = useDeviceStore()
+
+const knobValues = computed({
+  get() {
+    return Object.values(deviceStore.currentProfile.knob).map((value, index) => ({
+      id: index.toString(),
+      value: value
+    }))
   },
-  {
-    id: '2'
+  set(newValues) {
+    //TODO: Update deviceStore & device
+    //deviceStore.setValues(newValues)
   }
-])
+})
 </script>