single ImageModal

Co-authored-by: Penner4242 <Penner4242@users.noreply.github.com>

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>

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>