Tim
c02b7a0079
Allow IP address info modal on history page. Some minor styling changes to improve layout of settings on mobile.
69 lines
2.8 KiB
HTML
69 lines
2.8 KiB
HTML
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
|
|
<h4 class="modal-title" id="myModalLabel">
|
|
% if data:
|
|
<strong><span id="modal_header_ip_address">
|
|
<i class="fa fa-spin fa-refresh"></i> Loading Details...
|
|
</span></strong>
|
|
% else:
|
|
<i class="fa fa-exclamation-circle"></i> Invalid IP Address</span></strong>
|
|
% endif
|
|
</h4>
|
|
</div>
|
|
<div class="modal-body" id="modal-text">
|
|
<div class="col-md-6">
|
|
<h4><strong>Location Details</strong></h4>
|
|
<ul>
|
|
<li>Country: <strong><span id="country"></span></strong></li>
|
|
<li>City: <strong><span id="city"></span></strong></li>
|
|
<li>Region: <strong><span id="region"></span></strong></li>
|
|
<li>Timezone: <strong><span id="timezone"></span></strong></li>
|
|
<li>Latitude: <strong><span id="lat"></span></strong></li>
|
|
<li>Longitude: <strong><span id="lon"></span></strong></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h4><strong>Connection Details</strong></h4>
|
|
<ul>
|
|
<li>ISP: <strong><span id="isp"></span></strong></li>
|
|
<li>Organization: <strong><span id="org"></span></strong></li>
|
|
<li>AS: <strong><span id="as"></span></strong></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
% if data:
|
|
<script>
|
|
function getUserLocation(ip_address) {
|
|
$.ajax({
|
|
url: 'http://ip-api.com/json/' + ip_address,
|
|
cache: true,
|
|
async: true,
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
error: function(){
|
|
$('#modal_header_ip_address').html("Request failed. Server may be too busy.");
|
|
},
|
|
success: function(data) {
|
|
$('#modal_header_ip_address').html("IP Address: " + ip_address);
|
|
$('#country').html(data.country);
|
|
$('#city').html(data.city);
|
|
$('#region').html(data.regionName);
|
|
$('#timezone').html(data.timezone);
|
|
$('#lat').html(data.lat);
|
|
$('#lon').html(data.lon);
|
|
$('#isp').html(data.isp);
|
|
$('#org').html(data.org);
|
|
$('#as').html(data.as);
|
|
},
|
|
timeout: 5000
|
|
});
|
|
}
|
|
getUserLocation('${data}');
|
|
</script>
|
|
% endif |