fixes for (still crude) DoorChooser

ui/src/components/DoorMapEditor.vue

@@ -5,7 +5,7 @@
     <BulmaBreadcrumbs :steps="steps" v-model="current_step" />
 
     <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
-    <!-- <DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" /> -->
+    <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
     <p v-if="current_step === 2">Bar</p>
   </div>
 </template>
@@ -13,7 +13,6 @@
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
 import { Door } from "./door_map/calendar";
-import { Rectangle } from "./rects/rectangles";
 
 import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
 import DoorPlacer from "./door_map/DoorPlacer.vue";
@@ -34,6 +33,5 @@ export default class extends Vue {
   ];
   private current_step = 0;
   private doors: Door[] = [];
-  private rectangles: Rectangle[] = [];
 }
 </script>

ui/src/components/door_map/DoorChooser.vue

@@ -9,18 +9,18 @@
       <img src="@/assets/adventskalender.jpg" />
       <ThouCanvas>
         <SVGRect
-          v-for="(rect, index) in rectangles"
-          :key="`rect-${index}`"
-          :rectangle="rect"
-          @click.left="choose_rect(index)"
+          v-for="(door, index) in unchosen_doors"
+          :key="`door-${index}`"
+          :rectangle="door.position"
+          @click.left="choose_door(index)"
           style="cursor: pointer"
         />
         <template
-          v-for="(rect, index) in rectangles_chosen"
-          :key="`rect_chosen-${index}`"
+          v-for="(door, index) in chosen_doors"
+          :key="`door_chosen-${index}`"
         >
-          <SVGRect :rectangle="rect" :focused="true" />
-          <SVGRectText :rectangle="rect" :text="String(index)" />
+          <SVGRect :rectangle="door.position" :focused="true" />
+          <SVGRectText :rectangle="door.position" :text="String(door.day)" />
         </template>
       </ThouCanvas>
     </figure>
@@ -29,7 +29,7 @@
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
-import { Rectangle } from "../rects/rectangles";
+import { Door } from "./calendar";
 
 import ThouCanvas from "../rects/ThouCanvas.vue";
 import SVGRect from "../rects/SVGRect.vue";
@@ -42,23 +42,29 @@ import SVGRectText from "../rects/SVGRectText.vue";
     SVGRectText,
   },
   props: {
-    rectangles: Array,
+    doors: Array,
   },
-  emits: ["update:rectangles"],
+  emits: ["update:doors"],
 })
 export default class extends Vue {
-  private rectangles!: Rectangle[];
-  private rectangles_chosen: Rectangle[] = [];
+  private doors!: Door[];
+  private day = 0;
 
-  public choose_rect(index: number) {
-    this.rectangles_chosen.push(this.rectangles.splice(index, 1)[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:rectangles",
-      this.rectangles.concat(this.rectangles_chosen)
-    );
+    this.$emit("update:doors", this.doors);
   }
 }
 </script>