diff --git a/frontend/server/public/stylesheets/panels/unitcontrol.css b/frontend/server/public/stylesheets/panels/unitcontrol.css
index a14900be..1040ac3b 100644
--- a/frontend/server/public/stylesheets/panels/unitcontrol.css
+++ b/frontend/server/public/stylesheets/panels/unitcontrol.css
@@ -21,6 +21,17 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
margin: -5px;
}
+#unit-control-panel h3 .num-selected-units {
+ margin-left:6px;
+}
+
+#unit-control-panel h3 .num-selected-units::before {
+ content:"(";
+}
+#unit-control-panel h3 .num-selected-units::after {
+ content:")";
+}
+
#unit-control-panel .ol-option-button button {
width: 30px;
height: 30px;
diff --git a/frontend/server/views/panels/unitcontrol.ejs b/frontend/server/views/panels/unitcontrol.ejs
index 52b96555..16e2a420 100644
--- a/frontend/server/views/panels/unitcontrol.ejs
+++ b/frontend/server/views/panels/unitcontrol.ejs
@@ -1,8 +1,8 @@
-
+
-
+
-
Selected Units
+
Selected Units
@@ -80,27 +80,35 @@
-
Enable tanker 
+
Enable tanker
+
-
Airborne Early Warning 
+
Airborne Early Warning
+
-
Operate as 
+
Operate as 
-
Unit active 
+
Unit active
+
-
Follow roads 
+
Follow roads 
@@ -108,28 +116,53 @@
-
+
Delete unit
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
+
-
+
\ No newline at end of file
diff --git a/frontend/website/src/panels/unitcontrolpanel.ts b/frontend/website/src/panels/unitcontrolpanel.ts
index 424b36d5..91af3e15 100644
--- a/frontend/website/src/panels/unitcontrolpanel.ts
+++ b/frontend/website/src/panels/unitcontrolpanel.ts
@@ -176,6 +176,7 @@ export class UnitControlPanel extends Panel {
if (!context.getUseUnitControlPanel())
return;
+ this.#updateNumberOfSelectedUnits();
super.show();
this.#speedTypeSwitch.resetExpectedValue();
this.#altitudeTypeSwitch.resetExpectedValue();
@@ -420,6 +421,13 @@ export class UnitControlPanel extends Panel {
}
}
+ #updateNumberOfSelectedUnits() {
+ const num = getApp().getUnitsManager().getSelectedUnits().length;
+ this.getElement().querySelectorAll(".num-selected-units").forEach(el => {
+ if (el instanceof HTMLElement) el.innerText = num + "";
+ });
+ }
+
#applyAdvancedSettings() {
/* HTML Elements */
const prohibitJettisonCheckbox = this.#advancedSettingsDialog.querySelector("#prohibit-jettison-checkbox")?.querySelector("input") as HTMLInputElement;