diff --git a/public_html/script.js b/public_html/script.js
index 4c3f123..655ffb8 100644
--- a/public_html/script.js
+++ b/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_filter_form").submit(onFilterByAltitude);
- $("#altitude_filter_form").validate({
- errorPlacement: function(error, element) {
- return true;
- },
-
- rules: {
- minAltitude: {
- number: true,
- min: -99999,
- max: 99999
+ altitude_slider = document.getElementById('altitude_slider');
+
+ noUiSlider.create(altitude_slider, {
+ start: [0, 50000],
+ connect: true,
+ range: {
+ 'min': 0,
+ 'max': 50000
},
- maxAltitude: {
- number: true,
- min: -99999,
- max: 99999
+ step: 5,
+ format: {
+ // 'to' the formatted value. Receives a number.
+ 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) {
- e.preventDefault();
+function onFilterByAltitude() {
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 maxAltitude = parseFloat($("#altitude_filter_max").val().trim());
+ var minAltitude = document.getElementById('minAltitudeText').innerHTML.trim();
+ var maxAltitude = document.getElementById('maxAltitudeText').innerHTML.trim();
- if (minAltitude === NaN) {
- minAltitude = -Infinity;
- }
-
- if (maxAltitude === NaN) {
- maxAltitude = Infinity;
- }
+ console.log("minAltitude: " + minAltitude);
+ console.log("maxAltitude: " + maxAltitude);
PlaneFilter.minAltitude = minAltitude;
PlaneFilter.maxAltitude = maxAltitude;
diff --git a/public_html/style.css b/public_html/style.css
index 84d7fe1..4793621 100644
--- a/public_html/style.css
+++ b/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,
-#aircraft_type_filter_form,
-#aircraft_ident_filter_form {
+#altitude_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);
- }
\ No newline at end of file
+ }
+
+#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;
+}
\ No newline at end of file