first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,332 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="panel panel-flat">
|
||||
<h3 class="m-l-md">Neighborhood Settings</h3>
|
||||
<div class="jumbotron" style="background-color:#F3DFE5; padding: 20px 10px 50px 10px;">
|
||||
<form id="neighborhood_form" autocomplete="off">
|
||||
<div class="row">
|
||||
<div class="form-group col-lg-3">
|
||||
<?= $card_country ?>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-lg-4">
|
||||
<select name="city_id" id="city_id" class="form-control"></select>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-lg-4">
|
||||
<select name="address_id" id="address_id" class="form-control"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-lg-3">
|
||||
<input type="number" class="form-control m-b-xs" name="latitude" id="latitude" placeholder="Latitude"></input>
|
||||
<input type="number" class="form-control m-b-xs" name="longitude" id="longitude" placeholder="Longitude"></input>
|
||||
<input type="number" class="form-control" name="radius" id="radius" value="5000" placeholder="Radius (meter)"></input>
|
||||
</div>
|
||||
<div class="form-group col-lg-2">
|
||||
<button type="button" name="search" id="search" class="btn btn-info btn-block btn-sm">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Paginate -->
|
||||
|
||||
<div class="panel panel-white">
|
||||
<div class="row col-lg-12">
|
||||
<div class="panel-heading">
|
||||
<div class="heading-elements">
|
||||
<div style='margin-top: 10px;' id='pagination'></div>
|
||||
</div>
|
||||
</div>
|
||||
<table id="neighborhood-list" class="table-bordered table-condensed table-hover table-striped table-condensed" style="padding:0px; background-color:lightgreen;">
|
||||
<thead class="bg-indigo">
|
||||
<th>ID</th>
|
||||
<th>Address</th>
|
||||
<th>Latitude</th>
|
||||
<th>Longitude</th>
|
||||
<th>TimeZone</th>
|
||||
<th>Geocoding Date</th>
|
||||
<th>Postal</th>
|
||||
<th>Country</th>
|
||||
<th></th>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<!-- Media library -->
|
||||
<font id="message" color=red></font>
|
||||
<div class="panel panel-white" id="neighborhood-detail" style="display: none;">
|
||||
<table id="neighborhood-detail__list" class="table-bordered table-condensed table-hover table-striped table-condensed col-lg-12" style="table-layout: fixed; padding:0px; background-color:lightgreen;">
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="neighborhood-detail__combo">
|
||||
<?= $card_neighborhood ?>
|
||||
</div>
|
||||
<div class="neighborhood-detail__btn">
|
||||
<button type="button" name="btn-set-neighbor" id="btn-set-neighbor" class="btn btn-info btn-block btn-sm">Set Neighborhood</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /media library -->
|
||||
</div>
|
||||
<!-- Script -->
|
||||
<script src="/assets/js/plugins/forms/selects/select2.min.js"></script>
|
||||
<script type='text/javascript'>
|
||||
$(document).ready(function() {
|
||||
|
||||
// Detect pagination click
|
||||
$('#pagination').on('click', 'a', function(e) {
|
||||
e.preventDefault();
|
||||
var pageno = $(this).attr('data-ci-pagination-page');
|
||||
loadPagination(pageno);
|
||||
});
|
||||
|
||||
// Detect search click
|
||||
$('#search').on('click', function(e) {
|
||||
loadPagination(0);
|
||||
$('#neighborhood-detail').css('display', 'none');
|
||||
$('#message').html('');
|
||||
});
|
||||
|
||||
// Prevent submit form by press the enter button
|
||||
$(window).keydown(function(event){
|
||||
if(event.keyCode == 13) {
|
||||
loadPagination(0);
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
function loadPagination(pagno) {
|
||||
|
||||
$('#search').button("loading");
|
||||
|
||||
$.ajax({
|
||||
url: '/tools/loadRecord',
|
||||
type: 'get',
|
||||
dataType: 'json',
|
||||
data : {
|
||||
'rowno' : pagno,
|
||||
'address_id' : $('#address_id').val(),
|
||||
'city_id' : $('#city_id').val(),
|
||||
'latitude' : $('#latitude').val(),
|
||||
'longitude' : $('#longitude').val(),
|
||||
'radius' : $('#radius').val(),
|
||||
'country' : $('[name="card_country"]') .val(),
|
||||
},
|
||||
success: function(response) {
|
||||
$('#pagination').html(response.pagination);
|
||||
createTable(response.result, response.row);
|
||||
|
||||
$(".btn-select").on('click', function(e) {
|
||||
|
||||
showNeighborDetail($(this));
|
||||
|
||||
$("#btn-set-neighbor").unbind('click');
|
||||
$("#btn-set-neighbor").on('click', function(e) {
|
||||
setNeighborHood();
|
||||
});
|
||||
|
||||
});
|
||||
},
|
||||
complete: function() {
|
||||
$('#search').button("reset");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createTable(result) {
|
||||
|
||||
$('#neighborhood-list tbody').empty();
|
||||
|
||||
for (index in result) {
|
||||
var id = result[index].id;
|
||||
var address = result[index].address;
|
||||
var latitude = result[index].latitude;
|
||||
var longitude = result[index].longitude;
|
||||
var timezone = result[index].timezone;
|
||||
var geocoding_date = result[index].geocoding_date;
|
||||
var postal = result[index].postal;
|
||||
var country = result[index].country;
|
||||
var geometry = result[index].geometry;
|
||||
var description = result[index].description;
|
||||
|
||||
var tr = "<tr>";
|
||||
tr += "<td>" + id + "</td>";
|
||||
tr += "<td>" + address + "</td>";
|
||||
tr += "<td>" + latitude + "</td>";
|
||||
tr += "<td>" + longitude + "</td>";
|
||||
tr += "<td>" + timezone + "</td>";
|
||||
tr += "<td>" + geocoding_date + "</td>";
|
||||
tr += "<td>" + postal + "</td>";
|
||||
tr += "<td>" + country + "</td>";
|
||||
tr += "<td style='display:none'>" + geometry + "</td>";
|
||||
tr += "<td style='display:none'>" + description + "</td>";
|
||||
tr += "<td><button type='button' class='btn btn-info btn-block btn-sm btn-select'>Select</button></td>";
|
||||
tr += "</tr>";
|
||||
|
||||
$('#neighborhood-list tbody').append(tr);
|
||||
}
|
||||
}
|
||||
|
||||
function showNeighborDetail(thisObj) {
|
||||
var $row = thisObj.closest("tr"); // Finds the closest row <tr>
|
||||
var $tds = $row.find("td"); // Finds all children <td> elements
|
||||
|
||||
var id = $tds[0].innerText;
|
||||
var address = $tds[1].innerText;
|
||||
var latitude = $tds[2].innerText;
|
||||
var longitude = $tds[3].innerText;
|
||||
var geocoding_date = $tds[5].innerText;
|
||||
var country = $tds[7].innerText;
|
||||
var geometry = $tds[8].innerText;
|
||||
var description = $tds[9].innerText;
|
||||
|
||||
$('#neighborhood-detail__list tbody').empty();
|
||||
|
||||
var tr = "<tr style='display:none'>";
|
||||
tr += "<th>Id</th>";
|
||||
tr += "<td id='selected_address'>" + id + "</td>";
|
||||
tr += "</tr>";
|
||||
tr += "<tr>";
|
||||
tr += "<th>Address</th>";
|
||||
tr += "<td style='word-wrap: break-word;'>" + address + "</td>";
|
||||
tr += "</tr>";
|
||||
tr += "<tr>";
|
||||
tr += "<th>Latitude</th>";
|
||||
tr += "<td>" + latitude + "</td>";
|
||||
tr += "</tr>";
|
||||
tr += "<tr>";
|
||||
tr += "<th>Longitude</th>";
|
||||
tr += "<td>" + longitude + "</td>";
|
||||
tr += "</tr>";
|
||||
tr += "<tr>";
|
||||
tr += "<th>Geocoding Date</th>";
|
||||
tr += "<td>" + geocoding_date + "</td>";
|
||||
tr += "</tr>";
|
||||
tr += "<tr>";
|
||||
tr += "<th>Country</th>";
|
||||
tr += "<td id='selected_country'>" + country + "</td>";
|
||||
tr += "</tr>";
|
||||
tr += "<tr>";
|
||||
tr += "<th>Geometry</th>";
|
||||
tr += "<td style='word-wrap: break-word;'>" + geometry + "</td>";
|
||||
tr += "</tr>";
|
||||
tr += "<tr>";
|
||||
tr += "<th>Description</th>";
|
||||
tr += "<td>" + description + "</td>";
|
||||
tr += "</tr>";
|
||||
|
||||
$('#neighborhood-detail__list tbody').append(tr);
|
||||
$('#neighborhood-detail').css('display', '');
|
||||
}
|
||||
|
||||
function setNeighborHood() {
|
||||
var addressId = $("#selected_address")[0].innerText;
|
||||
var country = $("#selected_country")[0].innerText;
|
||||
var neighborId = $("[name=card_neighborhood]").children("option:selected").val();
|
||||
|
||||
$('#btn-set-neighbor').button("loading");
|
||||
$('#message').html('');
|
||||
|
||||
$.ajax({
|
||||
url: '/tools/setNeighborHood',
|
||||
type: 'post',
|
||||
dataType: 'json',
|
||||
data : {
|
||||
'addressId' : addressId,
|
||||
'country' : country,
|
||||
'neighborId' : neighborId
|
||||
},
|
||||
success: function(response) {
|
||||
$("#message").html(response.message);
|
||||
},
|
||||
complete: function() {
|
||||
$('#btn-set-neighbor').button("reset");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// address automation
|
||||
$('#address_id').select2({
|
||||
placeholder: "Search by address",
|
||||
allowClear: true,
|
||||
maximumSelectionSize: 1,
|
||||
minimumInputLength: 3,
|
||||
ajax: {
|
||||
url: "/addresses/getAddressesAjax",
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
delay: 250,
|
||||
data: function(params) {
|
||||
const query = {
|
||||
name: params.term,
|
||||
page: params.page || 1,
|
||||
per_page: 20,
|
||||
};
|
||||
return query;
|
||||
},
|
||||
processResults: function(res, params) {
|
||||
const { data, total } = res;
|
||||
params.page = params.page || 1;
|
||||
return {
|
||||
results: data.map(item => ({ id: item.id, text: item.address })),
|
||||
pagination: {
|
||||
more: params.page * 20 < +total
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// city automation
|
||||
$('#city_id').select2({
|
||||
placeholder: "Search by city",
|
||||
allowClear: true,
|
||||
maximumSelectionSize: 1,
|
||||
minimumInputLength: 2,
|
||||
ajax: {
|
||||
url: "/geofence_area_city/getcityAjax",
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
delay: 250,
|
||||
data: function(params) {
|
||||
const query = {
|
||||
city_name: params.term,
|
||||
page: params.page || 1,
|
||||
per_page: 20,
|
||||
};
|
||||
return query;
|
||||
},
|
||||
processResults: function(res, params) {
|
||||
const { data, total } = res;
|
||||
params.page = params.page || 1;
|
||||
return {
|
||||
results: data.map(item => ({ id: item.id, text: item.city })),
|
||||
pagination: {
|
||||
more: params.page * 20 < +total
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
a {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user