Feature/interface signaller UI

.eslint/angular-template.eslintrc.cjs

@@ -6,6 +6,5 @@ module.exports = {
         '@angular-eslint/template/no-autofocus': 'off',
         '@angular-eslint/template/no-call-expression': ['error'],
         '@angular-eslint/template/no-negated-async': 'warn',
-        '@angular-eslint/template/no-positive-tabindex': 'warn',
     },
 };

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project does **not** adhere to [Semantic Versioning](https://semver.org
 - In the patient popup, there is a now a tab with a QR Code of the patient identifier. It is also
   possible to set custom QR code contents for each patient to support complexer systems.
 - Berliner Feuerwehr is now mentioned as member of the project consortium.
+- There is a dedicated view for "interface signallers" to participate in a exercise with simulated regions. Interface signallers can request information from simulated regions on behalf of the incident command and forward instructions back to the simulated regions.
 
 ### Fixed
 

backend/src/fuesim-server.spec.ts

@@ -40,6 +40,7 @@ describe('Exercise saving', () => {
                             id: uuid(),
                             type: 'alarmGroup',
                             name: 'Alarm Group',
+                            sent: false,
                         },
                     },
                     null

frontend/cypress/e2e/exercise.cy.ts

@@ -246,8 +246,14 @@ describe('A trainer on the exercise page', () => {
         cy.dragToMap('[data-cy=draggableTransferPointDiv]');
         cy.get('[data-cy=trainerToolbarExecutionButton]').click();
         cy.get('[data-cy=trainerToolbarControlCenterButton]').click();
+        cy.get('[data-cy=sendAlarmGroupChooseAlarmGroupButton]')
+            .first()
+            .click();
+        cy.get('[data-cy=searchableDropdownOptionButton] > :nth-child(1)')
+            .first()
+            .click();
         cy.get('[data-cy=sendAlarmGroupChooseTargetButton]').first().click();
-        cy.get('[data-cy=sendAlarmGroupChooseTargetSelect] > :nth-child(1)')
+        cy.get('[data-cy=searchableDropdownOptionButton] > :nth-child(1)')
             .first()
             .click();
         cy.get('[data-cy=sendAlarmGroupSendButton]').click();
@@ -474,9 +480,7 @@ describe('A trainer on the exercise page', () => {
         cy.get(
             '[data-cy=transferPointPopupAddOtherTransferPointButton]'
         ).click();
-        cy.get(
-            '[data-cy=transferPointPopupAddOtherTransferPointDropdownButton]'
-        )
+        cy.get('[data-cy=searchableDropdownOptionButton]')
             .first()
             .click({ force: true });
 
@@ -519,9 +523,7 @@ describe('A trainer on the exercise page', () => {
         cy.get(
             '[data-cy=transferPointPopupAddOtherTransferPointButton]'
         ).click();
-        cy.get(
-            '[data-cy=transferPointPopupAddOtherTransferPointDropdownButton]'
-        )
+        cy.get('[data-cy=searchableDropdownOptionButton]')
             .first()
             .click({ force: true });
         cy.get('[data-cy=transferPointPopupDurationInput]')

frontend/package.json

@@ -44,6 +44,7 @@
         "chart.js": "^4.4.8",
         "class-validator": "^0.14.1",
         "digital-fuesim-manv-shared": "file:../shared",
+        "hotkeys-js": "^3.10.3",
         "immer": "^10.1.1",
         "lodash-es": "4.17.21",
         "ng-qrcode": "^19.0.1",

frontend/src/app/pages/exercises/exercise/shared/emergency-operations-center/emergency-operations-center-modal/emergency-operations-center-modal.component.html

@@ -8,7 +8,17 @@ <h4 class="modal-title">Leitstelle</h4>
     ></button>
 </div>
 <div class="modal-body" style="min-height: 60vh">
-    <app-send-alarm-group-interface></app-send-alarm-group-interface>
+    <div class="card">
+        <h5 class="card-header">Alarmieren</h5>
+        <div class="card-body">
+            <app-send-alarm-group-interface />
+        </div>
+    </div>
     <br />
-    <app-eoc-log-interface></app-eoc-log-interface>
+    <div class="card">
+        <h5 class="card-header">Einsatztagebuch</h5>
+        <div class="card-body">
+            <app-eoc-log-interface />
+        </div>
+    </div>
 </div>

frontend/src/app/pages/exercises/exercise/shared/emergency-operations-center/emergency-operations-center.module.ts

@@ -7,16 +7,12 @@ import {
 import { SharedModule } from 'src/app/shared/shared.module';
 import { FormsModule } from '@angular/forms';
 import { EmergencyOperationsCenterModalComponent } from './emergency-operations-center-modal/emergency-operations-center-modal.component';
-import { SendAlarmGroupInterfaceComponent } from './send-alarm-group-interface/send-alarm-group-interface.component';
 import { EocLogInterfaceComponent } from './eoc-log-interface/eoc-log-interface.component';
-import { TransferTargetDropdownComponent } from './transfer-target-dropdown/transfer-target-dropdown.component';
 
 @NgModule({
     declarations: [
         EmergencyOperationsCenterModalComponent,
-        SendAlarmGroupInterfaceComponent,
         EocLogInterfaceComponent,
-        TransferTargetDropdownComponent,
     ],
     imports: [
         CommonModule,

frontend/src/app/pages/exercises/exercise/shared/emergency-operations-center/eoc-log-interface/eoc-log-interface.component.html

@@ -1,54 +1,47 @@
-<div class="card">
-    <h5 class="card-header">Einsatztagebuch</h5>
-
-    <div class="p-3 border-bottom">
-        <textarea
-            [(ngModel)]="newLogEntry"
-            [appAutofocus]="true"
-            maxlength="65535"
-            placeholder="Schreiben Sie den neuen Eintrag in dieses Feld..."
-            class="form-control no-validation mb-3"
-        ></textarea>
-        <button
-            type="button"
-            class="btn btn-primary w-100"
-            [disabled]="newLogEntry === ''"
-            (click)="addEocLogEntry()"
-        >
-            Eintrag speichern
-        </button>
+<div class="p-3 border-bottom">
+    <textarea
+        [(ngModel)]="newLogEntry"
+        [appAutofocus]="true"
+        maxlength="65535"
+        placeholder="Schreiben Sie den neuen Eintrag in dieses Feld..."
+        class="form-control no-validation mb-3"
+    ></textarea>
+    <button
+        type="button"
+        class="btn btn-primary w-100"
+        [disabled]="newLogEntry === ''"
+        (click)="addEocLogEntry()"
+    >
+        Eintrag speichern
+    </button>
+</div>
+<ng-container *ngIf="eocLogEntries$ | async as eocLogEntries">
+    <div *ngIf="eocLogEntries.length === 0" class="text-muted p-3">
+        Es sind noch keine Einträge vorhanden.
     </div>
-    <ng-container *ngIf="eocLogEntries$ | async as eocLogEntries">
-        <div *ngIf="eocLogEntries.length === 0" class="text-muted p-3">
-            Es sind noch keine Einträge vorhanden.
-        </div>
 
-        <ul
-            *ngIf="eocLogEntries.length > 0"
-            style="max-height: 50vh; overflow: auto"
-            class="list-group list-group-flush"
-        >
-            <li
-                *ngFor="let eocLogEntry of eocLogEntries"
-                class="list-group-item"
-            >
-                <div class="row">
-                    <div class="col-2">
-                        <span class="fw-bold">
-                            {{ eocLogEntry.exerciseTimestamp | formatDuration }}
-                        </span>
-                        <br />
-                        von
-                        <span class="font-monospace">
-                            {{ eocLogEntry.clientName }}
-                        </span>
-                    </div>
+    <ul
+        *ngIf="eocLogEntries.length > 0"
+        style="max-height: 50vh; overflow: auto"
+        class="list-group list-group-flush"
+    >
+        <li *ngFor="let eocLogEntry of eocLogEntries" class="list-group-item">
+            <div class="row">
+                <div class="col-2">
+                    <span class="fw-bold">
+                        {{ eocLogEntry.exerciseTimestamp | formatDuration }}
+                    </span>
+                    <br />
+                    von
+                    <span class="font-monospace">
+                        {{ eocLogEntry.clientName }}
+                    </span>
+                </div>
 
-                    <div class="col" style="white-space: pre-wrap">
-                        {{ eocLogEntry.message }}
-                    </div>
+                <div class="col" style="white-space: pre-wrap">
+                    {{ eocLogEntry.message }}
                 </div>
-            </li>
-        </ul>
-    </ng-container>
-</div>
+            </div>
+        </li>
+    </ul>
+</ng-container>