From 9da577c613affa375f07bc8cd5e0516f193111e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 3 Nov 2022 23:01:28 +0000
Subject: [PATCH] single ImageModal

Co-authored-by: Penner4242 <Penner4242@users.noreply.github.com>
---
 ui/src/App.vue                     | 20 ++++++++++++++++++--
 ui/src/components/CalendarDoor.vue | 14 +++++---------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index f877a35..eeabd9b 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -4,7 +4,13 @@
       <h1 class="title has-text-centered is-uppercase">Adventskalender</h1>
       <h2 class="subtitle has-text-centered">Der Gelöt</h2>
 
-      <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" />
+      <ImageModal v-model="modal_visible" :imageUrl="image_url" />
+      <CalendarDoor
+        v-for="(_, index) in 24"
+        :key="index"
+        :day="index"
+        @openDoor="paula"
+      />
     </div>
   </div>
 </template>
@@ -12,13 +18,23 @@
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
 import CalendarDoor from "./components/CalendarDoor.vue";
+import ImageModal from "./components/ImageModal.vue";
 
 @Options({
   components: {
     CalendarDoor,
+    ImageModal,
   },
 })
-export default class App extends Vue {}
+export default class App extends Vue {
+  image_url = "";
+  modal_visible = false;
+
+  private paula(url: string): void {
+    this.image_url = url;
+    this.modal_visible = true;
+  }
+}
 </script>
 
 <style>
diff --git a/ui/src/components/CalendarDoor.vue b/ui/src/components/CalendarDoor.vue
index c8c157f..68a1796 100644
--- a/ui/src/components/CalendarDoor.vue
+++ b/ui/src/components/CalendarDoor.vue
@@ -1,29 +1,25 @@
 <template>
-  <ImageModal v-model="modal_visible" :imageUrl="image_url" />
-  <button class="button" @click="modal_visible = true">
-    Türken {{ day + 1 }}
-  </button>
+  <button class="button" @click="on_click">Türken {{ day + 1 }}</button>
 </template>
 
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
-import ImageModal from "./ImageModal.vue";
 
 @Options({
-  components: {
-    ImageModal,
-  },
   props: {
     day: Number,
   },
 })
 export default class CalendarDoor extends Vue {
   day!: number;
-  modal_visible = false;
 
   private get image_url(): string {
     return this.$advent22.api_url("days/picture/" + this.day);
   }
+
+  private on_click(): void {
+    this.$emit("openDoor", this.image_url);
+  }
 }
 </script>