Merge branch 'main' of https://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>
@@ -230,6 +231,7 @@ const detial = [
 </script>
 
 <script>
+import axios from "axios";
 export default {
   props: {
     nearestStructureData: Object,
@@ -238,13 +240,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 +265,27 @@ export default {
       this.onClose();
     },
     viewRoute() {
+    this.getUserLocation();
     this.showRoute = true;
     },
+    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;
@@ -295,7 +327,47 @@ export default {
         console.log('User not logged in. Unable to add to favorites.');
         this.$router.push({ name: 'login' });
       }
-}
+    },
+    enterRoute(){
+      console.log("start routing!.")
+
+      // Make a request to OpenRouteService API for a sample route
+      const apiKey = import.meta.env.VITE_OPENROUTESERVICE_API_KEY;
+      const startCoord = '100.53860,13.76410'; //(lon,lat) test data
+      const endCoord = '100.53928,13.76526';//(lon,lat) test data
+
+      axios.get(`https://api.openrouteservice.org/v2/directions/wheelchair?api_key=${apiKey}&start=${startCoord}&end=${endCoord}`)
+        .then(response => {
+          const route = response.data.features[0].geometry.coordinates;
+          console.log('This is route :',route)
+          // this.plotRoute(route);
+        })
+        .catch(error => {
+          console.error('Error fetching route:', error);
+        });
+    },
+    // plotRoute(coordinates) {
+    //   const routeFeature = new Feature({
+    //     geometry: new LineString(coordinates).transform('EPSG:4326', 'EPSG:3857'),
+    //   });
+
+    //   routeFeature.setStyle(
+    //     new Style({
+    //       stroke: new Stroke({
+    //         color: 'blue',
+    //         width: 2,
+    //       }),
+    //     })
+    //   );
+
+    //   const vectorLayer = new VectorLayer({
+    //     source: new VectorSource({
+    //       features: [routeFeature],
+    //     }),
+    //   });
+
+    //   this.map.addLayer(vectorLayer);
+    //   this.ma
 
   },