Unit list v0.0.0.0.1 done.

client/public/stylesheets/unitdatatable.css

@@ -2,7 +2,7 @@
     display:flex;
     flex-direction: column;
     font-size:13px;
-    max-height: 150px;
+    height: 250px;
     width:fit-content;
 }
 

client/src/index.ts

@@ -141,13 +141,21 @@ function setupEvents() {
 
     /* Keyup events */
     document.addEventListener("keyup", ev => {
+        
         switch (ev.code) {
+        
             case "KeyL":
                 document.body.toggleAttribute("data-hide-labels");
                 break;
+
             case "KeyD":
                 toggleDemoEnabled();
+                break;
+
+            case "Quote":
+                unitDataTable.toggle();
         }
+
     });
 
     /*
@@ -158,7 +166,6 @@ function setupEvents() {
             unitName.setAttribute( "readonly", "true" );
             
             //  Do something with this:
-            console.log( unitName.value );
         });
 
         document.addEventListener( "editUnitName", ev => {

client/src/units/unitdatatable.ts

@@ -2,7 +2,6 @@ export class UnitDataTable {
 
     #element;
     #tableId = "unit-data-table";
-    #hasUpdated = false;
 
 
     constructor() {
@@ -28,13 +27,27 @@ export class UnitDataTable {
     }
 
 
+    hide() {
+        this.getElement()?.closest( ".ol-dialog" )?.classList.add( "hide" );
+    }
+
+
     refresh( units:object ) {
 
-        if ( this.#hasUpdated ) {
-            return;
-        }
+        const unitsArray = Object.values( units ).sort( ( a, b ) => {
 
-        const unitsArray = Object.values( units );
+            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[] ) {
@@ -75,8 +88,16 @@ export class UnitDataTable {
 
         }
 
-
-        this.#hasUpdated = true;
-
     }
+
+
+    show() {
+        this.getElement()?.closest( ".ol-dialog" )?.classList.remove( "hide" );
+    }
+
+
+    toggle() {
+        this.getElement()?.closest( ".ol-dialog" )?.classList.toggle( "hide" );
+    }
+
 }

client/views/unitdatatable.ejs

@@ -1,4 +1,10 @@
-<div class="ol-panel ol-dialog scrollable">
+<div class="ol-panel ol-dialog scrollable hide">
+
+    <div class="ol-dialog-close" data-on-click="closeDialog"></div>
+
+    <div class="ol-dialog-header">
+        <h4>Unit list</h4>
+    </div>
 
     <div id="unit-data-table" class="ol-dialog-content">