MS0NTR-Radio-Club
/
dump1090-fa
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

noUiSlider for altitude filtering plus other styling

This commit is contained in:
eric1tran 2020-12-14 06:34:40 +00:00
parent af4951a494
commit 22e02dbc62
3 changed files with 144 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
public_html/index.html
View File

@ -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">
<label><span class="infoBlockTitleText">Filter by Altitude:</span></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>
<form id="aircraft_type_filter_form">
<label><span class="infoBlockTitleText">Filter by Aircraft Type:</span></label>
<input id="aircraft_type_filter" name="aircraftTypeFilter" type="text" class="aircraftFilterInput" maxlength="5">
<button type="submit">Filter</button>
<button id="aircraft_type_filter_reset_button">Reset</button>
</form>
<form id="aircraft_ident_filter_form">
<label><span class="infoBlockTitleText">Filter by Aircraft Ident:</span></label>
<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>
</form>
<div class="group">
<label><span class="infoBlockTitleText">Filter by Altitude</span></label>
<div class="align_right">
<span id="minAltitudeText" class="infoBlockTitleText"></span>
<label for="minAltitude" class="altitudeUnit"></label>
<span> to </span>
<span id="maxAltitudeText" class="infoBlockTitleText"></span>
<label for="maxAltitude" class="altitudeUnit"></label>
</div>
<div id="altitude_slider"></div>
</div>
<div class="group">
<form id="aircraft_type_filter_form">
<label><span class="infoBlockTitleText">Filter by Aircraft Type</span></label>
<div class="align_right">
<input id="aircraft_type_filter" name="aircraftTypeFilter" type="text" class="aircraftFilterInput" maxlength="5">
<button type="submit">Filter</button>
<button id="aircraft_type_filter_reset_button">Reset</button>
</div>
</form>
</div>
<div class="group">
<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>

84
public_html/script.js
View File

@ -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;

72
public_html/style.css
View File

@ -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);
}
}
#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;
}