diff --git a/public_html/images/box-checked.png b/public_html/images/box-checked.png new file mode 100644 index 0000000..1a5cc83 Binary files /dev/null and b/public_html/images/box-checked.png differ diff --git a/public_html/images/box-empty.png b/public_html/images/box-empty.png new file mode 100644 index 0000000..46f6236 Binary files /dev/null and b/public_html/images/box-empty.png differ diff --git a/public_html/index.html b/public_html/index.html index f282931..e5e9d6d 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -199,6 +199,47 @@ +
+
+
Overlay Toggles
+
+
+
NEXRAD Weather
+
+
+
+
Site Position & Range Rings
+
+
+
+
Selected Aircraft Trail
+
+
+
+
Aircraft Positions
+
+
+
+
View Toggles
+
+
+
Blocked MLAT Flights
+
+
+
+
Ground Vehicles
+
+
+
+
All Aircraft Trails
+
+
+
+
Group by Data Type
+
+
+
+
diff --git a/public_html/script.js b/public_html/script.js index d85e4a0..d5f6a84 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -47,6 +47,8 @@ var MessageRate = 0; var NBSP='\u00a0'; +var layers; + function processReceiverUpdate(data) { // Loop through all the planes in the data packet var now = data.now; @@ -237,6 +239,27 @@ function initialize() { }); $("#altitude_filter_reset_button").click(onResetAltitudeFilter); + $('#settingsCog').on('click', function() { + $('#settings_infoblock').toggle(); + }); + + $('#grouptype_checkbox').on('click', function() { + if ($('#grouptype_checkbox').hasClass('settingsCheckboxChecked')) { + sortByICAO(); + } else { + sortByDataSource(); + } + + }); + + $('#selectall_checkbox').on('click', function() { + if ($('#selectall_checkbox').hasClass('settingsCheckboxChecked')) { + deselectAllPlanes(); + } else { + selectAllPlanes(); + } + }) + // Force map to redraw if sidebar container is resized - use a timer to debounce var mapResizeTimeout; $("#sidebar_container").on("resize", function() { @@ -416,7 +439,7 @@ function initialize_map() { // Initialize OL3 - var layers = createBaseLayers(); + layers = createBaseLayers(); var iconsLayer = new ol.layer.Vector({ name: 'ac_positions', @@ -578,6 +601,14 @@ function initialize_map() { }) + // handle the layer settings pane checkboxes + OLMap.once('postrender', function(e) { + toggleLayer('#nexrad_checkbox', 'nexrad'); + toggleLayer('#sitepos_checkbox', 'site_pos'); + toggleLayer('#actrail_checkbox', 'ac_trail'); + toggleLayer('#acpositions_checkbox', 'ac_positions'); + }); + // Add home marker if requested if (SitePosition) { var markerStyle = new ol.style.Style({ @@ -1054,6 +1085,11 @@ function resortTable() { } function sortBy(id,sc,se) { + if (id !== 'data_source') { + $('#grouptype_checkbox').removeClass('settingsCheckboxChecked'); + } else { + $('#grouptype_checkbox').addClass('settingsCheckboxChecked'); + } if (id === sortId) { sortAscending = !sortAscending; PlanesOrdered.reverse(); // this correctly flips the order of rows that compare equal @@ -1150,6 +1186,8 @@ function selectAllPlanes() { } } + $('#selectall_checkbox').addClass('settingsCheckboxChecked'); + refreshSelected(); refreshHighlighted(); } @@ -1181,6 +1219,7 @@ function deselectAllPlanes() { Planes[key].updateMarker(); $(Planes[key].tr).removeClass("selected"); } + $('#selectall_checkbox').removeClass('settingsCheckboxChecked'); SelectedPlane = null; SelectedAllPlanes = false; refreshSelected(); @@ -1475,3 +1514,31 @@ function getAirframesModeSLink(code) { return ""; } + + +// takes in an elemnt jQuery path and the OL3 layer name and toggles the visibility based on clicking it +function toggleLayer(element, layer) { + // set initial checked status + ol.control.LayerSwitcher.forEachRecursive(layers, function(lyr) { + if (lyr.get('name') === layer && lyr.getVisible()) { + $(element).addClass('settingsCheckboxChecked'); + } + }); + $(element).on('click', function() { + var visible = false; + if ($(element).hasClass('settingsCheckboxChecked')) { + visible = true; + } + ol.control.LayerSwitcher.forEachRecursive(layers, function(lyr) { + if (lyr.get('name') === layer) { + if (visible) { + lyr.setVisible(false); + $(element).removeClass('settingsCheckboxChecked'); + } else { + lyr.setVisible(true); + $(element).addClass('settingsCheckboxChecked'); + } + } + }); + }); +} diff --git a/public_html/style.css b/public_html/style.css index cf9e658..809233a 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -51,8 +51,6 @@ html, body { border: none; } - - #toggle_sidebar_button.show_sidebar { background-image: url("images/table-icon.png"); background-image: @@ -599,16 +597,12 @@ select.error, textarea.error, input.error { } .legendBox { - /*margin-top: 5px;*/ width: 15px; height: 15px; - /*line-height: 15px*/ border: 1px solid #efefef; - /*display: inline-block;*/ border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; - /*margin-left: auto;*/ } #adsbLegendBox { @@ -633,4 +627,44 @@ select.error, textarea.error, input.error { display: inline-block; padding-right: 20px; padding-left: 5px; +} + +#settings_infoblock { + position: absolute; + right: 40px; + top: 60px; + width: 390px; + min-height: 80px; + background: #ffffff; + box-shadow: 4px 4px 10px #444444; + padding: 20px; + z-index: 9999; + display: none; +} + +.settingsColumn { + display: table-cell; +} + +.settingsOptionContainer { + display: table; +} + +.settingsCheckbox { + width: 20px; + height: 11px; + background-image: url('images/box-empty.png'); + background-repeat: no-repeat; + background-position: center; + display: table-cell; + cursor: pointer; +} + +.settingsCheckboxChecked { + background-image: url('images/box-checked.png') !important; +} + +.settingsText { + line-height: 20px; + display: table-cell; } \ No newline at end of file