This commit is contained in:
p11037 2023-11-29 21:43:13 +07:00
commit ff5333c715

View file

@ -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) {
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/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
},