BDAVENPORT : Adds a Table

Implement improvements to the public_html stuff as supplied by
bdavenport.
No changes to the C code.
This commit is contained in:
Malcolm Robb 2013-05-12 00:57:30 +01:00
parent c83d404c4a
commit 8feabda35b
3 changed files with 56 additions and 3 deletions

View file

@ -16,6 +16,7 @@
<h1>Dump1090 - <span id="utcTime">00:00:00</span> UTC</h1>
<p id="geninfo"></p>
<p id="selinfo">Click on a plane for info.</p>
<p id="tabinfo"></p>
</div>
<div id="info_footer"><a href="#" onClick="resetMap();">Reset Map</a></div>
</div>

View file

@ -65,8 +65,33 @@ function refreshSelectedInfo() {
i.innerHTML = html;
}
function refreshTableInfo() {
var i = document.getElementById('tabinfo');
var html = '<table id="tableinfo" width="100%">';
html += '<thead style="background-color: #CCCCCC;"><td>Flight</td><td align="right">Altitude</td><td align="center">Speed</td><td align="center">Track</td><td>Lat</td><td>Long</td><td>Seen</td><td>Msgs</td></thead>';
for (var p in Planes) {
if (p == Selected) {
html += '<tr style="background-color: #F0F0F0;">';
} else {
html += '<tr>';
}
html += '<td>' + Planes[p].flight + '</td>';
html += '<td align="right">' + Planes[p].altitude + '</td>';
html += '<td align="center">' + Planes[p].speed + '</td>';
html += '<td align="center">' + Planes[p].track + '</td>';
html += '<td>' + Planes[p].lat + '</td>';
html += '<td>' + Planes[p].lon + '</td>';
html += '<td align="center">' + Planes[p].seen + '</td>';
html += '<td align="center">' + Planes[p].messages + '</td>';
html += '</tr>';
}
html += '</table>';
i.innerHTML = html;
}
function fetchData() {
$.getJSON('/data.json', function(data) {
$.getJSON('data.json', function(data) {
var stillhere = {}
PlanesOnMap = 0;
@ -130,6 +155,9 @@ function fetchData() {
delete Planes[p];
}
}
refreshTableInfo() ;
});
}
@ -176,13 +204,32 @@ function resetMap() {
}
function initialize() {
var mapTypeIds = [];
for(var type in google.maps.MapTypeId) {
mapTypeIds.push(google.maps.MapTypeId[type]);
}
mapTypeIds.push("OSM");
var mapOptions = {
center: new google.maps.LatLng(CenterLat, CenterLon),
zoom: ZoomLvl,
mapTypeId: google.maps.MapTypeId.ROADMAP
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: mapTypeIds,
}
};
Map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//Define OSM map type pointing at the OpenStreetMap tile server
Map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
}));
// show footer at info-area
$(function(){
$(window).resize(function(e){

View file

@ -32,3 +32,8 @@ text-align: center;
padding:0px;
margin:0px;
}
#tableinfo {
font-size: x-small;
font-family: monospace;
}