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 1/4] 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;

From 82470ecf6ba9320e27e8946b9d226cadcaa500e5 Mon Sep 17 00:00:00 2001
From: SRP-mango <siriphicha.mango02@gmail.com>
Date: Wed, 29 Nov 2023 17:19:06 +0700
Subject: [PATCH 2/4] fix: fixed minor bug

---
 src/components/DestinationInfoCard.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index b600c5c..a6b60b6 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/src/components/DestinationInfoCard.vue
@@ -189,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>
@@ -240,7 +240,9 @@ export default {
     return {
       showPopup: true,
       showRoute: false,
-      userLocation: null
+      userLocation: null,
+      isLocationRequested: false, 
+
     };
   },
   computed: {
@@ -248,7 +250,9 @@ export default {
       return this.showRoute ? '45vh' : '60vh';
     },
     formattedLocation() {
-      if (this.userLocation) {
+      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';
@@ -263,7 +267,11 @@ export default {
     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 {

From d75174d06462657101f139139fbf6d3c6ce43cd1 Mon Sep 17 00:00:00 2001
From: NekoVari <veenaja08@gmail.com>
Date: Wed, 29 Nov 2023 18:50:44 +0700
Subject: [PATCH 3/4] use openrouteservice api

---
 src/components/DestinationInfoCard.vue | 115 ++++++++++++++++---------
 1 file changed, 76 insertions(+), 39 deletions(-)

diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index a6b60b6..b63e760 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/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) {
-    console.log('Logged in. Proceed to add to favorites.');
+      if (currentUser) {
+        console.log('Logged in. Proceed to add to favorites.');
 
-    fetch("https://little-lines-backend.techtransthai.org/api/favorites/create", {
-      method: "POST",
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        user_id: currentUser.id, // ใช้ userId ของผู้ใช้ที่ล็อกอินอยู่
-        place_name: this.nearestStructureData.display_name, 
-        location: {
-          type: "Point",
-          coordinates: [parseFloat(this.nearestStructureData.lon), parseFloat(this.nearestStructureData.lat)]
-        },
-        wheelchair_access: 'Accessible',
-        highway_type: 'Highway'
-      })
-    })
-      .then((res) => {
-        if (res.ok) {
-          console.log('Add to favorites success');
-          return res.json();
-        } else {
-          throw Error(`Add to favorites failed (${res.status})`);
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  } else {
-    console.log('User not logged in. Unable to add to favorites.');
-    this.$router.push({ name: 'login' });
-  }
-}
+        fetch("https://little-lines-backend.techtransthai.org/api/favorites/create", {
+          method: "POST",
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            user_id: currentUser.id, // ใช้ userId ของผู้ใช้ที่ล็อกอินอยู่
+            place_name: this.nearestStructureData.display_name, 
+            location: {
+              type: "Point",
+              coordinates: [parseFloat(this.nearestStructureData.lon), parseFloat(this.nearestStructureData.lat)]
+            },
+            wheelchair_access: 'Accessible',
+            highway_type: 'Highway'
+          })
+        })
+          .then((res) => {
+            if (res.ok) {
+              console.log('Add to favorites success');
+              return res.json();
+            } else {
+              throw Error(`Add to favorites failed (${res.status})`);
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      } else {
+        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/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
 
   },
   

From d006c7587251139f3be853b4dbb068361599c843 Mon Sep 17 00:00:00 2001
From: NekoVari <veenaja08@gmail.com>
Date: Wed, 29 Nov 2023 18:53:26 +0700
Subject: [PATCH 4/4] fix api to wheelchair

---
 src/components/DestinationInfoCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index b63e760..6489999 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/src/components/DestinationInfoCard.vue
@@ -336,7 +336,7 @@ export default {
       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}`)
+      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)