rgutierrez/resq
1
0
Fork 0
Code Issues 126 Pull requests 49 Projects Releases 4 Packages Wiki Activity Actions

Add autorefresh for rider locations in map. #270

Browse source
This commit is contained in:
Korina Cordero 2019-10-25 08:59:52 +00:00
parent 76b291f6d7
commit c05921cdf7
3 changed files with 69 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
config/routes.yaml
View file

@ -7,3 +7,6 @@ home:
path: /
controller: App\Controller\HomeController::index
rider_locations:
path: /rider_locations
controller: App\Controller\HomeController::getRiderLocations

15
src/Controller/HomeController.php
View file

@ -18,6 +18,11 @@ class HomeController extends Controller
* @Menu(selected="home")
*/
public function index(EntityManagerInterface $em, RiderTracker $rider_tracker)
{
return $this->render('home.html.twig');
}
public function getRiderLocations(EntityManagerInterface $em, RiderTracker $rider_tracker)
{
// get all riders
$riders = $em->getRepository(Rider::class)->findAll();
@ -29,13 +34,17 @@ class HomeController extends Controller
$rider_id = $rider->getID();
$coordinates = $rider_tracker->getRiderLocation($rider_id);
$long = $coordinates->getLongitude();
$lat = $coordinates->getLatitude();
// use rider id as key
$locations[$rider_id] = $coordinates;
$locations[$rider_id] = array($lat, $long);
}
$params['riders'] = $locations;
return $this->json([
'riders' => $locations,
]);
return $this->render('home.html.twig', $params);
}
}

86
templates/home.html.twig
View file

@ -28,15 +28,13 @@
<div class="row">
<div class="col-xl-12">
<div class="m-portlet m-portlet--mobile">
<form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="POST" }}">
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="col-lg-12">
<div id="m_gmap" style="height:600px;"></div>
</div>
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="col-lg-12">
<div id="m_gmap" style="height:600px;"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@ -51,10 +49,13 @@
<script>
// BEGIN google maps stuff
var map;
var markers = [];
initMap();
function initMap() {
var map = new google.maps.Map(document.getElementById('m_gmap'),
map = new google.maps.Map(document.getElementById('m_gmap'),
{
center: {
lat: {% trans %}default_lat{% endtrans %},
@ -64,35 +65,56 @@ function initMap() {
zoom: 13
});
{% if riders %}
{% for object in riders %}
var lat = {{ object.getLatitude }};
var lng = {{ object.getLongitude }};
var marker = new google.maps.Marker({
position: {
lat: lat,
lng: lng
},
});
marker.setMap(map);
{% endfor %}
{% endif %}
displayMarkers();
}
function renewMarkers() {
$.ajax('{{ path('home') }}', {
success: function() {
// clear the markers
// set the markers again
},
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
function clearMarkers() {
setMapOnAll(null);
markers = [];
}
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
function displayMarkers() {
$.ajax({
url: '{{ path('rider_locations') }}',
}).done(function(response) {
// clear all markers
clearMarkers();
// get riders and mark
var riders = response.riders;
$.each(riders, function(rider_id, point) {
var lat = point[0];
var long = point[1];
var location = {
lat: lat,
lng: long
};
addMarker(location);
});
});
}
setInterval(renewMarkers, 60 * 1000);
</script>
setInterval(displayMarkers, 60 * 1000);
// END google maps stuff
</script>
{% endblock %}