Add ability to filter planes by altitude

public_html/index.html

@@ -6,6 +6,7 @@
 		<link rel="stylesheet" href="jquery/jquery-ui-1.11.4-smoothness.css" />
 		<script src="jquery/jquery-3.0.0.min.js"></script>
 		<script src="jquery/jquery-ui-1.11.4.min.js"></script>
+		<script src="jquery/plugins/jquery.validate.min.js"></script>
 
                 <link rel="stylesheet" href="ol3/ol-3.17.1.css" type="text/css" />
                 <script src="ol3/ol-3.17.1.js" type="text/javascript"></script>
@@ -169,6 +170,17 @@
 						</select>
 					</div>
 
+					<form id="altitude_filter_form">
+						<label>Filter by altitude:</label>
+						<input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5">
+						<label for="minAltitude" class="altitudeUnit"></label>
+						<span> to </span>
+						<input id="altitude_filter_max" name="maxAltitude" type="text" class="altitudeFilterInput" maxlength="5">
+						<label for="maxAltitude" class="altitudeUnit"></label>
+						<button type="submit">Filter</button>
+						<button id="altitude_filter_reset_button">Reset</button>
+					</form>
+
 					<div id="planes_table">
 						<table id="tableinfo" style="width: 100%">
 							<thead style="background-color: #BBBBBB; cursor: pointer;">
@@ -179,10 +191,10 @@
 									<td id="registration" onclick="sortByRegistration();">Registration</td>
 									<td id="aircraft_type" onclick="sortByAircraftType();"> Aircraft type</td>
 									<td id="squawk" onclick="sortBySquawk();" style="text-align: right">Squawk</td>
-									<td id="altitude" onclick="sortByAltitude();" style="text-align: right">Altitude (<span id="header_altitude_unit"></span>)</td>
+									<td id="altitude" onclick="sortByAltitude();" style="text-align: right">Altitude (<span class="altitudeUnit"></span>)</td>
-									<td id="speed" onclick="sortBySpeed();" style="text-align: right">Speed (<span id="header_speed_unit"></span>)</td>
+									<td id="speed" onclick="sortBySpeed();" style="text-align: right">Speed (<span class="speedUnit"></span>)</td>
-									<td id="vert_rate" onclick="sortByVerticalRate();" style="text-align: right">Vertical Rate (<span id="header_vert_rate_unit"></span>)</td>
+									<td id="vert_rate" onclick="sortByVerticalRate();" style="text-align: right">Vertical Rate (<span class="verticalRateUnit"></span>)</td>
-									<td id="distance" onclick="sortByDistance();" style="text-align: right">Distance (<span id="header_distance_unit"></span>)</td>
+									<td id="distance" onclick="sortByDistance();" style="text-align: right">Distance (<span class="distanceUnit"></span>)</td>
 									<td id="track" onclick="sortByTrack();" style="text-align: right">Track</td>
 									<td id="msgs" onclick="sortByMsgs();" style="text-align: right">Msgs</td>
 									<td id="seen" onclick="sortBySeen();" style="text-align: right">Age</td>

public_html/planeObject.js

@@ -41,6 +41,7 @@ function PlaneObject(icao) {
         this.markerIcon = null;
         this.markerStyleKey = null;
         this.markerSvgKey = null;
+        this.filter = {};
 
         // request metadata
         this.registration = null;
@@ -60,6 +61,18 @@ function PlaneObject(icao) {
         }.bind(this));
 }
 
+PlaneObject.prototype.isFiltered = function() {
+    if (this.filter.minAltitude !== undefined && this.filter.maxAltitude !== undefined) {
+        if (this.altitude === null || this.altitude === undefined) {
+            return true;
+        }
+        var planeAltitude = this.altitude === "ground" ? 0 : convert_altitude(this.altitude, this.filter.altitudeUnits);
+        return planeAltitude < this.filter.minAltitude || planeAltitude > this.filter.maxAltitude;
+    }
+
+    return false;
+}
+
 // Appends data to the running track so we can get a visual tail on the plane
 // Only useful for a long running browser session.
 PlaneObject.prototype.updateTrack = function(estimate_time) {
@@ -413,7 +426,7 @@ PlaneObject.prototype.clearMarker = function() {
 
 // Update our marker on the map
 PlaneObject.prototype.updateMarker = function(moved) {
-        if (!this.visible || this.position == null) {
+        if (!this.visible || this.position == null || this.isFiltered()) {
                 this.clearMarker();
                 return;
         }
@@ -466,9 +479,10 @@ PlaneObject.prototype.updateLines = function() {
         var lastfixed = lastseg.fixed.getCoordinateAt(1.0);
         var geom = new ol.geom.LineString([lastfixed, ol.proj.fromLonLat(this.position)]);
         var feature = new ol.Feature(geom);
+        lastseg.feature = feature;
         feature.setStyle(this.altitude === 'ground' ? groundStyle : airStyle);
 
-        if (PlaneTrailFeatures.length == 0) {
+        if (PlaneTrailFeatures.getLength() == 0) {
                 PlaneTrailFeatures.push(feature);
         } else {
                 PlaneTrailFeatures.setAt(0, feature);

public_html/script.js

@@ -9,6 +9,7 @@ var PlaneIconFeatures = new ol.Collection();
 var PlaneTrailFeatures = new ol.Collection();
 var Planes        = {};
 var PlanesOrdered = [];
+var PlaneFilter   = {};
 var SelectedPlane = null;
 var SelectedAllPlanes = false;
 var FollowSelected = false;
@@ -73,6 +74,7 @@ function processReceiverUpdate(data) {
 			plane = Planes[hex];
 		} else {
 			plane = new PlaneObject(hex);
+                        plane.filter = PlaneFilter;
                         plane.tr = PlaneRowTemplate.cloneNode(true);
 
                         if (hex[0] === '~') {
@@ -226,6 +228,28 @@ function initialize() {
         // Initialize other controls
         initializeUnitsSelector();
 
+        // Set up altitude filter button event handlers and validation options
+        $("#altitude_filter_form").submit(onFilterByAltitude);
+        $("#altitude_filter_form").validate({
+            errorPlacement: function(error, element) {
+                return true;
+            },
+            
+            rules: {
+                minAltitude: {
+                    number: true,
+                    min: -99999,
+                    max: 99999
+                },
+                maxAltitude: {
+                    number: true,
+                    min: -99999,
+                    max: 99999
+                }
+            }
+        });
+        $("#altitude_filter_reset_button").click(onResetAltitudeFilter);
+
         // Force map to redraw if sidebar container is resized - use a timer to debounce
         var mapResizeTimeout;
         $("#sidebar_container").on("resize", function() {
@@ -793,10 +817,15 @@ function refreshTableInfo() {
         TrackedAircraftPositions = 0
         TrackedHistorySize = 0
 
+        $(".altitudeUnit").text(get_unit_label("altitude", DisplayUnits));
+        $(".speedUnit").text(get_unit_label("speed", DisplayUnits));
+        $(".distanceUnit").text(get_unit_label("distance", DisplayUnits));
+        $(".verticalRateUnit").text(get_unit_label("verticalRate", DisplayUnits));
+
         for (var i = 0; i < PlanesOrdered.length; ++i) {
 		var tableplane = PlanesOrdered[i];
                 TrackedHistorySize += tableplane.history_size;
-		if (!tableplane.visible) {
+		if (!tableplane.visible || tableplane.isFiltered()) {
                         tableplane.tr.className = "plane_table_row hidden";
                 } else {
                         TrackedAircraft++;
@@ -837,11 +866,6 @@ function refreshTableInfo() {
                         tableplane.tr.cells[18].innerHTML = getFlightAwareModeSLink(tableplane.icao);
                         tableplane.tr.cells[19].innerHTML = getFlightAwarePhotoLink(tableplane.registration);
                         tableplane.tr.className = classes;
-
-                        $("#header_altitude_unit").text(get_unit_label("altitude", DisplayUnits));
-                        $("#header_speed_unit").text(get_unit_label("speed", DisplayUnits));
-                        $("#header_distance_unit").text(get_unit_label("distance", DisplayUnits));
-                        $("#header_vert_rate_unit").text(get_unit_label("verticalRate", DisplayUnits));
 		}
 	}
 
@@ -1004,7 +1028,7 @@ function selectAllPlanes() {
 		SelectedPlane = null;
 
 		for(var key in Planes) {
-			if (Planes[key].visible !== false) {
+			if (Planes[key].visible && !Planes[key].isFiltered()) {
 				Planes[key].selected = true;
 				Planes[key].updateLines();
 				Planes[key].updateMarker();
@@ -1020,7 +1044,7 @@ function selectAllPlanes() {
 function selectNewPlanes() {
 	if (SelectedAllPlanes) {
 		for (var key in Planes) {
-			if (Planes[key].visible === false) {
+			if (!Planes[key].visible || Planes[key].isFiltered()) {
 				Planes[key].selected = false;
 				Planes[key].clearLines();
 				Planes[key].updateMarker();
@@ -1152,6 +1176,9 @@ function onDisplayUnitsChanged(e) {
     localStorage['displayUnits'] = displayUnits;
     DisplayUnits = displayUnits;
 
+    // Update filters
+    updatePlaneFilter();
+
     // Refresh data
     refreshTableInfo();
     refreshSelected();
@@ -1169,6 +1196,46 @@ function onDisplayUnitsChanged(e) {
     });
 }
 
+function onFilterByAltitude(e) {
+    e.preventDefault();
+    updatePlaneFilter();
+    refreshTableInfo();
+
+    var selectedPlane = Planes[SelectedPlane];
+    if (selectedPlane !== undefined && selectedPlane !== null && selectedPlane.isFiltered()) {
+        SelectedPlane = null;
+        selectedPlane.selected = false;
+        selectedPlane.clearLines();
+        selectedPlane.updateMarker();         
+        refreshSelected();
+    }
+}
+
+function onResetAltitudeFilter(e) {
+    $("#altitude_filter_min").val("");
+    $("#altitude_filter_max").val("");
+
+    updatePlaneFilter();
+    refreshTableInfo();
+}
+
+function updatePlaneFilter() {
+    var minAltitude = parseFloat($("#altitude_filter_min").val().trim());
+    var maxAltitude = parseFloat($("#altitude_filter_max").val().trim());
+
+    if (minAltitude === NaN) {
+        minAltitude = -Infinity;
+    }
+
+    if (maxAltitude === NaN) {
+        maxAltitude = Infinity;
+    }
+
+    PlaneFilter.minAltitude = minAltitude;
+    PlaneFilter.maxAltitude = maxAltitude;
+    PlaneFilter.altitudeUnits = DisplayUnits;
+}
+
 function getFlightAwareIdentLink(ident) {
     if (ident !== null && ident !== "") {
         return "<a target=\"_blank\" href=\"https://flightaware.com/live/flight/" + ident.trim() + "\">" + ident + "</a>";

public_html/style.css

@@ -108,7 +108,9 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
 
 #tableinfo, #sudo_buttons { font-size: x-small; font-family: monospace; }
 
-#units_selector {
+#units_container,
+#altitude_filter_form {
+    font-size: small;
     margin: 10px 0 10px 0;
 }
 
@@ -133,3 +135,11 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
 
 .pointer { cursor: pointer; }
 
+.altitudeFilterInput {
+    width: 50px;
+}
+
+select.error, textarea.error, input.error {
+    color: #FF0000;
+}
+