first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,445 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user