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

Filter and Column buttons to expand panels and styling cleanup

This commit is contained in:
eric1tran 2020-12-09 23:34:32 +00:00
parent 47e4df2b7b
commit 829fe1b5e2
3 changed files with 147 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
public_html/index.html
View File

@ -212,124 +212,125 @@
</tr>
</table>
</div> <!-- dump1090_infoblock -->
<div class="config_button_row">
<button class="accordion">Filters</button>
<div 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 by Aircraft Type</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 by Aircraft Ident</button>
<button id="aircraft_ident_filter_reset_button">Reset</button>
</form>
</div>
<button id="column_select">Select Columns</button>
<button id="filter_button" class="config_button">Filters</button>
<button id="column_select_button" class="config_button">Select Columns</button>
</div>
<div id="column_select_window" class="hidden">
<div id="column_select_close_box"></div>
<div id="column_select_header">Columns</div>
<div class="columnOptionSelectAllContainer">
<div class="columnSelectAllCheckbox" id="select_all_column_checkbox"></div>
<div class="columnOptionText">Select/Deselect All</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="icao_col_checkbox"></div>
<div class="columnOptionText">Icao</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="flag_col_checkbox"></div>
<div class="columnOptionText">Flag</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="ident_col_checkbox"></div>
<div class="columnOptionText">Ident</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="reg_col_checkbox"></div>
<div class="columnOptionText">Registration</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="ac_col_checkbox"></div>
<div class="columnOptionText">Aircraft Type</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="squawk_col_checkbox"></div>
<div class="columnOptionText">Squawk</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="alt_col_checkbox"></div>
<div class="columnOptionText">Altitude</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="speed_col_checkbox"></div>
<div class="columnOptionText">Speed</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="vrate_col_checkbox"></div>
<div class="columnOptionText">Vertical Rate</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="distance_col_checkbox"></div>
<div class="columnOptionText">Distance</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="heading_col_checkbox"></div>
<div class="columnOptionText">Heading</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="messages_col_checkbox"></div>
<div class="columnOptionText">Messages</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="msg_age_col_checkbox"></div>
<div class="columnOptionText">Message Age</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="rssi_col_checkbox"></div>
<div class="columnOptionText">RSSI</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="lat_col_checkbox"></div>
<div class="columnOptionText">Latitude</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="lon_col_checkbox"></div>
<div class="columnOptionText">Longitude</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="datasource_col_checkbox"></div>
<div class="columnOptionText">Data Source</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="airframes_col_checkbox"></div>
<div class="columnOptionText">Airframes.org</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="fa_modes_link_checkbox"></div>
<div class="columnOptionText">FlightAware</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="fa_photo_link_checkbox"></div>
<div class="columnOptionText">Photos</div>
</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 by Aircraft Type</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 by Aircraft Ident</button>
<button id="aircraft_ident_filter_reset_button">Reset</button>
</form>
</div>
<div id="column_select_panel" class="panel">
<div class="columnOptionSelectAllContainer">
<div class="columnSelectAllCheckbox" id="select_all_column_checkbox"></div>
<div class="columnOptionText">Select/Deselect All</div>
</div>
<div class="wrapper">
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="icao_col_checkbox"></div>
<div class="columnOptionText">Icao</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="flag_col_checkbox"></div>
<div class="columnOptionText">Flag</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="ident_col_checkbox"></div>
<div class="columnOptionText">Ident</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="reg_col_checkbox"></div>
<div class="columnOptionText">Registration</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="ac_col_checkbox"></div>
<div class="columnOptionText">Aircraft Type</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="squawk_col_checkbox"></div>
<div class="columnOptionText">Squawk</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="alt_col_checkbox"></div>
<div class="columnOptionText">Altitude</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="speed_col_checkbox"></div>
<div class="columnOptionText">Speed</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="vrate_col_checkbox"></div>
<div class="columnOptionText">Vertical Rate</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="distance_col_checkbox"></div>
<div class="columnOptionText">Distance</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="heading_col_checkbox"></div>
<div class="columnOptionText">Heading</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="messages_col_checkbox"></div>
<div class="columnOptionText">Messages</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="msg_age_col_checkbox"></div>
<div class="columnOptionText">Message Age</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="rssi_col_checkbox"></div>
<div class="columnOptionText">RSSI</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="lat_col_checkbox"></div>
<div class="columnOptionText">Latitude</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="lon_col_checkbox"></div>
<div class="columnOptionText">Longitude</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="datasource_col_checkbox"></div>
<div class="columnOptionText">Data Source</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="airframes_col_checkbox"></div>
<div class="columnOptionText">Airframes.org</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="fa_modes_link_checkbox"></div>
<div class="columnOptionText">FlightAware</div>
</div>
<div class="columnOptionContainer">
<div class="columnSelectCheckbox" id="fa_photo_link_checkbox"></div>
<div class="columnOptionText">Photos</div>
</div>
</div>
</div>
<div id="planes_table_container">

35
public_html/script.js
View File

@ -320,25 +320,7 @@ function initialize() {
customAltitudeColors = false;
}
// Accordian display logic for additional config buttons
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
$("#altitude_filter_reset_button").click(onResetAltitudeFilter);
@ -354,14 +336,6 @@ function initialize() {
$('#settings_infoblock').toggle();
});
$('#column_select').on('click', function() {
$('#column_select_window').toggle();
});
$('#column_select_close_box').on('click', function() {
$('#column_select_window').hide();
});
$('#settings_close').on('click', function() {
$('#settings_infoblock').hide();
});
@ -416,6 +390,15 @@ function initialize() {
refreshDataSourceFilters();
})
$('#column_select_button').on('click', function() {
$('#column_select_panel').toggle();
});
$('#filter_button').on('click', function() {
$('#filter_panel').toggle();
});
// Event handlers for to column checkboxes
checkbox_div_map.forEach(function (checkbox, div) {
$(div).on('click', function() {

78
public_html/style.css
View File

@ -55,48 +55,6 @@ html, body {
overflow-x: scroll;
}
#column_select {
position: relative;
float: right;
background-color: #002F5D;
color: #FFFFFF;
width: 125px;
}
#column_select_window {
position: absolute;
right: 1px;
top: 80px;
width: 150px;
min-height: 180px;
background: #ffffff;
box-shadow: 4px 4px 10px #444444;
padding: 20px;
z-index: 9999;
display: none;
}
#column_select_header {
display: table;
background-color: #002F5D;
color: #ffffff;
font-size: smaller;
padding: 5px;
text-align: center;
width: 120px;
}
#column_select_close_box {
position: absolute;
right: 15px;
top: 21px;
background-image: url('images/close-settings.png');
background-size: cover;
width: 20px;
height: 20px;
cursor: pointer;
}
.columnOptionContainer {
position: relative;
display: table;
@ -887,28 +845,36 @@ select.error, textarea.error, input.error {
}
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
.config_button {
position: relative;
background-color: #002F5D;
color: #FFFFFF;
background-color: #FEBC11;
color: #002F5D;
cursor: pointer;
text-align: center;
width: 125px;
}
.active, .accordion:hover, #column_select:hover {
.config_button:hover {
background-color: #abcad8;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 2px;
background-color: #E5F6FC;
display: none;
overflow: hidden;
.config_button_row {
position: relative;
margin-top: 5px;
padding: 3px 0 3px 0;
}
.config_button_row {
margin-top: 5px;
}
.panel {
position: relative;
padding: 3px 3px 6px 3px;
display: none;
margin-bottom: 5px;
border: solid;
border-color: #002F5D;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}