From 9d9e3faa02ce2bd177d98c4c1e36dc38bb43b55b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Mon, 23 Jan 2023 23:37:23 +0000
Subject: [PATCH] DoorPlacer v-model

---
 ui/src/components/DoorMapEditor.vue       |  4 +++-
 ui/src/components/door_map/DoorPlacer.vue | 23 +++++++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index 78fbf85..588d302 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -20,7 +20,7 @@
       </ul>
     </nav>
 
-    <DoorPlacer v-if="current_step === 0" />
+    <DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
     <p v-if="current_step === 1">Foo</p>
     <p v-if="current_step === 2">Bar</p>
   </div>
@@ -29,6 +29,7 @@
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
 import DoorPlacer from "./door_map/DoorPlacer.vue";
+import { Rectangle } from "./rects/rectangles";
 
 type Step = {
   label: string;
@@ -47,6 +48,7 @@ export default class DoorMapEditor extends Vue {
     { label: "Überprüfen", icon: "fa-solid fa-check" },
   ];
   private current_step = 0;
+  private rectangles: Rectangle[] = [];
 
   private change_step(next_step: number) {
     this.current_step = next_step;
diff --git a/ui/src/components/door_map/DoorPlacer.vue b/ui/src/components/door_map/DoorPlacer.vue
index 2f6cc34..3e8210b 100644
--- a/ui/src/components/door_map/DoorPlacer.vue
+++ b/ui/src/components/door_map/DoorPlacer.vue
@@ -9,21 +9,40 @@
     </div>
     <figure class="image">
       <img src="@/assets/adventskalender.jpg" />
-      <RectPad />
+      <RectPad ref="rect_pad" />
     </figure>
   </section>
 </template>
 
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
+import { Rectangle } from "../rects/rectangles";
 import RectPad from "../rects/RectPad.vue";
 
 @Options({
   components: {
     RectPad,
   },
+  props: {
+    rectangles: Array,
+  },
+  emits: ["update:rectangles"],
 })
-export default class DoorPlacer extends Vue {}
+export default class DoorPlacer extends Vue {
+  private rectangles!: Rectangle[];
+
+  declare $refs: {
+    rect_pad: RectPad;
+  };
+
+  public mounted() {
+    this.$refs.rect_pad.rectangles = this.rectangles;
+  }
+
+  public beforeUnmount() {
+    this.$emit("update:rectangles", this.rectangles);
+  }
+}
 </script>
 
 <style lang="scss" scoped>