dev-chiefworks
65 lines
1.9 KiB
PHP
65 lines
1.9 KiB
PHP
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="panel panel-flat">
|
|
<div class="jumbotron" style="background-color:#F3DFE5; padding:10px;">
|
|
<h3>Trip</h3>
|
|
<ul>
|
|
<li><b>ID:</b> <?=$id?></li>
|
|
<li><b>Device ID:</b> <?=$device_id?></li>
|
|
<li><b>Duration:</b> <?=$duration>59?sprintf("%0.01f min",$duration/60.0):"${duration} sec"?></li>
|
|
<li><b>Distance:</b> <?=$distance>999?sprintf("%0.02f km",$distance/1000.0):"${distance} m"?></li>
|
|
<li><b>Speed:</b> <?=$speed?></li>
|
|
<li><b>Avg.Speed:</b> <?=$avg_speed?></li>
|
|
<li><b>Start:</b> <?=$start_lat?>,<?=$start_lng?></li>
|
|
<li><b>End:</b> <?=$end_lat?>,<?=$end_lng?></li>
|
|
<li><b>Start Time:</b> <?=strtok($start_time,'.')?></li>
|
|
<li><b>End Time:</b> <?=strtok($end_time,'.')?></li>
|
|
</ul>
|
|
</div>
|
|
<?=$tracking_trips_table?>
|
|
<!--
|
|
|
|
-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-8">
|
|
<!-- Media library -->
|
|
<div class="panel panel-white">
|
|
<div id="map" style="height: 625px;"></div>
|
|
</div>
|
|
<!-- /media library -->
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
<!--
|
|
var map;
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 13,
|
|
center: {lat: <?=$center_lat?>, lng: <?=$center_lng?>},
|
|
mapTypeId: 'roadmap'
|
|
});
|
|
var flightPlanCoordinates = [
|
|
<?
|
|
echo " {lat: ".$items[0]["lat"].", lng: ".$items[0]["lng"]."}";
|
|
for ($i=1; $i<count($items);$i++) {
|
|
echo ",\n {lat: ".$items[$i]["lat"].", lng: ".$items[$i]["lng"]."}\n";
|
|
} ?>
|
|
];
|
|
var flightPath = new google.maps.Polyline({
|
|
path: flightPlanCoordinates,
|
|
geodesic: true,
|
|
strokeColor: '#FF0000',
|
|
strokeOpacity: 1.0,
|
|
strokeWeight: 2
|
|
});
|
|
flightPath.setMap(map);
|
|
}
|
|
// -->
|
|
</script>
|
|
<script async defer
|
|
src="https://maps.googleapis.com/maps/api/js?key=<?=$google_api_key?>&libraries=visualization&callback=initMap">
|
|
</script>
|