diff --git a/public_html/index.html b/public_html/index.html index 7c9bc52..a42061d 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -224,71 +224,168 @@ -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ICAO Ident Registration Aircraft typeSquawkAltitude ()Speed ()Vertical Rate ()Distance ()HeadingMsgsAgeRSSILatitudeLongitudeData Source
-
-
-
ADS-B
-
-
MLAT
-
-
Other
-
-
TIS-B
+
+ +
+ + +
+
+
Icao
+
+
+
+
Flag
+
+
+
+
Ident
+
+
+
+
Registration
+
+
+
+
Aircraft Type
+
+
+
+
Squawk
+
+
+
+
Altitude
+
+
+
+
Speed
+
+
+
+
Vertical Rate
+
+
+
+
Distance
+
+
+
+
Heading
+
+
+
+
Messages
+
+
+
+
Message Age
+
+
+
+
RSSI
+
+
+
+
Latitude
+
+
+
+
Longitude
+
+
+
+
Data Source
+
+
+
+
Airframes.org
+
+
+ +
FlightAware
+
+
+ +
Photos
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ICAO Ident Registration Aircraft typeSquawkAltitude ()Speed ()Vertical Rate ()Distance ()HeadingMsgsAgeRSSILatitudeLongitudeData Source
+
+
+
+
+
ADS-B
+
+
MLAT
+
+
Other
+
+
TIS-B
+
+
+
- + diff --git a/public_html/script.js b/public_html/script.js index 6d30b30..23d75fb 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -53,6 +53,30 @@ var layers; // piaware vs flightfeeder var isFlightFeeder = false; +var checkbox_div_map = new Map ([ + ['#icao_col_checkbox', '#icao'], + ['#flag_col_checkbox', '#flag'], + ['#ident_col_checkbox', '#flight'], + ['#reg_col_checkbox', '#registration'], + ['#ac_col_checkbox', '#aircraft_type'], + ['#squawk_col_checkbox', '#squawk'], + ['#alt_col_checkbox', '#altitude'], + ['#speed_col_checkbox', '#speed'], + ['#vrate_col_checkbox', '#vert_rate'], + ['#distance_col_checkbox', '#distance'], + ['#heading_col_checkbox', '#track'], + ['#messages_col_checkbox', '#msgs'], + ['#msg_age_col_checkbox', '#seen'], + ['#rssi_col_checkbox', '#rssi'], + ['#lat_col_checkbox', '#lat'], + ['#lon_col_checkbox', '#lon'], + ['#datasource_col_checkbox', '#data_source'], + ['#airframes_col_checkbox', '#airframes_mode_s_link'], + ['#fa_modes_link_checkbox', '#flightaware_mode_s_link'], + ['#fa_photo_link_checkbox', '#flightaware_photo_link'], + +]); + function processReceiverUpdate(data) { // Loop through all the planes in the data packet var now = data.now; @@ -302,6 +326,14 @@ 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(); }); @@ -332,6 +364,17 @@ function initialize() { toggleAllPlanes(true); }) + $('#select_all_column_checkbox').on('click', function() { + toggleAllColumns(true); + }) + + // Event handlers for to column checkboxes + checkbox_div_map.forEach(function (checkbox, div) { + $(div).on('click', function() { + toggleColumn(checkbox, div, true); + }); + }); + // Force map to redraw if sidebar container is resized - use a timer to debounce var mapResizeTimeout; $("#sidebar_container").on("resize", function() { @@ -344,6 +387,7 @@ function initialize() { toggleAltitudeChart(false); toggleAllPlanes(false); toggleGroupByDataType(false); + toggleAllColumns(false); // Get receiver metadata, reconfigure using it, then continue // with initialization @@ -1626,16 +1670,42 @@ function setColumnVisibility() { var mapIsVisible = $("#map_container").is(":visible"); var infoTable = $("#tableinfo"); - showColumn(infoTable, "#registration", !mapIsVisible); - showColumn(infoTable, "#aircraft_type", !mapIsVisible); - showColumn(infoTable, "#vert_rate", !mapIsVisible); - showColumn(infoTable, "#rssi", !mapIsVisible); - showColumn(infoTable, "#lat", !mapIsVisible); - showColumn(infoTable, "#lon", !mapIsVisible); - showColumn(infoTable, "#data_source", !mapIsVisible); - showColumn(infoTable, "#airframes_mode_s_link", !mapIsVisible); - showColumn(infoTable, "#flightaware_mode_s_link", !mapIsVisible); - showColumn(infoTable, "#flightaware_photo_link", !mapIsVisible); + var defaultCheckBoxes = [ + '#icao_col_checkbox', + '#flag_col_checkbox', + '#ident_col_checkbox', + '#squawk_col_checkbox', + '#alt_col_checkbox', + '#speed_col_checkbox', + '#distance_col_checkbox', + '#heading_col_checkbox', + '#messages_col_checkbox', + '#msg_age_col_checkbox' + ] + + // Show default columns if checkboxes have not been set + for (var i=0; i < defaultCheckBoxes.length; i++) { + var checkBoxdiv = defaultCheckBoxes[i]; + var columnDiv = checkbox_div_map.get(checkBoxdiv) + + if (typeof localStorage[checkBoxdiv] === 'undefined') { + $(checkBoxdiv).addClass('settingsCheckboxChecked'); + localStorage.setItem(checkBoxdiv, 'selected'); + showColumn(infoTable, columnDiv, true); + } + } + + // Now check local storage checkbox status + checkbox_div_map.forEach(function (div, checkbox) { + var status = localStorage.getItem(checkbox); + if (status === 'selected') { + $(checkbox).addClass('settingsCheckboxChecked'); + showColumn(infoTable, div, true); + } else { + $(checkbox).removeClass('settingsCheckboxChecked'); + showColumn(infoTable, div, false); + } + }); } function setSelectedInfoBlockVisibility() { @@ -1991,3 +2061,64 @@ function onSetRangeRings() { createSiteCircleFeatures(); } + +function toggleColumn(div, checkbox, toggled) { + if (typeof localStorage[checkbox] === 'undefined') { + localStorage.setItem(checkbox, 'deselected'); + } + + var status = localStorage.getItem(checkbox); + var infoTable = $("#tableinfo"); + + if (toggled === true) { + status = (status === 'deselected') ? 'selected' : 'deselected'; + } + + // Toggle checkbox and column visibility + if (status === 'selected') { + $(checkbox).addClass('settingsCheckboxChecked'); + showColumn(infoTable, div, true); + } else { + $(checkbox).removeClass('settingsCheckboxChecked'); + showColumn(infoTable, div, false); + $('#select_all_column_checkbox').removeClass('settingsCheckboxChecked'); + localStorage.setItem('selectAllColumnsCheckbox', 'deselected'); + } + + localStorage.setItem(checkbox, status); +} + +function toggleAllColumns(switchToggle) { + if (typeof localStorage['selectAllColumnsCheckbox'] === 'undefined') { + ocalStorage.setItem('selectAllColumnsCheckbox','deselected'); + } + + var infoTable = $("#tableinfo"); + + var selectAllColumnsCheckbox = localStorage.getItem('selectAllColumnsCheckbox'); + + if (switchToggle === true) { + selectAllColumnsCheckbox = (selectAllColumnsCheckbox === 'deselected') ? 'selected' : 'deselected'; + + checkbox_div_map.forEach(function (div, checkbox) { + if (selectAllColumnsCheckbox === 'deselected') { + $('#select_all_column_checkbox').removeClass('settingsCheckboxChecked'); + $(checkbox).removeClass('settingsCheckboxChecked'); + showColumn(infoTable, div, false); + } else { + $('#select_all_column_checkbox').addClass('settingsCheckboxChecked'); + $(checkbox).addClass('settingsCheckboxChecked'); + showColumn(infoTable, div, true); + } + localStorage.setItem(checkbox, selectAllColumnsCheckbox); + }); + }; + + if (selectAllColumnsCheckbox === 'deselected') { + $('#select_all_column_checkbox').removeClass('settingsCheckboxChecked'); + } else { + $('#select_all_column_checkbox').addClass('settingsCheckboxChecked'); + } + + localStorage.setItem('selectAllColumnsCheckbox', selectAllColumnsCheckbox); +} \ No newline at end of file diff --git a/public_html/style.css b/public_html/style.css index feaad14..9b2c66f 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -45,6 +45,79 @@ html, body { height: 100%; } +#planes_table_container { + width: 100%; + display: flex; + flex-direction: column; +} + +#planes_table { + overflow-x: scroll; +} + +#column_select { + position: relative; + float: right; + background-color: #002F5D; + color: #FFFFFF; +} + +#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; + padding-top: 5px; + left: 20px; +} + +.columnOptionSelectAllContainer { + position: relative; + display: table; + padding-top: 5px; +} + +.columnOptionText { + position: relative; + line-height: 10px; + display: table-cell; + width: 100%; + left: 5px; + +} + #toggle_sidebar_control { display: block; position: absolute; @@ -636,7 +709,7 @@ select.error, textarea.error, input.error { padding-bottom: 10px; } -.settingsCheckbox { +.settingsCheckbox, .columnSelectCheckbox, .columnSelectAllCheckbox { width: 20px; height: 11px; background-image: url('images/box-empty.png');