Merge branch 'main' into 94-missiles-icon-not-rotating

client/src/units/unit.ts

@@ -383,6 +383,7 @@ export class Unit extends Marker {
                 var unitAltitudeDiv = element.querySelector(".unit-altitude");
                 if (unitAltitudeDiv != null) {
                     unitAltitudeDiv.innerHTML = String(Math.floor(this.getFlightData().altitude / 0.3048 / 1000));
+
                 }
                 
                 const headingDeg = rad2deg( this.getFlightData().heading );
@@ -392,7 +393,10 @@ export class Unit extends Marker {
                     el.setAttribute( "style", currentStyle + `transform:rotate(${headingDeg}deg);` );
                 });
 
-                
+                var unitSpeedDiv = element.querySelector(".unit-speed");
+                if (unitSpeedDiv != null)
+                    unitSpeedDiv.innerHTML = String(Math.floor(this.getFlightData().speed * 1.94384 ) );
+
             }
             var pos = getMap().latLngToLayerPoint(this.getLatLng()).round();
             this.setZIndexOffset(1000 + Math.floor(this.getFlightData().altitude) - pos.y);
@@ -499,8 +503,8 @@ export class Aircraft extends AirUnit {
                 </div>
                 <div class="unit-summary">
                     <div class="unit-callsign">${data.baseData.unitName}</div>
-                    <div class="unit-heading"></div>
                     <div class="unit-altitude"></div>
+                    <div class="unit-speed"></div>
                 </div>
             </div>`);
     }

client/src/units/unitdatatable.ts

@@ -0,0 +1,103 @@
+export class UnitDataTable {
+
+    #element;
+    #tableId = "unit-data-table";
+
+
+    constructor() {
+
+        const table = document.getElementById( this.#tableId );
+
+        if ( table instanceof HTMLElement ) {
+            
+            this.#element = table;
+
+        } else {
+
+            return;
+
+        }
+
+
+    }
+
+
+    getElement() {
+        return this.#element;
+    }
+
+
+    hide() {
+        this.getElement()?.closest( ".ol-dialog" )?.classList.add( "hide" );
+    }
+
+
+    show() {
+        this.getElement()?.closest( ".ol-dialog" )?.classList.remove( "hide" );
+    }
+
+
+    toggle() {
+        this.getElement()?.closest( ".ol-dialog" )?.classList.toggle( "hide" );
+    }
+
+    
+    update( units:object ) {
+
+        const unitsArray = Object.values( units ).sort( ( a, b ) => {
+
+            const aVal = a.baseData.unitName.toLowerCase();
+            const bVal = b.baseData.unitName.toLowerCase();
+
+            if ( aVal > bVal ) {
+                return 1;
+            } else if ( bVal > aVal ) {
+                return -1;
+            } else {
+                return 0;
+            }
+
+        });
+
+
+        function addRow( parentEl:HTMLElement, columns:string[] ) {
+
+            const rowDiv = document.createElement( "div" );
+            
+            for ( const item of columns ) {
+
+                const div = document.createElement( "div" );
+                div.innerText = item;
+                rowDiv.appendChild( div );
+
+            }
+
+            parentEl.appendChild( rowDiv );
+
+        }
+
+
+        const el = this.getElement();
+
+        if ( el ) {
+
+            el.innerHTML = "";
+
+            addRow( el, [ "Callsign", "Name", "Category", "AI/Human" ] )
+
+            for ( const unit of unitsArray ) {
+    
+                const dataset = [ unit.baseData.unitName, unit.baseData.name, unit.baseData.category, ( unit.baseData.AI ) ? "AI" : "Human" ];
+    
+                if ( this.getElement() ) {
+    
+                }
+                addRow( el, dataset );
+    
+            }
+
+        }
+
+    }
+
+}