dev-chiefworks
446 lines
11 KiB
PHP
446 lines
11 KiB
PHP
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-11">
|
|
<div class="panel panel-flat">
|
|
<div class="panel-heading">
|
|
<h6 class="panel-title">Geofencing</h6>
|
|
<div class="heading-elements">
|
|
</div>
|
|
</div>
|
|
<div id="getquote" class="table-responsive" style="background-color:#CEE0D7;">
|
|
<div style="margin-left:20px;width:800px;">
|
|
<span style="color:red"><b><?=$message?></b></span>
|
|
<form method="post" action="?">
|
|
<input type="hidden" name="from" id="from" value="<?=$from?>">
|
|
<input type="hidden" name="to" id="to" value="<?=$to?>">
|
|
<table width="50%">
|
|
<tr>
|
|
<td>From</td>
|
|
<td><input type="text" class="form-control" name="autofrom" id="autofrom" value="<?=$autofrom?>" size="20"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>To</td>
|
|
<td><input type="text" class="form-control" name="autoto" id="autoto" value="<?=$autoto?>" size="20"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Threshold</td>
|
|
<td><input type="text" name="threshold" value="<?= $threshold ?>" /></td>
|
|
</tr>
|
|
</table>
|
|
<input type="submit" value="Query" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<? echo $geofence; ?>
|
|
<style>
|
|
canvas {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
td:hover{
|
|
cursor: pointer;
|
|
}
|
|
col:first-child {background: #EEF}
|
|
col:nth-child(2n+3) {background: #EEF}
|
|
tr:first-child {background: #DDF}
|
|
tr:nth-child(2n+3) {background: #DFD}
|
|
th {
|
|
text-align: center;
|
|
}
|
|
body{
|
|
margin-top: 100px;
|
|
font-family: 'Trebuchet MS', serif;
|
|
line-height: 1.6
|
|
}
|
|
.container{
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
ul.tabs{
|
|
margin: 0px;
|
|
padding: 0px;
|
|
list-style: none;
|
|
}
|
|
ul.tabs li{
|
|
background: none;
|
|
color: #222;
|
|
display: inline-block;
|
|
padding: 10px 15px;
|
|
cursor: pointer;
|
|
}
|
|
ul.tabs li.current{
|
|
background: #ededed;
|
|
color: #222;
|
|
}
|
|
|
|
.tab-content{
|
|
display: none;
|
|
background: #ededed;
|
|
padding: 15px;
|
|
}
|
|
|
|
.tab-content.current{
|
|
display: inherit;
|
|
}
|
|
</style>
|
|
<style>
|
|
/* Always set the map height explicitly to define the size of the div
|
|
* element that contains the map. */
|
|
#map {
|
|
height: 625px;
|
|
}
|
|
/* Optional: Makes the sample page fill the window. */
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#floating-panel {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 25%;
|
|
z-index: 5;
|
|
background-color: #fff;
|
|
padding: 5px;
|
|
border: 1px solid #999;
|
|
text-align: center;
|
|
font-family: 'Roboto','sans-serif';
|
|
line-height: 30px;
|
|
padding-left: 10px;
|
|
}
|
|
#floating-panel {
|
|
background-color: #fff;
|
|
border: 1px solid #999;
|
|
left: 25%;
|
|
padding: 5px;
|
|
position: absolute;
|
|
top: 10px;
|
|
z-index: 5;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
var getJSON = function(url, callback) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', url, true);
|
|
xhr.responseType = 'json';
|
|
xhr.onload = function() {
|
|
var status = xhr.status;
|
|
if (status === 200) {
|
|
callback(null, xhr.response);
|
|
} else {
|
|
callback(status, xhr.response);
|
|
}
|
|
};
|
|
xhr.send();
|
|
};
|
|
// This example creates a simple polygon representing the Bermuda Triangle.
|
|
|
|
var x = [];
|
|
var n = 0;
|
|
|
|
function initMap() {
|
|
getJSON('/district.json', function(err, data) {
|
|
if (err !== null) {
|
|
alert('Something went wrong: ' + err);
|
|
} else {
|
|
n = data.data.features.length;
|
|
for (var i=0; i<n; i++) {
|
|
var k = data.data.features[i].geometry.coordinates.length;
|
|
for (var i1 = 0; i1 < k; i1++) {
|
|
var l = data.data.features[i].geometry.coordinates[i1].length;
|
|
for (var i2 = 0; i2 < l; i2++) {
|
|
var coords = data.data.features[i].geometry.coordinates[i1][i2];
|
|
var y = [];
|
|
for (var j=0; j<coords.length; j++) {
|
|
y.push({lng: coords[j][0], lat: coords[j][1]});
|
|
}
|
|
x.push(y);
|
|
}
|
|
}
|
|
}
|
|
initMapReal(x);
|
|
}
|
|
});
|
|
}
|
|
|
|
function initMapReal(x) {
|
|
var map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 11,
|
|
center: {lat: 1.32366175, lng: 103.8483699},
|
|
mapTypeId: 'terrain'
|
|
});
|
|
|
|
for (var i=0; i<x.length; i++) {
|
|
// Construct the polygon.
|
|
var graphTmp = new google.maps.Polygon({
|
|
paths: x[i],
|
|
strokeColor: '#FF0000',
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: '#FF0000',
|
|
fillOpacity: 0.35
|
|
});
|
|
graphTmp.setMap(map);
|
|
}
|
|
|
|
<? if (isset($data_from) && is_object($data_from)) { ?>
|
|
var marker_from = new google.maps.Marker({
|
|
position: {lat: <?= $data_from->{"latitude"}?> , lng: <?= $data_from->{"longitude"}?>},
|
|
map: map,
|
|
title: '<?= $data_from->{"address"}?>'
|
|
});
|
|
<? } ?>
|
|
<? if (isset($data_to) && is_object($data_to)) { ?>
|
|
var marker_to = new google.maps.Marker({
|
|
position: {lat: <?= $data_to->{"latitude"}?> , lng: <?= $data_to->{"longitude"}?>},
|
|
map: map,
|
|
title: '<?= $data_to->{"address"}?>'
|
|
});
|
|
<? } ?>
|
|
<?
|
|
if (isset($route_overlay) && is_array($route_overlay) && count($route_overlay)>0) {
|
|
$i = 0;
|
|
foreach ($route_overlay as $route) {
|
|
if (isset($route["polyline"]) && count($route["polyline"])>0) { ?>
|
|
var routeCoordinates<?= $i ?> = [
|
|
<? foreach ($route["polyline"] as $j) { ?>{lat: <?= $j[0] ?>, lng: <?= $j[1] ?>},
|
|
<? } ?>
|
|
];
|
|
var routePath<?= $i ?> = new google.maps.Polyline({
|
|
path: routeCoordinates<?= $i ?>,
|
|
geodesic: true,
|
|
strokeColor: '#0000FF',
|
|
strokeOpacity: 1.0,
|
|
strokeWeight: 4
|
|
});
|
|
routePath<?= $i ?>.setMap(map);
|
|
<? } ?>
|
|
<? $i++; } ?>
|
|
<? } ?>
|
|
}
|
|
</script>
|
|
<script async defer
|
|
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvjiRTxngOQyBP4zpqFlZuiquc0ROvo9c&callback=initMap">
|
|
</script>
|
|
<br/>
|
|
<br/>
|
|
|
|
|
|
<div class="container">
|
|
|
|
<ul class="tabs">
|
|
<li class="tab-link current" data-tab="tab-1">Geofencing Map</li>
|
|
<li class="tab-link" data-tab="tab-2">Matching History</li>
|
|
<li class="tab-link" data-tab="tab-3">Geofenced Areas</li>
|
|
<li class="tab-link" data-tab="tab-4">All Regions</li>
|
|
</ul>
|
|
|
|
<div id="tab-1" class="tab-content current">
|
|
<div id="map"></div>
|
|
</div>
|
|
<div id="tab-2" class="tab-content">
|
|
<table>
|
|
<col><col><col><col><col><col><col><col>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Distance</th>
|
|
<th>Cost</th>
|
|
<th>Cost Raw</th>
|
|
<th>Duration</th>
|
|
<th>From Address</th>
|
|
<th>To Address</th>
|
|
<th>Provider</th>
|
|
</tr>
|
|
<? foreach ($history as $f) { ?>
|
|
<? if (is_numeric($f["distance"]) &&
|
|
($distance-$threshold) <= $f["distance"] &&
|
|
$f["distance"] <= ($distance+$threshold)) { ?>
|
|
<tr>
|
|
<? } else { ?>
|
|
<tr style="color:#cccccc">
|
|
<? } ?>
|
|
<td><?= $f["travel_date"] ?></td>
|
|
<td align=right><?= $f["distance"] ?></td>
|
|
<td align=right><?= $f["cost"] ?></td>
|
|
<td align=right><?= $f["cost_raw"] ?></td>
|
|
<td align=center><?= $f["duration"] ?></td>
|
|
<td><?= $f["saddress"] ?></td>
|
|
<td><?= $f["eaddress"] ?></td>
|
|
<td align=right><?= $f["transport_provider_id"] ?></td>
|
|
<? /*
|
|
array(16) { ["id"]=> string(4) "5434"
|
|
["trackedemail_item_id"]=> string(5) "15248"
|
|
["updated"]=> string(26) "2019-03-08 08:36:01.033791"
|
|
["transport_provider_id"]=> string(1) "3"
|
|
["scheduled"]=> NULL
|
|
["travel_date_end"]=> string(19) "2017-04-22 15:45:43"
|
|
["dup_id"]=> NULL
|
|
["location_start_id"]=> string(3) "369"
|
|
["location_end_id"]=> string(3) "708"
|
|
["postal"]=> string(6) "437918"
|
|
["address"]=> string(29) "97 Meyer Rd, Singapore 437918" }
|
|
*/ ?>
|
|
</tr>
|
|
<? } ?>
|
|
</table>
|
|
</div>
|
|
<div id="tab-3" class="tab-content">
|
|
<table><? $i = (array)$area_from; $j = (array)$area_to; ?>
|
|
<col><col><col>
|
|
<tr>
|
|
<th></th>
|
|
<th>Area From</th>
|
|
<th>Area To</th>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Name</b></td>
|
|
<td><?=$i["name"] ?></td>
|
|
<td><?=$j["name"] ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Sector</b></td>
|
|
<td><?=$i["sector"] ?></td>
|
|
<td><?=$j["sector"] ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Region</b></td>
|
|
<td><?=$i["region"] ?></td>
|
|
<td><?=$j["region"] ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Postal Codes</b></td>
|
|
<td><?=implode(",",json_decode($i["postal_code"],true)["postal_code"]) ?></td>
|
|
<td><?=implode(",",json_decode($j["postal_code"],true)["postal_code"]) ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Area</b></td>
|
|
<td><?=$i["area"] ?></td>
|
|
<td><?=$j["area"] ?></td>
|
|
</tr>
|
|
<?/*
|
|
["id"]=> string(1) "1"
|
|
["region_id"]=> string(1) "1"
|
|
["sector_id"]=> string(1) "1"
|
|
} */ ?>
|
|
</table>
|
|
<!-- pre>
|
|
<? var_dump($route_overlay); ?>
|
|
</pre -->
|
|
</div>
|
|
<div id="tab-4" class="tab-content">
|
|
<table>
|
|
<col><col><col><col><col><col>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Region</th>
|
|
<th>Sector</th>
|
|
<th>District</th>
|
|
<th>Area</th>
|
|
<th>Postal Code</th>
|
|
</tr>
|
|
<?
|
|
foreach ($areas as $f) {
|
|
echo "<tr>";
|
|
echo "<td>".$f->{"id"}."</td>";
|
|
echo "<td>".$f->{"region"}."</td>";
|
|
echo "<td>".$f->{"sector"}."</td>";
|
|
echo "<td>".$f->{"name"}."</td>";
|
|
echo "<td>".$f->{"area"}."</td>";
|
|
echo "<td>";
|
|
$i = 0;
|
|
$codes = json_decode($f->{"postal_code"},true);
|
|
foreach ($codes["postal_code"] as $code) {
|
|
echo ($i?', ':'').$code;
|
|
$i++;
|
|
}
|
|
echo "</td>";
|
|
echo "</tr>\n";
|
|
}
|
|
?>
|
|
</table>
|
|
</div>
|
|
|
|
</div><!-- container -->
|
|
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
|
|
$('ul.tabs li').click(function(){
|
|
var tab_id = $(this).attr('data-tab');
|
|
|
|
$('ul.tabs li').removeClass('current');
|
|
$('.tab-content').removeClass('current');
|
|
|
|
$(this).addClass('current');
|
|
$("#"+tab_id).addClass('current');
|
|
})
|
|
|
|
});
|
|
</script>
|
|
|
|
<!-- jQuery UI -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
|
|
<script type='text/javascript'>
|
|
$(document).ready(function(){
|
|
console.log('aaaa');
|
|
// Initialize
|
|
$( "#autofrom" ).autocomplete({
|
|
source: function( request, response ) {
|
|
console.log('bbbb');
|
|
// Fetch data
|
|
$.ajax({
|
|
url: "/bkoreport/addresssearch",
|
|
type: 'post',
|
|
dataType: "json",
|
|
data: {
|
|
search: request.term
|
|
},
|
|
success: function( data ) {
|
|
response( data );
|
|
},
|
|
error: function ( data ) {
|
|
console.log(data);
|
|
}
|
|
});
|
|
},
|
|
select: function (event, ui) {
|
|
// Set selection
|
|
$('#autofrom').val(ui.item.label); // display the selected text
|
|
$('#from').val(ui.item.value); // save selected id to input
|
|
return false;
|
|
}
|
|
});
|
|
$( "#autoto" ).autocomplete({
|
|
source: function( request, response ) {
|
|
// Fetch data
|
|
$.ajax({
|
|
url: "/bkoreport/addresssearch",
|
|
type: 'post',
|
|
dataType: "json",
|
|
data: {
|
|
search: request.term
|
|
},
|
|
success: function( data ) {
|
|
response( data );
|
|
}
|
|
});
|
|
},
|
|
select: function (event, ui) {
|
|
// Set selection
|
|
$('#autoto').val(ui.item.label); // display the selected text
|
|
$('#to').val(ui.item.value); // save selected id to input
|
|
return false;
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|