[hamradio-commits] [dump1090] 177/373: 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.
Matthew Ernisse
mernisse-guest at moszumanska.debian.org
Thu Oct 23 14:58:17 UTC 2014
This is an automated email from the git hooks/post-receive script.
mernisse-guest pushed a commit to branch backport
in repository dump1090.
commit 4dc9271ee09935365037c698aa0a268d615882f7
Author: Brian Davenport <the.lost.minded at gmail.com>
Date: Sat May 18 21:54:59 2013 +0000
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 | 2 +-
public_html/script.js | 155 ++++++++++++++++++++++++++++++++++++--------------
public_html/style.css | 12 ++--
3 files changed, 119 insertions(+), 50 deletions(-)
diff --git a/public_html/gmap.html b/public_html/gmap.html
index b26217b..78bfd77 100644
--- a/public_html/gmap.html
+++ b/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>
diff --git a/public_html/script.js b/public_html/script.js
index e78d9b2..a6bcd66 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -1,11 +1,16 @@
-Map = null;
-CenterLat = 45.0;
-CenterLon = 9.0;
-ZoomLvl = 5;
-Planes = {};
-PlanesOnMap = 0;
-PlanesOnGrid = 0;
-Selected = null;
+var Map = null;
+var CenterLat = 45.0;
+var CenterLon = 9.0;
+var ZoomLvl = 5;
+var Planes = {};
+var PlanesOnMap = 0;
+var PlanesOnGrid = 0;
+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 += PlanesOnGrid + ' planes on grid.';
+ i.innerHTML = PlanesOnMap + ' planes on the map. ';
+ i.innerHTML += PlanesOnGrid + ' planes on the grid.';
}
function refreshSelectedInfo() {
@@ -119,40 +124,104 @@ function refreshSelectedInfo() {
}
function refreshTableInfo() {
- var html = '<table id="tableinfo" width="100%">';
- 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 align="right">Speed</td><td align="right">Track</td>';
- html += '<td align="right">Msgs</td><td align="right">Seen</td></thead>';
- for (var p in Planes) {
- var specialStyle = "";
- if (p == Selected) {
- html += '<tr id="tableinforow" style="background-color: #E0E0E0;">';
- } else {
- html += '<tr id="tableinforow">';
- }
- if (Planes[p].validposition) {
- specialStyle = 'bold';
- }
- html += '<td class="' + specialStyle + '">' + Planes[p].hex + '</td>';
- html += '<td class="' + specialStyle + '">' + Planes[p].flight + '</td>';
- html += '<td class="' + specialStyle + '" align="right">' + Planes[p].squawk + '</td>';
- html += '<td class="' + specialStyle + '" align="right">' + Planes[p].altitude + '</td>';
- html += '<td class="' + specialStyle + '" align="right">' + Planes[p].speed + '</td>';
- html += '<td class="' + specialStyle + '" align="right">' + Planes[p].track + '</td>';
- html += '<td class="' + specialStyle + '" align="right">' + Planes[p].messages + '</td>';
- html += '<td class="' + specialStyle + '" align="right">' + Planes[p].seen + '</td>';
- html += '</tr>';
- }
- html += '</table>';
-
- document.getElementById('tabinfo').innerHTML = html;
+ var html = '<table id="tableinfo" width="100%">';
+ html += '<thead style="background-color: #CCCCCC;">';
+ html += '<td onclick="setASC_DESC(\'0\');sortTable(\'tableinfo\',\'0\');">hex</td>';
+ html += '<td onclick="setASC_DESC(\'1\');sortTable(\'tableinfo\',\'1\');">Flight</td>';
+ html += '<td onclick="setASC_DESC(\'2\');sortTable(\'tableinfo\',\'2\');" align="right">Squawk</td>';
+ html += '<td onclick="setASC_DESC(\'3\');sortTable(\'tableinfo\',\'3\');" align="right">Altitude</td>';
+ html += '<td onclick="setASC_DESC(\'4\');sortTable(\'tableinfo\',\'4\');" align="right">Speed</td>';
+ html += '<td onclick="setASC_DESC(\'5\');sortTable(\'tableinfo\',\'5\');" align="right">Track</td>';
+ html += '<td onclick="setASC_DESC(\'6\');sortTable(\'tableinfo\',\'6\');" align="right">Msgs</td>';
+ html += '<td onclick="setASC_DESC(\'7\');sortTable(\'tableinfo\',\'7\');" align="right">Seen</td></thead>';
+ for (var p in Planes) {
+ var specialStyle = "";
+ if (p == Selected) {
+ html += '<tr id="tableinforow" style="background-color: #E0E0E0;">';
+ } else {
+ html += '<tr id="tableinforow">';
+ }
+ if (Planes[p].validposition) {
+ specialStyle = 'bold';
+ }
+ html += '<td class="' + specialStyle + '">' + Planes[p].hex + '</td>';
+ html += '<td class="' + specialStyle + '">' + Planes[p].flight + '</td>';
+ html += '<td class="' + specialStyle + '" align="right">' + Planes[p].squawk + '</td>';
+ html += '<td class="' + specialStyle + '" align="right">' + Planes[p].altitude + '</td>';
+ html += '<td class="' + specialStyle + '" align="right">' + Planes[p].speed + '</td>';
+ html += '<td class="' + specialStyle + '" align="right">' + Planes[p].track + '</td>';
+ html += '<td class="' + specialStyle + '" align="right">' + Planes[p].messages + '</td>';
+ html += '<td class="' + specialStyle + '" align="right">' + Planes[p].seen + '</td>';
+ html += '</tr>';
+ }
+ html += '</table>';
+
+ document.getElementById('tabinfo').innerHTML = html;
+
+ // Click event for table - lags sometimes for some reason?
+ $('#tableinfo').find('tr').click( function(){
+ var hex = $(this).find('td:first').text();
+ selectPlane(hex);
+ });
- // Click event for table - lags sometimes for some reason?
- $('#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() {
diff --git a/public_html/style.css b/public_html/style.css
index 7296a9e..5ed73c0 100644
--- a/public_html/style.css
+++ b/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;
}
-
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-hamradio/dump1090.git
More information about the pkg-hamradio-commits
mailing list