From 45e13b20ba372a2c690a16de6f26f1047364d38d Mon Sep 17 00:00:00 2001
From: eric1tran <eric1tran@gmail.com>
Date: Mon, 22 Feb 2021 17:02:20 +0000
Subject: [PATCH] Add aircraft labels on icons and a non-functional checkbox to
 toggle the labels

---
 public_html/index.html     |  4 ++++
 public_html/planeObject.js | 16 +++++++++++++++-
 public_html/script.js      | 31 +++++++++++++++++++++++++++++--
 3 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/public_html/index.html b/public_html/index.html
index 3becd38..95d239e 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -152,6 +152,10 @@
 						<div class="settingsCheckbox" id="grouptype_checkbox"></div>
 						<div class="settingsText">Group by Data Type</div>
 					</div>
+					<div class="settingsOptionContainer">
+						<div class="settingsCheckbox" id="aircraft_label_checkbox"></div>
+						<div class="settingsText">Show Aircraft Labels</div>
+					</div>
 				</div>
 				<div id="range_ring_column" class="settingsOptionContainer">
 					<div class="infoBlockTitleText">Range Rings</div>
diff --git a/public_html/planeObject.js b/public_html/planeObject.js
index 9e15fa1..0602bb9 100644
--- a/public_html/planeObject.js
+++ b/public_html/planeObject.js
@@ -75,6 +75,7 @@ function PlaneObject(icao) {
         this.markerStaticIcon = null;
         this.markerStyleKey = null;
         this.markerSvgKey = null;
+        this.markerLabel = null;
         this.filter = {};
 
         // start from a computed registration, let the DB override it
@@ -468,8 +469,21 @@ PlaneObject.prototype.updateIcon = function() {
                 });
 
                 this.markerIcon = icon;
+
+                var labelFill = new ol.style.Fill({color: 'white' });
+                var labelStrokeNarrow = new ol.style.Stroke({color: 'black', width: 5});
+
                 this.markerStyle = new ol.style.Style({
-                        image: this.markerIcon
+                        image: this.markerIcon,
+                        text: new ol.style.Text({
+                                text: this.flight,
+                                fill: labelFill,
+                                stroke: labelStrokeNarrow,
+                                textAlign: 'left',
+                                textBaseline: "top",
+                                offsetX: 20,
+                                font: '12px sans-serif'
+                            })
                 });
                 this.markerStaticIcon = null;
                 this.markerStaticStyle = new ol.style.Style({});
diff --git a/public_html/script.js b/public_html/script.js
index ed33388..904087f 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -344,8 +344,12 @@ function initialize() {
         });
 
         $('#grouptype_checkbox').on('click', function() {
-		toggleGroupByDataType(true);
-	});
+                toggleGroupByDataType(true);
+        });
+
+        $('#aircraft_label_checkbox').on('click', function() {
+                toggleAircraftLabels(true);
+        });
 
         $('#altitude_checkbox').on('click', function() {
         	toggleAltitudeChart(true);
@@ -416,6 +420,7 @@ function initialize() {
         toggleAltitudeChart(false);
         toggleAllPlanes(false);
         toggleGroupByDataType(false);
+        toggleAircraftLabels(false);
         toggleAllColumns(false);
         toggleADSBAircraft(false);
         toggleMLATAircraft(false);
@@ -1806,6 +1811,28 @@ function toggleGroupByDataType(switchToggle) {
 	localStorage.setItem('groupByDataType', groupByDataType);
 }
 
+function toggleAircraftLabels(switchToggle) {
+	if (typeof localStorage['showAircraftLabels'] === 'undefined') {
+		localStorage.setItem('showAircraftLabels', 'deselected');
+	}
+
+	var showAircraftLabels = localStorage.getItem('showAircraftLabels');
+	if (switchToggle === true) {
+		showAircraftLabels = (showAircraftLabels === 'deselected') ? 'selected' : 'deselected';
+	}
+
+	if (showAircraftLabels === 'deselected') {
+                // hide aircraft labels
+		$('#aircraft_label_checkbox').removeClass('settingsCheckboxChecked');
+	} else {
+                // show aicraft labels
+		//sortByDataSource();
+		$('#aircraft_label_checkbox').addClass('settingsCheckboxChecked');
+	}
+
+	localStorage.setItem('showAircraftLabels', showAircraftLabels);
+}
+
 function toggleAllPlanes(switchToggle) {
 	if (typeof localStorage['allPlanesSelection'] === 'undefined') {
 		localStorage.setItem('allPlanesSelection','deselected');