From cc94aace76d2cc9a045be2e458f69edf38329929 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Wed, 20 Sep 2023 16:16:45 +0000
Subject: [PATCH] Ideendokument

---
 Ideen.md                                     |  9 +++--
 ui/src/components/calendar/CalendarDoor.vue  |  2 +-
 ui/src/components/calendar/SVGRect.vue       | 36 +++++++++++++-------
 ui/src/components/editor/PreviewDoor.vue     |  9 +++--
 ui/src/components/editor/RectangleCanvas.vue |  3 +-
 5 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/Ideen.md b/Ideen.md
index be367b1..f7b29d2 100644
--- a/Ideen.md
+++ b/Ideen.md
@@ -6,7 +6,12 @@
 - Option "Nur Groß-/Kleinbuchstaben" (standard nur groß)
 - Option "Leerzeichen ignorieren" (standard ja)
 - Option "custom Zuordnung Buchstaben" (standard leer)
+- Türchen sichtbar machen (besser für touch, standard nein)
 
-# Fixed
+# Aufgaben
 
-- Lösungsbuchstaben weniger als türchen erzeugt bug
\ No newline at end of file
+- Rework PreviewDoor für RectangleCanvas
+
+# Erledigt
+
+- Lösungsbuchstaben weniger als türchen erzeugt bug
diff --git a/ui/src/components/calendar/CalendarDoor.vue b/ui/src/components/calendar/CalendarDoor.vue
index 6b94b8f..1b895ce 100644
--- a/ui/src/components/calendar/CalendarDoor.vue
+++ b/ui/src/components/calendar/CalendarDoor.vue
@@ -1,5 +1,5 @@
 <template>
-  <SVGRect :rectangle="door.position" :focused="false" @click.left="on_click" />
+  <SVGRect :rectangle="door.position" @click.left="on_click" />
 </template>
 
 <script lang="ts">
diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index 5326835..97f1d2d 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -1,6 +1,6 @@
 <template>
   <rect
-    :class="focused ? 'focus' : ''"
+    :class="color !== undefined ? `visible ${color}` : ''"
     :x="rectangle.left"
     :y="rectangle.top"
     :width="rectangle.width"
@@ -12,32 +12,42 @@
 import { Rectangle } from "@/lib/rectangle";
 import { Options, Vue } from "vue-class-component";
 
+// type RectClass = "red" | "yellow" | "green" | "blue" | "purple";
+type RectColor = "yellow" | "green";
+
 @Options({
   props: {
-    focused: {
-      type: Boolean,
-      default: false,
+    color: {
+      type: String,
+      required: false,
     },
     rectangle: Rectangle,
   },
 })
 export default class extends Vue {
-  public focused!: boolean;
+  public color?: RectColor;
   public rectangle!: Rectangle;
 }
 </script>
 
 <style lang="scss" scoped>
 rect {
-  fill: lightgreen;
-  stroke: green;
-  fill-opacity: 0.2;
-  stroke-opacity: 0.9;
-  stroke-width: 1;
+  fill: transparent;
 
-  &.focus {
-    fill: gold;
-    stroke: yellow;
+  &.visible {
+    fill-opacity: 0.2;
+    stroke-opacity: 0.9;
+    stroke-width: 1;
+
+    &.yellow {
+      fill: gold;
+      stroke: yellow;
+    }
+
+    &.green {
+      fill: lightgreen;
+      stroke: green;
+    }
   }
 }
 </style>
diff --git a/ui/src/components/editor/PreviewDoor.vue b/ui/src/components/editor/PreviewDoor.vue
index 8cef1db..77597c3 100644
--- a/ui/src/components/editor/PreviewDoor.vue
+++ b/ui/src/components/editor/PreviewDoor.vue
@@ -1,5 +1,5 @@
 <template>
-  <SVGRect :rectangle="door.position" :focused="editing" />
+  <SVGRect :rectangle="door.position" :color="editing ? 'yellow' : 'green'" />
   <foreignObject
     :x="Math.round(parent_aspect_ratio * door.position.left)"
     :y="door.position.top"
@@ -9,7 +9,7 @@
   >
     <div
       xmlns="http://www.w3.org/1999/xhtml"
-      class="is-flex is-align-items-center is-justify-content-center"
+      class="px-4 is-flex is-align-items-center is-justify-content-center"
       @click.left="on_click"
     >
       <input
@@ -22,8 +22,8 @@
         placeholder="Tag"
         @keydown="on_keydown"
       />
-      <div v-else-if="door.day > 0" class="is-size-1 has-text-weight-bold">
-        {{ door.day }}
+      <div v-else class="is-size-1 has-text-weight-bold has-text-danger">
+        {{ door.day > 0 ? door.day : "*" }}
       </div>
     </div>
   </foreignObject>
@@ -139,7 +139,6 @@ foreignObject {
   cursor: pointer;
 
   > div {
-    color: red;
     height: inherit;
   }
 }
diff --git a/ui/src/components/editor/RectangleCanvas.vue b/ui/src/components/editor/RectangleCanvas.vue
index 220a30f..2fc72c5 100644
--- a/ui/src/components/editor/RectangleCanvas.vue
+++ b/ui/src/components/editor/RectangleCanvas.vue
@@ -10,10 +10,11 @@
   >
     <SVGRect
       v-for="(rect, index) in rectangles"
+      color="green"
       :key="`rect-${index}`"
       :rectangle="rect"
     />
-    <SVGRect v-if="preview_visible" :focused="true" :rectangle="preview_rect" />
+    <SVGRect v-if="preview_visible" color="yellow" :rectangle="preview_rect" />
   </ThouCanvas>
 </template>