Mark relevant elements on map

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project does **not** adhere to [Semantic Versioning](https://semver.org
 
 ## [Unreleased]
 
+### Added
+
+-   Selected material, personnel and vehicles are now highlighted on the map.
+    -   When material or personnel is selected, the corresponding vehicle is highlighted as well.
+    -   When a vehicle is selected, the corresponding material and personnel are highlighted as well.
+
 ### Changed
 
 -   Add behaviors button now opens towards the top.

frontend/src/app/pages/exercises/exercise/shared/exercise-map/feature-managers/map-images-feature-manager.ts

@@ -80,6 +80,9 @@ export class MapImageFeatureManager extends MoveableFeatureManager<MapImage> {
                 MapImagePopupComponent,
                 feature,
                 [feature.getId() as UUID],
+                [],
+                [],
+                [],
                 {
                     mapImageId: feature.getId() as UUID,
                 }

frontend/src/app/pages/exercises/exercise/shared/exercise-map/feature-managers/material-feature-manager.ts

@@ -7,13 +7,16 @@ import type { Subject } from 'rxjs';
 import type { ExerciseService } from 'src/app/core/exercise.service';
 import type { AppState } from 'src/app/state/app.state';
 import { selectVisibleMaterials } from 'src/app/state/application/selectors/shared.selectors';
+import Stroke from 'ol/style/Stroke';
+import Fill from 'ol/style/Fill';
 import { MaterialPopupComponent } from '../shared/material-popup/material-popup.component';
 import type { OlMapInteractionsManager } from '../utility/ol-map-interactions-manager';
 import { PointGeometryHelper } from '../utility/point-geometry-helper';
 import { ImagePopupHelper } from '../utility/popup-helper';
 import { ImageStyleHelper } from '../utility/style-helper/image-style-helper';
 import { NameStyleHelper } from '../utility/style-helper/name-style-helper';
 import type { PopupService } from '../utility/popup.service';
+import { CircleStyleHelper } from '../utility/style-helper/circle-style-helper';
 import { MoveableFeatureManager } from './moveable-feature-manager';
 
 export class MaterialFeatureManager extends MoveableFeatureManager<Material> {
@@ -44,6 +47,21 @@ export class MaterialFeatureManager extends MoveableFeatureManager<Material> {
 
     private readonly popupHelper = new ImagePopupHelper(this.olMap, this.layer);
 
+    private readonly openPopupCircleStyleHelper = new CircleStyleHelper(
+        (_) => ({
+            radius: 75,
+            fill: new Fill({
+                color: '#00000000',
+            }),
+            stroke: new Stroke({
+                color: 'orange',
+                width: 10,
+            }),
+        }),
+        0.025,
+        (_) => [0, 0]
+    );
+
     constructor(
         olMap: OlMap,
         private readonly store: Store<AppState>,
@@ -61,10 +79,23 @@ export class MaterialFeatureManager extends MoveableFeatureManager<Material> {
             },
             new PointGeometryHelper()
         );
-        this.layer.setStyle((feature, resolution) => [
-            this.nameStyleHelper.getStyle(feature as Feature, resolution),
-            this.imageStyleHelper.getStyle(feature as Feature, resolution),
-        ]);
+        this.layer.setStyle((feature, resolution) => {
+            const styles = [
+                this.nameStyleHelper.getStyle(feature as Feature, resolution),
+                this.imageStyleHelper.getStyle(feature as Feature, resolution),
+            ];
+            this.addMarking(
+                feature,
+                styles,
+                this.popupService,
+                this.store,
+                this.openPopupCircleStyleHelper.getStyle(
+                    feature as Feature,
+                    resolution
+                )
+            );
+            return styles;
+        });
     }
 
     public override onFeatureClicked(
@@ -78,6 +109,12 @@ export class MaterialFeatureManager extends MoveableFeatureManager<Material> {
                 MaterialPopupComponent,
                 feature,
                 [feature.getId() as UUID],
+                [
+                    feature.getId() as UUID,
+                    (this.getElementFromFeature(feature) as Material).vehicleId,
+                ],
+                [feature.getId() as UUID],
+                ['material', 'vehicle'],
                 {
                     materialId: feature.getId() as UUID,
                 }

frontend/src/app/pages/exercises/exercise/shared/exercise-map/feature-managers/moveable-feature-manager.ts

@@ -7,6 +7,10 @@ import type VectorSource from 'ol/source/Vector';
 import type { Observable, Subject } from 'rxjs';
 // eslint-disable-next-line @typescript-eslint/no-shadow
 import type { Element, UUID } from 'digital-fuesim-manv-shared';
+import type { FeatureLike } from 'ol/Feature';
+import { selectStateSnapshot } from 'src/app/state/get-state-snapshot';
+import { selectCurrentRole } from 'src/app/state/application/selectors/shared.selectors';
+import type Style from 'ol/style/Style';
 import type { FeatureManager } from '../utility/feature-manager';
 import type {
     GeometryHelper,
@@ -113,6 +117,27 @@ export abstract class MoveableFeatureManager<
         );
     }
 
+    protected addMarking(
+        feature: FeatureLike,
+        styles: Style[],
+        popupService: any,
+        store: any,
+        markingStyle: any
+    ) {
+        if (
+            (popupService.currentPopup?.markedForTrainerUUIDs.includes(
+                feature.getId() as UUID
+            ) &&
+                selectStateSnapshot(selectCurrentRole, store) === 'trainer') ||
+            (popupService.currentPopup?.markedForParticipantUUIDs.includes(
+                feature.getId() as UUID
+            ) &&
+                selectStateSnapshot(selectCurrentRole, store) === 'participant')
+        ) {
+            styles.push(markingStyle);
+        }
+    }
+
     public onFeatureClicked(
         event: MapBrowserEvent<any>,
         feature: Feature<FeatureType>

frontend/src/app/pages/exercises/exercise/shared/exercise-map/feature-managers/patient-feature-manager.ts

@@ -5,7 +5,6 @@ import type { Feature, MapBrowserEvent } from 'ol';
 import type OlMap from 'ol/Map';
 import { Fill, Stroke } from 'ol/style';
 import type { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs';
 import type { ExerciseService } from 'src/app/core/exercise.service';
 import type { AppState } from 'src/app/state/app.state';
 import { selectConfiguration } from 'src/app/state/application/selectors/exercise.selectors';
@@ -30,11 +29,6 @@ export class PatientFeatureManager extends MoveableFeatureManager<Patient> {
             destroy$,
             mapInteractionsManager
         );
-        this.popupService.currentPopup$
-            .pipe(takeUntil(destroy$))
-            .subscribe(() => {
-                this.layer.changed();
-            });
     }
     private readonly popupHelper = new ImagePopupHelper(this.olMap, this.layer);
 
@@ -80,7 +74,7 @@ export class PatientFeatureManager extends MoveableFeatureManager<Patient> {
     );
 
     private readonly openPopupCircleStyleHelper = new CircleStyleHelper(
-        (feature) => ({
+        (_) => ({
             radius: 75,
             fill: new Fill({
                 color: '#00000000',
@@ -91,7 +85,7 @@ export class PatientFeatureManager extends MoveableFeatureManager<Patient> {
             }),
         }),
         0.025,
-        (feature) => [0, 0]
+        (_) => [0, 0]
     );
 
     constructor(
@@ -120,18 +114,16 @@ export class PatientFeatureManager extends MoveableFeatureManager<Patient> {
                 ),
             ];
 
-            if (
-                this.popupService.currentPopup?.closingUUIDs.includes(
-                    feature.getId() as UUID
+            this.addMarking(
+                feature,
+                styles,
+                this.popupService,
+                this.store,
+                this.openPopupCircleStyleHelper.getStyle(
+                    feature as Feature,
+                    resolution
                 )
-            ) {
-                styles.push(
-                    this.openPopupCircleStyleHelper.getStyle(
-                        feature as Feature,
-                        resolution
-                    )
-                );
-            }
+            );
 
             return styles;
         });
@@ -148,6 +140,9 @@ export class PatientFeatureManager extends MoveableFeatureManager<Patient> {
                 PatientPopupComponent,
                 feature,
                 [feature.getId() as UUID],
+                [feature.getId() as UUID],
+                [feature.getId() as UUID],
+                ['patient'],
                 {
                     patientId: feature.getId() as UUID,
                 }

frontend/src/app/pages/exercises/exercise/shared/exercise-map/feature-managers/personnel-feature-manager.ts

@@ -7,13 +7,16 @@ import type { Subject } from 'rxjs';
 import type { ExerciseService } from 'src/app/core/exercise.service';
 import type { AppState } from 'src/app/state/app.state';
 import { selectVisiblePersonnel } from 'src/app/state/application/selectors/shared.selectors';
+import Fill from 'ol/style/Fill';
+import Stroke from 'ol/style/Stroke';
 import { PersonnelPopupComponent } from '../shared/personnel-popup/personnel-popup.component';
 import type { OlMapInteractionsManager } from '../utility/ol-map-interactions-manager';
 import { PointGeometryHelper } from '../utility/point-geometry-helper';
 import { ImagePopupHelper } from '../utility/popup-helper';
 import { ImageStyleHelper } from '../utility/style-helper/image-style-helper';
 import { NameStyleHelper } from '../utility/style-helper/name-style-helper';
 import type { PopupService } from '../utility/popup.service';
+import { CircleStyleHelper } from '../utility/style-helper/circle-style-helper';
 import { MoveableFeatureManager } from './moveable-feature-manager';
 
 export class PersonnelFeatureManager extends MoveableFeatureManager<Personnel> {
@@ -44,6 +47,21 @@ export class PersonnelFeatureManager extends MoveableFeatureManager<Personnel> {
 
     private readonly popupHelper = new ImagePopupHelper(this.olMap, this.layer);
 
+    private readonly openPopupCircleStyleHelper = new CircleStyleHelper(
+        (_) => ({
+            radius: 75,
+            fill: new Fill({
+                color: '#00000000',
+            }),
+            stroke: new Stroke({
+                color: 'orange',
+                width: 10,
+            }),
+        }),
+        0.025,
+        (_) => [0, 0]
+    );
+
     constructor(
         olMap: OlMap,
         private readonly store: Store<AppState>,
@@ -62,10 +80,23 @@ export class PersonnelFeatureManager extends MoveableFeatureManager<Personnel> {
             new PointGeometryHelper()
         );
 
-        this.layer.setStyle((feature, resolution) => [
-            this.nameStyleHelper.getStyle(feature as Feature, resolution),
-            this.imageStyleHelper.getStyle(feature as Feature, resolution),
-        ]);
+        this.layer.setStyle((feature, resolution) => {
+            const styles = [
+                this.nameStyleHelper.getStyle(feature as Feature, resolution),
+                this.imageStyleHelper.getStyle(feature as Feature, resolution),
+            ];
+            this.addMarking(
+                feature,
+                styles,
+                this.popupService,
+                this.store,
+                this.openPopupCircleStyleHelper.getStyle(
+                    feature as Feature,
+                    resolution
+                )
+            );
+            return styles;
+        });
     }
 
     public override onFeatureClicked(
@@ -79,6 +110,13 @@ export class PersonnelFeatureManager extends MoveableFeatureManager<Personnel> {
                 PersonnelPopupComponent,
                 feature,
                 [feature.getId() as UUID],
+                [
+                    feature.getId() as UUID,
+                    (this.getElementFromFeature(feature) as Personnel)
+                        .vehicleId,
+                ],
+                [feature.getId() as UUID],
+                ['personnel', 'vehicle'],
                 {
                     personnelId: feature.getId() as UUID,
                 }

frontend/src/app/pages/exercises/exercise/shared/exercise-map/feature-managers/simulated-region-feature-manager.ts

@@ -196,6 +196,9 @@ export class SimulatedRegionFeatureManager
             elementUUID: feature.getId()?.toString(),
             component: SimulatedRegionPopupComponent,
             closingUUIDs: [feature.getId() as UUID],
+            markedForParticipantUUIDs: [],
+            markedForTrainerUUIDs: [],
+            changedLayers: [],
             context: {
                 simulatedRegionId: feature.getId() as UUID,
             },

frontend/src/app/pages/exercises/exercise/shared/exercise-map/feature-managers/transfer-point-feature-manager.ts

@@ -112,6 +112,9 @@ export class TransferPointFeatureManager extends MoveableFeatureManager<Transfer
                 ChooseTransferTargetPopupComponent,
                 droppedOnFeature,
                 [droppedOnTransferPoint.id, droppedElement.id],
+                [],
+                [],
+                [],
                 {
                     transferPointId: droppedOnTransferPoint.id,
                     droppedElementType: droppedElement.type,
@@ -163,6 +166,9 @@ export class TransferPointFeatureManager extends MoveableFeatureManager<Transfer
                 TransferPointPopupComponent,
                 feature,
                 [feature.getId() as UUID],
+                [],
+                [],
+                [],
                 {
                     transferPointId: feature.getId() as UUID,
                 }