Merge pull request hpi-sam#412 from hpi-sam/feature/408-add-patient-c…

…ategories add patient categories
lukasrad02 · May 30, 2022 · f29aadc · f29aadc
2 parents 5fd7819 + 72eca83
commit f29aadc
Show file tree

Hide file tree

Showing 20 changed files with 1,413 additions and 195 deletions.
diff --git a/frontend/src/app/pages/exercises/exercise/shared/core/drag-element.service.ts b/frontend/src/app/pages/exercises/exercise/shared/core/drag-element.service.ts
@@ -14,6 +14,7 @@ import {
     PatientTemplate,
     MapImage,
 } from 'digital-fuesim-manv-shared';
+import type { PatientCategory } from 'digital-fuesim-manv-shared/dist/models/patient-category';
 
 @Injectable({
     providedIn: 'root',
@@ -141,7 +142,14 @@ export class DragElementService {
             case 'patient':
                 {
                     const patient = PatientTemplate.generatePatient(
-                        this.transferringTemplate.template
+                        this.transferringTemplate.template.patientTemplates[
+                            Math.floor(
+                                Math.random() *
+                                    this.transferringTemplate.template
+                                        .patientTemplates.length
+                            )
+                        ],
+                        this.transferringTemplate.template.name
                     );
                     this.apiService.proposeAction(
                         {
@@ -232,7 +240,7 @@ type TransferTemplate =
       }
     | {
           type: 'patient';
-          template: PatientTemplate;
+          template: PatientCategory;
       }
     | {
           type: 'transferPoint';

diff --git a/.../exercises/exercise/shared/exercise-map/shared/patient-popup/patient-popup.component.html b/.../exercises/exercise/shared/exercise-map/shared/patient-popup/patient-popup.component.html
@@ -87,6 +87,15 @@ <h5 class="popover-header">
                 <ng-container
                     *ngIf="(apiService.currentRole$ | async) !== 'participant'"
                 >
+                    <tr>
+                        <th scope="col">Beschreibung</th>
+                        <td class="font-monospace">
+                            <app-patient-status-display
+                                [patientStatus]="patient.patientStatusCode"
+                            >
+                            </app-patient-status-display>
+                        </td>
+                    </tr>
                     <tr>
                         <th scope="col">Verletzungs-Geschwindigkeit:</th>
                         <td class="font-monospace">

diff --git a/.../app/pages/exercises/exercise/shared/trainer-map-editor/trainer-map-editor.component.html b/.../app/pages/exercises/exercise/shared/trainer-map-editor/trainer-map-editor.component.html
@@ -88,7 +88,19 @@ <h5>Ansicht/Transferpunkt</h5>
                     </div>
                 </li>
                 <li class="list-group-item">
-                    <h5>Patienten</h5>
+                    <h5>
+                        Patienten
+                        <select
+                            [ngModel]="currentCategory"
+                            (ngModelChange)="setCurrentCategory($event)"
+                            class="form-select d-inline-block no-validation"
+                            style="max-width: fit-content"
+                        >
+                            <option [value]="'X'">X</option>
+                            <option [value]="'Y'">Y</option>
+                            <option [value]="'Z'">Z</option>
+                        </select>
+                    </h5>
                     <!-- 20px more height than the sum of the children to have room for the scrollbar -->
                     <div
                         class="overflow-auto w-100 d-flex flex-wrap"
@@ -101,34 +113,46 @@ <h5>Patienten</h5>
                     >
                         <div
                             *ngFor="
-                                let patientTemplate of patientTemplates$ | async
-                            "
-                            class="d-inline-block card text-center flex-shrink-0"
-                            style="
-                                width: 10rem;
-                                text-overflow: ellipsis;
-                                height: 110px;
-                            "
-                            (mousedown)="
-                                dragElementService.onMouseDown($event, {
-                                    type: 'patient',
-                                    template: patientTemplate
-                                })
+                                let patientCategory of patientCategories$
+                                    | async
                             "
                         >
                             <div
-                                class="preview-image-container small-image card-img-top"
-                            >
-                                <img [src]="patientTemplate.image.url" />
-                            </div>
-                            <div
-                                [title]="patientTemplate.name"
-                                class="p-1 text-wrap lh-1"
-                                style="overflow: auto"
+                                *ngIf="
+                                    patientCategory.name.firstField
+                                        .colorCode === currentCategory
+                                "
+                                class="d-inline-block card text-center flex-shrink-0"
+                                style="
+                                    width: 10rem;
+                                    text-overflow: ellipsis;
+                                    height: 110px;
+                                "
+                                (mousedown)="
+                                    dragElementService.onMouseDown($event, {
+                                        type: 'patient',
+                                        template: patientCategory
+                                    })
+                                "
                             >
-                                <small>
-                                    {{ patientTemplate.name }}
-                                </small>
+                                <div
+                                    class="preview-image-container small-image card-img-top"
+                                >
+                                    <img [src]="patientCategory.image.url" />
+                                </div>
+                                <div
+                                    class="p-1 text-wrap lh-1"
+                                    style="overflow: auto"
+                                >
+                                    <small>
+                                        <app-patient-status-display
+                                            [patientStatus]="
+                                                patientCategory.name
+                                            "
+                                        >
+                                        </app-patient-status-display>
+                                    </small>
+                                </div>
                             </div>
                         </div>
                     </div>

diff --git a/...rc/app/pages/exercises/exercise/shared/trainer-map-editor/trainer-map-editor.component.ts b/...rc/app/pages/exercises/exercise/shared/trainer-map-editor/trainer-map-editor.component.ts
@@ -7,7 +7,7 @@ import { ApiService } from 'src/app/core/api.service';
 import type { AppState } from 'src/app/state/app.state';
 import {
     selectMapImagesTemplates,
-    selectPatientTemplates,
+    selectPatientCategories,
     selectVehicleTemplates,
 } from 'src/app/state/exercise/exercise.selectors';
 import { DragElementService } from '../core/drag-element.service';
@@ -24,12 +24,14 @@ import { openEditImageTemplateModal } from '../editor-panel/edit-image-template-
  * A wrapper around the map that provides trainers with more options and tools.
  */
 export class TrainerMapEditorComponent {
+    public currentCategory = 'X';
+
     public readonly vehicleTemplates$ = this.store.select(
         selectVehicleTemplates
     );
 
-    public readonly patientTemplates$ = this.store.select(
-        selectPatientTemplates
+    public readonly patientCategories$ = this.store.select(
+        selectPatientCategories
     );
 
     public readonly mapImageTemplates$ = this.store.select(
@@ -63,4 +65,8 @@ export class TrainerMapEditorComponent {
     public editMapImageTemplate(mapImageTemplateId: UUID) {
         openEditImageTemplateModal(this.ngbModalService, mapImageTemplateId);
     }
+
+    public setCurrentCategory(category: string) {
+        this.currentCategory = category;
+    }
 }
diff --git a/...nd/src/app/shared/components/patient-status-display/patient-status-display.component.html b/...nd/src/app/shared/components/patient-status-display/patient-status-display.component.html
@@ -0,0 +1,12 @@
+<span
+    >{{ patientStatus.firstField.colorCode
+    }}{{ patientStatus.firstField.behaviourCode }}</span
+>
+<span
+    >{{ patientStatus.secondField.colorCode
+    }}{{ patientStatus.secondField.behaviourCode }}</span
+>
+<span
+    >{{ patientStatus.thirdField.colorCode
+    }}{{ patientStatus.thirdField.behaviourCode }}</span
+>
diff --git a/...nd/src/app/shared/components/patient-status-display/patient-status-display.component.scss b/...nd/src/app/shared/components/patient-status-display/patient-status-display.component.scss
diff --git a/...tend/src/app/shared/components/patient-status-display/patient-status-display.component.ts b/...tend/src/app/shared/components/patient-status-display/patient-status-display.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { PatientStatusCode } from 'digital-fuesim-manv-shared';
+
+@Component({
+    selector: 'app-patient-status-display',
+    templateUrl: './patient-status-display.component.html',
+    styleUrls: ['./patient-status-display.component.scss'],
+})
+export class PatientStatusDisplayComponent {
+    @Input() patientStatus!: PatientStatusCode;
+}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
@@ -15,6 +15,7 @@ import { UrlValidatorDirective } from './validation/url-validator.directive';
 import { ValuesPipe } from './pipes/values.pipe';
 import { ViewportNameComponent } from './components/viewport-name/viewport-name.component';
 import { IntegerValidatorDirective } from './validation/integer-validator.directive';
+import { PatientStatusDisplayComponent } from './components/patient-status-display/patient-status-display.component';
 import { KeysPipe } from './pipes/keys.pipe';
 
 @NgModule({
@@ -27,6 +28,7 @@ import { KeysPipe } from './pipes/keys.pipe';
         ExerciseExistsValidatorDirective,
         ImageExistsValidatorDirective,
         TransferPointNameComponent,
+        PatientStatusDisplayComponent,
         HospitalNameComponent,
         FormatDurationPipe,
         LetDirective,
@@ -46,6 +48,7 @@ import { KeysPipe } from './pipes/keys.pipe';
         ExerciseExistsValidatorDirective,
         ImageExistsValidatorDirective,
         TransferPointNameComponent,
+        PatientStatusDisplayComponent,
         HospitalNameComponent,
         FormatDurationPipe,
         LetDirective,

diff --git a/frontend/src/app/state/exercise/exercise.selectors.ts b/frontend/src/app/state/exercise/exercise.selectors.ts
@@ -11,8 +11,8 @@ export const selectViewports = (state: AppState) => state.exercise.viewports;
 export const selectMapImages = (state: AppState) => state.exercise.mapImages;
 export const selectVehicleTemplates = (state: AppState) =>
     state.exercise.vehicleTemplates;
-export const selectPatientTemplates = (state: AppState) =>
-    state.exercise.patientTemplates;
+export const selectPatientCategories = (state: AppState) =>
+    state.exercise.patientCategories;
 export const selectMapImagesTemplates = (state: AppState) =>
     state.exercise.mapImageTemplates;
 export const getSelectMapImageTemplate =

diff --git a/frontend/src/assets/female-patient.svg b/frontend/src/assets/female-patient.svg