use openrouteservice api

src/components/DestinationInfoCard.vue

@@ -231,6 +231,7 @@ const detial = [
 </script>
 
 <script>
+import axios from "axios";
 export default {
   props: {
     nearestStructureData: Object,
@@ -267,9 +268,6 @@ export default {
     this.getUserLocation();
     this.showRoute = true;
     },
-    enterRoute() {
-      console.log("Enter Route");
-    },
     getUserLocation() {
       this.isLocationRequested = true;
       if (navigator.geolocation) {
@@ -285,7 +283,6 @@ export default {
       };
       console.log('User Location:', this.userLocation);
     },
-
     handleLocationError(error) {
       console.error('Error getting location:', error);
     },
@@ -294,43 +291,83 @@ export default {
     this.showRoute = false;
     },
     addToFavorites() {
-  const currentUser = JSON.parse(sessionStorage.getItem('current_user'));
+      const currentUser = JSON.parse(sessionStorage.getItem('current_user'));
 
-  if (currentUser) {
+      if (currentUser) {
-    console.log('Logged in. Proceed to add to favorites.');
+        console.log('Logged in. Proceed to add to favorites.');
 
-    fetch("https://little-lines-backend.techtransthai.org/api/favorites/create", {
+        fetch("https://little-lines-backend.techtransthai.org/api/favorites/create", {
-      method: "POST",
+          method: "POST",
-      headers: {
+          headers: {
-        'Content-Type': 'application/json',
+            'Content-Type': 'application/json',
-      },
+          },
-      body: JSON.stringify({
+          body: JSON.stringify({
-        user_id: currentUser.id, // ใช้ userId ของผู้ใช้ที่ล็อกอินอยู่
+            user_id: currentUser.id, // ใช้ userId ของผู้ใช้ที่ล็อกอินอยู่
-        place_name: this.nearestStructureData.display_name, 
+            place_name: this.nearestStructureData.display_name, 
-        location: {
+            location: {
-          type: "Point",
+              type: "Point",
-          coordinates: [parseFloat(this.nearestStructureData.lon), parseFloat(this.nearestStructureData.lat)]
+              coordinates: [parseFloat(this.nearestStructureData.lon), parseFloat(this.nearestStructureData.lat)]
-        },
+            },
-        wheelchair_access: 'Accessible',
+            wheelchair_access: 'Accessible',
-        highway_type: 'Highway'
+            highway_type: 'Highway'
-      })
+          })
-    })
+        })
-      .then((res) => {
+          .then((res) => {
-        if (res.ok) {
+            if (res.ok) {
-          console.log('Add to favorites success');
+              console.log('Add to favorites success');
-          return res.json();
+              return res.json();
-        } else {
+            } else {
-          throw Error(`Add to favorites failed (${res.status})`);
+              throw Error(`Add to favorites failed (${res.status})`);
-        }
+            }
-      })
+          })
-      .catch((err) => {
+          .catch((err) => {
-        console.log(err);
+            console.log(err);
-      });
+          });
-  } else {
+      } else {
-    console.log('User not logged in. Unable to add to favorites.');
+        console.log('User not logged in. Unable to add to favorites.');
-    this.$router.push({ name: 'login' });
+        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/driving-car?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
 
   },