Started integration of css changes from uikit

client/src/dcs/dcs.ts

@@ -115,6 +115,22 @@ export function cloneUnit(ID: number, latlng: L.LatLng) {
     xhr.send(JSON.stringify(data));
 }
 
+export function deleteUnit(ID: number) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("PUT", RESTaddress);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+            //console.log("Unit " + getUnitsManager().getUnitByID(ID).unitName + " cloned");
+        }
+    };
+
+    var command = { "ID": ID};
+    var data = { "deleteUnit": command }
+
+    xhr.send(JSON.stringify(data));
+}
+
 export function landAt(ID: number, latlng: L.LatLng) {
     var xhr = new XMLHttpRequest();
     xhr.open("PUT", RESTaddress);

client/src/units/unit.ts

@@ -1,7 +1,7 @@
 import { Marker, LatLng, Polyline, Icon } from 'leaflet';
 import { getMap, getUnitsManager} from '..';
 import { UnitMarker, MarkerOptions, AircraftMarker, HelicopterMarker, GroundUnitMarker, NavyUnitMarker, WeaponMarker, MissileMarker, BombMarker } from './unitmarker';
-import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, landAt, setAltitude, setReactionToThreat, setROE, setSpeed } from '../dcs/dcs';
+import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, deleteUnit, landAt, setAltitude, setReactionToThreat, setROE, setSpeed } from '../dcs/dcs';
 
 interface VisibilityOptions {
     dead: string;
@@ -364,6 +364,11 @@ export class Unit {
         setReactionToThreat(this.ID, reactionToThreat);
     }
 
+    delete()
+    {
+        deleteUnit(this.ID);
+    }
+
     /*
     setformation(formation)
     {

client/src/units/unitsmanager.ts

@@ -14,6 +14,7 @@ export class UnitsManager {
         document.addEventListener('copy', () => this.copyUnits());
         document.addEventListener('paste', () => this.pasteUnits());
         document.addEventListener('unitSelection', () => this.onUnitSelection());
+        document.addEventListener('keydown', (event) => this.#onKeyDown(event));
     }
 
     #updateUnitControlPanel() {
@@ -27,6 +28,14 @@ export class UnitsManager {
         }
     }
 
+    #onKeyDown(event: KeyboardEvent)
+    {
+        if (event.key === "Delete")
+        {
+            this.selectedUnitsDelete();
+        }
+    }
+
     getUnits() {
         return this.#units;
     }
@@ -257,21 +266,6 @@ export class UnitsManager {
         setTimeout(() => this.#updateUnitControlPanel(), 300); // TODO find better method, may fail
     }
 
-
-    copyUnits()
-    {
-        this.#copiedUnits = this.getSelectedUnits();
-    }
-
-    pasteUnits()
-    {
-        for (let idx in this.#copiedUnits)
-        {
-            var unit = this.#copiedUnits[idx];
-            cloneUnit(unit.ID, getMap().getMouseCoordinates());
-        }
-    }
-
     selectedUnitsAttackUnit(ID: number) {
         var selectedUnits = this.getSelectedUnits();
         for (let idx in selectedUnits) {
@@ -340,4 +334,27 @@ export class UnitsManager {
         }
         setTimeout(() => this.#updateUnitControlPanel(), 300); // TODO find better method, may fail 
     }
+
+    copyUnits()
+    {
+        this.#copiedUnits = this.getSelectedUnits();
+    }
+
+    pasteUnits()
+    {
+        for (let idx in this.#copiedUnits)
+        {
+            var unit = this.#copiedUnits[idx];
+            cloneUnit(unit.ID, getMap().getMouseCoordinates());
+        }
+    }
+
+    selectedUnitsDelete()
+    {
+        var selectedUnits = this.getSelectedUnits();
+        for (let idx in selectedUnits)
+        {
+            selectedUnits[idx].delete();
+        }
+    }
 }