Unit list.

client/public/stylesheets/layout.css

@@ -112,7 +112,7 @@ dl.ol-data-grid dd {
 }
 
 .ol-panel.ol-dialog {
-	padding:25px;
+	padding:20px;
 }
 
 .ol-dialog-close {
@@ -138,6 +138,12 @@ dl.ol-data-grid dd {
 	padding-top:15px;
 }
 
+.ol-dialog.scrollable .ol-dialog-content {
+	overflow-y: auto;
+}
+
+
+
 .ol-checkbox label {
 	align-items: center;
 	cursor: pointer;

client/public/stylesheets/olympus.css

@@ -4,6 +4,7 @@
 @import url("contextmenus.css");
 @import url("mouseinfopanel.css");
 @import url("units.css");
+@import url("unitdatatable.css");
 @import url("unitcontrolpanel.css");
 @import url("unitinfopanel.css");
 

client/public/stylesheets/unitdatatable.css

@@ -0,0 +1,27 @@
+#unit-data-table {
+    display:flex;
+    flex-direction: column;
+    font-size:13px;
+    max-height: 150px;
+    width:fit-content;
+}
+
+#unit-data-table > div {
+    display:flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+
+#unit-data-table > div > div {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width:100px;
+}
+
+#unit-data-table > div:first-of-type {
+    text-align: center;
+}
+
+#unit-data-table > div > div:nth-of-type( 4 ) {
+    text-align: center;
+}

client/src/index.ts

@@ -10,6 +10,7 @@ import { ATC } from "./atc/ATC";
 import { FeatureSwitches } from "./FeatureSwitches";
 import { LogPanel } from "./panels/logpanel";
 import { getAirbases, getBulllseye as getBulllseyes, getMission, getUnits, toggleDemoEnabled } from "./server/server";
+import { UnitDataTable } from "./units/unitdatatable";
 
 var map: Map;
 
@@ -29,6 +30,7 @@ var connected: boolean = false;
 var activeCoalition: string = "blue";
 
 var sessionHash: string | null = null;
+var unitDataTable = new UnitDataTable();
 
 var featureSwitches;
 
@@ -75,6 +77,7 @@ function setup() {
     startPeriodicUpdate();
 }
 
+
 function startPeriodicUpdate() {
     requestUpdate();
     requestRefresh();
@@ -84,6 +87,7 @@ function requestUpdate() {
     /* Main update rate = 250ms is minimum time, equal to server update time. */
     getUnits((data: UnitsData) => {
         getUnitsManager()?.update(data);
+        unitDataTable.refresh( data.units );
         checkSessionHash(data.sessionHash);
     }, false);
     setTimeout(() => requestUpdate(), getConnected() ? 250 : 1000);

client/src/units/unitdatatable.ts

@@ -0,0 +1,82 @@
+export class UnitDataTable {
+
+    #element;
+    #tableId = "unit-data-table";
+    #hasUpdated = false;
+
+
+    constructor() {
+
+        const table = document.getElementById( this.#tableId );
+
+        if ( table instanceof HTMLElement ) {
+            
+            this.#element = table;
+
+        } else {
+
+            return;
+
+        }
+
+
+    }
+
+
+    getElement() {
+        return this.#element;
+    }
+
+
+    refresh( units:object ) {
+
+        if ( this.#hasUpdated ) {
+            return;
+        }
+
+        const unitsArray = Object.values( units );
+
+
+        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 );
+    
+            }
+
+        }
+
+
+        this.#hasUpdated = true;
+
+    }
+}

client/tsconfig.json

@@ -9,7 +9,7 @@
     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
     /* Language and Environment */
-    "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2017", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */

client/views/index.ejs

@@ -32,6 +32,7 @@
   <%- include('navbar.ejs') %>
   <%- include('connectionstatuspanel.ejs') %>
   <%- include('dialogs.ejs') %>
+  <%- include('unitdatatable.ejs') %>
   
   <% /* %>
   <%- include('log.ejs') %> 

client/views/unitdatatable.ejs

@@ -0,0 +1,7 @@
+<div class="ol-panel ol-dialog scrollable">
+
+    <div id="unit-data-table" class="ol-dialog-content">
+
+    </div>
+    
+</div>