Adds a bit of sorting to the table by clicking column headers

Also made the design work for lower resolution monitors, especially when the list has 20+ planes.

public_html/gmap.html

@@ -16,7 +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 id="tabinfo"></div>
       </div>
       <div id="info_footer"><a href="#" onClick="resetMap();">Reset Map</a></div>
     </div>

public_html/script.js

@@ -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['CenterLon']) { CenterLon = Number(localStorage['CenterLon']); }
@@ -75,8 +80,8 @@ function selectPlane(selectedPlane) {
 function refreshGeneralInfo() {
     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() {
@@ -119,40 +124,104 @@ function refreshSelectedInfo() {
 }
 
 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;">';
-    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() {

public_html/style.css

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