noUiSlider for altitude filtering plus other styling

public_html/index.html

@@ -14,6 +14,9 @@
 		<link rel="stylesheet" href="ol/ol-layerswitcher.css" type="text/css"/>
 		<script src="ol/ol-layerswitcher.js" type="text/javascript"></script>
 
+		<script src="noUiSlider/distribute/nouislider.min.js"></script>
+		<link rel="stylesheet" href="noUiSlider/distribute/nouislider.min.css"/>
+
 		<script type="text/javascript" src="config.js?v=4.0"></script>
 		<script type="text/javascript" src="markers.js?v=4.0"></script>
 		<script type="text/javascript" src="dbloader.js?v=4.0"></script>
@@ -220,31 +223,38 @@
 								</div>
 
 								<div id="filter_panel" class="panel">
-									<form id="altitude_filter_form">
+									<div class="group">
-										<label><span class="infoBlockTitleText">Filter by Altitude:</span></label>
+										<label><span class="infoBlockTitleText">Filter by Altitude</span></label>
-										<input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5">
+										<div class="align_right">
-										<label for="minAltitude" class="altitudeUnit"></label>
+											<span id="minAltitudeText" class="infoBlockTitleText"></span>
-										<span> to </span>
+											<label for="minAltitude" class="altitudeUnit"></label>
-										<input id="altitude_filter_max" name="maxAltitude" type="text" class="altitudeFilterInput" maxlength="5">
+											<span> to </span>
-										<label for="maxAltitude" class="altitudeUnit"></label>
+											<span id="maxAltitudeText" class="infoBlockTitleText"></span>
-										<button type="submit">Filter</button>
+											<label for="maxAltitude" class="altitudeUnit"></label>
-										<button id="altitude_filter_reset_button">Reset</button>
+										</div>
-									</form>
+										<div id="altitude_slider"></div>
-									<form id="aircraft_type_filter_form">
+									</div>
-										<label><span class="infoBlockTitleText">Filter by Aircraft Type:</span></label>
+									<div class="group">
-										<input id="aircraft_type_filter" name="aircraftTypeFilter" type="text" class="aircraftFilterInput" maxlength="5">
+										<form id="aircraft_type_filter_form">
-										<button type="submit">Filter</button>
+											<label><span class="infoBlockTitleText">Filter by Aircraft Type</span></label>
-										<button id="aircraft_type_filter_reset_button">Reset</button>
+											<div class="align_right">
-									</form>
+												<input id="aircraft_type_filter" name="aircraftTypeFilter" type="text" class="aircraftFilterInput" maxlength="5">
-
+												<button type="submit">Filter</button>
-									<form id="aircraft_ident_filter_form">
+												<button id="aircraft_type_filter_reset_button">Reset</button>
-										<label><span class="infoBlockTitleText">Filter by Aircraft Ident:</span></label>
+											</div>
-										<input id="aircraft_ident_filter" name="aircraftIdentFilter" type="text" class="aircraftFilterInput" maxlength="10">
+										</form>
-										<button type="submit">Filter</button>
+									</div>
-										<button id="aircraft_ident_filter_reset_button">Reset</button>
+									<div class="group">
-									</form>
+										<form id="aircraft_ident_filter_form">
+											<label><span class="infoBlockTitleText">Filter by Aircraft Ident</span></label>
+											<div class="align_right">
+												<input id="aircraft_ident_filter" name="aircraftIdentFilter" type="text" class="aircraftFilterInput" maxlength="10">
+												<button type="submit">Filter</button>
+												<button id="aircraft_ident_filter_reset_button">Reset</button>
+											</div>
+										</form>
+									</div>
 								</div>
-
 								<div id="column_select_panel" class="panel">
 										<div class="columnOptionSelectAllContainer">
 											<div class="columnSelectAllCheckbox" id="select_all_column_checkbox"></div>

public_html/script.js

@@ -52,6 +52,8 @@ var NBSP='\u00a0';
 var layers;
 var layerGroup;
 
+var altitude_slider = null;
+
 // piaware vs flightfeeder
 var isFlightFeeder = false;
 
@@ -180,7 +182,7 @@ function fetchData() {
                         var plane = PlanesOrdered[i];
                         plane.updateTick(now, LastReceiverTimestamp);
                 }
-                
+
 		selectNewPlanes();
 		refreshTableInfo();
 		refreshSelected();
@@ -297,25 +299,42 @@ function initialize() {
         // Initialize other controls
         initializeUnitsSelector();
 
-        // Set up altitude filter button event handlers and validation options
+        altitude_slider = document.getElementById('altitude_slider');
-        $("#altitude_filter_form").submit(onFilterByAltitude);
+
-        $("#altitude_filter_form").validate({
+        noUiSlider.create(altitude_slider, {
-            errorPlacement: function(error, element) {
+                start: [0, 50000],
-                return true;
+                connect: true,
-            },
+                range: {
-            
+                    'min': 0,
-            rules: {
+                    'max': 50000
-                minAltitude: {
-                    number: true,
-                    min: -99999,
-                    max: 99999
                 },
-                maxAltitude: {
+                step: 5,
-                    number: true,
+                format: {
-                    min: -99999,
+                        // 'to' the formatted value. Receives a number.
-                    max: 99999
+                        to: function (value) {
+                            return value;
+                        },
+                        // 'from' the formatted value.
+                        // Receives a string, should return a number.
+                        from: function (value) {
+                            return value;
+                        }
+                    }
+            });
+
+        var minAltitudeInput = document.getElementById('minAltitudeText'),
+            maxAltitudeInput = document.getElementById('maxAltitudeText');
+
+        altitude_slider.noUiSlider.on('update', function (values, handle) {
+                if (handle) {
+                        maxAltitudeInput.innerHTML = values[handle];
+                } else {
+                        minAltitudeInput.innerHTML = values[handle];
                 }
-            }
+        });
+
+        altitude_slider.noUiSlider.on('set', function (values, handle) {
+                onFilterByAltitude();
         });
 
         // check if the altitude color values are default to enable the altitude filter
@@ -323,14 +342,9 @@ function initialize() {
             customAltitudeColors = false;
         }
 
-
-
-        $("#altitude_filter_reset_button").click(onResetAltitudeFilter);
-
         $("#aircraft_type_filter_form").submit(onFilterByAircraftType);
         $("#aircraft_type_filter_reset_button").click(onResetAircraftTypeFilter);
 
-
         $("#aircraft_ident_filter_form").submit(onFilterByAircraftIdent);
         $("#aircraft_ident_filter_reset_button").click(onResetAircraftIdentFilter);
 
@@ -2008,8 +2022,7 @@ function setAltitudeLegend(units) {
     }
 }
 
-function onFilterByAltitude(e) {
+function onFilterByAltitude() {
-    e.preventDefault();
     updatePlaneFilter();
     refreshTableInfo();
 
@@ -2114,25 +2127,12 @@ function toggleAltitudeChart(switchToggle) {
 	localStorage.setItem('altitudeChart', altitudeChartDisplay);
 }
 
-function onResetAltitudeFilter(e) {
-    $("#altitude_filter_min").val("");
-    $("#altitude_filter_max").val("");
-
-    updatePlaneFilter();
-    refreshTableInfo();
-}
-
 function updatePlaneFilter() {
-    var minAltitude = parseFloat($("#altitude_filter_min").val().trim());
+    var minAltitude = document.getElementById('minAltitudeText').innerHTML.trim();
-    var maxAltitude = parseFloat($("#altitude_filter_max").val().trim());
+    var maxAltitude = document.getElementById('maxAltitudeText').innerHTML.trim();
 
-    if (minAltitude === NaN) {
+    console.log("minAltitude: " + minAltitude);
-        minAltitude = -Infinity;
+    console.log("maxAltitude: " + maxAltitude);
-    }
-
-    if (maxAltitude === NaN) {
-        maxAltitude = Infinity;
-    }
 
     PlaneFilter.minAltitude = minAltitude;
     PlaneFilter.maxAltitude = maxAltitude;

public_html/style.css

@@ -230,9 +230,7 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
 }
 
 #units_container,
-#altitude_filter_form,
+#altitude_filter_form {
-#aircraft_type_filter_form,
-#aircraft_ident_filter_form {
     font-size: small;
     margin: 10px 0 10px 0;
 }
@@ -246,6 +244,9 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
     font-size: smaller;
     padding: 5px;
     text-align: center;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
 }
 
 .verticalRateTriangle {
@@ -852,6 +853,9 @@ select.error, textarea.error, input.error {
     cursor: pointer;
     text-align: center;
     width: auto;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
 }
 
 .config_button:hover, .config_button_active {
@@ -866,15 +870,75 @@ select.error, textarea.error, input.error {
 }
 
 .panel {
+    background-color: white;
     position: relative;
     padding: 3px 3px 10px 3px;
     display: none;
     margin-bottom: 5px;
     border: solid;
     border-color: #002F5D;
+    height: auto;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
 }
 
 .wrapper {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-  }
+  }
+
+#altitude_slider {
+    position: relative;
+    display: block;
+    margin-left: 10px;
+    margin-right: 10px;
+    width: auto;
+    margin-top: 10px;
+    margin-bottom: 5px;
+    height: 10px;
+}
+
+.align_right {
+    float: right;
+}
+
+.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
+    background: #FEBC11;
+    height: 20px !important;
+    width: 10px !important;
+    right: -5px !important; /*  must be (width / 2) * -1 */
+
+}
+
+.noUi-handle:before, .noUi-handle:after {
+    display: none !important;
+}
+
+.noUi-connect {
+    background: #00A0E2 !important;
+}
+
+#aircraft_type_filter_form,
+#aircraft_ident_filter_form {
+    position: relative;
+    padding: 5px 5px 5px 5px;
+}
+
+.group {
+    padding: 5px 5px 5px 5px;
+    margin-top: 5px;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    background-clip: padding-box;
+    border: 1px solid #e5e9f9;
+    background: #fff;
+    color: #060d46;
+    width: auto;
+}
+
+.filter_input_group {
+    margin-top: 10px;
+    margin-bottom: 5px;
+}