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

Put filters into an accordion style dropdown

This commit is contained in:
eric1tran 2020-12-09 18:22:15 +00:00
parent 1916fc6648
commit 47e4df2b7b
3 changed files with 72 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
public_html/index.html
View File

@ -213,32 +213,33 @@
</table>
</div> <!-- dump1090_infoblock -->
<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 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>
<div>
<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>
</div>

19
public_html/script.js
View File

@ -320,6 +320,25 @@ 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);

27
public_html/style.css
View File

@ -60,6 +60,7 @@ html, body {
float: right;
background-color: #002F5D;
color: #FFFFFF;
width: 125px;
}
#column_select_window {
@ -885,3 +886,29 @@ select.error, textarea.error, input.error {
background-image: url("images/map-icon@3x.png");
}
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
position: relative;
background-color: #002F5D;
color: #FFFFFF;
cursor: pointer;
text-align: center;
width: 125px;
}
.active, .accordion:hover, #column_select: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 {
margin-top: 5px;
}