adsb-receiver/build/portal/html/templates/default/plot.tpl

320 wiersze
15 KiB
Smarty

{*
////////////////////////////////////////////////////////////////////////////////
// ADS-B RECEIVER PORTAL TEMPLATE INFORMATION //
// ========================================================================== //
// Template Set: default //
// Template Name: dump1090.tpl //
// Version: 2.0.0 //
// Release Date: //
// Author: Joe Prochazka //
// Website: https://www.swiftbyte.com //
// ========================================================================== //
// Copyright and Licensing Information: //
// //
// Copyright (c) 2015-2016 Joseph A. Prochazka //
// //
// This template set is licensed under The MIT License (MIT) //
// A copy of the license can be found package along with these files. //
////////////////////////////////////////////////////////////////////////////////
*}
{area:head}
<link rel="stylesheet" href="templates/{setting:template}/assets/css/dump1090.css">
<style>
.sidebar.left {
position: fixed;
top: 49px;
left: 0;
bottom: 60px;
width: 270px;
background: #448AFF;
z-index: 10000;
}
.sidebar {
position: fixed;
color: white;
padding: 30px;
font-size: 0.7em;
}
</style>
{/area}
{area:contents}
{if page:flightPathsAvailable eq FALSE}
<div class="modal fade in" id="no-data-modal" tabindex="-1" role="dialog" aria-labelledby="no-data-modal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="no-data-modal-label">No Position Data</h4>
</div>
<div class="modal-body">
<p>There is no position data for this flight.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{/if}
<div class="sidebar left">
<h3>Flight Data</h3>
<p>
<div><strong>ICAO: <span id="icao"></span></strong></div>
<div><strong>Flight Number: <span id="flight"></span></strong></div>
</p>
<p>
<div>Aircraft First Seen: <span id="afs"></span></div>
<div>Aircraft Last Seen: <span id="als"></span></div>
</p>
<p>
<div>Flight First Seen: <span id="ffs"></span></div>
<div>Flight Last Seen: <span id="fls"></span></div>
</p>
</div>
<div id="iframe-wrapper">
<div id="map"></div>
</div>
{/area}
{area:scripts}
{if page:flightPathsAvailable eq FALSE}
<script type="text/javascript">
$(window).load(function(){
$('#no-data-modal').modal('show');
});
</script>
{/if}
<script src="/templates/{setting:template}/assets/js/jquery.sidebar.js"></script>
<script>
var thisPosition;
function setPosition(position) {
thisPosition = position;
}
$(document).ready(function () {
$(".sidebar.left").sidebar({side: "left"});
$(".sidebar.left").on("sidebar:opened", function () {
// Gather data for this particular sighting from the database.
$.ajax({
url: '/api/flight.php',
type: 'GET',
cache: false,
datatype: 'json',
data: {
type: 'byPosition',
position: thisPosition
},
success: function(json) {
var data = $.parseJSON(json);
$('#icao').text(data['icao']);
$('#flight').text(data['flight']);
$('#afs').text(data['afs']);
$('#als').text(data['als']);
$('#ffs').text(data['ffs']);
$('#fls').text(data['fls']);
},
error: function(response) {
console.log(response);
}
});
});
});
</script>
<script src="/templates/{setting:template}/assets/js/date.format.js"></script>
<script>
var genericPlaneSvg = "M 0,0 " +
"M 1.9565564,41.694305 C 1.7174505,40.497708 1.6419973,38.448747 " +
"1.8096508,37.70494 1.8936398,37.332056 2.0796653,36.88191 2.222907,36.70461 " +
"2.4497603,36.423844 4.087816,35.47248 14.917931,29.331528 l 12.434577," +
"-7.050718 -0.04295,-7.613412 c -0.03657,-6.4844888 -0.01164,-7.7625804 " +
"0.168134,-8.6194061 0.276129,-1.3160905 0.762276,-2.5869575 1.347875," +
"-3.5235502 l 0.472298,-0.7553719 1.083746,-0.6085497 c 1.194146,-0.67053522 " +
"1.399524,-0.71738842 2.146113,-0.48960552 1.077005,0.3285939 2.06344," +
"1.41299352 2.797602,3.07543322 0.462378,1.0469993 0.978731,2.7738408 " +
"1.047635,3.5036272 0.02421,0.2570284 0.06357,3.78334 0.08732,7.836246 0.02375," +
"4.052905 0.0658,7.409251 0.09345,7.458546 0.02764,0.04929 5.600384,3.561772 " +
"12.38386,7.805502 l 12.333598,7.715871 0.537584,0.959688 c 0.626485,1.118378 " +
"0.651686,1.311286 0.459287,3.516442 -0.175469,2.011604 -0.608966,2.863924 " +
"-1.590344,3.127136 -0.748529,0.200763 -1.293144,0.03637 -10.184829,-3.07436 " +
"C 48.007733,41.72562 44.793806,40.60197 43.35084,40.098045 l -2.623567," +
"-0.916227 -1.981212,-0.06614 c -1.089663,-0.03638 -1.985079,-0.05089 -1.989804," +
"-0.03225 -0.0052,0.01863 -0.02396,2.421278 -0.04267,5.339183 -0.0395,6.147742 " +
"-0.143635,7.215456 -0.862956,8.845475 l -0.300457,0.680872 2.91906,1.361455 " +
"c 2.929379,1.366269 3.714195,1.835385 4.04589,2.41841 0.368292,0.647353 " +
"0.594634,2.901439 0.395779,3.941627 -0.0705,0.368571 -0.106308,0.404853 " +
"-0.765159,0.773916 L 41.4545,62.83158 39.259237,62.80426 c -6.030106,-0.07507 " +
"-16.19508,-0.495041 -16.870991,-0.697033 -0.359409,-0.107405 -0.523792," +
"-0.227482 -0.741884,-0.541926 -0.250591,-0.361297 -0.28386,-0.522402 -0.315075," +
"-1.52589 -0.06327,-2.03378 0.23288,-3.033615 1.077963,-3.639283 0.307525," +
"-0.2204 4.818478,-2.133627 6.017853,-2.552345 0.247872,-0.08654 0.247455," +
"-0.102501 -0.01855,-0.711959 -0.330395,-0.756986 -0.708622,-2.221756 -0.832676," +
"-3.224748 -0.05031,-0.406952 -0.133825,-3.078805 -0.185533,-5.937448 -0.0517," +
"-2.858644 -0.145909,-5.208974 -0.209316,-5.222958 -0.06341,-0.01399 -0.974464," +
"-0.0493 -2.024551,-0.07845 L 23.247235,38.61921 18.831373,39.8906 C 4.9432155," +
"43.88916 4.2929558,44.057819 3.4954426,43.86823 2.7487826,43.690732 2.2007966," +
"42.916622 1.9565564,41.694305 z";
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: {setting:advancedMapCenterLatitude}, lng: {setting:advancedMapCenterLongitude}},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var pathsSeen = {page:pathsSeen};
{foreach page:flightPaths as flightPath}
var startTime{flightPath->id} = dateFormat("{flightPath->startingTime}", "mmmm dd, yyyy 'at' h:MM TT");
var contentStringStart{flightPath->id} = '' +
'<h4>Sighting Number {flightPath->id}</h4>' +
'<p><strong>First Sighting</strong></p>' +
'<p>' +
' <div>Seen on ' + startTime{flightPath->id} + '.</div>' +
' <div>At an altitude of {flightPath->startingAltitude} feet bearing {flightPath->startingTrack}&deg;.</div>' +
' <div>Traveling at a speed of {flightPath->startingSpeed} knots.</div>' +
' <div>With a vertical rate of {flightPath->startingVerticleRate} feet.</div>' +
'</p>' +
'<p><a href="#" onclick="setPosition({flightPath->startingId}); $(\'.sidebar.left\').trigger(\'sidebar:toggle\');">Toggle detailed flight data</a></p>';
var infowindowStart{flightPath->id} = new google.maps.InfoWindow({
content: contentStringStart{flightPath->id}
});
var markerStart{flightPath->id} = new google.maps.Marker({
position: {lat: {flightPath->startingLatitude}, lng: {flightPath->startingLongitude}},
map: map,
icon: {
path: genericPlaneSvg,
scale: 0.4,
anchor : new google.maps.Point(32, 32),
fillColor: "green",
fillOpacity: 1,
strokeWeight: ((pathsSeen == {flightPath->id}) ? 2 : 1),
rotation: {flightPath->startingTrack}
}
});
markerStart{flightPath->id}.addListener('click', function() {
infowindowStart{flightPath->id}.open(map, markerStart{flightPath->id});
});
var finishTime{flightPath->id} = dateFormat("{flightPath->finishingTime}", "mmmm dd, yyyy 'at' h:MM TT");
var contentStringFinish{flightPath->id} = '' +
'<h4>Sighting Number {flightPath->id}</h4>' +
'<p><strong>Last Sighting</strong></p>' +
'<p>' +
' <div>Seen on ' + finishTime{flightPath->id} + '.</div>' +
' <div>At an altitude of {flightPath->finishingAltitude} feet bearing {flightPath->finishingTrack}&deg;.</div>' +
' <div>Traveling at a speed of {flightPath->finishingSpeed} knots.</div>' +
' <div>With a vertical rate of {flightPath->finishingVerticleRate} feet.</div>' +
'</p>' +
'<p><a href="#" onclick="setPosition({flightPath->finishingId}); $(\'.sidebar.left\').trigger(\'sidebar:toggle\');">Toggle detailed flight data</a></p>';
var infowindowFinish{flightPath->id} = new google.maps.InfoWindow({
content: contentStringFinish{flightPath->id}
});
var markerFinish{flightPath->id} = new google.maps.Marker({
position: {lat: {flightPath->finishingLatitude}, lng: {flightPath->finishingLongitude}},
map: map,
icon: {
path: genericPlaneSvg,
scale: 0.4,
anchor : new google.maps.Point(32, 32),
fillColor: "red",
fillOpacity: 1,
strokeWeight: ((pathsSeen == {flightPath->id}) ? 2 : 1),
rotation: {flightPath->finishingTrack}
}
});
markerFinish{flightPath->id}.addListener('click', function() {
infowindowFinish{flightPath->id}.open(map, markerFinish{flightPath->id});
});
json = {flightPath->positions};
var thisPath = new Array();
for (var i = 0; i < json.length; i++) {
thisPath.push(new google.maps.LatLng(json[i].latitude, json[i].longitude));
}
var flightPath{flightPath->id} = new google.maps.Polyline({
path: thisPath,
geodesic: true,
strokeColor: 'blue',
strokeOpacity: ((pathsSeen == {flightPath->id}) ? 1 : 0.3),
strokeWeight: ((pathsSeen == {flightPath->id}) ? 2 : 1)
});
flightPath{flightPath->id}.setMap(map);
{/foreach}
// Retain map state.
loadMapState();
google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
function tilesLoaded() {
google.maps.event.clearListeners(map, 'tilesloaded');
google.maps.event.addListener(map, 'zoom_changed', saveMapState);
google.maps.event.addListener(map, 'dragend', saveMapState);
}
// Map state functions
function saveMapState() {
var mapZoom=map.getZoom();
var mapCentre=map.getCenter();
var mapLat=mapCentre.lat();
var mapLng=mapCentre.lng();
var cookiestring=mapLat+"_"+mapLng+"_"+mapZoom;
setCookie("myMapCookie",cookiestring, 30);
}
function loadMapState() {
var gotCookieString=getCookie("myMapCookie");
var splitStr = gotCookieString.split("_");
var savedMapLat = parseFloat(splitStr[0]);
var savedMapLng = parseFloat(splitStr[1]);
var savedMapZoom = parseFloat(splitStr[2]);
if ((!isNaN(savedMapLat)) && (!isNaN(savedMapLng)) && (!isNaN(savedMapZoom))) {
map.setCenter(new google.maps.LatLng(savedMapLat,savedMapLng));
map.setZoom(savedMapZoom);
}
}
function setCookie(c_name,value,exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
return "";
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={setting:googleMapsApiKey}&callback=initMap"></script>
{/area}