From 22d58f94b62f526f3c2c6da081220e99c9196f53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 19 Jan 2023 17:59:18 +0000
Subject: [PATCH] DoorPlacer component

---
 ui/src/components/DoorMapEditor.vue       | 33 +++----------------
 ui/src/components/door_map/DoorPlacer.vue | 40 +++++++++++++++++++++++
 2 files changed, 44 insertions(+), 29 deletions(-)
 create mode 100644 ui/src/components/door_map/DoorPlacer.vue

diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index 54c613b..0960f07 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -15,46 +15,21 @@
       </ul>
     </div>
 
-    <section v-if="current_step === 0">
-      <div class="content">
-        <ul>
-          <li>Linksklick + Ziehen: Neues Türchen erstellen</li>
-          <li>Rechtsklick + Ziehen: Türchen verschieben</li>
-          <li>Doppel- oder Mittelklick: Türchen löschen</li>
-        </ul>
-      </div>
-      <figure class="image">
-        <img src="@/assets/adventskalender.jpg" />
-        <RectPad />
-      </figure>
-    </section>
+    <DoorPlacer v-if="current_step === 0" />
   </div>
 </template>
 
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
-import RectPad from "./rects/RectPad.vue";
+import DoorPlacer from "./door_map/DoorPlacer.vue";
 
 @Options({
   components: {
-    RectPad,
+    DoorPlacer,
   },
 })
-export default class CalendarImage extends Vue {
+export default class DoorMapEditor extends Vue {
   private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"];
   private current_step = 0;
 }
 </script>
-
-<style lang="scss" scoped>
-figure {
-  user-select: none;
-
-  img + * {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: auto;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components/door_map/DoorPlacer.vue b/ui/src/components/door_map/DoorPlacer.vue
new file mode 100644
index 0000000..2f6cc34
--- /dev/null
+++ b/ui/src/components/door_map/DoorPlacer.vue
@@ -0,0 +1,40 @@
+<template>
+  <section>
+    <div class="content">
+      <ul>
+        <li>Linksklick + Ziehen: Neues Türchen erstellen</li>
+        <li>Rechtsklick + Ziehen: Türchen verschieben</li>
+        <li>Doppel- oder Mittelklick: Türchen löschen</li>
+      </ul>
+    </div>
+    <figure class="image">
+      <img src="@/assets/adventskalender.jpg" />
+      <RectPad />
+    </figure>
+  </section>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from "vue-class-component";
+import RectPad from "../rects/RectPad.vue";
+
+@Options({
+  components: {
+    RectPad,
+  },
+})
+export default class DoorPlacer extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+section > figure {
+  user-select: none;
+
+  img + * {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: auto;
+  }
+}
+</style>
\ No newline at end of file