Merge branch 'main' of gitlab.com:openKMITL/little-lines/frontend

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
@@ -188,7 +189,7 @@
       <v-card-actions class="stick-bottom btnlist-height justify-sa">
         <v-btn @click="viewPopup" rounded="xl" variant="tonal" width="45vw" height="44px">
           ย้อนกลับ</v-btn>
-        <v-btn @click="viewRoute" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+        <v-btn @click="enterRoute" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
           เริ่มการนำทาง</v-btn>
 
     </v-card-actions>
@@ -238,13 +239,24 @@ export default {
   data() {
     return {
       showPopup: true,
-      showRoute: false
+      showRoute: false,
+      userLocation: null,
+      isLocationRequested: false, 
+
     };
   },
   computed: {
     cardHeight() {
       return this.showRoute ? '45vh' : '60vh';
     },
+    formattedLocation() {
+      if (this.isLocationRequested && !this.userLocation) {
+        return 'Requesting location...';
+      } else if (this.userLocation) {
+        return `${this.userLocation.lat.toFixed(6)}, ${this.userLocation.lon.toFixed(6)}`;
+      }
+      return 'Location not available';
+    },
   },
   methods: {
     closePopup() {
@@ -252,8 +264,31 @@ export default {
       this.onClose();
     },
     viewRoute() {
+    this.getUserLocation();
     this.showRoute = true;
     },
+    enterRoute() {
+      console.log("Enter Route");
+    },
+    getUserLocation() {
+      this.isLocationRequested = true;
+      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;