mirror of
https://gitlab.com/little-lines/frontend.git
synced 2024-11-24 22:06:53 +00:00
Merge branch 'main' of https://gitlab.com/openKMITL/little-lines/frontend
This commit is contained in:
p11037
commit
ff5333c715
1 changed files with 109 additions and 37 deletions
|
|
@ -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
|
||||
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue