From ef5281e57b809ecfe604cbb53141c5a1ceb35feb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 2 Feb 2023 18:06:55 +0000
Subject: [PATCH] DoorChooser usable but bad

---
 ui/src/components/door_map/DoorChooser.vue | 44 ++++++++--------------
 ui/src/components/door_map/DoorPlacer.vue  |  3 +-
 ui/src/components/door_map/calendar.ts     | 19 ++++++++--
 3 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/ui/src/components/door_map/DoorChooser.vue b/ui/src/components/door_map/DoorChooser.vue
index d00c85f..0bfc755 100644
--- a/ui/src/components/door_map/DoorChooser.vue
+++ b/ui/src/components/door_map/DoorChooser.vue
@@ -1,26 +1,28 @@
 <template>
   <section>
     <div class="content">
+      <p class="title is-5">Steuerung</p>
       <ul>
-        <li>Linksklick: Türchen auswählen</li>
+        <li>Linksklick: Türchen hochzählen</li>
+        <li>Rechtsklick: Türchen runterzählen</li>
       </ul>
     </div>
     <figure class="image">
       <img src="@/assets/adventskalender.jpg" />
       <ThouCanvas>
-        <SVGRect
-          v-for="(door, index) in unchosen_doors"
-          :key="`door-${index}`"
-          :rectangle="door.position"
-          @click.left="choose_door(index)"
-          style="cursor: pointer"
-        />
-        <template
-          v-for="(door, index) in chosen_doors"
-          :key="`door_chosen-${index}`"
-        >
-          <SVGRect :rectangle="door.position" :focused="true" />
-          <SVGRectText :rectangle="door.position" :text="String(door.day)" />
+        <template v-for="(door, index) in doors" :key="`door-${index}`">
+          <SVGRectText
+            v-if="door.day >= 0"
+            :text="String(door.day)"
+            :rectangle="door.position"
+          />
+          <SVGRect
+            :rectangle="door.position"
+            :focused="door.day >= 0"
+            @click.left="door.day++"
+            @click.right="door.day--"
+            style="cursor: pointer"
+          />
         </template>
       </ThouCanvas>
     </figure>
@@ -48,20 +50,6 @@ import SVGRectText from "../rects/SVGRectText.vue";
 })
 export default class extends Vue {
   private doors!: Door[];
-  private day = 0;
-
-  private get chosen_doors(): Door[] {
-    return this.doors.filter((door) => door.day !== undefined);
-  }
-
-  private get unchosen_doors(): Door[] {
-    return this.doors.filter((door) => door.day === undefined);
-  }
-
-  private choose_door(index: number) {
-    this.unchosen_doors[index].day = this.day;
-    this.day++;
-  }
 
   public beforeUnmount() {
     this.$emit("update:doors", this.doors);
diff --git a/ui/src/components/door_map/DoorPlacer.vue b/ui/src/components/door_map/DoorPlacer.vue
index b7fe8f3..139ecb3 100644
--- a/ui/src/components/door_map/DoorPlacer.vue
+++ b/ui/src/components/door_map/DoorPlacer.vue
@@ -1,6 +1,7 @@
 <template>
   <section>
     <div class="content">
+      <p class="title is-5">Steuerung</p>
       <ul>
         <li>Linksklick + Ziehen: Neues Türchen erstellen</li>
         <li>Rechtsklick + Ziehen: Türchen verschieben</li>
@@ -42,7 +43,7 @@ export default class extends Vue {
   }
 
   private on_draw(position: Rectangle) {
-    this.doors.push({ position: position });
+    this.doors.push(new Door(position));
   }
 
   private find_door_index(position: Rectangle): number {
diff --git a/ui/src/components/door_map/calendar.ts b/ui/src/components/door_map/calendar.ts
index f51b309..0b22a67 100644
--- a/ui/src/components/door_map/calendar.ts
+++ b/ui/src/components/door_map/calendar.ts
@@ -1,6 +1,19 @@
 import { Rectangle } from "../rects/rectangles";
 
-export interface Door {
-  day?: number;
-  position: Rectangle;
+export class Door {
+  private _day = -1;
+  public position: Rectangle;
+
+  constructor(position: Rectangle, day = -1) {
+    this.day = day;
+    this.position = position;
+  }
+
+  public get day(): number {
+    return this._day
+  }
+
+  public set day(day: number) {
+    this._day = Math.max(day, -1);
+  }
 }
\ No newline at end of file