From fb1a9fa1463813b399b36b1615e86ca2f472a8f4 Mon Sep 17 00:00:00 2001
From: ABeltramo <beltramo.ale@gmail.com>
Date: Wed, 17 Apr 2024 17:32:12 +0100
Subject: [PATCH] feat: basic keyboard UI component

---
 src/server/web-client/src/App.svelte          |  5 ++++
 src/server/web-client/src/lib/Keyboard.svelte | 29 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/server/web-client/src/lib/Keyboard.svelte

diff --git a/src/server/web-client/src/App.svelte b/src/server/web-client/src/App.svelte
index 9b7a02f..b089dbf 100644
--- a/src/server/web-client/src/App.svelte
+++ b/src/server/web-client/src/App.svelte
@@ -9,6 +9,7 @@
     import Mouse from "./lib/Mouse.svelte";
     import {Toolbar, ToolbarGroup, DarkMode, Toast} from 'flowbite-svelte';
     import {FireOutline} from "flowbite-svelte-icons";
+    import Keyboard from "./lib/Keyboard.svelte";
 </script>
 
 <main>
@@ -24,6 +25,10 @@
         <Mouse/>
     {/if}
 
+    {#if $selected_device?.type === "KEYBOARD"}
+        <Keyboard/>
+    {/if}
+
     <FetchRequest/>
 </main>
 
diff --git a/src/server/web-client/src/lib/Keyboard.svelte b/src/server/web-client/src/lib/Keyboard.svelte
new file mode 100644
index 0000000..1cede48
--- /dev/null
+++ b/src/server/web-client/src/lib/Keyboard.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+
+    import {request, selected_device} from "./stores";
+    import {onDestroy, onMount} from "svelte";
+
+    function keydown(e: KeyboardEvent) {
+        if ($selected_device?.type === "KEYBOARD") {
+            request("/devices/keyboard/" + $selected_device?.device_id + "/press", "POST", {
+                "key": 65 // hardcoded a
+                // TODO: e.key to win32 keycode
+                //   see: https://learn.microsoft.com/en-us/windows/win32/inputdev/virtual-key-codes
+            });
+
+            // TODO: check for shift, ctrl, alt, etc..
+        }
+    }
+
+    function keyup(e: KeyboardEvent) {
+        if ($selected_device?.type === "KEYBOARD") {
+            request("/devices/keyboard/" + $selected_device?.device_id + "/release", "POST", {
+                "key": 65 // hardcoded a
+            })
+        }
+    }
+
+</script>
+
+<input on:keydown={keydown}
+       on:keyup={keyup}>
\ No newline at end of file