From b9594ade8329a35da31088a3b4f756a9dd937e8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sat, 18 Feb 2023 00:43:07 +0000
Subject: [PATCH] various minor improvements

---
 ui/src/components/door_map/PreviewDoor.vue | 60 ++++++++++++++--------
 1 file changed, 38 insertions(+), 22 deletions(-)

diff --git a/ui/src/components/door_map/PreviewDoor.vue b/ui/src/components/door_map/PreviewDoor.vue
index 55bf668..fa03c23 100644
--- a/ui/src/components/door_map/PreviewDoor.vue
+++ b/ui/src/components/door_map/PreviewDoor.vue
@@ -9,22 +9,21 @@
   >
     <div
       xmlns="http://www.w3.org/1999/xhtml"
-      class="is-flex is-align-items-center"
+      class="is-flex is-align-items-center is-justify-content-center"
       @click.left="on_click"
     >
-      <div class="container is-fluid has-text-centered">
-        <input
-          v-if="editing"
-          v-model="day_str"
-          @keyup="on_keyup"
-          class="input p-3 is-size-2"
-          type="number"
-          min="-1"
-          placeholder="Tag"
-        />
-        <div v-else class="is-size-1 has-text-weight-bold">
-          <template v-if="door.day >= 0">{{ door.day }}</template>
-        </div>
+      <input
+        v-if="editing"
+        v-model="day_str"
+        ref="day_input"
+        class="input is-large"
+        type="number"
+        min="-1"
+        placeholder="Tag"
+        @keydown="on_keydown"
+      />
+      <div v-else class="is-size-1 has-text-weight-bold">
+        <template v-if="door.day >= 0">{{ door.day }}</template>
       </div>
     </div>
   </foreignObject>
@@ -57,6 +56,10 @@ export default class extends Vue {
   private editing = false;
   private refreshKey = 0;
 
+  declare $refs: {
+    day_input: HTMLInputElement | null | undefined;
+  };
+
   private refresh() {
     window.setTimeout(() => {
       // don't loop endlessly
@@ -86,32 +89,45 @@ export default class extends Vue {
     return result;
   }
 
+  private get day_num(): number {
+    const result = Number(this.day_str);
+    return isNaN(result) ? -1 : result;
+  }
+
   private toggle_editing() {
     this.day_str = String(this.door.day);
     this.editing = this.editable && !this.editing;
   }
 
   private on_click(event: MouseEvent) {
-    if (event.target === null) {
+    if (event.target === null || !(event.target instanceof HTMLDivElement)) {
       return;
     }
 
-    if (this.editing) {
-      this.door.day = Number(this.day_str);
+    if (!this.editing) {
+      const day_input_focus = () => {
+        if (this.$refs.day_input instanceof HTMLInputElement) {
+          this.$refs.day_input.focus();
+          return;
+        }
+
+        this.$nextTick(day_input_focus);
+      };
+      day_input_focus();
+    } else {
+      this.door.day = this.day_num;
     }
 
-    if (event.target instanceof HTMLDivElement) {
-      this.toggle_editing();
-    }
+    this.toggle_editing();
   }
 
-  private on_keyup(event: KeyboardEvent) {
+  private on_keydown(event: KeyboardEvent) {
     if (!this.editing) {
       return;
     }
 
     if (event.key === "Enter") {
-      this.door.day = Number(this.day_str);
+      this.door.day = this.day_num;
       this.toggle_editing();
     } else if (event.key === "Delete") {
       this.door.day = -1;