feat: add measure selectors and bar

Signed-off-by: Julius Makowski <[email protected]>

Author: Jogius

frontend/src/app/pages/exercises/exercise/exercise/exercise.component.html

@@ -209,9 +209,7 @@ <h2 class="mb-0">
                     @if (!ownClient.isInWaitingRoom) {
                         @switch (ownClient.role.specificRole) {
                             @case ('mapOperator') {
-                                <app-exercise-map
-                                    class="h-100 rounded overflow-hidden"
-                                ></app-exercise-map>
+                                <app-map-operator-map-editor />
                             }
                             @case ('trainer') {
                                 <app-trainer-map-editor></app-trainer-map-editor>

frontend/src/app/pages/exercises/exercise/exercise/exercise.component.ts

@@ -39,7 +39,6 @@ import {
 import { selectOwnClient } from '../../../../state/application/selectors/shared.selectors';
 import { selectStateSnapshot } from '../../../../state/get-state-snapshot';
 import { TimeTravelComponent } from '../shared/time-travel/time-travel.component';
-import { ExerciseMapComponent } from '../shared/exercise-map/exercise-map.component';
 import { TrainerMapEditorComponent } from '../shared/trainer-map-editor/trainer-map-editor.component';
 import { EmergencyOperationsCenterFullComponent } from '../shared/emergency-operations-center/emergency-operations-center-full/emergency-operations-center-full.component';
 import { FormatDurationPipe } from '../../../../shared/pipes/format-duration.pipe';
@@ -51,6 +50,7 @@ import {
     openParticipantsModal,
     openTrainersModal,
 } from '../shared/clients-modal/open-clients-modal';
+import { MapOperatorMapComponent } from '../shared/map-operator-map/map-operator-map.component';
 
 @Component({
     selector: 'app-exercise',
@@ -66,13 +66,13 @@ import {
         NgbDropdownButtonItem,
         NgbDropdownItem,
         TimeTravelComponent,
-        ExerciseMapComponent,
         TrainerMapEditorComponent,
         EmergencyOperationsCenterFullComponent,
         AsyncPipe,
         FormatDurationPipe,
         ParallelExerciseStatusBarComponent,
         CopyButtonComponent,
+        MapOperatorMapComponent,
     ],
 })
 export class ExerciseComponent implements OnDestroy {

frontend/src/app/pages/exercises/exercise/shared/map-operator-map/map-operator-map.component.html

@@ -0,0 +1,23 @@
+<div class="container-fluid position-relative d-flex flex-column h-100">
+    <div class="flex-fill row">
+        <app-exercise-map class="h-100 rounded overflow-hidden" />
+    </div>
+
+    <div
+        class="position-absolute start-50 translate-middle-x bottom-0 w-100 px-2 px-md-4 pb-2 d-flex flex-column align-items-center"
+    >
+        <button
+            class="map-toolbar-toggle btn btn-light btn-sm shadow rounded-circle mb-2"
+            (click)="toggleToolbar()"
+        >
+            {{ isToolbarVisible() ? '▼' : '▲' }}
+        </button>
+
+        <div
+            class="toolbar-animated-collapse w-100"
+            [class.show]="isToolbarVisible()"
+        >
+            <app-map-operator-toolbar />
+        </div>
+    </div>
+</div>

frontend/src/app/pages/exercises/exercise/shared/map-operator-map/map-operator-map.component.scss

@@ -0,0 +1,16 @@
+.toolbar-animated-collapse {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transform: translateY(0.5rem);
+    transition:
+        max-height 220ms ease,
+        opacity 180ms ease,
+        transform 220ms ease;
+}
+
+.toolbar-animated-collapse.show {
+    max-height: 24rem;
+    opacity: 1;
+    transform: translateY(0);
+}

frontend/src/app/pages/exercises/exercise/shared/map-operator-map/map-operator-map.component.ts

@@ -0,0 +1,38 @@
+import { Component, HostListener, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DragElementService } from '../core/drag-element.service';
+import { TransferLinesService } from '../core/transfer-lines.service';
+import { ExerciseMapComponent } from '../exercise-map/exercise-map.component';
+import { MapOperatorToolbarComponent } from '../map-operator-toolbar/map-operator-toolbar.component';
+
+@Component({
+    selector: 'app-map-operator-map-editor',
+    templateUrl: './map-operator-map.component.html',
+    styleUrls: ['./map-operator-map.component.scss'],
+    imports: [ExerciseMapComponent, FormsModule, MapOperatorToolbarComponent],
+})
+/**
+ * A wrapper around the map that allows map operators to take measures.
+ */
+export class MapOperatorMapComponent {
+    readonly dragElementService = inject(DragElementService);
+    readonly transferLinesService = inject(TransferLinesService);
+
+    public readonly isToolbarVisible = signal(true);
+
+    public toggleToolbar() {
+        this.isToolbarVisible.update((value) => !value);
+    }
+
+    @HostListener('document:mousedown', ['$event'])
+    public onDocumentMouseDown(event: MouseEvent) {
+        const target = event.target as HTMLElement | null;
+        if (!target) {
+            return;
+        }
+        if (target.closest('app-map-operator-toolbar, .map-toolbar-toggle')) {
+            return;
+        }
+        this.isToolbarVisible.set(false);
+    }
+}

frontend/src/app/pages/exercises/exercise/shared/map-operator-toolbar/map-operator-toolbar.component.html

@@ -0,0 +1,27 @@
+<div class="bg-body bg-opacity-50 rounded shadow p-2">
+    <div class="row g-2">
+        @for (measureTemplate of measureTemplates(); track measureTemplate.id) {
+            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
+                <button
+                    class="btn p-0 border rounded bg-white overflow-hidden d-flex flex-column"
+                    (click)="onMeasureTemplateSelect(measureTemplate)"
+                >
+                    <div class="ratio ratio-1x1 bg-body-tertiary">
+                        <div
+                            class="d-flex align-items-center justify-content-center p-2 h-100 w-100"
+                        >
+                            <img
+                                [src]="measureTemplate.image.url"
+                                [alt]="measureTemplate.name"
+                                class="img-fluid object-fit-contain"
+                            />
+                        </div>
+                    </div>
+                    <div class="border-top p-2 small text-center text-truncate">
+                        {{ measureTemplate.name }}
+                    </div>
+                </button>
+            </div>
+        }
+    </div>
+</div>

frontend/src/app/pages/exercises/exercise/shared/map-operator-toolbar/map-operator-toolbar.component.scss

@@ -0,0 +1,24 @@
+import { Component, computed, inject } from '@angular/core';
+import { Store } from '@ngrx/store';
+import type { AppState } from '../../../../../state/app.state';
+import { selectMeasureTemplates } from '../../../../../state/application/selectors/exercise.selectors';
+
+@Component({
+    selector: 'app-map-operator-toolbar',
+    templateUrl: './map-operator-toolbar.component.html',
+    styleUrls: ['./map-operator-toolbar.component.scss'],
+})
+export class MapOperatorToolbarComponent {
+    private readonly store = inject<Store<AppState>>(Store);
+
+    private readonly measureTemplatesMap = this.store.selectSignal(
+        selectMeasureTemplates
+    );
+    public readonly measureTemplates = computed(() =>
+        Object.values(this.measureTemplatesMap())
+    );
+
+    public onMeasureTemplateSelect(template: any) {
+        console.log('Selected measure template:', template);
+    }
+}

frontend/src/app/pages/exercises/exercise/shared/map-operator-toolbar/map-operator-toolbar.component.ts

@@ -40,6 +40,7 @@ export const selectVehicles = selectPropertyFactory('vehicles');
 export const selectPersonnel = selectPropertyFactory('personnel');
 export const selectAlarmGroups = selectPropertyFactory('alarmGroups');
 export const selectMaterials = selectPropertyFactory('materials');
+export const selectMeasures = selectPropertyFactory('measures');
 export const selectTransferPoints = selectPropertyFactory('transferPoints');
 export const selectHospitals = selectPropertyFactory('hospitals');
 export const selectHospitalPatients = selectPropertyFactory('hospitalPatients');
@@ -53,6 +54,7 @@ export const selectMaterialTemplates =
     selectPropertyFactory('materialTemplates');
 export const selectMapImagesTemplates =
     selectPropertyFactory('mapImageTemplates');
+export const selectMeasureTemplates = selectPropertyFactory('measureTemplates');
 // Array properties
 export const selectPatientCategories =
     selectPropertyFactory('patientCategories');