@@ -11,15 +11,14 @@ import selectRouteStyles from './components/styles/SelectRoute.styles';
1111import { retrieveData } from './caching' ;
1212
1313export default function SelectRouteScreen ( { navigation, route } ) {
14- const { origin, destination, routeData } = route . params ;
14+ const { origin, destination, routeData } = route . params ;
1515 const [ routes , setRoutes ] = useState ( [ ] ) ;
1616 const [ location , setLocation ] = useState ( null ) ;
1717 const [ errorMessage , setErrorMessage ] = useState ( '' ) ;
1818 const [ polylineCoordinates , setPolylineCoordinates ] = useState ( [ ] ) ;
1919 const [ currentRoute , setCurrentRoute ] = useState ( routeData . routes [ 0 ] ) ;
2020 const [ scores , setScores ] = useState ( [ ] ) ;
2121
22-
2322 // Get current location
2423 useEffect ( ( ) => {
2524 ( async ( ) => {
@@ -43,7 +42,7 @@ export default function SelectRouteScreen({ navigation, route }) {
4342 ...prevScores ,
4443 getSustainabilityScore ( i , false ) ,
4544 ] ) ;
46- print ( `Sustainability score for route ${ i } : ${ scores [ i ] } ` ) ;
45+ print ( `Sustainability score for route ${ i } : ${ scores [ i ] } ` ) ;
4746 }
4847 } , [ routeData . routes ] ) ;
4948
@@ -68,31 +67,36 @@ export default function SelectRouteScreen({ navigation, route }) {
6867 } ;
6968
7069 const getSustainabilityScore = async ( index , startRouteFlag ) => {
71- let sustainabilityScore = {
72- " Bus" : 0 ,
73- " Train" : 0 ,
74- " WALKING" : 0 ,
75- " Tram" : 0 ,
76- " DRIVING" : 0 ,
77- " BICYCLING" : 0 ,
70+ const sustainabilityScore = {
71+ Bus : 0 ,
72+ Train : 0 ,
73+ WALKING : 0 ,
74+ Tram : 0 ,
75+ DRIVING : 0 ,
76+ BICYCLING : 0 ,
7877 } ;
7978 routeData . routes [ index ] . legs [ 0 ] . steps . forEach ( ( step ) => {
8079 let key = '' ;
8180 if ( step . travel_mode === 'TRANSIT' ) {
82- key = step . html_instructions . trim ( ) . split ( ' ' ) [ 0 ]
83- console . log ( "key: " , key ) ;
84- }
85- else {
81+ key = step . html_instructions . trim ( ) . split ( ' ' ) [ 0 ] ;
82+ console . log ( 'key: ' , key ) ;
83+ } else {
8684 key = step . travel_mode ;
8785 }
8886 sustainabilityScore [ key ] += step . distance . value / 1000 ;
89- } )
90- console . log ( "sustainability score: " , sustainabilityScore ) ;
91- const transportScore = await sendSustainabilityScore ( startRouteFlag , sustainabilityScore ) ;
92- return transportScore ;
93- }
87+ } ) ;
88+ console . log ( 'sustainability score: ' , sustainabilityScore ) ;
89+ const transportScore = await sendSustainabilityScore (
90+ startRouteFlag ,
91+ sustainabilityScore ,
92+ ) ;
93+ return transportScore ;
94+ } ;
9495
95- const sendSustainabilityScore = async ( startRouteFlag , sustainabilityScore ) => {
96+ const sendSustainabilityScore = async (
97+ startRouteFlag ,
98+ sustainabilityScore ,
99+ ) => {
96100 try {
97101 const baseUrl =
98102 Platform . OS === 'web'
@@ -107,18 +111,18 @@ export default function SelectRouteScreen({ navigation, route }) {
107111 } ,
108112 body : JSON . stringify ( {
109113 username : await retrieveData ( 'username' ) ,
110- flag : startRouteFlag ,
114+ flag : startRouteFlag ,
111115 modeDistances : sustainabilityScore ,
112116 } ) ,
113117 } ) ;
114-
115- let data = await response . json ( ) ;
116- console . log ( " response (transport score): " , data ) ;
118+
119+ const data = await response . json ( ) ;
120+ console . log ( ' response (transport score): ' , data ) ;
117121 return data ;
118122 } catch ( error ) {
119123 console . log ( 'Error sending sustainability scores and distances:' , error ) ;
120- } ;
121- }
124+ }
125+ } ;
122126
123127 const startJourney = ( index , routeOption ) => {
124128 getSustainabilityScore ( index , true ) ;
@@ -127,82 +131,84 @@ export default function SelectRouteScreen({ navigation, route }) {
127131 destination,
128132 routeData : routeOption ,
129133 polylineCoordinates,
130- } )
131- }
134+ } ) ;
135+ } ;
132136
133- return (
134- < View style = { selectRouteStyles . container } >
135- { errorMessage && (
136- < Text style = { selectRouteStyles . error } > { errorMessage } </ Text >
137- ) }
138- { ! errorMessage && location && (
139- < >
140- < MapView
141- style = { selectRouteStyles . map }
142- initialRegion = { {
143- latitude :
144- routes . length > 0
145- ? routes [ 0 ] . legs [ 0 ] . start_location . lat
146- : location . latitude ,
147- longitude :
148- routes . length > 0
149- ? routes [ 0 ] . legs [ 0 ] . start_location . lng
150- : location . longitude ,
151- latitudeDelta : 0.01 ,
152- longitudeDelta : 0.01 ,
153- } }
154- >
137+ return (
138+ < View style = { selectRouteStyles . container } >
139+ { errorMessage && (
140+ < Text style = { selectRouteStyles . error } > { errorMessage } </ Text >
141+ ) }
142+ { ! errorMessage && location && (
143+ < >
144+ < MapView
145+ style = { selectRouteStyles . map }
146+ initialRegion = { {
147+ latitude :
148+ routes . length > 0
149+ ? routes [ 0 ] . legs [ 0 ] . start_location . lat
150+ : location . latitude ,
151+ longitude :
152+ routes . length > 0
153+ ? routes [ 0 ] . legs [ 0 ] . start_location . lng
154+ : location . longitude ,
155+ latitudeDelta : 0.01 ,
156+ longitudeDelta : 0.01 ,
157+ } }
158+ >
159+ < Marker
160+ coordinate = { location }
161+ title = "Your Location"
162+ description = "Real-time location"
163+ icon = { locationCircleIcon }
164+ />
165+ { polylineCoordinates . length > 0 && (
155166 < Marker
156- coordinate = { location }
157- title = "Your Location"
158- description = "Real-time location"
159- icon = { locationCircleIcon }
167+ coordinate = { polylineCoordinates [ polylineCoordinates . length - 1 ] }
168+ title = "Destination"
169+ description = "Destination of the route"
160170 />
161- { polylineCoordinates . length > 0 && (
162- < Marker
163- coordinate = { polylineCoordinates [ polylineCoordinates . length - 1 ] }
164- title = "Destination"
165- description = "Destination of the route"
166- />
167- ) }
168- { polylineCoordinates . length > 0 && (
169- < Polyline
170- coordinates = { polylineCoordinates }
171- strokeColor = "#1063D5"
172- strokeWidth = { 4 }
173- />
174- ) }
175- </ MapView >
176- < View >
177- { routes . map ( ( routeOption , index ) => (
178- < View
179- key = { index } // eslint-disable-line react/no-array-index-key
180- style = { selectRouteStyles . routeContainer }
171+ ) }
172+ { polylineCoordinates . length > 0 && (
173+ < Polyline
174+ coordinates = { polylineCoordinates }
175+ strokeColor = "#1063D5"
176+ strokeWidth = { 4 }
177+ />
178+ ) }
179+ </ MapView >
180+ < View >
181+ { routes . map ( ( routeOption , index ) => (
182+ < View
183+ key = { index } // eslint-disable-line react/no-array-index-key
184+ style = { selectRouteStyles . routeContainer }
185+ >
186+ < TouchableOpacity
187+ onPress = { ( ) => displaySelectedRoute ( index ) }
188+ style = { selectRouteStyles . routeButton }
181189 >
182- < TouchableOpacity
183- onPress = { ( ) => displaySelectedRoute ( index ) }
184- style = { selectRouteStyles . routeButton }
185- >
186- < Text > Route { index + 1 } </ Text >
187- < Text > Distance: { routeOption . legs [ 0 ] . distance . text } </ Text >
188- < Text > Duration: { routeOption . legs [ 0 ] . duration . text } </ Text >
189- < Text > Sustainability score: { scores [ index ] } </ Text >
190- </ TouchableOpacity >
191- { /* routeData needs to rename the route variable because that is what react navigator calls its properties */ }
192- < TouchableOpacity
193- onPress = { ( ) => { startJourney ( index , routeOption ) } }
194- style = { selectRouteStyles . startButton }
195- >
196- < Text > Start Journey</ Text >
197- </ TouchableOpacity >
198- </ View >
199- ) ) }
200- </ View >
201- </ >
202- ) }
203- { ! errorMessage && ! location && (
204- < Text style = { selectRouteStyles . loadingText } > Loading...</ Text >
205- ) }
206- </ View >
207- ) ;
208- }
190+ < Text > Route { index + 1 } </ Text >
191+ < Text > Distance: { routeOption . legs [ 0 ] . distance . text } </ Text >
192+ < Text > Duration: { routeOption . legs [ 0 ] . duration . text } </ Text >
193+ < Text > Sustainability score: { scores [ index ] } </ Text >
194+ </ TouchableOpacity >
195+ { /* routeData needs to rename the route variable because that is what react navigator calls its properties */ }
196+ < TouchableOpacity
197+ onPress = { ( ) => {
198+ startJourney ( index , routeOption ) ;
199+ } }
200+ style = { selectRouteStyles . startButton }
201+ >
202+ < Text > Start Journey</ Text >
203+ </ TouchableOpacity >
204+ </ View >
205+ ) ) }
206+ </ View >
207+ </ >
208+ ) }
209+ { ! errorMessage && ! location && (
210+ < Text style = { selectRouteStyles . loadingText } > Loading...</ Text >
211+ ) }
212+ </ View >
213+ ) ;
214+ }
0 commit comments