Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
hdastageeri
hft_awado_app
Commits
17fb24c7
Commit
17fb24c7
authored
Dec 02, 2019
by
Ratnadeep Rajendra Kharade
Browse files
removed map specific code from HireBikePage and moved into HereMapComponent
parent
201867bf
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/app/hirebike/hirebike.page.ts
View file @
17fb24c7
...
...
@@ -2,7 +2,7 @@ import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import
{
Geolocation
}
from
'
@ionic-native/geolocation/ngx
'
;
import
{
RestService
}
from
'
../rest.service
'
;
import
{
Observable
}
from
'
rxjs
'
;
import
{
Observable
,
Subject
}
from
'
rxjs
'
;
import
{
HttpClient
,
HttpHeaders
}
from
'
@angular/common/http
'
;
import
{
Storage
}
from
'
@ionic/storage
'
;
import
{
ToastService
}
from
'
../services/toast.service
'
;
...
...
@@ -16,34 +16,15 @@ declare var H: any;
export
class
HirebikePage
implements
OnInit
{
private
platform
:
any
;
private
map
:
any
;
// Get an instance of the routing service:
private
mapRouter
:
any
;
reservedBike
:
any
=
{};
bikeDetails
:
any
=
{};
address
=
"
sample
"
;
isBikeHired
=
false
;
address
=
"
sample
"
;
isBikeHired
=
false
;
noReservation
=
true
;
private
currentLocation
=
{
lat
:
0
,
lng
:
0
};
// Create the parameters for the routing request:
private
routingParameters
=
{
// The routing mode:
mode
:
'
shortest;pedestrian
'
,
// The start point of the route:
waypoint0
:
'
geo!50.1120423728813,8.68340740740811
'
,
// The end point of the route:
waypoint1
:
'
geo!52.5309916298853,13.3846220493377
'
,
// To retrieve the shape of the route we choose the route
// representation mode 'display'
representation
:
'
display
'
};
@
ViewChild
(
"
mapElement
"
,
{
static
:
false
})
public
mapElement
:
ElementRef
;
startRideSubject
:
Subject
<
any
>
=
new
Subject
();
gotReservedBikeSubject
:
Subject
<
any
>
=
new
Subject
();
constructor
(
private
geolocation
:
Geolocation
,
public
restService
:
RestService
,
...
...
@@ -51,10 +32,9 @@ export class HirebikePage implements OnInit {
private
storage
:
Storage
,
private
toastService
:
ToastService
,
private
router
:
Router
)
{
this
.
platform
=
new
H
.
service
.
Platform
({
'
apikey
'
:
'
tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k
'
});
this
.
mapRouter
=
this
.
platform
.
getRoutingService
();
this
.
platform
=
new
H
.
service
.
Platform
({
'
apikey
'
:
'
tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k
'
});
}
ngOnInit
()
{
...
...
@@ -75,7 +55,7 @@ export class HirebikePage implements OnInit {
console
.
log
(
'
Reserved Bike
'
,
resp
);
if
(
resp
.
data
)
{
this
.
reservedBike
=
resp
.
data
;
this
.
isBikeHired
=
this
.
reservedBike
.
rented
;
this
.
isBikeHired
=
this
.
reservedBike
.
rented
;
//Call Bike Details api
let
bikeDetailsUrl
=
'
http://193.196.52.237:8081/bikes/
'
+
this
.
reservedBike
.
bikeId
;
let
bikeDetailsApi
=
this
.
httpClient
.
get
(
bikeDetailsUrl
,
{
headers
});
...
...
@@ -84,18 +64,16 @@ export class HirebikePage implements OnInit {
this
.
bikeDetails
=
resp
.
data
;
this
.
noReservation
=
false
;
this
.
reverseGeocode
(
this
.
platform
,
this
.
bikeDetails
.
lat
,
this
.
bikeDetails
.
lon
);
// display map
setTimeout
(()
=>
{
this
.
loadmap
();
},
1000
);
window
.
addEventListener
(
'
resize
'
,
()
=>
this
.
map
.
getViewPort
().
resize
());
//pass reserved bike subject here map
this
.
gotReservedBikeSubject
.
next
(
resp
.
data
);
},
(
reservedBikeError
)
=>
console
.
log
(
reservedBikeError
));
}
},
(
bikeDetailsError
)
=>
console
.
log
(
bikeDetailsError
));
});
}
startTrip
(){
startTrip1
()
{
this
.
storage
.
get
(
'
token
'
).
then
((
token
)
=>
{
let
url
=
'
http://193.196.52.237:8081/rent
'
+
'
?bikeId=
'
+
this
.
bikeDetails
.
id
;
const
headers
=
new
HttpHeaders
().
set
(
"
Authorization
"
,
"
Bearer
"
+
token
);
...
...
@@ -103,7 +81,7 @@ export class HirebikePage implements OnInit {
bikeApi
.
subscribe
((
resp
)
=>
{
console
.
log
(
'
my data:
'
,
resp
);
this
.
toastService
.
showToast
(
"
Trip Started
"
);
this
.
isBikeHired
=
true
;
this
.
isBikeHired
=
true
;
},
(
error
)
=>
{
console
.
log
(
error
)
this
.
toastService
.
showToast
(
"
This is ongoing Trip
"
)
...
...
@@ -112,8 +90,12 @@ export class HirebikePage implements OnInit {
}
CancelTrip
(){
startTrip
()
{
this
.
isBikeHired
=
true
;
this
.
startRideSubject
.
next
(
'
some value
'
);
}
CancelTrip
()
{
this
.
storage
.
get
(
'
token
'
).
then
((
token
)
=>
{
let
url
=
'
http://193.196.52.237:8081/rent
'
+
'
?bikeId=
'
+
this
.
bikeDetails
.
id
;
const
headers
=
new
HttpHeaders
().
set
(
"
Authorization
"
,
"
Bearer
"
+
token
);
...
...
@@ -126,110 +108,6 @@ export class HirebikePage implements OnInit {
this
.
toastService
.
showToast
(
"
No Ongong Trip to End
"
)
});
});
}
loadmap
()
{
var
defaultLayers
=
this
.
platform
.
createDefaultLayers
();
this
.
map
=
new
H
.
Map
(
this
.
mapElement
.
nativeElement
,
defaultLayers
.
raster
.
normal
.
map
,
{
zoom
:
17
,
pixelRatio
:
window
.
devicePixelRatio
||
1
}
);
var
behavior
=
new
H
.
mapevents
.
Behavior
(
new
H
.
mapevents
.
MapEvents
(
this
.
map
));
var
ui
=
H
.
ui
.
UI
.
createDefault
(
this
.
map
,
defaultLayers
);
ui
.
removeControl
(
"
mapsettings
"
);
// create custom one
var
ms
=
new
H
.
ui
.
MapSettingsControl
({
baseLayers
:
[{
label
:
"
3D
"
,
layer
:
defaultLayers
.
vector
.
normal
.
map
},
{
label
:
"
Normal
"
,
layer
:
defaultLayers
.
raster
.
normal
.
map
},
{
label
:
"
Satellite
"
,
layer
:
defaultLayers
.
raster
.
satellite
.
map
},
{
label
:
"
Terrain
"
,
layer
:
defaultLayers
.
raster
.
terrain
.
map
}
],
layers
:
[{
label
:
"
layer.traffic
"
,
layer
:
defaultLayers
.
vector
.
normal
.
traffic
},
{
label
:
"
layer.incidents
"
,
layer
:
defaultLayers
.
vector
.
normal
.
trafficincidents
}
]
});
ui
.
addControl
(
"
customized
"
,
ms
);
var
mapSettings
=
ui
.
getControl
(
'
customized
'
);
var
zoom
=
ui
.
getControl
(
'
zoom
'
);
mapSettings
.
setAlignment
(
'
top-right
'
);
zoom
.
setAlignment
(
'
left-top
'
);
//get user location
this
.
getLocation
(
this
.
map
);
var
img
=
[
'
../../../assets/images/100_percent.png
'
,
'
../../../assets/images/75_percent.png
'
,
'
../../../assets/images/50_percent.png
'
,
'
../../../assets/images/25_percent.png
'
,
'
../../../assets/images/0_percent.png
'
];
if
(
this
.
bikeDetails
.
batteryPercentage
<
100
&&
this
.
bikeDetails
.
batteryPercentage
>=
75
)
{
this
.
addMarker
(
Number
(
this
.
bikeDetails
.
lat
),
Number
(
this
.
bikeDetails
.
lon
),
img
[
0
]);
}
else
if
(
this
.
bikeDetails
.
batteryPercentage
<
75
&&
this
.
bikeDetails
.
batteryPercentage
>=
50
)
{
this
.
addMarker
(
Number
(
this
.
bikeDetails
.
lat
),
Number
(
this
.
bikeDetails
.
lon
),
img
[
1
]);
}
else
if
(
this
.
bikeDetails
.
batteryPercentage
<
50
&&
this
.
bikeDetails
.
batteryPercentage
>=
25
)
{
this
.
addMarker
(
Number
(
this
.
bikeDetails
.
lat
),
Number
(
this
.
bikeDetails
.
lon
),
img
[
2
]);
}
else
if
(
this
.
bikeDetails
.
batteryPercentage
<
25
&&
this
.
bikeDetails
.
batteryPercentage
>=
0
)
{
this
.
addMarker
(
Number
(
this
.
bikeDetails
.
lat
),
Number
(
this
.
bikeDetails
.
lon
),
img
[
3
]);
}
}
getLocation
(
map
)
{
this
.
geolocation
.
getCurrentPosition
(
{
maximumAge
:
1000
,
timeout
:
5000
,
enableHighAccuracy
:
true
}
).
then
((
resp
)
=>
{
let
lat
=
resp
.
coords
.
latitude
let
lng
=
resp
.
coords
.
longitude
this
.
currentLocation
.
lat
=
resp
.
coords
.
latitude
;
this
.
currentLocation
.
lng
=
resp
.
coords
.
longitude
;
this
.
moveMapToGiven
(
map
,
lat
,
lng
);
// set routing params
this
.
routingParameters
.
waypoint1
=
'
geo!
'
+
this
.
bikeDetails
.
lat
+
'
,
'
+
this
.
bikeDetails
.
lon
;
this
.
routingParameters
.
waypoint0
=
'
geo!
'
+
this
.
currentLocation
.
lat
+
'
,
'
+
this
.
currentLocation
.
lng
;
// show route on map
this
.
mapRouter
.
calculateRoute
(
this
.
routingParameters
,
this
.
onResult
.
bind
(
this
),
(
error
)
=>
{
alert
(
error
.
message
);
});
},
er
=>
{
alert
(
'
Can not retrieve Location
'
)
}).
catch
((
error
)
=>
{
alert
(
'
Error getting location -
'
+
JSON
.
stringify
(
error
))
});
}
moveMapToGiven
(
map
,
lat
,
lng
)
{
var
icon
=
new
H
.
map
.
Icon
(
'
../../../assets/images/current_location.png
'
);
// Create a marker using the previously instantiated icon:
var
marker
=
new
H
.
map
.
Marker
({
lat
:
lat
,
lng
:
lng
},
{
icon
:
icon
});
// Add the marker to the map:
map
.
addObject
(
marker
);
map
.
setCenter
({
lat
:
lat
,
lng
:
lng
});
}
addMarker
(
lat
,
lng
,
img
)
{
var
icon
=
new
H
.
map
.
Icon
(
img
);
// Create a marker using the previously instantiated icon:
var
marker
=
new
H
.
map
.
Marker
({
lat
:
lat
,
lng
:
lng
},
{
icon
:
icon
});
// Add the marker to the map:
this
.
map
.
addObject
(
marker
);
}
reverseGeocode
(
platform
,
lat
,
lng
)
{
var
prox
=
lat
+
'
,
'
+
lng
+
'
,56
'
;
...
...
@@ -246,66 +124,12 @@ export class HirebikePage implements OnInit {
var
streets
=
result
.
Response
.
View
[
0
].
Result
[
0
].
Location
.
Address
.
Street
;
var
houseNumber
=
result
.
Response
.
View
[
0
].
Result
[
0
].
Location
.
Address
.
HouseNumber
;
var
zipcode
=
result
.
Response
.
View
[
0
].
Result
[
0
].
Location
.
Address
.
PostalCode
;
this
.
address
=
streets
;
},
(
error
)
=>
{
alert
(
error
);
});
}
// Define a callback function to process the routing response:
onResult
(
result
)
{
var
route
,
routeShape
,
startPoint
,
endPoint
,
linestring
;
if
(
result
.
response
.
route
)
{
// Pick the first route from the response:
route
=
result
.
response
.
route
[
0
];
// Pick the route's shape:
routeShape
=
route
.
shape
;
// Create a linestring to use as a point source for the route line
linestring
=
new
H
.
geo
.
LineString
();
// Push all the points in the shape into the linestring:
routeShape
.
forEach
(
function
(
point
)
{
var
parts
=
point
.
split
(
'
,
'
);
linestring
.
pushLatLngAlt
(
parts
[
0
],
parts
[
1
]);
});
// Retrieve the mapped positions of the requested waypoints:
startPoint
=
route
.
waypoint
[
0
].
mappedPosition
;
endPoint
=
route
.
waypoint
[
1
].
mappedPosition
;
// Create a polyline to display the route:
var
routeLine
=
new
H
.
map
.
Polyline
(
linestring
,
{
/* style: {
lineWidth: 10,
fillColor: 'white',
strokeColor: 'rgba(255, 255, 255, 1)',
lineDash: [0, 2],
lineTailCap: 'arrow-tail',
lineHeadCap: 'arrow-head'
} */
style
:
{
lineWidth
:
6
,
strokeColor
:
'
rgba(0, 72, 255, 0.8)
'
,
lineDash
:
[
0
,
2
]
}
});
// Add the route polyline and the two markers to the map:
this
.
map
.
addObjects
([
routeLine
]);
// Set the map's viewport to make the whole route visible:
this
.
map
.
getViewModel
().
setLookAtData
({
bounds
:
routeLine
.
getBoundingBox
()
});
//this.map.setZoom(this.map.getZoom() - 4.3, true);
}
};
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment