Merge pull request #6 from bdavenport/tablesort

Table sort & bit cleaner look with larger tables on smaller screens
This commit is contained in:
MalcolmRobb 2013-05-21 02:35:00 -07:00
commit bd39479e70
3 changed files with 119 additions and 50 deletions

View file

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

View file

@ -1,11 +1,16 @@
Map = null; var Map = null;
CenterLat = 45.0; var CenterLat = 45.0;
CenterLon = 9.0; var CenterLon = 9.0;
ZoomLvl = 5; var ZoomLvl = 5;
Planes = {}; var Planes = {};
PlanesOnMap = 0; var PlanesOnMap = 0;
PlanesOnGrid = 0; var PlanesOnGrid = 0;
Selected = null; var Selected = null;
var iSortCol=-1;
var bSortASC=true;
var bDefaultSortASC=true;
var iDefaultSortCol=3;
if (localStorage['CenterLat']) { CenterLat = Number(localStorage['CenterLat']); } if (localStorage['CenterLat']) { CenterLat = Number(localStorage['CenterLat']); }
if (localStorage['CenterLon']) { CenterLon = Number(localStorage['CenterLon']); } if (localStorage['CenterLon']) { CenterLon = Number(localStorage['CenterLon']); }
@ -75,8 +80,8 @@ function selectPlane(selectedPlane) {
function refreshGeneralInfo() { function refreshGeneralInfo() {
var i = document.getElementById('geninfo'); var i = document.getElementById('geninfo');
i.innerHTML = PlanesOnMap + ' planes on map.<br>'; i.innerHTML = PlanesOnMap + ' planes on the map. ';
i.innerHTML += PlanesOnGrid + ' planes on grid.'; i.innerHTML += PlanesOnGrid + ' planes on the grid.';
} }
function refreshSelectedInfo() { function refreshSelectedInfo() {
@ -119,40 +124,104 @@ function refreshSelectedInfo() {
} }
function refreshTableInfo() { function refreshTableInfo() {
var html = '<table id="tableinfo" width="100%">'; var html = '<table id="tableinfo" width="100%">';
html += '<thead style="background-color: #CCCCCC;">'; html += '<thead style="background-color: #CCCCCC; cursor: pointer;">';
html += '<td>hex</td><td>Flight</td><td align="right">Squawk</td><td align="right">Altitude</td>'; html += '<td onclick="setASC_DESC(\'0\');sortTable(\'tableinfo\',\'0\');">hex</td>';
html += '<td align="right">Speed</td><td align="right">Track</td>'; html += '<td onclick="setASC_DESC(\'1\');sortTable(\'tableinfo\',\'1\');">Flight</td>';
html += '<td align="right">Msgs</td><td align="right">Seen</td></thead>'; html += '<td onclick="setASC_DESC(\'2\');sortTable(\'tableinfo\',\'2\');" align="right">Squawk</td>';
for (var p in Planes) { html += '<td onclick="setASC_DESC(\'3\');sortTable(\'tableinfo\',\'3\');" align="right">Altitude</td>';
var specialStyle = ""; html += '<td onclick="setASC_DESC(\'4\');sortTable(\'tableinfo\',\'4\');" align="right">Speed</td>';
if (p == Selected) { html += '<td onclick="setASC_DESC(\'5\');sortTable(\'tableinfo\',\'5\');" align="right">Track</td>';
html += '<tr id="tableinforow" style="background-color: #E0E0E0;">'; html += '<td onclick="setASC_DESC(\'6\');sortTable(\'tableinfo\',\'6\');" align="right">Msgs</td>';
} else { html += '<td onclick="setASC_DESC(\'7\');sortTable(\'tableinfo\',\'7\');" align="right">Seen</td></thead>';
html += '<tr id="tableinforow">'; for (var p in Planes) {
} var specialStyle = "";
if (Planes[p].validposition) { if (p == Selected) {
specialStyle = 'bold'; html += '<tr id="tableinforow" style="background-color: #E0E0E0;">';
} } else {
html += '<td class="' + specialStyle + '">' + Planes[p].hex + '</td>'; html += '<tr id="tableinforow">';
html += '<td class="' + specialStyle + '">' + Planes[p].flight + '</td>'; }
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].squawk + '</td>'; if (Planes[p].validposition) {
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].altitude + '</td>'; specialStyle = 'bold';
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].speed + '</td>'; }
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].track + '</td>'; html += '<td class="' + specialStyle + '">' + Planes[p].hex + '</td>';
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].messages + '</td>'; html += '<td class="' + specialStyle + '">' + Planes[p].flight + '</td>';
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].seen + '</td>'; html += '<td class="' + specialStyle + '" align="right">' + Planes[p].squawk + '</td>';
html += '</tr>'; html += '<td class="' + specialStyle + '" align="right">' + Planes[p].altitude + '</td>';
} html += '<td class="' + specialStyle + '" align="right">' + Planes[p].speed + '</td>';
html += '</table>'; html += '<td class="' + specialStyle + '" align="right">' + Planes[p].track + '</td>';
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].messages + '</td>';
document.getElementById('tabinfo').innerHTML = html; html += '<td class="' + specialStyle + '" align="right">' + Planes[p].seen + '</td>';
html += '</tr>';
}
html += '</table>';
// Click event for table - lags sometimes for some reason? document.getElementById('tabinfo').innerHTML = html;
$('#tableinfo').find('tr').click( function(){
var hex = $(this).find('td:first').text(); // Click event for table - lags sometimes for some reason?
selectPlane(hex); $('#tableinfo').find('tr').click( function(){
}); var hex = $(this).find('td:first').text();
selectPlane(hex);
});
sortTable("tableinfo");
}
// Credit goes to a co-worker that needed a similar functions for something else
// we get a copy of it free ;)
function setASC_DESC(iCol) {
if(iSortCol==iCol) {
bSortASC=!bSortASC;
} else {
bSortASC=bDefaultSortASC;
}
}
function sortTable(szTableID,iCol) {
//if iCol was not provided, and iSortCol is not set, assign default value
if (typeof iCol==='undefined'){
if(iSortCol!=-1){
var iCol=iSortCol;
} else {
var iCol=iDefaultSortCol;
}
}
//retrieve passed table element
var oTbl=document.getElementById(szTableID).tBodies[0];
var aStore=[];
//If supplied col # is greater than the actual number of cols, set sel col = to last col
if (oTbl.rows[0].cells.length<=iCol)
iCol=(oTbl.rows[0].cells.length-1);
//store the col #
iSortCol=iCol;
//determine if we are delaing with numerical, or alphanumeric content
bNumeric=!isNaN(parseFloat(oTbl.rows[0].cells[iSortCol].textContent||oTbl.rows[0].cells[iSortCol].innerText))?true:false;
//loop through the rows, storing each one inro aStore
for (var i=0,iLen=oTbl.rows.length;i<iLen;i++){
var oRow=oTbl.rows[i];
vColData=bNumeric?parseFloat(oRow.cells[iSortCol].textContent||oRow.cells[iSortCol].innerText):String(oRow.cells[iSortCol].textContent||oRow.cells[iSortCol].innerText);
aStore.push([vColData,oRow]);
}
//sort aStore ASC/DESC based on value of bSortASC
if(bNumeric){//numerical sort
aStore.sort(function(x,y){return bSortASC?x[0]-y[0]:y[0]-x[0];});
}else{//alpha sort
aStore.sort();
if(!bSortASC)
aStore.reverse();
}
//rewrite the table rows to the passed table element
for(var i=0,iLen=aStore.length;i<iLen;i++){
oTbl.appendChild(aStore[i][1]);
}
aStore=null;
} }
function fetchData() { function fetchData() {

View file

@ -1,5 +1,5 @@
html { height: 100% } html { height: 100% }
body { height: 100%; margin: 0; padding: 0 } body { height: 100%; margin: 0; padding: 0; font-size: small;}
#map_canvas { #map_canvas {
height: 100%; height: 100%;
margin-right:390px; margin-right:390px;
@ -18,16 +18,13 @@ font-family:Helvetica;
#info div { #info div {
padding:0px; padding:0px;
padding-left:10px; padding-left:10px;
padding-right:10px;
margin:0px; margin:0px;
} }
#info div h1 { #info div h1 {
margin-top:10px; margin-top:10px;
font-size:16px; font-size:16px;
} }
#info div p {
font-size:14px;
color:#333;
}
#info_footer { #info_footer {
position: absolute; position: absolute;
display: none; display: none;
@ -35,6 +32,10 @@ text-align: center;
padding:0px; padding:0px;
margin:0px; margin:0px;
} }
#tabinfo{
height: 400px;
overflow-y: auto;
}
#tableinfo { #tableinfo {
font-size: x-small; font-size: x-small;
font-family: monospace; font-family: monospace;
@ -45,4 +46,3 @@ cursor: pointer;
#tableinforow .bold { #tableinforow .bold {
font-weight:bold; font-weight:bold;
} }