From cf318212ba4b4f36482e778e76eac53a7e85327e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 30 Oct 2022 03:04:25 +0000
Subject: [PATCH] ImageModal v-model

---
 ui/src/App.vue                     |  4 ----
 ui/src/components/CalendarDoor.vue | 15 +++++++++------
 ui/src/components/ImageModal.vue   | 19 +++++++++----------
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 85242be..f877a35 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -6,20 +6,16 @@
 
       <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" />
     </div>
-
-    <ImageModal />
   </div>
 </template>
 
 <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 {}
diff --git a/ui/src/components/CalendarDoor.vue b/ui/src/components/CalendarDoor.vue
index d447b28..ac2cd69 100644
--- a/ui/src/components/CalendarDoor.vue
+++ b/ui/src/components/CalendarDoor.vue
@@ -1,23 +1,26 @@
 <template>
-  <a
-    class="button"
-    :href="'http://localhost:8000/api/days/picture/' + day"
-    target="_blank"
-  >
+  <ImageModal v-model="modal_visible" />
+
+  <button class="button" @click="modal_visible = true">
     Türken {{ day + 1 }}
-  </a>
+  </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;
 }
 </script>
 
diff --git a/ui/src/components/ImageModal.vue b/ui/src/components/ImageModal.vue
index 8b262f5..6527303 100644
--- a/ui/src/components/ImageModal.vue
+++ b/ui/src/components/ImageModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="modal is-active" v-if="visible" @click="hide">
+  <div class="modal is-active" v-if="modelValue" @click="hide">
     <div class="modal-background" />
 
     <div class="modal-content">
@@ -8,15 +8,18 @@
       <!-- </p> -->
     </div>
   </div>
-
-  <button class="button" @click="show">modal</button>
 </template>
 
 <script lang="ts">
-import { Vue } from "vue-class-component";
+import { Options, Vue } from "vue-class-component";
 
+@Options({
+  props: {
+    modelValue: Boolean,
+  },
+})
 export default class ImageModal extends Vue {
-  visible = false;
+  modelValue!: boolean;
 
   public created(): void {
     window.addEventListener("keydown", (e) => {
@@ -24,12 +27,8 @@ export default class ImageModal extends Vue {
     });
   }
 
-  private show(): void {
-    this.visible = true;
-  }
-
   private hide(): void {
-    this.visible = false;
+    this.$emit("update:modelValue", false);
   }
 }
 </script>