From 01011763e7bf37b88c56d813ce99e00a975bf2e2 Mon Sep 17 00:00:00 2001
From: SRP-mango <siriphicha.mango02@gmail.com>
Date: Sat, 30 Sep 2023 11:18:27 +0700
Subject: [PATCH] toggle destination card (not finished)

---
 src/components/DestinationInfoCard.vue | 32 ++++++++++++++++++------
 src/components/Popup.vue               |  3 +++
 src/views/Home.vue                     | 34 +++++++++++++++++---------
 3 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index 53601d4..c453c03 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/src/components/DestinationInfoCard.vue
@@ -1,16 +1,10 @@
 <template>
-  <v-img 
-  class="image"
-  src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
-  cover
-  ></v-img>
-  
   <v-card 
   class="stick-bottom card-height"
   width="100%"
   height="60vh"
   style="padding-top: 15px; font-weight:bold;"
-  :title="destination.title" 
+  :title="nearestStructureData.display_name" 
   :subtitle="destination.subTitle"
   >
 
@@ -59,7 +53,9 @@
         ดูเส้นทาง</v-btn>
     </v-card-actions>
 
-    <v-btn :to="{name: 'favorite'}" variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
+    <v-btn 
+    @click="closePopup"
+    variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
 
 
   </v-card>
@@ -92,6 +88,26 @@ const detial = [
 ]
 </script>
 
+<script>
+export default {
+  props: {
+    nearestStructureData: Object,
+    onClose: Function,
+  },
+  data() {
+    return {
+      showPopup: true,
+    };
+  },
+  methods: {
+    closePopup() {
+      this.showPopup = false;
+      this.onClose();
+    },
+  },
+};
+</script>
+
 <style>
 .stick-bottom {
   position: fixed;
diff --git a/src/components/Popup.vue b/src/components/Popup.vue
index c6b3cab..ee92c4e 100644
--- a/src/components/Popup.vue
+++ b/src/components/Popup.vue
@@ -8,6 +8,9 @@
 </template>
 
 <script>
+
+import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
+
 export default {
   props: {
     nearestStructureData: Object,
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e392d98..d6d0e65 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,12 +1,24 @@
 <template>
 
 <div id="app">
-    <router-view />
-    <Popup
+    <router-view
+    class="router-view"
+    />
+
+    <!-- <Popup
       v-if="popupData"
       :nearestStructureData="popupData"
       :onClose="closePopup"
+    /> -->
+
+    <DestinationInfoCard
+    class="DestinationInfoCard"
+      v-if="popupData"
+      :nearestStructureData="popupData"
+      :onClose="closePopup"
+    
     />
+    
   </div>
   
   <!-- <searchbar/> -->
@@ -38,15 +50,6 @@
         
       </v-layout>
 
-      <!-- <div v-if="searchResults.length > 0" class="search-results">
-          <ul>
-             <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
-               {{ result.display_name }}
-             </li>
-          </ul>
-      </div> -->
-
-            
       <v-list v-if="searchResults.length > 0 && !showSearchBar" class="search-results">
         <v-list-item
           v-for="result in searchResults"
@@ -95,6 +98,7 @@ import searchbar from '@/components/searchbar.vue';
 import Popup from "@/components/Popup.vue"; // Import the Popup componen
 import { ref } from "vue";
 import axios from "axios";
+import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
 
 const center = ref([100.538611, 13.764722]);
 const projection = ref("EPSG:4326");
@@ -189,4 +193,12 @@ const closePopup = () => {
 .search-results li:hover {
   background-color: #f0f0f0;
 }
+
+.router-view{
+  z-index: -15;
+}
+
+.DestinationInfoCard{
+  z-index: 15;
+}
 </style>
\ No newline at end of file