DoorChooser usable but bad

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
+        <template v-for="(door, index) in doors" :key="`door-${index}`">
-          v-for="(door, index) in unchosen_doors"
+          <SVGRectText
-          :key="`door-${index}`"
+            v-if="door.day >= 0"
-          :rectangle="door.position"
+            :text="String(door.day)"
-          @click.left="choose_door(index)"
+            :rectangle="door.position"
-          style="cursor: pointer"
+          />
-        />
+          <SVGRect
-        <template
+            :rectangle="door.position"
-          v-for="(door, index) in chosen_doors"
+            :focused="door.day >= 0"
-          :key="`door_chosen-${index}`"
+            @click.left="door.day++"
-        >
+            @click.right="door.day--"
-          <SVGRect :rectangle="door.position" :focused="true" />
+            style="cursor: pointer"
-          <SVGRectText :rectangle="door.position" :text="String(door.day)" />
+          />
         </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);

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 {

ui/src/components/door_map/calendar.ts

@@ -1,6 +1,19 @@
 import { Rectangle } from "../rects/rectangles";
 
-export interface Door {
+export class Door {
-  day?: number;
+  private _day = -1;
-  position: Rectangle;
+  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);
+  }
 }