From 67c371b483e1f33c3130d9e0dc5c5001602ab747 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 2 Feb 2023 23:16:44 +0000
Subject: [PATCH] DoorChooser keyboard input method

---
 ui/src/components/door_map/DoorChooser.vue | 64 ++++++++++++++++++++--
 1 file changed, 58 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/door_map/DoorChooser.vue b/ui/src/components/door_map/DoorChooser.vue
index 0bfc755..031ecc3 100644
--- a/ui/src/components/door_map/DoorChooser.vue
+++ b/ui/src/components/door_map/DoorChooser.vue
@@ -3,8 +3,11 @@
     <div class="content">
       <p class="title is-5">Steuerung</p>
       <ul>
-        <li>Linksklick: Türchen hochzählen</li>
-        <li>Rechtsklick: Türchen runterzählen</li>
+        <li>Linksklick: Türchen auswählen</li>
+        <li>Tastatur [0]-[9], [Rücktaste]: Tag eingeben</li>
+        <li>Tastatur [Enter]: Tag speichern</li>
+        <li>Tastatur [Esc]: Eingabe Abbrechen</li>
+        <li>Tastatur [Entf]: Tag entfernen</li>
       </ul>
     </div>
     <figure class="image">
@@ -18,10 +21,8 @@
           />
           <SVGRect
             :rectangle="door.position"
-            :focused="door.day >= 0"
-            @click.left="door.day++"
-            @click.right="door.day--"
-            style="cursor: pointer"
+            :focused="index === focused"
+            @click.left="click_door(index)"
           />
         </template>
       </ThouCanvas>
@@ -50,6 +51,53 @@ import SVGRectText from "../rects/SVGRectText.vue";
 })
 export default class extends Vue {
   private doors!: Door[];
+  private focused = -1;
+
+  private click_door(index: number) {
+    if (this.focused >= 0) {
+      return;
+    }
+
+    this.focused = index;
+
+    const listener = (() => {
+      let old_day = this.doors[index].day;
+      let num_input = "";
+
+      return (event: KeyboardEvent) => {
+        if (event.key >= "0" && event.key <= "9") {
+          // number input
+
+          num_input += event.key;
+          this.doors[this.focused].day = Number(num_input);
+        } else if (event.key === "Backspace") {
+          // remove char
+
+          num_input = num_input.slice(0, -1);
+          this.doors[this.focused].day = Number(num_input);
+        } else if (event.key === "Enter") {
+          // accept
+
+          this.focused = -1;
+          window.removeEventListener("keydown", listener);
+        } else if (event.key === "Escape") {
+          // abort
+
+          this.doors[this.focused].day = old_day;
+          this.focused = -1;
+          window.removeEventListener("keydown", listener);
+        } else if (event.key === "Delete") {
+          // delete
+
+          this.doors[this.focused].day = -1;
+          this.focused = -1;
+          window.removeEventListener("keydown", listener);
+        }
+      };
+    })();
+
+    window.addEventListener("keydown", listener);
+  }
 
   public beforeUnmount() {
     this.$emit("update:doors", this.doors);
@@ -60,5 +108,9 @@ export default class extends Vue {
 <style lang="scss" scoped>
 section > figure {
   user-select: none;
+
+  svg > rect {
+    cursor: pointer;
+  }
 }
 </style>
\ No newline at end of file