Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow custom selection of columns in aircraft table #72

Merged
merged 12 commits into from
Jul 21, 2020
Merged

Allow custom selection of columns in aircraft table #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
eaa392d
Front-end/styling of window with checkbox options to customize plane …
Jul 9, 2020
67e018c
Toggle checkbox functionality with persistence
Jul 9, 2020
f27e056
Toggle correct columns for each checkbox
Jul 10, 2020
395b63b
Add several more column options and fix up logic to show/hide columns
Jul 10, 2020
df9cd2a
Functional select/deselect all checkboxes; Needs optimization
Jul 10, 2020
b59668a
Set overflow-x to scroll on aircraft table
Jul 13, 2020
f8132da
Select Columns button styling
Jul 13, 2020
523b396
Refactor toggleAllColumns()
Jul 13, 2020
3ff93b0
Separate legend from table scrolling
Jul 13, 2020
b6775af
Move aircraft table styling into css file
Jul 21, 2020
3844ec4
Spacing
Jul 21, 2020
7a80107
Merge branch 'dev' into custom_columns
eric1tran Jul 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 160 additions & 63 deletions public_html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,71 +224,168 @@
<button id="altitude_filter_reset_button">Reset</button>
</form>

<div id="planes_table">
<table id="tableinfo" style="width: 100%">
<thead class="aircraft_table_header">
<tr>
<td id="icao" onclick="sortByICAO();">ICAO</td>
<td id="flag" onclick="sortByCountry()"><!-- column for flag image --></td>
<td id="flight" onclick="sortByFlight();"> Ident </td>
<td id="registration" onclick="sortByRegistration();">Registration</td>
<td id="aircraft_type" onclick="sortByAircraftType();"> Aircraft type</td>
<td id="squawk" onclick="sortBySquawk();">Squawk</td>
<td id="altitude" onclick="sortByAltitude();">Altitude (<span class="altitudeUnit"></span>)</td>
<td id="speed" onclick="sortBySpeed();">Speed (<span class="speedUnit"></span>)</td>
<td id="vert_rate" onclick="sortByVerticalRate();">Vertical Rate (<span class="verticalRateUnit"></span>)</td>
<td id="distance" onclick="sortByDistance();">Distance (<span class="distanceUnit"></span>)</td>
<td id="track" onclick="sortByTrack();">Heading</td>
<td id="msgs" onclick="sortByMsgs();">Msgs</td>
<td id="seen" onclick="sortBySeen();">Age</td>
<td id="rssi" onclick="sortByRssi();">RSSI</td>
<td id="lat" onclick="sortByLatitude();">Latitude</td>
<td id="lon" onclick="sortByLongitude();">Longitude</td>
<td id="data_source" onclick="sortByDataSource();">Data Source</td>
<td id="airframes_mode_s_link">Airframes.org</td>
<td id="flightaware_mode_s_link">FlightAware</td>
<td id="flightaware_photo_link">Photos</td>
</tr>
</thead>
<tbody>
<tr id="plane_row_template" class="plane_table_row hidden">
<td class="icaoCodeColumn">ICAO</td>
<td><img style="width: 20px; height: 12px;" src="about:blank" alt="Flag"></td>
<td>FLIGHT</td>
<td>REGISTRATION</td>
<td>AIRCRAFT_TYPE</td>
<td style="text-align: right">SQUAWK</td>
<td style="text-align: right">ALTITUDE</td>
<td style="text-align: right">SPEED</td>
<td style="text-align: right">VERT_RATE</td>
<td style="text-align: right">DISTANCE</td>
<td style="text-align: right">TRACK</td>
<td style="text-align: right">MSGS</td>
<td style="text-align: right">SEEN</td>
<td style="text-align: right">RSSI</td>
<td style="text-align: right">LAT</td>
<td style="text-align: right">LON</td>
<td style="text-align: right">DATA_SOURCE</td>
<td style="text-align: center">AIRFRAMES_MODE_S_LINK</td>
<td style="text-align: center">FLIGHTAWARE_MODE_S_LINK</td>
<td style="text-align: center">FLIGHTAWARE_PHOTO_LINK</td>
</tr>
</tbody>
</table>
<div class="legend">
<div class="legendBox vPosition"></div>
<div class="legendTitle">ADS-B</div>
<div class="legendBox mlat"></div>
<div class="legendTitle">MLAT</div>
<div class="legendBox other"></div>
<div class="legendTitle">Other</div>
<div class="legendBox tisb"></div>
<div class="legendTitle">TIS-B</div>
</div>
</div> <!-- planes_table -->
<div>
<button id="column_select">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>

<div id="planes_table_container">
<div id="planes_table">
<table id="tableinfo" style="width: 100%">
<thead class="aircraft_table_header">
<tr>
<td id="icao" onclick="sortByICAO();">ICAO</td>
<td id="flag" onclick="sortByCountry()"><!-- column for flag image --></td>
<td id="flight" onclick="sortByFlight();"> Ident </td>
<td id="registration" onclick="sortByRegistration();">Registration</td>
<td id="aircraft_type" onclick="sortByAircraftType();"> Aircraft type</td>
<td id="squawk" onclick="sortBySquawk();">Squawk</td>
<td id="altitude" onclick="sortByAltitude();">Altitude (<span class="altitudeUnit"></span>)</td>
<td id="speed" onclick="sortBySpeed();">Speed (<span class="speedUnit"></span>)</td>
<td id="vert_rate" onclick="sortByVerticalRate();">Vertical Rate (<span class="verticalRateUnit"></span>)</td>
<td id="distance" onclick="sortByDistance();">Distance (<span class="distanceUnit"></span>)</td>
<td id="track" onclick="sortByTrack();">Heading</td>
<td id="msgs" onclick="sortByMsgs();">Msgs</td>
<td id="seen" onclick="sortBySeen();">Age</td>
<td id="rssi" onclick="sortByRssi();">RSSI</td>
<td id="lat" onclick="sortByLatitude();">Latitude</td>
<td id="lon" onclick="sortByLongitude();">Longitude</td>
<td id="data_source" onclick="sortByDataSource();">Data Source</td>
<td id="airframes_mode_s_link">Airframes.org</td>
<td id="flightaware_mode_s_link">FlightAware</td>
<td id="flightaware_photo_link">Photos</td>
</tr>
</thead>
<tbody>
<tr id="plane_row_template" class="plane_table_row hidden">
<td class="icaoCodeColumn">ICAO</td>
<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
<td>FLIGHT</td>
<td>REGISTRATION</td>
<td>AIRCRAFT_TYPE</td>
<td style="text-align: right">SQUAWK</td>
<td style="text-align: right">ALTITUDE</td>
<td style="text-align: right">SPEED</td>
<td style="text-align: right">VERT_RATE</td>
<td style="text-align: right">DISTANCE</td>
<td style="text-align: right">TRACK</td>
<td style="text-align: right">MSGS</td>
<td style="text-align: right">SEEN</td>
<td style="text-align: right">RSSI</td>
<td style="text-align: right">LAT</td>
<td style="text-align: right">LON</td>
<td style="text-align: right">DATA_SOURCE</td>
<td style="text-align: center">AIRFRAMES_MODE_S_LINK</td>
<td style="text-align: center">FLIGHTAWARE_MODE_S_LINK</td>
<td style="text-align: center">FLIGHTAWARE_PHOTO_LINK</td>
</tr>
</tbody>
</table>
</div> <!-- planes_table -->
<div>
<div class="legend">
<div class="legendBox vPosition"></div>
<div class="legendTitle">ADS-B</div>
<div class="legendBox mlat"></div>
<div class="legendTitle">MLAT</div>
<div class="legendBox other"></div>
<div class="legendTitle">Other</div>
<div class="legendBox tisb"></div>
<div class="legendTitle">TIS-B</div>
</div>
</div>
</div> <!-- planes_table_container -->
</div>



</div> <!-- sidebar_canvas -->

Expand Down
Loading