WIP: Add UI for VehicleTemplate editing

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

@@ -8,8 +8,11 @@ import { ExerciseComponent } from './exercise/exercise.component';
 import { AlarmGroupOverviewModule } from './shared/alarm-group-overview/alarm-group-overview.module';
 import { ClientOverviewModule } from './shared/client-overview/client-overview.module';
 import { CreateImageTemplateModalComponent } from './shared/editor-panel/create-image-template-modal/create-image-template-modal.component';
+import { CreateVehicleTemplateModalComponent } from './shared/editor-panel/create-vehicle-template-modal/create-vehicle-template-modal.component';
 import { EditImageTemplateModalComponent } from './shared/editor-panel/edit-image-template-modal/edit-image-template-modal.component';
+import { EditVehicleTemplateModalComponent } from './shared/editor-panel/edit-vehicle-template-modal/edit-vehicle-template-modal.component';
 import { ImageTemplateFormComponent } from './shared/editor-panel/image-template-form/image-template-form.component';
+import { VehicleTemplateFormComponent } from './shared/editor-panel/vehicle-template-form/vehicle-template-form.component';
 import { EmergencyOperationsCenterModule } from './shared/emergency-operations-center/emergency-operations-center.module';
 import { ExerciseMapModule } from './shared/exercise-map/exercise-map.module';
 import { ExerciseSettingsModalComponent } from './shared/exercise-settings/exercise-settings-modal/exercise-settings-modal.component';
@@ -20,6 +23,8 @@ import { TimeTravelComponent } from './shared/time-travel/time-travel.component'
 import { TrainerMapEditorComponent } from './shared/trainer-map-editor/trainer-map-editor.component';
 import { TrainerToolbarComponent } from './shared/trainer-toolbar/trainer-toolbar.component';
 import { TransferOverviewModule } from './shared/transfer-overview/transfer-overview.module';
+import { PersonnelTemplateDisplayComponent } from './shared/editor-panel/personnel-template-display/personnel-template-display.component';
+import { MaterialTemplateDisplayComponent } from './shared/editor-panel/material-template-display/material-template-display.component';
 
 @NgModule({
     declarations: [
@@ -30,8 +35,13 @@ import { TransferOverviewModule } from './shared/transfer-overview/transfer-over
         ExerciseSettingsModalComponent,
         TimeTravelComponent,
         CreateImageTemplateModalComponent,
+        CreateVehicleTemplateModalComponent,
         EditImageTemplateModalComponent,
+        EditVehicleTemplateModalComponent,
         ImageTemplateFormComponent,
+        VehicleTemplateFormComponent,
+        PersonnelTemplateDisplayComponent,
+        MaterialTemplateDisplayComponent,
     ],
     imports: [
         CommonModule,

frontend/src/app/pages/exercises/exercise/shared/editor-panel/create-vehicle-template-modal/create-vehicle-template-modal.component.html

@@ -0,0 +1,19 @@
+<div class="modal-header">
+    <h4 class="modal-title">Fahrzeugvorlage hinzufügen</h4>
+    <button type="button" class="btn-close" (click)="close()"></button>
+</div>
+<div class="modal-body">
+    <app-vehicle-template-form
+        [initialValues]="{
+            url: editableVehicleTemplateValues.url,
+            height: editableVehicleTemplateValues.height,
+            name: editableVehicleTemplateValues.name,
+            type: editableVehicleTemplateValues.type,
+            patientCapacity: editableVehicleTemplateValues.patientCapacity,
+            materialTypes: editableVehicleTemplateValues.materialTypes,
+            personnelTypes: editableVehicleTemplateValues.personnelTypes
+        }"
+        (submitVehicleTemplate)="createImageTemplate($event)"
+        [btnText]="'Fahrzeugvorlage hinzufügen'"
+    ></app-vehicle-template-form>
+</div>

frontend/src/app/pages/exercises/exercise/shared/editor-panel/create-vehicle-template-modal/create-vehicle-template-modal.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { uuid } from 'digital-fuesim-manv-shared';
+import { ExerciseService } from 'src/app/core/exercise.service';
+import type {
+    ChangedVehicleTemplateValues,
+    EditableVehicleTemplateValues,
+} from '../vehicle-template-form/vehicle-template-form.component';
+
+@Component({
+    selector: 'app-create-vehicle-template-modal',
+    templateUrl: './create-vehicle-template-modal.component.html',
+    styleUrls: ['./create-vehicle-template-modal.component.scss'],
+})
+export class CreateVehicleTemplateModalComponent {
+    public readonly editableVehicleTemplateValues: EditableVehicleTemplateValues =
+        {
+            url: null,
+            height: 100,
+            name: null,
+            patientCapacity: 1,
+            type: null,
+            materialTypes: [],
+            personnelTypes: [],
+        };
+
+    constructor(
+        public readonly activeModal: NgbActiveModal,
+        private readonly exerciseService: ExerciseService
+    ) {}
+
+    public createImageTemplate({
+        url,
+        height,
+        name,
+        aspectRatio,
+        patientCapacity,
+        type,
+    }: ChangedVehicleTemplateValues) {
+        this.exerciseService
+            .proposeAction({
+                type: '[VehicleTemplate] Add vehicleTemplate',
+                vehicleTemplate: {
+                    id: uuid(),
+                    image: {
+                        url,
+                        height,
+                        aspectRatio,
+                    },
+                    name,
+                    materials: ['standard'],
+                    patientCapacity,
+                    personnel: ['rettSan'],
+                    vehicleType: type,
+                },
+            })
+            .then((response) => {
+                if (response.success) {
+                    this.close();
+                }
+            });
+    }
+
+    public close() {
+        this.activeModal.close();
+    }
+}

frontend/src/app/pages/exercises/exercise/shared/editor-panel/create-vehicle-template-modal/open-create-vehicle-template-modal.ts

@@ -0,0 +1,8 @@
+import type { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { CreateVehicleTemplateModalComponent } from './create-vehicle-template-modal.component';
+
+export async function openCreateVehicleTemplateModal(
+    ngbModalService: NgbModal
+) {
+    ngbModalService.open(CreateVehicleTemplateModalComponent);
+}

frontend/src/app/pages/exercises/exercise/shared/editor-panel/edit-vehicle-template-modal/edit-vehicle-template-modal.component.html

@@ -0,0 +1,24 @@
+<div class="modal-header">
+    <h4 class="modal-title">Fahrzeugvorlage bearbeiten</h4>
+    <button type="button" class="btn-close" (click)="close()"></button>
+</div>
+<div *ngIf="vehicleTemplate" class="modal-body">
+    <app-vehicle-template-form
+        [initialValues]="{
+            name: vehicleTemplate.name,
+            type: vehicleTemplate.vehicleType,
+            url: vehicleTemplate.image.url,
+            height: vehicleTemplate.image.height,
+            patientCapacity: vehicleTemplate.patientCapacity,
+            materialTypes: vehicleTemplate.materials,
+            personnelTypes: vehicleTemplate.personnel
+        }"
+        (submitVehicleTemplate)="editVehicleTemplate($event)"
+        [btnText]="'Speichern'"
+    ></app-vehicle-template-form>
+
+    <button class="btn btn-danger float-end" (click)="deleteVehicleTemplate()">
+        <i class="bi bi-trash-fill"></i>
+        Löschen
+    </button>
+</div>

frontend/src/app/pages/exercises/exercise/shared/editor-panel/edit-vehicle-template-modal/edit-vehicle-template-modal.component.ts

@@ -0,0 +1,93 @@
+import type { OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Store } from '@ngrx/store';
+import type {
+    UUID,
+    Mutable,
+    VehicleTemplate,
+} from 'digital-fuesim-manv-shared';
+import { cloneDeepMutable } from 'digital-fuesim-manv-shared';
+import { ExerciseService } from 'src/app/core/exercise.service';
+import type { AppState } from 'src/app/state/app.state';
+import { createSelectVehicleTemplate } from 'src/app/state/application/selectors/exercise.selectors';
+import { selectStateSnapshot } from 'src/app/state/get-state-snapshot';
+import type { ChangedVehicleTemplateValues } from '../vehicle-template-form/vehicle-template-form.component';
+
+@Component({
+    selector: 'app-edit-vehicle-template-modal',
+    templateUrl: './edit-vehicle-template-modal.component.html',
+    styleUrls: ['./edit-vehicle-template-modal.component.scss'],
+})
+export class EditVehicleTemplateModalComponent implements OnInit {
+    // This is set after the modal creation and therefore accessible in ngOnInit
+    public vehicleTemplateId!: UUID;
+
+    public vehicleTemplate?: Mutable<VehicleTemplate>;
+
+    constructor(
+        private readonly exerciseService: ExerciseService,
+        private readonly store: Store<AppState>,
+        public readonly activeModal: NgbActiveModal
+    ) {}
+
+    ngOnInit(): void {
+        this.vehicleTemplate = cloneDeepMutable(
+            selectStateSnapshot(
+                createSelectVehicleTemplate(this.vehicleTemplateId),
+                this.store
+            )
+        );
+    }
+
+    public deleteVehicleTemplate(): void {
+        this.exerciseService
+            .proposeAction({
+                type: '[VehicleTemplate] Delete vehicleTemplates',
+                id: this.vehicleTemplateId,
+            })
+            .then((response) => {
+                if (response.success) {
+                    this.close();
+                }
+            });
+    }
+
+    public editVehicleTemplate({
+        url,
+        height,
+        name,
+        aspectRatio,
+        patientCapacity,
+        type,
+    }: ChangedVehicleTemplateValues): void {
+        if (!this.vehicleTemplate) {
+            console.error("VehicleTemplate wasn't initialized yet");
+            return;
+        }
+        this.exerciseService
+            .proposeAction({
+                type: '[VehicleTemplate] Edit vehicleTemplate',
+                id: this.vehicleTemplateId,
+                name,
+                image: {
+                    url,
+                    height,
+                    aspectRatio,
+                },
+                materials: this.vehicleTemplate.materials,
+                patientCapacity,
+                personnelTypes: this.vehicleTemplate.personnel,
+                vehicleType: type,
+            })
+            .then((response) => {
+                if (response.success) {
+                    this.close();
+                }
+            });
+    }
+
+    public close(): void {
+        this.activeModal.close();
+    }
+}

frontend/src/app/pages/exercises/exercise/shared/editor-panel/edit-vehicle-template-modal/open-edit-vehicle-template-modal.ts

@@ -0,0 +1,13 @@
+import type { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import type { UUID } from 'digital-fuesim-manv-shared';
+import { EditVehicleTemplateModalComponent } from './edit-vehicle-template-modal.component';
+
+export async function openEditVehicleTemplateModal(
+    ngbModalService: NgbModal,
+    vehicleTemplateId: UUID
+) {
+    const modalRef = ngbModalService.open(EditVehicleTemplateModalComponent);
+    const componentInstance =
+        modalRef.componentInstance as EditVehicleTemplateModalComponent;
+    componentInstance.vehicleTemplateId = vehicleTemplateId;
+}

frontend/src/app/pages/exercises/exercise/shared/editor-panel/material-template-display/material-template-display.component.html

@@ -0,0 +1,6 @@
+<ng-container *ngIf="materialTemplate$ | async as materialTemplate">
+    <div class="preview-image-container pb-0">
+        <img [src]="materialTemplate.image.url" />
+    </div>
+    {{ materialTemplate.materialType }}
+</ng-container>

frontend/src/app/pages/exercises/exercise/shared/editor-panel/material-template-display/material-template-display.component.ts

@@ -0,0 +1,27 @@
+import type { OnChanges } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+import type { MaterialTemplate } from 'digital-fuesim-manv-shared';
+import { MaterialType } from 'digital-fuesim-manv-shared';
+import type { Observable } from 'rxjs';
+import type { AppState } from 'src/app/state/app.state';
+import { createSelectMaterialTemplate } from 'src/app/state/application/selectors/exercise.selectors';
+
+@Component({
+    selector: 'app-material-template-display',
+    templateUrl: './material-template-display.component.html',
+    styleUrls: ['./material-template-display.component.scss'],
+})
+export class MaterialTemplateDisplayComponent implements OnChanges {
+    @Input() materialTemplateType!: MaterialType;
+
+    public materialTemplate$?: Observable<MaterialTemplate>;
+
+    ngOnChanges() {
+        this.materialTemplate$ = this.store.select(
+            createSelectMaterialTemplate(this.materialTemplateType)
+        );
+    }
+
+    constructor(private readonly store: Store<AppState>) {}
+}

frontend/src/app/pages/exercises/exercise/shared/editor-panel/personnel-template-display/personnel-template-display.component.html

@@ -0,0 +1,6 @@
+<ng-container *ngIf="personnelTemplate$ | async as personnelTemplate">
+    <div class="preview-image-container pb-0">
+        <img [src]="personnelTemplate.image.url" />
+    </div>
+    {{ personnelTemplate.personnelType }}
+</ng-container>

frontend/src/app/pages/exercises/exercise/shared/editor-panel/personnel-template-display/personnel-template-display.component.ts

@@ -0,0 +1,27 @@
+import type { OnChanges } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+import type { PersonnelTemplate } from 'digital-fuesim-manv-shared';
+import { PersonnelType } from 'digital-fuesim-manv-shared';
+import type { Observable } from 'rxjs';
+import type { AppState } from 'src/app/state/app.state';
+import { createSelectPersonnelTemplate } from 'src/app/state/application/selectors/exercise.selectors';
+
+@Component({
+    selector: 'app-personnel-template-display',
+    templateUrl: './personnel-template-display.component.html',
+    styleUrls: ['./personnel-template-display.component.scss'],
+})
+export class PersonnelTemplateDisplayComponent implements OnChanges {
+    @Input() personnelTemplateType!: PersonnelType;
+
+    public personnelTemplate$?: Observable<PersonnelTemplate>;
+
+    ngOnChanges() {
+        this.personnelTemplate$ = this.store.select(
+            createSelectPersonnelTemplate(this.personnelTemplateType)
+        );
+    }
+
+    constructor(private readonly store: Store<AppState>) {}
+}