From e2075b96d49472c611f9ca177bb4614c6fc8fab3 Mon Sep 17 00:00:00 2001
From: SRP-mango <siriphicha.mango02@gmail.com>
Date: Wed, 29 Nov 2023 17:09:10 +0700
Subject: [PATCH] feature: add user location

---
 src/components/DestinationInfoCard.vue | 29 +++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index ddd0003..b600c5c 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/src/components/DestinationInfoCard.vue
@@ -104,6 +104,7 @@
               background-color: rgba(230, 230, 230, 1);
               padding-left: 2vw;"
               variant="invert-solo"
+              :model-value="formattedLocation"
               flat
             ></v-text-field>
             <v-btn
@@ -238,13 +239,20 @@ export default {
   data() {
     return {
       showPopup: true,
-      showRoute: false
+      showRoute: false,
+      userLocation: null
     };
   },
   computed: {
     cardHeight() {
       return this.showRoute ? '45vh' : '60vh';
     },
+    formattedLocation() {
+      if (this.userLocation) {
+        return `${this.userLocation.lat.toFixed(6)}, ${this.userLocation.lon.toFixed(6)}`;
+      }
+      return 'Location not available';
+    },
   },
   methods: {
     closePopup() {
@@ -252,8 +260,27 @@ export default {
       this.onClose();
     },
     viewRoute() {
+    this.getUserLocation();
     this.showRoute = true;
     },
+    getUserLocation() {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(this.setLocation, this.handleLocationError);
+      } else {
+        console.error("Geolocation is not supported by this browser.");
+      }
+    },
+    setLocation(position) {
+      this.userLocation = {
+        lat: position.coords.latitude,
+        lon: position.coords.longitude
+      };
+      console.log('User Location:', this.userLocation);
+    },
+
+    handleLocationError(error) {
+      console.error('Error getting location:', error);
+    },
     viewPopup(){
     this.showPopup = true;
     this.showRoute = false;