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,50 +265,109 @@ 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;
     },
     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/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
 
   },