From b332b2a75be0ec3c935b032e294a10c1acd9862a Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Sun, 26 Mar 2023 09:42:48 +0100
Subject: [PATCH] Added a more dynamic way of passing data to the UI.

---
 client/src/other/utils.ts             | 21 +++++++++++++++++++++
 client/src/panels/unitcontrolpanel.ts | 15 +++++++++------
 client/views/unitcontrolpanel.ejs     |  4 ++--
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/client/src/other/utils.ts b/client/src/other/utils.ts
index 7de8d03c..4cacf4a4 100644
--- a/client/src/other/utils.ts
+++ b/client/src/other/utils.ts
@@ -26,6 +26,27 @@ export function ConvertDDToDMS(D: number, lng: boolean) {
 }
 
 
+export function dataPointMap( container:HTMLElement, data:any) {
+
+    Object.keys( data ).forEach( ( key ) => {
+
+        const val = "" + data[ key ];  //  Ensure a string
+
+        container.querySelectorAll( `[data-point="${key}"]`).forEach( el => {
+
+            //  We could probably have options here
+            if ( el instanceof HTMLInputElement ) {
+                el.value = val;
+            } else if ( el instanceof HTMLElement ) {
+                el.innerText = val;
+            }
+        });
+
+    });
+
+}
+
+
 export function deg2rad(deg: number) {
     var pi = Math.PI;
     return deg * (pi / 180);
diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts
index 453351aa..72993118 100644
--- a/client/src/panels/unitcontrolpanel.ts
+++ b/client/src/panels/unitcontrolpanel.ts
@@ -1,5 +1,6 @@
 import { getUnitsManager } from "..";
 import { Slider } from "../controls/slider";
+import { dataPointMap } from "../other/utils";
 import { aircraftDatabase } from "../units/aircraftdatabase";
 import { groundUnitsDatabase } from "../units/groundunitsdatabase";
 import { Aircraft, GroundUnit, Unit } from "../units/unit";
@@ -74,21 +75,23 @@ export class UnitControlPanel extends Panel {
 
                 if (index === 0) {
                     this.getElement().querySelectorAll(`[data-object|="unit"]`).forEach(marker => {
+
                         marker.setAttribute("data-coalition", unit.getMissionData().coalition);
-                        const shortLabel = <HTMLElement>marker.querySelector(".unit-short-label");
-                        if (shortLabel)
-                            shortLabel.innerText = database?.getByName(unit.getBaseData().name)?.shortLabel || "";
+
+                        dataPointMap( this.getElement(), {
+                            "shortLabel" : database?.getByName(unit.getBaseData().name)?.shortLabel,
+                            "unitName": unit.getBaseData().unitName
+                        });
+
                     });
                 }
 
                 var button = document.createElement("button");
-                const unitName = <HTMLInputElement>this.getElement().querySelector("#unit-name");
                 var callsign = aircraftDatabase.getByName(unit.getBaseData().unitName)?.label || "";
 
-                button.innerText = "";
+                button.innerText = unit.getBaseData().unitName;
                 button.setAttribute("data-short-label", database?.getByName(unit.getBaseData().name)?.shortLabel || "");
                 button.setAttribute("data-callsign", callsign);
-                unitName.value = callsign;
 
                 button.setAttribute("data-coalition", unit.getMissionData().coalition);
                 button.classList.add("pill", "highlight-coalition")
diff --git a/client/views/unitcontrolpanel.ejs b/client/views/unitcontrolpanel.ejs
index f2820e51..a95ef177 100644
--- a/client/views/unitcontrolpanel.ejs
+++ b/client/views/unitcontrolpanel.ejs
@@ -5,10 +5,10 @@
         <div id="unit-identification">
             <div data-object="unit-aircraft">
                 <div class="unit-marker"></div>
-                <div class="unit-short-label"></div>
+                <div class="unit-short-label" data-point="shortLabel"></div>
             </div>
             
-            <input id="unit-name" value="" readonly disabled />
+            <input id="unit-name" value="" data-point="unitName" readonly disabled />
 
             <!-- <button id="edit-unit-name" data-on-click="editUnitName"></button> -->
         </div>