-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
156 lines (142 loc) · 5.54 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
var app = new Vue ({
el: '#app',
data: {
place: {},
stopsBase:[],
// #TODO watch filtered stops to render results
filteredStops: [],
stopsInfo: {},
tracksInfo: {},
linesInfo: {},
},
methods: {
gAutocomplete: function() {
var options = {
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(-6.68643125265198,106.51931762695312),
new google.maps.LatLng(-6.023116509238178,107.11395263671875)),
componentRestrictions: {'country': ['id']},
};
this.autocomplete = new google.maps.places.Autocomplete(
this.$refs.autocomplete, options)
// Set the data fields to return when the user selects a place.
// Set fields to [''] to get all the data
this.autocomplete.setFields([
'address_components',
'name',
'id',
'place_id',
'reference',
'url',
'geometry',
]);
this.autocomplete.addListener('place_changed', () => {
var place = this.autocomplete.getPlace();
this.place = place; // is the trigger correct? how to deal with the button?
this.filterStops();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
});
},
getData: function(){
axios
.get('krl_stops.json')
.then(response => {
this.stopsBase = response.data;
});
axios
.get('all.json')
.then(response => {
this.stopsInfo = response.data.stops;
this.tracksInfo = response.data.tracks;
this.linesInfo = response.data.lines;
});
},
getStationName: function(stopId){
return this.stopsBase.find(stop => stop.id == stopId).name
},
getLines: function(stopId){
lines = Object.keys(this.stopsInfo[stopId])
res = []
for (line of lines) {
res.push(this.linesInfo[line])
}
return res
},
getGmapsLink: function(destinationLatLng, destinationPlaceId, originLatLng, originPlaceId){
baseurl = 'https://www.google.com/maps/dir/?api=1&destination=' + destinationLatLng.lat() + ','+ destinationLatLng.lng()
baseurl += '&destination_place_id=' + destinationPlaceId;
if (originPlaceId.length > 0) {
baseurl += '&travelmode=driving&origin=' + originLatLng.lat() + ',' + originLatLng.lng();
baseurl += '&origin_place_id=' + originPlaceId;
}
return baseurl
},
sortByDist: function(a,b){ // TODO comments
if (a.dist > b.dist) {
return 1
}
if (a.dist < b.dist) {
return -1
} return 0
},
filterStops: function(){ // TODO split this to saner functions
// Prep const and vars
const place = this.place;
const placeLatLng = place.geometry.location;
var getStraightLineDistance = google.maps.geometry.spherical.computeDistanceBetween.bind(null, placeLatLng);
// filter by straight line distance
var straightLineDistance = this.stopsBase.map(stop => {
const stopLatLng = new google.maps.LatLng(stop.lat, stop.lng); // Create LatLng Object
return {
id: stop.id,
stopLatLng: stopLatLng, // Pass LatLng Object to next step
dist: getStraightLineDistance(stopLatLng),
name: stop.name,
};
}).sort(this.sortByDist) // function to sort by distance
.filter(stop => stop.dist < 10000).slice(0,10); // filter < 10km
var directionsService = new google.maps.DirectionsService();
var travelDistancePromiseArray = straightLineDistance.map(stop => {
// Request Object for directions
const directionsRequest = {
origin: stop.stopLatLng,
destination: placeLatLng,
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
}
return new Promise (async (resolve, reject) => {
result = await directionsService.route(directionsRequest, async (results, status) => {
if (status == 'OK') {
const traveldist = results.routes[0].legs[0].distance.value; // get the distance
const originGmapsId = results.geocoded_waypoints[0].place_id;
result = {
id: stop.id,
dist: traveldist,
formattedDist: (traveldist/1000).toFixed(2),
name: stop.name,
stopLatLng: stop.stopLatLng,
destination: place,
destinationLatLng: placeLatLng,
originGmapsId: originGmapsId,
}
resolve(result);
} else {resolve({id:stop.id, dist: traveldist, status: status})}
});
});
});
// Wait for all the requests to finish
Promise.all(travelDistancePromiseArray).then((values) => {
this.filteredStops = values.filter(stop => stop.dist != null); // filter non successful queries
}).catch(err => {console.log(err)});
},
},
mounted: function() {
this.gAutocomplete();
this.getData();
}
});