Add checkboxes next to data source legend and css styling

public_html/index.html

@@ -386,14 +386,14 @@
 									</div> <!-- planes_table -->
 									<div>
 										<div class="legend">
-											<div class="legendBox vPosition"></div>
+											<div class="sourceCheckbox" id="adsb_datasource_checkbox"></div>
-											<div class="legendTitle">ADS-B</div>
+											<div class="legendTitle vPosition">ADS-B</div>
-											<div class="legendBox mlat"></div>
+											<div class="sourceCheckbox" id="mlat_datasource_checkbox"></div>
-											<div class="legendTitle">MLAT</div>
+											<div class="legendTitle mlat">MLAT</div>
-											<div class="legendBox other"></div>
+											<div class="sourceCheckbox" id="other_datasource_checkbox"></div>
-											<div class="legendTitle">Other</div>
+											<div class="legendTitle other">Other</div>
-											<div class="legendBox tisb"></div>
+											<div class="sourceCheckbox" id="tisb_datasource_checkbox"></div>
-											<div class="legendTitle">TIS-B</div>
+											<div class="legendTitle tisb">TIS-B</div>
 										</div>
 									</div>
 								</div> <!-- planes_table_container -->

public_html/script.js

@@ -377,6 +377,22 @@ function initialize() {
                 toggleAllColumns(true);
         })
 
+        $('#adsb_datasource_checkbox').on('click', function() {
+                toggleADSBAircraft(true);
+        })
+
+        $('#mlat_datasource_checkbox').on('click', function() {
+                toggleMLATAircraft(true);
+        })
+
+        $('#other_datasource_checkbox').on('click', function() {
+                toggleOtherAircraft(true);
+        })
+
+        $('#tisb_datasource_checkbox').on('click', function() {
+                toggleTISBAircraft(true);
+        })
+
         // Event handlers for to column checkboxes
         checkbox_div_map.forEach(function (checkbox, div) {
                 $(div).on('click', function() {
@@ -397,6 +413,10 @@ function initialize() {
         toggleAllPlanes(false);
         toggleGroupByDataType(false);
         toggleAllColumns(false);
+        toggleADSBAircraft(false);
+        toggleMLATAircraft(false);
+        toggleOtherAircraft(false);
+        toggleTISBAircraft(false);
 
         // Get receiver metadata, reconfigure using it, then continue
         // with initialization
@@ -2403,3 +2423,71 @@ function toggleAllColumns(switchToggle) {
 
         localStorage.setItem('selectAllColumnsCheckbox', selectAllColumnsCheckbox);
 }
+
+function toggleADSBAircraft(switchFilter) {
+	if (typeof localStorage['sourceADSBFilter'] === 'undefined') {
+		localStorage.setItem('sourceADSBFilter','not_filtered');
+	}
+
+	var sourceADSBFilter = localStorage.getItem('sourceADSBFilter');
+	if (switchFilter === true) {
+		sourceADSBFilter = (sourceADSBFilter === 'not_filtered') ? 'filtered' : 'not_filtered';
+	}
+	if (sourceADSBFilter === 'not_filtered') {
+		$('#adsb_datasource_checkbox').removeClass('sourceCheckboxChecked');
+	} else {
+		$('#adsb_datasource_checkbox').addClass('sourceCheckboxChecked');
+	}
+	localStorage.setItem('sourceADSBFilter', sourceADSBFilter);
+}
+
+function toggleMLATAircraft(switchFilter) {
+	if (typeof localStorage['sourceMLATFilter'] === 'undefined') {
+		localStorage.setItem('sourceMLATFilter','not_filtered');
+	}
+
+	var sourceMLATFilter = localStorage.getItem('sourceMLATFilter');
+	if (switchFilter === true) {
+		sourceMLATFilter = (sourceMLATFilter === 'not_filtered') ? 'filtered' : 'not_filtered';
+	}
+	if (sourceMLATFilter === 'not_filtered') {
+		$('#mlat_datasource_checkbox').removeClass('sourceCheckboxChecked');
+	} else {
+		$('#mlat_datasource_checkbox').addClass('sourceCheckboxChecked');
+	}
+	localStorage.setItem('sourceMLATFilter', sourceMLATFilter);
+}
+
+function toggleOtherAircraft(switchFilter) {
+	if (typeof localStorage['sourceOtherFilter'] === 'undefined') {
+		localStorage.setItem('sourceOtherFilter','not_filtered');
+	}
+
+	var sourceOtherFilter = localStorage.getItem('sourceOtherFilter');
+	if (switchFilter === true) {
+		sourceOtherFilter = (sourceOtherFilter === 'not_filtered') ? 'filtered' : 'not_filtered';
+	}
+	if (sourceOtherFilter === 'not_filtered') {
+		$('#other_datasource_checkbox').removeClass('sourceCheckboxChecked');
+	} else {
+		$('#other_datasource_checkbox').addClass('sourceCheckboxChecked');
+	}
+	localStorage.setItem('sourceOtherFilter', sourceOtherFilter);
+}
+
+function toggleTISBAircraft(switchFilter) {
+	if (typeof localStorage['sourceTISBFilter'] === 'undefined') {
+		localStorage.setItem('sourceTISBFilter','not_filtered');
+	}
+
+	var sourceTISBFilter = localStorage.getItem('sourceTISBFilter');
+	if (switchFilter === true) {
+		sourceTISBFilter = (sourceTISBFilter === 'not_filtered') ? 'filtered' : 'not_filtered';
+	}
+	if (sourceTISBFilter === 'not_filtered') {
+		$('#tisb_datasource_checkbox').removeClass('sourceCheckboxChecked');
+	} else {
+		$('#tisb_datasource_checkbox').addClass('sourceCheckboxChecked');
+	}
+	localStorage.setItem('sourceTISBFilter', sourceTISBFilter);
+}

public_html/style.css

@@ -271,7 +271,9 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
 }
 
 #units_container,
-#altitude_filter_form {
+#altitude_filter_form,
+#aircraft_type_filter_form,
+#aircraft_ident_filter_form {
     font-size: small;
     margin: 10px 0 10px 0;
 }
@@ -687,8 +689,10 @@ select.error, textarea.error, input.error {
 .legendTitle {
     line-height: 19px;
     display: inline-block;
-    padding-right: 20px;
+    padding-right: 5px;
     padding-left: 5px;
+    border-radius: 5px;
+    margin-right: 20px;
 }
 
 #settings_infoblock {
@@ -727,6 +731,22 @@ select.error, textarea.error, input.error {
     background-image: url('images/box-checked.png') !important;
 }
 
+.sourceCheckbox {
+    width: 13px;
+    height: 13px;
+    background-image: url('images/box-empty.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    cursor: pointer;
+    margin-top: 3px;
+    margin-right: 3px;
+}
+
+.sourceCheckboxChecked {
+    background-image: url('images/box-checked.png') !important;
+}
+
 .settingsCloseBox {
     position: absolute;
     right: 8px;