Skip to content

Commit 0dae3e4

Browse files
eric1tranerictran
eric1tran
and
erictran
authored
Allow custom selection of columns in aircraft table (MalcolmRobb#72)
* Front-end/styling of window with checkbox options to customize plane table columns * Toggle checkbox functionality with persistence * Toggle correct columns for each checkbox * Add several more column options and fix up logic to show/hide columns * Functional select/deselect all checkboxes; Needs optimization * Set overflow-x to scroll on aircraft table * Select Columns button styling * Refactor toggleAllColumns() * Separate legend from table scrolling * Move aircraft table styling into css file * Spacing Co-authored-by: erictran <[email protected]>
1 parent 74ef2e9 commit 0dae3e4

File tree

3 files changed

+375
-74
lines changed

3 files changed

+375
-74
lines changed

‎public_html/index.html

Lines changed: 160 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -224,71 +224,168 @@
224224
<button id="altitude_filter_reset_button">Reset</button>
225225
</form>
226226

227-
<div id="planes_table">
228-
<table id="tableinfo" style="width: 100%">
229-
<thead class="aircraft_table_header">
230-
<tr>
231-
<td id="icao" onclick="sortByICAO();">ICAO</td>
232-
<td id="flag" onclick="sortByCountry()"><!-- column for flag image --></td>
233-
<td id="flight" onclick="sortByFlight();"> Ident </td>
234-
<td id="registration" onclick="sortByRegistration();">Registration</td>
235-
<td id="aircraft_type" onclick="sortByAircraftType();"> Aircraft type</td>
236-
<td id="squawk" onclick="sortBySquawk();">Squawk</td>
237-
<td id="altitude" onclick="sortByAltitude();">Altitude (<span class="altitudeUnit"></span>)</td>
238-
<td id="speed" onclick="sortBySpeed();">Speed (<span class="speedUnit"></span>)</td>
239-
<td id="vert_rate" onclick="sortByVerticalRate();">Vertical Rate (<span class="verticalRateUnit"></span>)</td>
240-
<td id="distance" onclick="sortByDistance();">Distance (<span class="distanceUnit"></span>)</td>
241-
<td id="track" onclick="sortByTrack();">Heading</td>
242-
<td id="msgs" onclick="sortByMsgs();">Msgs</td>
243-
<td id="seen" onclick="sortBySeen();">Age</td>
244-
<td id="rssi" onclick="sortByRssi();">RSSI</td>
245-
<td id="lat" onclick="sortByLatitude();">Latitude</td>
246-
<td id="lon" onclick="sortByLongitude();">Longitude</td>
247-
<td id="data_source" onclick="sortByDataSource();">Data Source</td>
248-
<td id="airframes_mode_s_link">Airframes.org</td>
249-
<td id="flightaware_mode_s_link">FlightAware</td>
250-
<td id="flightaware_photo_link">Photos</td>
251-
</tr>
252-
</thead>
253-
<tbody>
254-
<tr id="plane_row_template" class="plane_table_row hidden">
255-
<td class="icaoCodeColumn">ICAO</td>
256-
<td><img style="width: 20px; height: 12px;" src="about:blank" alt="Flag"></td>
257-
<td>FLIGHT</td>
258-
<td>REGISTRATION</td>
259-
<td>AIRCRAFT_TYPE</td>
260-
<td style="text-align: right">SQUAWK</td>
261-
<td style="text-align: right">ALTITUDE</td>
262-
<td style="text-align: right">SPEED</td>
263-
<td style="text-align: right">VERT_RATE</td>
264-
<td style="text-align: right">DISTANCE</td>
265-
<td style="text-align: right">TRACK</td>
266-
<td style="text-align: right">MSGS</td>
267-
<td style="text-align: right">SEEN</td>
268-
<td style="text-align: right">RSSI</td>
269-
<td style="text-align: right">LAT</td>
270-
<td style="text-align: right">LON</td>
271-
<td style="text-align: right">DATA_SOURCE</td>
272-
<td style="text-align: center">AIRFRAMES_MODE_S_LINK</td>
273-
<td style="text-align: center">FLIGHTAWARE_MODE_S_LINK</td>
274-
<td style="text-align: center">FLIGHTAWARE_PHOTO_LINK</td>
275-
</tr>
276-
</tbody>
277-
</table>
278-
<div class="legend">
279-
<div class="legendBox vPosition"></div>
280-
<div class="legendTitle">ADS-B</div>
281-
<div class="legendBox mlat"></div>
282-
<div class="legendTitle">MLAT</div>
283-
<div class="legendBox other"></div>
284-
<div class="legendTitle">Other</div>
285-
<div class="legendBox tisb"></div>
286-
<div class="legendTitle">TIS-B</div>
287-
</div>
288-
</div> <!-- planes_table -->
227+
<div>
228+
<button id="column_select">Select Columns</button>
229+
</div>
230+
231+
<div id="column_select_window" class="hidden">
232+
<div id="column_select_close_box"></div>
233+
<div id="column_select_header">Columns</div>
234+
<div class="columnOptionSelectAllContainer">
235+
<div class="columnSelectAllCheckbox" id="select_all_column_checkbox"></div>
236+
<div class="columnOptionText">Select/Deselect All</div>
237+
</div>
238+
<div class="columnOptionContainer">
239+
<div class="columnSelectCheckbox" id="icao_col_checkbox"></div>
240+
<div class="columnOptionText">Icao</div>
241+
</div>
242+
<div class="columnOptionContainer">
243+
<div class="columnSelectCheckbox" id="flag_col_checkbox"></div>
244+
<div class="columnOptionText">Flag</div>
245+
</div>
246+
<div class="columnOptionContainer">
247+
<div class="columnSelectCheckbox" id="ident_col_checkbox"></div>
248+
<div class="columnOptionText">Ident</div>
249+
</div>
250+
<div class="columnOptionContainer">
251+
<div class="columnSelectCheckbox" id="reg_col_checkbox"></div>
252+
<div class="columnOptionText">Registration</div>
253+
</div>
254+
<div class="columnOptionContainer">
255+
<div class="columnSelectCheckbox" id="ac_col_checkbox"></div>
256+
<div class="columnOptionText">Aircraft Type</div>
257+
</div>
258+
<div class="columnOptionContainer">
259+
<div class="columnSelectCheckbox" id="squawk_col_checkbox"></div>
260+
<div class="columnOptionText">Squawk</div>
261+
</div>
262+
<div class="columnOptionContainer">
263+
<div class="columnSelectCheckbox" id="alt_col_checkbox"></div>
264+
<div class="columnOptionText">Altitude</div>
265+
</div>
266+
<div class="columnOptionContainer">
267+
<div class="columnSelectCheckbox" id="speed_col_checkbox"></div>
268+
<div class="columnOptionText">Speed</div>
269+
</div>
270+
<div class="columnOptionContainer">
271+
<div class="columnSelectCheckbox" id="vrate_col_checkbox"></div>
272+
<div class="columnOptionText">Vertical Rate</div>
273+
</div>
274+
<div class="columnOptionContainer">
275+
<div class="columnSelectCheckbox" id="distance_col_checkbox"></div>
276+
<div class="columnOptionText">Distance</div>
277+
</div>
278+
<div class="columnOptionContainer">
279+
<div class="columnSelectCheckbox" id="heading_col_checkbox"></div>
280+
<div class="columnOptionText">Heading</div>
281+
</div>
282+
<div class="columnOptionContainer">
283+
<div class="columnSelectCheckbox" id="messages_col_checkbox"></div>
284+
<div class="columnOptionText">Messages</div>
285+
</div>
286+
<div class="columnOptionContainer">
287+
<div class="columnSelectCheckbox" id="msg_age_col_checkbox"></div>
288+
<div class="columnOptionText">Message Age</div>
289+
</div>
290+
<div class="columnOptionContainer">
291+
<div class="columnSelectCheckbox" id="rssi_col_checkbox"></div>
292+
<div class="columnOptionText">RSSI</div>
293+
</div>
294+
<div class="columnOptionContainer">
295+
<div class="columnSelectCheckbox" id="lat_col_checkbox"></div>
296+
<div class="columnOptionText">Latitude</div>
297+
</div>
298+
<div class="columnOptionContainer">
299+
<div class="columnSelectCheckbox" id="lon_col_checkbox"></div>
300+
<div class="columnOptionText">Longitude</div>
301+
</div>
302+
<div class="columnOptionContainer">
303+
<div class="columnSelectCheckbox" id="datasource_col_checkbox"></div>
304+
<div class="columnOptionText">Data Source</div>
305+
</div>
306+
<div class="columnOptionContainer">
307+
<div class="columnSelectCheckbox" id="airframes_col_checkbox"></div>
308+
<div class="columnOptionText">Airframes.org</div>
309+
</div>
310+
<div class="columnOptionContainer">
311+
<div class="columnSelectCheckbox" id="fa_modes_link_checkbox"></div>
312+
<div class="columnOptionText">FlightAware</div>
313+
</div>
314+
<div class="columnOptionContainer">
315+
<div class="columnSelectCheckbox" id="fa_photo_link_checkbox"></div>
316+
<div class="columnOptionText">Photos</div>
317+
</div>
318+
</div>
319+
320+
<div id="planes_table_container">
321+
<div id="planes_table">
322+
<table id="tableinfo" style="width: 100%">
323+
<thead class="aircraft_table_header">
324+
<tr>
325+
<td id="icao" onclick="sortByICAO();">ICAO</td>
326+
<td id="flag" onclick="sortByCountry()"><!-- column for flag image --></td>
327+
<td id="flight" onclick="sortByFlight();"> Ident </td>
328+
<td id="registration" onclick="sortByRegistration();">Registration</td>
329+
<td id="aircraft_type" onclick="sortByAircraftType();"> Aircraft type</td>
330+
<td id="squawk" onclick="sortBySquawk();">Squawk</td>
331+
<td id="altitude" onclick="sortByAltitude();">Altitude (<span class="altitudeUnit"></span>)</td>
332+
<td id="speed" onclick="sortBySpeed();">Speed (<span class="speedUnit"></span>)</td>
333+
<td id="vert_rate" onclick="sortByVerticalRate();">Vertical Rate (<span class="verticalRateUnit"></span>)</td>
334+
<td id="distance" onclick="sortByDistance();">Distance (<span class="distanceUnit"></span>)</td>
335+
<td id="track" onclick="sortByTrack();">Heading</td>
336+
<td id="msgs" onclick="sortByMsgs();">Msgs</td>
337+
<td id="seen" onclick="sortBySeen();">Age</td>
338+
<td id="rssi" onclick="sortByRssi();">RSSI</td>
339+
<td id="lat" onclick="sortByLatitude();">Latitude</td>
340+
<td id="lon" onclick="sortByLongitude();">Longitude</td>
341+
<td id="data_source" onclick="sortByDataSource();">Data Source</td>
342+
<td id="airframes_mode_s_link">Airframes.org</td>
343+
<td id="flightaware_mode_s_link">FlightAware</td>
344+
<td id="flightaware_photo_link">Photos</td>
345+
</tr>
346+
</thead>
347+
<tbody>
348+
<tr id="plane_row_template" class="plane_table_row hidden">
349+
<td class="icaoCodeColumn">ICAO</td>
350+
<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
351+
<td>FLIGHT</td>
352+
<td>REGISTRATION</td>
353+
<td>AIRCRAFT_TYPE</td>
354+
<td style="text-align: right">SQUAWK</td>
355+
<td style="text-align: right">ALTITUDE</td>
356+
<td style="text-align: right">SPEED</td>
357+
<td style="text-align: right">VERT_RATE</td>
358+
<td style="text-align: right">DISTANCE</td>
359+
<td style="text-align: right">TRACK</td>
360+
<td style="text-align: right">MSGS</td>
361+
<td style="text-align: right">SEEN</td>
362+
<td style="text-align: right">RSSI</td>
363+
<td style="text-align: right">LAT</td>
364+
<td style="text-align: right">LON</td>
365+
<td style="text-align: right">DATA_SOURCE</td>
366+
<td style="text-align: center">AIRFRAMES_MODE_S_LINK</td>
367+
<td style="text-align: center">FLIGHTAWARE_MODE_S_LINK</td>
368+
<td style="text-align: center">FLIGHTAWARE_PHOTO_LINK</td>
369+
</tr>
370+
</tbody>
371+
</table>
372+
</div> <!-- planes_table -->
373+
<div>
374+
<div class="legend">
375+
<div class="legendBox vPosition"></div>
376+
<div class="legendTitle">ADS-B</div>
377+
<div class="legendBox mlat"></div>
378+
<div class="legendTitle">MLAT</div>
379+
<div class="legendBox other"></div>
380+
<div class="legendTitle">Other</div>
381+
<div class="legendBox tisb"></div>
382+
<div class="legendTitle">TIS-B</div>
383+
</div>
384+
</div>
385+
</div> <!-- planes_table_container -->
289386
</div>
290387

291-
388+
292389

293390
</div> <!-- sidebar_canvas -->
294391

0 commit comments

Comments
 (0)