From 1956784da56cc3460826e4282534fc0a1ed1b314 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Tue, 12 Mar 2024 13:21:56 +0100
Subject: [PATCH 01/22] #84 frontend: every tab gets the data it needs

---
 .../screensTrainer/ScreenExerciseCreation.vue |  3 +--
 .../screensTrainer/ScreenResourceCreation.vue |  9 +------
 .../pagesResourceCreation/PageMaterial.vue    | 24 +++++++++++++++++--
 .../pagesResourceCreation/PagePatients.vue    | 24 +++++++++++++++++--
 .../pagesResourceCreation/PagePersonnel.vue   | 24 +++++++++++++++++--
 5 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
index d94bd6ae..ee2b46ef 100644
--- a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
+++ b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
@@ -38,9 +38,8 @@
 			v-for="area in areas"
 			:key="area.areaName"
 			class="listitem"
-			@click="openArea(area.areaName)"
 		>
-			<button class="areaButton">
+			<button class="areaButton" @click="openArea(area.areaName)">
 				{{ area.areaName }}
 			</button>
 			<button class="settingsButton" @click="showPopup = true">
diff --git a/frontend/src/components/screensTrainer/ScreenResourceCreation.vue b/frontend/src/components/screensTrainer/ScreenResourceCreation.vue
index 2c545ca6..16e0d918 100644
--- a/frontend/src/components/screensTrainer/ScreenResourceCreation.vue
+++ b/frontend/src/components/screensTrainer/ScreenResourceCreation.vue
@@ -3,7 +3,6 @@
 	import PagePersonnel from './pagesResourceCreation/PagePersonnel.vue'
 	import PageMaterial from './pagesResourceCreation/PageMaterial.vue'
 	import {computed, ref} from 'vue'
-	import {useExerciseStore} from '@/stores/Exercise'
 
 	enum Pages {
 		PATIENTS = "PagePatients",
@@ -28,10 +27,6 @@
 	const setPage = (newPage: Pages) => {
 		currentPage.value = newPage
 	}
-
-	const exerciseStore = useExerciseStore()
-
-	const currentAreaData = computed(() => exerciseStore.getArea(currentArea.value))
 </script>
 
 <script lang="ts">
@@ -43,9 +38,7 @@
 </script>
 
 <template>
-	<h1>ResourceCreation</h1>
-	{{ currentAreaData }}
-	<component :is="currentPageComponent" />
+	<component :is="currentPageComponent" :current-area="currentArea" />
 	<nav>
 		<button id="nav-patients" :class="{ 'selected': currentPage === Pages.PATIENTS }" @click="setPage(Pages.PATIENTS)">
 			Patienten
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
index 0a19d6e6..096db118 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+	import {computed, ref} from 'vue'
+	import {useExerciseStore} from '@/stores/Exercise'
+
+    const props = defineProps({
+		currentArea: {
+			type: String,
+			default: "Kein Bereich ausgewählt"
+		}
+	})
+
+	const exerciseStore = useExerciseStore()
+
+	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+</script>
+
 <template>
-    <h1>Material</h1>
-</template>
\ No newline at end of file
+	<h1>Patienten</h1>
+	{{ currentAreaData?.devices }}
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index 99d30288..9f5e442b 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+	import {computed, ref} from 'vue'
+	import {useExerciseStore} from '@/stores/Exercise'
+
+    const props = defineProps({
+		currentArea: {
+			type: String,
+			default: "Kein Bereich ausgewählt"
+		}
+	})
+
+	const exerciseStore = useExerciseStore()
+
+	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+</script>
+
 <template>
-    <h1>Patients</h1>
-</template>
\ No newline at end of file
+	<h1>Patienten</h1>
+	{{ currentAreaData?.patients }}
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
index 7ce39729..f8a016d6 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+	import {computed, ref} from 'vue'
+	import {useExerciseStore} from '@/stores/Exercise'
+
+    const props = defineProps({
+		currentArea: {
+			type: String,
+			default: "Kein Bereich ausgewählt"
+		}
+	})
+
+	const exerciseStore = useExerciseStore()
+
+	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+</script>
+
 <template>
-    <h1>Personnel</h1>
-</template>
\ No newline at end of file
+	<h1>Patienten</h1>
+	{{ currentAreaData?.personnel }}
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file

From 83975b5c1ed45d87d3b5ebd678e825d104c4ccf3 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Tue, 12 Mar 2024 14:27:21 +0100
Subject: [PATCH 02/22] #84 frontend: add AvailablesStore
 andToggleSwitchForListItems

---
 .../pagesResourceCreation/PagePatients.vue    | 68 ++++++++++++++++++-
 .../widgets/ToggleSwitchForListItems.vue      | 57 ++++++++++++++++
 frontend/src/sockets/MessageData.ts           | 20 +++++-
 frontend/src/stores/Availables.ts             | 20 ++++++
 4 files changed, 162 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/widgets/ToggleSwitchForListItems.vue
 create mode 100644 frontend/src/stores/Availables.ts

diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index 9f5e442b..36344051 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 	import {computed, ref} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
+	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
 
     const props = defineProps({
 		currentArea: {
@@ -15,9 +16,72 @@
 </script>
 
 <template>
-	<h1>Patienten</h1>
-	{{ currentAreaData?.patients }}
+	<div id="list">
+		<div
+			v-for="patient in currentAreaData?.patients"
+			:key="patient.patientName"
+			class="listitem"
+		>
+			<button class="areaButton">
+				{{ patient.patientCode }}
+				{{ patient.patientName }}
+				{{ patient.patientId }}
+			</button>
+			<ToggleSwitchForListItems />
+		</div>
+		<button id="addAreaButton">
+			Patient hinzufügen
+		</button>
+	</div>
 </template>
 
 <style scoped>
+	#list {
+		margin-top: 30px;
+		margin-left: 30px;
+		margin-right: 30px;
+	}
+
+	.listitem {
+		position: relative;
+		background-color: #FFFFFF;
+		border: 1px solid rgb(209, 213, 219);
+		display: flex;
+		align-items: center;
+		text-align: left;
+		margin-top: -1px;
+	}
+
+	.areaButton {
+		position: relative;
+		background-color: #FFFFFF;
+		border: none;
+		display: flex;
+		align-items: center;
+		font-size: 1.25rem;
+		padding: .75rem 1rem;
+		text-align: left;
+		height: 50px;
+		width: 100%;
+	}
+
+	.settingsButton {
+		height: 50px;
+		width: 50px;
+		border: none;
+		background-color: rgb(243, 244, 246);
+	}
+
+	#addAreaButton {
+		text-align: center;
+		position: relative;
+		background-color: #FFFFFF;
+		border: 1px solid rgb(209, 213, 219);
+		box-sizing: border-box;
+		width: 100%;
+		font-size: 1.25rem;
+		line-height: 1.25rem;
+		padding: .75rem 1rem;
+		margin-top: -1px;
+	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/ToggleSwitchForListItems.vue b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
new file mode 100644
index 00000000..b811e422
--- /dev/null
+++ b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
@@ -0,0 +1,57 @@
+<template>
+	<div class="toggleSwitch">
+		<label>
+			<input type="checkbox">
+			<span class="slider" />
+		</label>
+	</div>
+</template>
+
+<style scoped>
+.toggleSwitch {
+	position: relative;
+	display: inline-block;
+	width: 80px;
+	height: 24px;
+}
+
+.toggleSwitch input { 
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.slider {
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	left: 10px;
+	right: 10px;
+	bottom: 0;
+	background-color: #ccc;
+	transition: .1s;
+	border-radius: 34px;
+	margin-right: 5px;
+}
+
+.slider:before {
+	position: absolute;
+	content: "";
+	height: 20px;
+	width: 20px;
+	left: 2px;
+	right: 10px;
+	bottom: 2px;
+	background-color: white;
+	transition: .1s;
+	border-radius: 50%;
+}
+
+input:checked + .slider {
+	background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+	transform: translateX(22px);
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
index 96caff56..4b3b4a9b 100644
--- a/frontend/src/sockets/MessageData.ts
+++ b/frontend/src/sockets/MessageData.ts
@@ -1,4 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+/* eslint-disable @typescript-eslint/no-unused-vars */
 interface MessageData {
 	messageType: string
 	message?: string
@@ -68,3 +68,21 @@ interface LogEntry {
 	personnelId: number
 	deviceId: number
 }
+
+interface Availables {
+	actions: [],
+	patients: [],
+	material: [],
+}
+
+interface AvailableActions {
+	actions: [],
+}
+
+interface AvailablePatients {
+	patients: [],
+}
+
+interface AvailableMaterial {
+	material: [],
+}
\ No newline at end of file
diff --git a/frontend/src/stores/Availables.ts b/frontend/src/stores/Availables.ts
new file mode 100644
index 00000000..6f432143
--- /dev/null
+++ b/frontend/src/stores/Availables.ts
@@ -0,0 +1,20 @@
+import {defineStore} from 'pinia'
+
+export const useAvailablesStore = defineStore('availables', {
+	state: (): Availables => ({
+		actions: [],
+		patients: [],
+		material: [],
+	}),
+	actions: {
+		loadAvailableActions(json: AvailableActions) {
+			this.actions = json.actions
+		},
+		loadAvailablePatients(json: AvailablePatients) {
+			this.patients = json.patients
+		},
+		loadAvailableMaterial(json: AvailableMaterial) {
+			this.material = json.material
+		}
+	}
+})
\ No newline at end of file

From 561a735dd6a955fd2657155902cc362ad5379090 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Tue, 12 Mar 2024 16:48:50 +0100
Subject: [PATCH 03/22] #84 frontend: add patient popup but problems with
 loading available patients

---
 .../pagesResourceCreation/PageMaterial.vue    |   2 +-
 .../pagesResourceCreation/PagePatients.vue    |  13 +-
 .../pagesResourceCreation/PagePersonnel.vue   |   2 +-
 .../src/components/widgets/PatientPopup.vue   | 111 ++++++++++++++++++
 frontend/src/sockets/MessageData.ts           |  16 ++-
 frontend/src/sockets/SocketTrainer.ts         |  16 +++
 frontend/src/stores/Patient.ts                |   4 +
 7 files changed, 159 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/widgets/PatientPopup.vue

diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
index 096db118..cdcaac3c 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import {computed, ref} from 'vue'
+	import {computed} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
 
     const props = defineProps({
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index 36344051..e4f2def1 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -2,6 +2,7 @@
 	import {computed, ref} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
 	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
+	import PatientPopup from '@/components/widgets/PatientPopup.vue'
 
     const props = defineProps({
 		currentArea: {
@@ -13,16 +14,26 @@
 	const exerciseStore = useExerciseStore()
 
 	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+
+	const showPopup = ref(false)
+
+	const currentPatientId = ref(Number.NEGATIVE_INFINITY)
+
+	function openPatient(patientId: number) {
+		currentPatientId.value = patientId
+		showPopup.value = true
+	}
 </script>
 
 <template>
+	<PatientPopup v-if="showPopup" :patient-id="currentPatientId" @close-popup="showPopup=false" />
 	<div id="list">
 		<div
 			v-for="patient in currentAreaData?.patients"
 			:key="patient.patientName"
 			class="listitem"
 		>
-			<button class="areaButton">
+			<button class="areaButton" @click="openPatient(patient.patientId)">
 				{{ patient.patientCode }}
 				{{ patient.patientName }}
 				{{ patient.patientId }}
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
index f8a016d6..613c31ac 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import {computed, ref} from 'vue'
+	import {computed} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
 
     const props = defineProps({
diff --git a/frontend/src/components/widgets/PatientPopup.vue b/frontend/src/components/widgets/PatientPopup.vue
new file mode 100644
index 00000000..c8862945
--- /dev/null
+++ b/frontend/src/components/widgets/PatientPopup.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+	import socketTrainer from "@/sockets/SocketTrainer"
+	import { useAvailablesStore } from "@/stores/Availables"
+
+	const emit = defineEmits(['close-popup'])
+
+	const props = defineProps({
+		patientId: {
+			type: Number,
+			default: Number.NEGATIVE_INFINITY
+		}
+	})
+
+	const availablePatients = useAvailablesStore().patients
+</script>
+
+<template>
+	<div class="popup-overlay" @click="emit('close-popup')">
+		<div class="popup">
+			<div id="leftSide">
+				<h2>{{ props.patientId }}</h2>
+				<div id="list">
+					Hier sollte die Liste stehen
+					{{ availablePatients }}
+					<div
+						v-for="patient in availablePatients"
+						:key="patient.patientCode"
+						class="listitem"
+					>
+						<button class="areaButton">
+							{{ patient.patientCode }}
+						</button>
+					</div>
+				</div>
+			</div>
+			<div id="rightSide">
+				<button id="deleteButton">
+					Löschen
+				</button>
+				<button id="saveButton">
+					Speichern
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+	.popup-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		z-index: 1;
+	}
+
+	.popup {
+		background-color: white;
+		padding: 20px;
+		border-radius: 8px;
+		width: 80vw;
+		
+	}
+
+	#leftSide, #rightSide {
+		float: left;
+		display: flex;
+		width: 50%;
+		padding: 10px;
+	}
+
+	#deleteButton, #saveButton {
+		position: relative;
+		background-color: #ee4035;
+		color: white;
+		border: 1px solid rgb(209, 213, 219);
+		border-radius: .5rem;
+		width: 100%;
+		font-size: 1.25rem;
+		padding: .75rem 1rem;
+		text-align: center;
+		margin-top: 10px;
+		float: left;
+	}
+
+	#saveButton {
+		background-color: #269f42;
+	}
+
+	#list {
+		margin-top: 90px;
+		margin-left: 30px;
+		margin-right: 30px;
+	}
+
+	.listitem {
+		position: relative;
+		background-color: #FFFFFF;
+		border: 1px solid rgb(209, 213, 219);
+		display: flex;
+		align-items: center;
+		text-align: left;
+		margin-top: -1px;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
index 4b3b4a9b..fc0b9a7e 100644
--- a/frontend/src/sockets/MessageData.ts
+++ b/frontend/src/sockets/MessageData.ts
@@ -19,6 +19,9 @@ interface MessageData {
 	exercise?: Exercise
 	state?: State
 	logEntry?: LogEntry
+	availablePatients: AvailablePatients
+	availableActions: AvailableActions
+	availableMaterial: AvailableMaterial
 }
 
 interface Exercise {
@@ -69,9 +72,18 @@ interface LogEntry {
 	deviceId: number
 }
 
+interface AvailablePatient {
+	patientCode: number
+	triage: string
+	patientInjury: string
+	patientHistory: string
+	patientPersonalDetails: string
+	patientBiometrics: string
+}
+
 interface Availables {
 	actions: [],
-	patients: [],
+	patients: AvailablePatient[],
 	material: [],
 }
 
@@ -80,7 +92,7 @@ interface AvailableActions {
 }
 
 interface AvailablePatients {
-	patients: [],
+	patients: AvailablePatient[],
 }
 
 interface AvailableMaterial {
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index 329aff7e..da83c4ac 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -3,6 +3,7 @@ import {useTrainerStore} from "@/stores/Trainer"
 import {useExerciseStore} from "@/stores/Exercise"
 import {showErrorToast, showWarningToast} from "@/App.vue"
 import {Screens, setLeftScreen as moduleTrainerSetLeftScreen, setRightScreen as moduleTrainerSetRightScreen} from "@/components/ModuleTrainer.vue"
+import { useAvailablesStore } from "@/stores/Availables"
 
 class SocketTrainer {
 	private readonly url: string
@@ -46,6 +47,15 @@ class SocketTrainer {
 				case 'test-passthrough':
 					showWarningToast(data.message || '')
 					break
+				case 'available-actions':
+					useAvailablesStore().loadAvailableActions(data.availableActions as AvailableActions)
+					break
+				case 'available-material':
+					useAvailablesStore().loadAvailableMaterial(data.availableMaterial as AvailableMaterial)
+					break
+				case 'available-patients':
+					useAvailablesStore().loadAvailablePatients(data.availablePatients as AvailablePatients)
+					break
 				case 'exercise':
 					useExerciseStore().createFromJSON(data.exercise as Exercise)
 					moduleTrainerSetLeftScreen(Screens.EXERCISE_CREATION)
@@ -115,6 +125,12 @@ export default socketTrainer
 export const serverMockEvents = [
 	{id: 'failure', data: '{"messageType":"failure","message":"Error encountered"}'},
 	{id: 'test-passthrough', data: '{"messageType":"test-passthrough","message":"received test-passthrough event"}'},
+	{
+		id: "available-patients",
+		data: '{"messageType": "available-patients","availablePatients": [{"patientCode": 2,"triage": "red","patientInjury": "Fractured limb",' +
+			'"patientHistory": "No known allergies","patientPersonalDetails": "John Doe, Male, 30 years old",' +
+			'"patientBiometrics": "Height: 180cm, Weight: 75kg"}]}'
+	},
 	{
 		id: 'exercise',
 		data: '{"messageType":"exercise","exercise":{"exerciseId":123456,"areas":[' +
diff --git a/frontend/src/stores/Patient.ts b/frontend/src/stores/Patient.ts
index 6880e719..e262b0eb 100644
--- a/frontend/src/stores/Patient.ts
+++ b/frontend/src/stores/Patient.ts
@@ -7,6 +7,10 @@ export const usePatientStore = defineStore('patient', {
 		patientName: '',
 		triage: '-',
 		areaName: '',
+		patientInjury: '',
+		patientHistory: '',
+		patientPersonalDetails: '',
+		patientBiometrics: '',
 		airway: '',
 		breathing: '',
 		circulation: '',

From fc08f4df08596a7457faf3fb3838b74c30221798 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Wed, 13 Mar 2024 11:53:31 +0100
Subject: [PATCH 04/22] #84 frontend: add patient selection tool (unfinished)

---
 .../pagesResourceCreation/PagePatients.vue    | 46 +++++++++-
 .../src/components/widgets/PatientInfo.vue    | 46 ++++++++++
 .../src/components/widgets/PatientPopup.vue   | 88 ++++++++++++++-----
 frontend/src/sockets/MessageData.ts           |  2 +-
 frontend/src/sockets/SocketTrainer.ts         | 10 ++-
 frontend/src/stores/Availables.ts             | 14 ++-
 frontend/src/stores/Exercise.ts               |  1 +
 7 files changed, 174 insertions(+), 33 deletions(-)
 create mode 100644 frontend/src/components/widgets/PatientInfo.vue

diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index e4f2def1..6d648172 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -3,6 +3,7 @@
 	import {useExerciseStore} from '@/stores/Exercise'
 	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
 	import PatientPopup from '@/components/widgets/PatientPopup.vue'
+	import { useAvailablesStore } from '@/stores/Availables'
 
     const props = defineProps({
 		currentArea: {
@@ -23,6 +24,12 @@
 		currentPatientId.value = patientId
 		showPopup.value = true
 	}
+
+	const availablesStore = useAvailablesStore()
+
+	function getTriageColor(patientCode: number) {
+		return availablesStore.getPatient(patientCode)?.triage
+	}
 </script>
 
 <template>
@@ -33,10 +40,14 @@
 			:key="patient.patientName"
 			class="listitem"
 		>
-			<button class="areaButton" @click="openPatient(patient.patientId)">
-				{{ patient.patientCode }}
-				{{ patient.patientName }}
-				{{ patient.patientId }}
+			<button class="areaButton" @click="openPatient(patient.patientId); getTriageColor(patient.patientCode)">
+				<div :class="getTriageColor(patient.patientCode)" class="patientCode">
+					{{ patient.patientCode }}
+				</div>
+				<div class="patientName">
+					{{ patient.patientName }}
+					{{ patient.patientId }}
+				</div>
 			</button>
 			<ToggleSwitchForListItems />
 		</div>
@@ -71,6 +82,7 @@
 		align-items: center;
 		font-size: 1.25rem;
 		padding: .75rem 1rem;
+		padding-left: 0;
 		text-align: left;
 		height: 50px;
 		width: 100%;
@@ -95,4 +107,30 @@
 		padding: .75rem 1rem;
 		margin-top: -1px;
 	}
+
+	.patientCode {
+		position: relative;
+		display: inline-block;
+		height: 50px;
+		padding: .75rem 1rem;
+		display: flex;
+		align-items: center;
+		text-align: center;
+	}
+
+	.patientName {
+		padding: .75rem 1rem;
+	}
+
+	.red {
+		background-color: red;
+	}
+
+	.yellow {
+		background-color: yellow;
+	}
+
+	.green {
+		background-color: green;
+	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/PatientInfo.vue b/frontend/src/components/widgets/PatientInfo.vue
new file mode 100644
index 00000000..d423c7c4
--- /dev/null
+++ b/frontend/src/components/widgets/PatientInfo.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+	const props = defineProps({
+		injury: {
+			type: String,
+			default: 'No Injury'
+		},
+		history: {
+			type: String,
+			default: 'No Injury'
+		},
+		personalDetails: {
+			type: String,
+			default: 'No Injury'
+		},
+		biometrics: {
+			type: String,
+			default: 'No Injury'
+		}
+
+	})
+</script>
+
+<template>
+	<p class="key">
+		Verletzung
+	</p>{{ props.injury }}
+	<br>
+	<p class="key">
+		Vorerkrankungen
+	</p>{{ props.history }}
+	<br>
+	<p class="key">
+		Personalien
+	</p>{{ props.personalDetails }}
+	<br>
+	<p class="key">
+		Biometrie
+	</p>{{ props.biometrics }}
+	<br>
+</template>
+
+<style scoped>
+	.key {
+		font-weight: bold;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/PatientPopup.vue b/frontend/src/components/widgets/PatientPopup.vue
index c8862945..3ae1502e 100644
--- a/frontend/src/components/widgets/PatientPopup.vue
+++ b/frontend/src/components/widgets/PatientPopup.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 	import socketTrainer from "@/sockets/SocketTrainer"
 	import { useAvailablesStore } from "@/stores/Availables"
+	import PatientStatus from "./PatientStatus.vue"
+	import PatientInfo from "./PatientInfo.vue"
+	import { computed, ref } from "vue"
 
 	const emit = defineEmits(['close-popup'])
 
@@ -11,35 +14,47 @@
 		}
 	})
 
-	const availablePatients = useAvailablesStore().patients
+	const availablesStore = useAvailablesStore()
+
+	const availablePatients = availablesStore.patients
+
+	const currentPatientCode = ref(Number.NEGATIVE_INFINITY)
+
+	const currentPatient = computed(() => availablesStore.getPatient(currentPatientCode.value))
 </script>
 
 <template>
 	<div class="popup-overlay" @click="emit('close-popup')">
-		<div class="popup">
+		<div class="popup" @click.stop="">
 			<div id="leftSide">
-				<h2>{{ props.patientId }}</h2>
 				<div id="list">
-					Hier sollte die Liste stehen
-					{{ availablePatients }}
-					<div
+					<button
 						v-for="patient in availablePatients"
 						:key="patient.patientCode"
 						class="listitem"
+						:class="patient.triage"
+						@click="currentPatientCode = patient.patientCode; console.log(currentPatientCode)"
 					>
-						<button class="areaButton">
-							{{ patient.patientCode }}
-						</button>
-					</div>
+						{{ patient.patientCode }}
+					</button>
 				</div>
 			</div>
 			<div id="rightSide">
-				<button id="deleteButton">
-					Löschen
-				</button>
-				<button id="saveButton">
-					Speichern
-				</button>
+				<h2>{{ props.patientId }}</h2>
+				<PatientInfo
+					:injury="currentPatient?.patientInjury"
+					:history="currentPatient?.patientHistory"
+					:biometrics="currentPatient?.patientBiometrics"
+					:personal-details="currentPatient?.patientPersonalDetails"
+				/>
+				<div id="buttonRow">
+					<button id="deleteButton">
+						Löschen
+					</button>
+					<button id="saveButton">
+						Speichern
+					</button>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -65,19 +80,27 @@
 		padding: 20px;
 		border-radius: 8px;
 		width: 80vw;
-		
+		display: flex;
 	}
 
-	#leftSide, #rightSide {
+	#leftSide {
 		float: left;
 		display: flex;
 		width: 50%;
 		padding: 10px;
 	}
 
+	#rightSide {
+		width: 50%;
+		padding: 10px;
+	}
+
+	#buttonRow {
+		display: flex;
+	}
+
 	#deleteButton, #saveButton {
 		position: relative;
-		background-color: #ee4035;
 		color: white;
 		border: 1px solid rgb(209, 213, 219);
 		border-radius: .5rem;
@@ -86,7 +109,10 @@
 		padding: .75rem 1rem;
 		text-align: center;
 		margin-top: 10px;
-		float: left;
+	}
+
+	#deleteButton {
+		background-color: #ee4035;
 	}
 
 	#saveButton {
@@ -94,9 +120,7 @@
 	}
 
 	#list {
-		margin-top: 90px;
-		margin-left: 30px;
-		margin-right: 30px;
+		display: flex;
 	}
 
 	.listitem {
@@ -105,7 +129,23 @@
 		border: 1px solid rgb(209, 213, 219);
 		display: flex;
 		align-items: center;
-		text-align: left;
 		margin-top: -1px;
+		font-size: 1.25rem;
+		padding: .75rem 1rem;
+		text-align: left;
+		height: 50px;
+		width: 100%;
+	}
+
+	.red {
+		background-color: red;
+	}
+
+	.yellow {
+		background-color: yellow;
+	}
+
+	.green {
+		background-color: green;
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
index fc0b9a7e..2e2c2956 100644
--- a/frontend/src/sockets/MessageData.ts
+++ b/frontend/src/sockets/MessageData.ts
@@ -92,7 +92,7 @@ interface AvailableActions {
 }
 
 interface AvailablePatients {
-	patients: AvailablePatient[],
+	availablePatients: AvailablePatient[],
 }
 
 interface AvailableMaterial {
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index da83c4ac..b49214bb 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -127,9 +127,13 @@ export const serverMockEvents = [
 	{id: 'test-passthrough', data: '{"messageType":"test-passthrough","message":"received test-passthrough event"}'},
 	{
 		id: "available-patients",
-		data: '{"messageType": "available-patients","availablePatients": [{"patientCode": 2,"triage": "red","patientInjury": "Fractured limb",' +
-			'"patientHistory": "No known allergies","patientPersonalDetails": "John Doe, Male, 30 years old",' +
-			'"patientBiometrics": "Height: 180cm, Weight: 75kg"}]}'
+		data: '{"messageType":"available-patients","availablePatients":{"availablePatients":[{"patientCode":201,'+
+			'"triage":"red","patientInjury":"Fractured limb",' +
+			'"patientHistory":"No known allergies","patientPersonalDetails":"John Doe, Male, 30 years old",' +
+			'"patientBiometrics":"Height:180cm, Weight: 75kg"},{"patientCode":202,'+
+			'"triage":"green","patientInjury":"Fractured hand",' +
+			'"patientHistory":"No known allergies","patientPersonalDetails":"Jane Doe, Female, 18 years old",' +
+			'"patientBiometrics":"Height:160cm, Weight: 55kg"}]}}'
 	},
 	{
 		id: 'exercise',
diff --git a/frontend/src/stores/Availables.ts b/frontend/src/stores/Availables.ts
index 6f432143..19f2ab04 100644
--- a/frontend/src/stores/Availables.ts
+++ b/frontend/src/stores/Availables.ts
@@ -6,12 +6,24 @@ export const useAvailablesStore = defineStore('availables', {
 		patients: [],
 		material: [],
 	}),
+	getters: {
+		getPatient: (state) => {
+			return (patientCode: number): AvailablePatient | null => {
+				let foundPatient: AvailablePatient | null = null
+				state.patients.forEach((patient) => {
+					if (patient.patientCode == patientCode) foundPatient = patient
+				})
+				return foundPatient
+			}
+		}
+	},
 	actions: {
 		loadAvailableActions(json: AvailableActions) {
 			this.actions = json.actions
 		},
 		loadAvailablePatients(json: AvailablePatients) {
-			this.patients = json.patients
+			console.log("AvailablePatients: "+JSON.stringify(json))
+			this.patients = json.availablePatients
 		},
 		loadAvailableMaterial(json: AvailableMaterial) {
 			this.material = json.material
diff --git a/frontend/src/stores/Exercise.ts b/frontend/src/stores/Exercise.ts
index 23ed34b1..7ec2894a 100644
--- a/frontend/src/stores/Exercise.ts
+++ b/frontend/src/stores/Exercise.ts
@@ -41,6 +41,7 @@ export const useExerciseStore = defineStore('exercise', {
 	},
 	actions: {
 		createFromJSON(json: Exercise) {
+			console.log("Exercise: "+JSON.stringify(json))
 			this.exerciseId = json.exerciseId
 			this.areas = json.areas
 		}

From d6a0aa35de870d34102294b7613af6bd11decf93 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Wed, 13 Mar 2024 12:41:51 +0100
Subject: [PATCH 05/22] #84 frontend: add patient selection tool

---
 frontend/src/assets/main.css                  | 16 ++++++++
 .../pagesResourceCreation/PagePatients.vue    | 34 ++++-------------
 .../src/components/widgets/PatientPopup.vue   | 38 ++++++++++++++-----
 .../components/widgets/TriageForListItems.vue | 37 ++++++++++++++++++
 4 files changed, 89 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/components/widgets/TriageForListItems.vue

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 80f2b099..36769fcb 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -20,4 +20,20 @@ button:hover {
 button:active {
   cursor: pointer;
   filter: brightness(90%);
+}
+
+.gray {
+  background-color: gray;
+}
+
+.red {
+  background-color: red;
+}
+
+.yellow {
+  background-color: yellow;
+}
+
+.green {
+  background-color: green;
 }
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index 6d648172..00db8cdb 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -4,6 +4,7 @@
 	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
 	import PatientPopup from '@/components/widgets/PatientPopup.vue'
 	import { useAvailablesStore } from '@/stores/Availables'
+import TriageForListItems from '@/components/widgets/TriageForListItems.vue'
 
     const props = defineProps({
 		currentArea: {
@@ -28,7 +29,10 @@
 	const availablesStore = useAvailablesStore()
 
 	function getTriageColor(patientCode: number) {
-		return availablesStore.getPatient(patientCode)?.triage
+		if(availablesStore.getPatient(patientCode)?.triage){
+			return availablesStore.getPatient(patientCode)?.triage
+		}
+		return "gray"
 	}
 </script>
 
@@ -41,12 +45,12 @@
 			class="listitem"
 		>
 			<button class="areaButton" @click="openPatient(patient.patientId); getTriageColor(patient.patientCode)">
-				<div :class="getTriageColor(patient.patientCode)" class="patientCode">
-					{{ patient.patientCode }}
+				<div class="patientName">
+					{{ patient.patientId }}
 				</div>
+				<TriageForListItems :patient-code="patient.patientCode" />
 				<div class="patientName">
 					{{ patient.patientName }}
-					{{ patient.patientId }}
 				</div>
 			</button>
 			<ToggleSwitchForListItems />
@@ -108,29 +112,7 @@
 		margin-top: -1px;
 	}
 
-	.patientCode {
-		position: relative;
-		display: inline-block;
-		height: 50px;
-		padding: .75rem 1rem;
-		display: flex;
-		align-items: center;
-		text-align: center;
-	}
-
 	.patientName {
 		padding: .75rem 1rem;
 	}
-
-	.red {
-		background-color: red;
-	}
-
-	.yellow {
-		background-color: yellow;
-	}
-
-	.green {
-		background-color: green;
-	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/PatientPopup.vue b/frontend/src/components/widgets/PatientPopup.vue
index 3ae1502e..312c4b8f 100644
--- a/frontend/src/components/widgets/PatientPopup.vue
+++ b/frontend/src/components/widgets/PatientPopup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-	import socketTrainer from "@/sockets/SocketTrainer"
 	import { useAvailablesStore } from "@/stores/Availables"
-	import PatientStatus from "./PatientStatus.vue"
 	import PatientInfo from "./PatientInfo.vue"
 	import { computed, ref } from "vue"
+	import TriageForListItems from "./TriageForListItems.vue"
+	import { useExerciseStore } from "@/stores/Exercise"
 
 	const emit = defineEmits(['close-popup'])
 
@@ -15,12 +15,14 @@
 	})
 
 	const availablesStore = useAvailablesStore()
-
 	const availablePatients = availablesStore.patients
 
 	const currentPatientCode = ref(Number.NEGATIVE_INFINITY)
+	const currentPatient = computed(() => availablesStore.getPatient(currentPatientCode.value))	
+
+	const exerciseStore = useExerciseStore()
+	const currentPatientName = computed(() => exerciseStore.getPatient(props.patientId)?.patientName)	
 
-	const currentPatient = computed(() => availablesStore.getPatient(currentPatientCode.value))
 </script>
 
 <template>
@@ -31,7 +33,7 @@
 					<button
 						v-for="patient in availablePatients"
 						:key="patient.patientCode"
-						class="listitem"
+						class="availablePatientButton"
 						:class="patient.triage"
 						@click="currentPatientCode = patient.patientCode; console.log(currentPatientCode)"
 					>
@@ -40,7 +42,15 @@
 				</div>
 			</div>
 			<div id="rightSide">
-				<h2>{{ props.patientId }}</h2>
+				<div class="listitem">
+					<div class="patientId">
+						{{ props.patientId }}
+					</div>
+					<TriageForListItems :patient-code="currentPatientCode" />
+					<div class="patientName">
+						{{ currentPatientName }}
+					</div>
+				</div>
 				<PatientInfo
 					:injury="currentPatient?.patientInjury"
 					:history="currentPatient?.patientHistory"
@@ -123,7 +133,7 @@
 		display: flex;
 	}
 
-	.listitem {
+	.availablePatientButton, .listitem {
 		position: relative;
 		background-color: #FFFFFF;
 		border: 1px solid rgb(209, 213, 219);
@@ -137,15 +147,23 @@
 		width: 100%;
 	}
 
+	.listitem {
+		padding-left: 0;
+	}
+
+	.patientId, .patientName {
+		padding: .75rem 1rem;
+	}
+	
 	.red {
-		background-color: red;
+	background-color: red;
 	}
 
 	.yellow {
-		background-color: yellow;
+	background-color: yellow;
 	}
 
 	.green {
-		background-color: green;
+	background-color: green;
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/TriageForListItems.vue b/frontend/src/components/widgets/TriageForListItems.vue
new file mode 100644
index 00000000..be5962f2
--- /dev/null
+++ b/frontend/src/components/widgets/TriageForListItems.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+	import { useAvailablesStore } from '@/stores/Availables'
+
+    const props = defineProps({
+		patientCode: {
+			type: Number,
+			default: Number.NEGATIVE_INFINITY
+		}
+	})
+
+	const availablesStore = useAvailablesStore()
+
+	function getTriageColor(patientCode: number) {
+		if(availablesStore.getPatient(patientCode)?.triage){
+			return availablesStore.getPatient(patientCode)?.triage
+		}
+		return "gray"
+	}
+</script>
+
+<template>
+	<div :class="getTriageColor(props.patientCode)" class="patientCode">
+		{{ props.patientCode }}
+	</div>
+</template>
+
+<style scoped>
+	.patientCode {
+		position: relative;
+		display: inline-block;
+		height: 50px;
+		padding: .75rem 1rem;
+		display: flex;
+		align-items: center;
+		text-align: center;
+	}
+</style>
\ No newline at end of file

From 603f08cf2962668415602d72c2ad86687f007726 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Fri, 15 Mar 2024 11:46:51 +0100
Subject: [PATCH 06/22] #84 frontend: add ability to shwitch patient in popup

---
 .../pagesResourceCreation/PagePatients.vue    |  6 ++---
 .../src/components/widgets/PatientPopup.vue   | 25 +++++++++++++------
 .../widgets/ToggleSwitchForListItems.vue      | 12 ++++++++-
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index 00db8cdb..cb28ab08 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -45,7 +45,7 @@ import TriageForListItems from '@/components/widgets/TriageForListItems.vue'
 			class="listitem"
 		>
 			<button class="areaButton" @click="openPatient(patient.patientId); getTriageColor(patient.patientCode)">
-				<div class="patientName">
+				<div class="patientId">
 					{{ patient.patientId }}
 				</div>
 				<TriageForListItems :patient-code="patient.patientCode" />
@@ -53,7 +53,7 @@ import TriageForListItems from '@/components/widgets/TriageForListItems.vue'
 					{{ patient.patientName }}
 				</div>
 			</button>
-			<ToggleSwitchForListItems />
+			<ToggleSwitchForListItems default="active" />
 		</div>
 		<button id="addAreaButton">
 			Patient hinzufügen
@@ -112,7 +112,7 @@ import TriageForListItems from '@/components/widgets/TriageForListItems.vue'
 		margin-top: -1px;
 	}
 
-	.patientName {
+	.patientId, .patientName {
 		padding: .75rem 1rem;
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/PatientPopup.vue b/frontend/src/components/widgets/PatientPopup.vue
index 312c4b8f..821889e0 100644
--- a/frontend/src/components/widgets/PatientPopup.vue
+++ b/frontend/src/components/widgets/PatientPopup.vue
@@ -14,14 +14,25 @@
 		}
 	})
 
+	const exerciseStore = useExerciseStore()
+	const currentPatientName = computed(() => exerciseStore.getPatient(props.patientId)?.patientName)
+	const currentPatientCode = ref(exerciseStore.getPatient(props.patientId)?.patientCode)
+
 	const availablesStore = useAvailablesStore()
 	const availablePatients = availablesStore.patients
 
-	const currentPatientCode = ref(Number.NEGATIVE_INFINITY)
-	const currentPatient = computed(() => availablesStore.getPatient(currentPatientCode.value))	
-
-	const exerciseStore = useExerciseStore()
-	const currentPatientName = computed(() => exerciseStore.getPatient(props.patientId)?.patientName)	
+	const currentPatient = computed(() => {
+		if (currentPatientCode.value !== undefined) {
+			return availablesStore.getPatient(currentPatientCode.value)
+		}
+		return null
+	})
+	
+	function changePatient(patientCode: number){
+		if (currentPatient.value && currentPatient.value.patientCode !== undefined) {
+			currentPatientCode.value = patientCode
+		}
+	}
 
 </script>
 
@@ -35,7 +46,7 @@
 						:key="patient.patientCode"
 						class="availablePatientButton"
 						:class="patient.triage"
-						@click="currentPatientCode = patient.patientCode; console.log(currentPatientCode)"
+						@click="changePatient(patient.patientCode)"
 					>
 						{{ patient.patientCode }}
 					</button>
@@ -46,7 +57,7 @@
 					<div class="patientId">
 						{{ props.patientId }}
 					</div>
-					<TriageForListItems :patient-code="currentPatientCode" />
+					<TriageForListItems :patient-code="currentPatient?.patientCode" />
 					<div class="patientName">
 						{{ currentPatientName }}
 					</div>
diff --git a/frontend/src/components/widgets/ToggleSwitchForListItems.vue b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
index b811e422..03ac992d 100644
--- a/frontend/src/components/widgets/ToggleSwitchForListItems.vue
+++ b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
@@ -1,7 +1,17 @@
+<script setup lang="ts">
+	const props = defineProps({
+		isChecked: {
+			type: Boolean,
+			default: true
+		}
+	})
+	const emits = defineEmits(['update:isChecked'])
+</script>
+
 <template>
 	<div class="toggleSwitch">
 		<label>
-			<input type="checkbox">
+			<input type="checkbox" :checked="props.isChecked" @change="$emit('update:isChecked', !props.isChecked)">
 			<span class="slider" />
 		</label>
 	</div>

From 0a950c1142588bf615f41e5519c6c9a08ec32acb Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Fri, 15 Mar 2024 12:42:21 +0100
Subject: [PATCH 07/22] #84 frontend: add patientUpdate and patientDelete

---
 .../screensTrainer/ScreenExerciseCreation.vue |  5 +++++
 .../src/components/widgets/PatientPopup.vue   | 20 +++++++++++++++----
 .../widgets/ToggleSwitchForListItems.vue      |  3 +--
 frontend/src/sockets/SocketTrainer.ts         | 16 +++++++++++++++
 4 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
index ee2b46ef..77e120ef 100644
--- a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
+++ b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
@@ -38,6 +38,7 @@
 			v-for="area in areas"
 			:key="area.areaName"
 			class="listitem"
+			:class="{ 'selected': currentArea === area.areaName }"
 		>
 			<button class="areaButton" @click="openArea(area.areaName)">
 				{{ area.areaName }}
@@ -112,4 +113,8 @@
 		padding: .75rem 1rem;
 		margin-top: -1px;
 	}
+
+	.selected .areaButton {
+		filter: brightness(90%);
+	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/PatientPopup.vue b/frontend/src/components/widgets/PatientPopup.vue
index 821889e0..b5c31236 100644
--- a/frontend/src/components/widgets/PatientPopup.vue
+++ b/frontend/src/components/widgets/PatientPopup.vue
@@ -4,6 +4,7 @@
 	import { computed, ref } from "vue"
 	import TriageForListItems from "./TriageForListItems.vue"
 	import { useExerciseStore } from "@/stores/Exercise"
+	import socketTrainer from "@/sockets/SocketTrainer"
 
 	const emit = defineEmits(['close-popup'])
 
@@ -14,6 +15,14 @@
 		}
 	})
 
+	function deletePatient(patientId: number){
+		socketTrainer.patientDelete(patientId)
+	}
+
+	function updatePatient(patientId: number, patientName: string, patientCode: number){
+		socketTrainer.patientUpdate(patientId, patientName, patientCode)
+	}
+
 	const exerciseStore = useExerciseStore()
 	const currentPatientName = computed(() => exerciseStore.getPatient(props.patientId)?.patientName)
 	const currentPatientCode = ref(exerciseStore.getPatient(props.patientId)?.patientCode)
@@ -28,7 +37,7 @@
 		return null
 	})
 	
-	function changePatient(patientCode: number){
+	function changePatientCode(patientCode: number){
 		if (currentPatient.value && currentPatient.value.patientCode !== undefined) {
 			currentPatientCode.value = patientCode
 		}
@@ -46,7 +55,7 @@
 						:key="patient.patientCode"
 						class="availablePatientButton"
 						:class="patient.triage"
-						@click="changePatient(patient.patientCode)"
+						@click="changePatientCode(patient.patientCode)"
 					>
 						{{ patient.patientCode }}
 					</button>
@@ -69,10 +78,13 @@
 					:personal-details="currentPatient?.patientPersonalDetails"
 				/>
 				<div id="buttonRow">
-					<button id="deleteButton">
+					<button id="deleteButton" @click="deletePatient(props.patientId)">
 						Löschen
 					</button>
-					<button id="saveButton">
+					<button
+						id="saveButton"
+						@click="updatePatient(props.patientId, currentPatientName || '', currentPatient?.patientCode || Number.NEGATIVE_INFINITY)"
+					>
 						Speichern
 					</button>
 				</div>
diff --git a/frontend/src/components/widgets/ToggleSwitchForListItems.vue b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
index 03ac992d..bd3f2b14 100644
--- a/frontend/src/components/widgets/ToggleSwitchForListItems.vue
+++ b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
@@ -5,13 +5,12 @@
 			default: true
 		}
 	})
-	const emits = defineEmits(['update:isChecked'])
 </script>
 
 <template>
 	<div class="toggleSwitch">
 		<label>
-			<input type="checkbox" :checked="props.isChecked" @change="$emit('update:isChecked', !props.isChecked)">
+			<input type="checkbox" :checked="props.isChecked">
 			<span class="slider" />
 		</label>
 	</div>
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index b49214bb..29764ad3 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -117,6 +117,22 @@ class SocketTrainer {
 			'areaName': areaName
 		}))
 	}
+
+	patientUpdate(patientId: number, patientName: string, patientCode: number) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'patient-update',
+			'patientId': patientId,
+			'patientName': patientName,
+			'patientCode': patientCode
+		}))
+	}
+
+	patientDelete(patientId: number) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'patient-delete',
+			'patientId': patientId
+		}))
+	}
 }
 
 const socketTrainer = new SocketTrainer('ws://localhost:8000/ws/trainer/?token=')

From 739f0a0142055b49c02f6666bd920981982990cd Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Fri, 15 Mar 2024 15:35:34 +0100
Subject: [PATCH 08/22] #84 frontend: AddPatientPopup

---
 .../pagesResourceCreation/PagePatients.vue    |  42 ++--
 .../components/widgets/AddPatientPopup.vue    | 182 ++++++++++++++++++
 ...{PatientPopup.vue => EditPatientPopup.vue} |  30 +--
 .../components/widgets/PatientCodeList.vue    |  59 ++++++
 .../components/widgets/TriageForListItems.vue |   9 +-
 frontend/src/sockets/SocketTrainer.ts         |  13 ++
 frontend/src/stores/Availables.ts             |   1 -
 frontend/src/stores/Exercise.ts               |  14 +-
 8 files changed, 308 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/components/widgets/AddPatientPopup.vue
 rename frontend/src/components/widgets/{PatientPopup.vue => EditPatientPopup.vue} (85%)
 create mode 100644 frontend/src/components/widgets/PatientCodeList.vue

diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index cb28ab08..d97a9e1c 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -2,9 +2,9 @@
 	import {computed, ref} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
 	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
-	import PatientPopup from '@/components/widgets/PatientPopup.vue'
-	import { useAvailablesStore } from '@/stores/Availables'
-import TriageForListItems from '@/components/widgets/TriageForListItems.vue'
+	import EditPatientPopup from '@/components/widgets/EditPatientPopup.vue'
+	import AddPatientPopup from '@/components/widgets/AddPatientPopup.vue'
+	import TriageForListItems from '@/components/widgets/TriageForListItems.vue'
 
     const props = defineProps({
 		currentArea: {
@@ -17,34 +17,46 @@ import TriageForListItems from '@/components/widgets/TriageForListItems.vue'
 
 	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
 
-	const showPopup = ref(false)
+	const showEditPatientPopup = ref(false)
+	const showAddPatientPopup = ref(false)
 
 	const currentPatientId = ref(Number.NEGATIVE_INFINITY)
 
-	function openPatient(patientId: number) {
+	function editPatient(patientId: number) {
 		currentPatientId.value = patientId
-		showPopup.value = true
+		showEditPatientPopup.value = true
 	}
 
-	const availablesStore = useAvailablesStore()
+	const firstNameList =  ['John', 'Jane', 'Michael', 'Emily', 'David', 'Sarah']
+    const surnameList = ['Smith', 'Johnson', 'Williams', 'Jones', 'Brown', 'Davis']
 
-	function getTriageColor(patientCode: number) {
-		if(availablesStore.getPatient(patientCode)?.triage){
-			return availablesStore.getPatient(patientCode)?.triage
-		}
-		return "gray"
+	function generateName(){
+		const firstName = firstNameList[Math.floor(Math.random() * firstNameList.length)]
+		const surname = surnameList[Math.floor(Math.random() * surnameList.length)]
+		return `${firstName} ${surname}`
+	}
+
+	const newPatientId = ref(Number.NEGATIVE_INFINITY)
+	const newPatientName = ref('No Name')
+
+	function addPatient() {
+		newPatientId.value = exerciseStore.getNewPatientId()
+		newPatientName.value = generateName()
+		currentPatientId.value = newPatientId.value
+		showAddPatientPopup.value = true
 	}
 </script>
 
 <template>
-	<PatientPopup v-if="showPopup" :patient-id="currentPatientId" @close-popup="showPopup=false" />
+	<EditPatientPopup v-if="showEditPatientPopup" :patient-id="currentPatientId" @close-popup="showEditPatientPopup=false" />
+	<AddPatientPopup v-if="showAddPatientPopup" :patient-id="newPatientId" :patient-name="newPatientName" @close-popup="showAddPatientPopup=false" />
 	<div id="list">
 		<div
 			v-for="patient in currentAreaData?.patients"
 			:key="patient.patientName"
 			class="listitem"
 		>
-			<button class="areaButton" @click="openPatient(patient.patientId); getTriageColor(patient.patientCode)">
+			<button class="areaButton" @click="editPatient(patient.patientId)">
 				<div class="patientId">
 					{{ patient.patientId }}
 				</div>
@@ -55,7 +67,7 @@ import TriageForListItems from '@/components/widgets/TriageForListItems.vue'
 			</button>
 			<ToggleSwitchForListItems default="active" />
 		</div>
-		<button id="addAreaButton">
+		<button id="addAreaButton" @click="addPatient()">
 			Patient hinzufügen
 		</button>
 	</div>
diff --git a/frontend/src/components/widgets/AddPatientPopup.vue b/frontend/src/components/widgets/AddPatientPopup.vue
new file mode 100644
index 00000000..be03f711
--- /dev/null
+++ b/frontend/src/components/widgets/AddPatientPopup.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+	import { useAvailablesStore } from "@/stores/Availables"
+	import PatientInfo from "./PatientInfo.vue"
+	import { computed, ref } from "vue"
+	import TriageForListItems from "./TriageForListItems.vue"
+	import { useExerciseStore } from "@/stores/Exercise"
+	import socketTrainer from "@/sockets/SocketTrainer"
+	import PatientCodeList from "./PatientCodeList.vue"
+	import {showErrorToast} from "@/App.vue"
+
+	const emit = defineEmits(['close-popup'])
+
+	const props = defineProps({
+		patientId: {
+			type: Number,
+			default: Number.NEGATIVE_INFINITY
+		},
+		patientName: {
+			type: String,
+			default: 'No Name'
+		}
+	})
+
+	const exerciseStore = useExerciseStore()
+
+	function addPatient(){
+		if(!patientCodeChanged) {
+			showErrorToast('Es wurde kein Patientencode ausgewählt')
+			return
+		}
+		const areaName = exerciseStore.getAreaOfPatient(props.patientId)?.toString()
+		socketTrainer.patientAdd(areaName || '', props.patientId, props.patientName, currentPatientCode.value || Number.NEGATIVE_INFINITY)
+	}
+
+	const currentPatientCode = ref(exerciseStore.getPatient(props.patientId)?.patientCode)
+
+	const availablesStore = useAvailablesStore()
+
+	const currentPatient = computed(() => {
+		if (currentPatientCode.value !== undefined) {
+			return availablesStore.getPatient(currentPatientCode.value)
+		}
+		return null
+	})
+
+	let patientCodeChanged = false
+	
+	function changePatientCode(patientCode: number){
+		currentPatientCode.value = patientCode
+		patientCodeChanged = true
+	}
+
+</script>
+
+<template>
+	<div class="popup-overlay" @click="emit('close-popup')">
+		<div class="popup" @click.stop="">
+			<div id="leftSide">
+				<PatientCodeList @change-patient="changePatientCode" />
+			</div>
+			<div id="rightSide">
+				<div class="listitem">
+					<div class="patientId">
+						{{ props.patientId }}
+					</div>
+					<TriageForListItems :patient-code="currentPatient?.patientCode" />
+					<div class="patientName">
+						{{ props.patientName }}
+					</div>
+				</div>
+				<PatientInfo
+					:injury="currentPatient?.patientInjury"
+					:history="currentPatient?.patientHistory"
+					:biometrics="currentPatient?.patientBiometrics"
+					:personal-details="currentPatient?.patientPersonalDetails"
+				/>
+				<div id="buttonRow">
+					<button
+						id="saveButton"
+						@click="addPatient()"
+					>
+						Patient hinzufügen
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+	.popup-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		z-index: 1;
+	}
+
+	.popup {
+		background-color: white;
+		padding: 20px;
+		border-radius: 8px;
+		width: 80vw;
+		display: flex;
+	}
+
+	#leftSide {
+		float: left;
+		display: flex;
+		width: 50%;
+		padding: 10px;
+	}
+
+	#rightSide {
+		width: 50%;
+		padding: 10px;
+	}
+
+	#buttonRow {
+		display: flex;
+	}
+
+	#deleteButton, #saveButton {
+		position: relative;
+		color: white;
+		border: 1px solid rgb(209, 213, 219);
+		border-radius: .5rem;
+		width: 100%;
+		font-size: 1.25rem;
+		padding: .75rem 1rem;
+		text-align: center;
+		margin-top: 10px;
+	}
+
+	#deleteButton {
+		background-color: #ee4035;
+	}
+
+	#saveButton {
+		background-color: #269f42;
+	}
+
+	.listitem {
+		position: relative;
+		background-color: #FFFFFF;
+		border: 1px solid rgb(209, 213, 219);
+		display: flex;
+		align-items: center;
+		margin-top: -1px;
+		font-size: 1.25rem;
+		padding: .75rem 1rem;
+		text-align: left;
+		height: 50px;
+		width: 100%;
+	}
+
+	.listitem {
+		padding-left: 0;
+	}
+
+	.patientId, .patientName {
+		padding: .75rem 1rem;
+	}
+	
+	.red {
+		background-color: red;
+	}
+
+	.yellow {
+		background-color: yellow;
+	}
+
+	.green {
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/PatientPopup.vue b/frontend/src/components/widgets/EditPatientPopup.vue
similarity index 85%
rename from frontend/src/components/widgets/PatientPopup.vue
rename to frontend/src/components/widgets/EditPatientPopup.vue
index b5c31236..e845be9e 100644
--- a/frontend/src/components/widgets/PatientPopup.vue
+++ b/frontend/src/components/widgets/EditPatientPopup.vue
@@ -5,6 +5,7 @@
 	import TriageForListItems from "./TriageForListItems.vue"
 	import { useExerciseStore } from "@/stores/Exercise"
 	import socketTrainer from "@/sockets/SocketTrainer"
+	import PatientCodeList from "./PatientCodeList.vue"
 
 	const emit = defineEmits(['close-popup'])
 
@@ -28,7 +29,6 @@
 	const currentPatientCode = ref(exerciseStore.getPatient(props.patientId)?.patientCode)
 
 	const availablesStore = useAvailablesStore()
-	const availablePatients = availablesStore.patients
 
 	const currentPatient = computed(() => {
 		if (currentPatientCode.value !== undefined) {
@@ -38,9 +38,7 @@
 	})
 	
 	function changePatientCode(patientCode: number){
-		if (currentPatient.value && currentPatient.value.patientCode !== undefined) {
-			currentPatientCode.value = patientCode
-		}
+		currentPatientCode.value = patientCode
 	}
 
 </script>
@@ -49,17 +47,7 @@
 	<div class="popup-overlay" @click="emit('close-popup')">
 		<div class="popup" @click.stop="">
 			<div id="leftSide">
-				<div id="list">
-					<button
-						v-for="patient in availablePatients"
-						:key="patient.patientCode"
-						class="availablePatientButton"
-						:class="patient.triage"
-						@click="changePatientCode(patient.patientCode)"
-					>
-						{{ patient.patientCode }}
-					</button>
-				</div>
+				<PatientCodeList @change-patient="changePatientCode" />
 			</div>
 			<div id="rightSide">
 				<div class="listitem">
@@ -152,11 +140,7 @@
 		background-color: #269f42;
 	}
 
-	#list {
-		display: flex;
-	}
-
-	.availablePatientButton, .listitem {
+	.listitem {
 		position: relative;
 		background-color: #FFFFFF;
 		border: 1px solid rgb(209, 213, 219);
@@ -179,14 +163,14 @@
 	}
 	
 	.red {
-	background-color: red;
+		background-color: red;
 	}
 
 	.yellow {
-	background-color: yellow;
+		background-color: yellow;
 	}
 
 	.green {
-	background-color: green;
+		background-color: green;
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/PatientCodeList.vue b/frontend/src/components/widgets/PatientCodeList.vue
new file mode 100644
index 00000000..49c110dd
--- /dev/null
+++ b/frontend/src/components/widgets/PatientCodeList.vue
@@ -0,0 +1,59 @@
+<template>
+	<div id="list">
+		<button
+			v-for="patient in availablePatients"
+			:key="patient.patientCode"
+			class="availablePatientButton"
+			:class="patient.triage"
+			@click="changePatient(patient.patientCode)"
+		>
+			{{ patient.patientCode }}
+		</button>
+	</div>
+</template>
+  
+  <script setup lang="ts">
+    import { useAvailablesStore } from "@/stores/Availables"
+  
+    const availablesStore = useAvailablesStore()
+    const availablePatients = availablesStore.patients
+  
+    const emit = defineEmits(['change-patient'])
+  
+    function changePatient(patientCode: number) {
+      emit('change-patient', patientCode)
+    }
+  </script>
+  
+  <style scoped>
+    #list {
+        display: flex;
+    }
+
+    .availablePatientButton {
+        position: relative;
+        background-color: #FFFFFF;
+        border: 1px solid rgb(209, 213, 219);
+		display: flex;
+		align-items: center;
+		margin-top: -1px;
+		font-size: 1.25rem;
+		padding: .75rem 1rem;
+		text-align: left;
+		height: 50px;
+		width: 100%;
+	}
+	
+	.red {
+        background-color: red;
+	}
+
+	.yellow {
+        background-color: yellow;
+	}
+
+	.green {
+        background-color: green;
+	}
+  </style>
+  
\ No newline at end of file
diff --git a/frontend/src/components/widgets/TriageForListItems.vue b/frontend/src/components/widgets/TriageForListItems.vue
index be5962f2..d1995f0e 100644
--- a/frontend/src/components/widgets/TriageForListItems.vue
+++ b/frontend/src/components/widgets/TriageForListItems.vue
@@ -16,11 +16,18 @@
 		}
 		return "gray"
 	}
+
+	function getPatientCodeLabel(patientCode: number) {
+		if (patientCode === Number.NEGATIVE_INFINITY) {
+			return ""
+		}
+		return patientCode.toString()
+	}
 </script>
 
 <template>
 	<div :class="getTriageColor(props.patientCode)" class="patientCode">
-		{{ props.patientCode }}
+		{{ getPatientCodeLabel(props.patientCode) }}
 	</div>
 </template>
 
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index 29764ad3..44c72659 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -118,7 +118,19 @@ class SocketTrainer {
 		}))
 	}
 
+	patientAdd(areaName: string, patientId: number, patientName: string, patientCode: number) {
+		console.log("Add "+patientName)
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'patient-add',
+			'areaName': areaName,
+			'patientId': patientId,
+			'patientName': patientName,
+			'patientCode': patientCode
+		}))
+	}
+
 	patientUpdate(patientId: number, patientName: string, patientCode: number) {
+		console.log("Update "+patientName)
 		this.#sendMessage(JSON.stringify({
 			'messageType': 'patient-update',
 			'patientId': patientId,
@@ -128,6 +140,7 @@ class SocketTrainer {
 	}
 
 	patientDelete(patientId: number) {
+		console.log("Delete "+patientId)
 		this.#sendMessage(JSON.stringify({
 			'messageType': 'patient-delete',
 			'patientId': patientId
diff --git a/frontend/src/stores/Availables.ts b/frontend/src/stores/Availables.ts
index 19f2ab04..377fe3de 100644
--- a/frontend/src/stores/Availables.ts
+++ b/frontend/src/stores/Availables.ts
@@ -22,7 +22,6 @@ export const useAvailablesStore = defineStore('availables', {
 			this.actions = json.actions
 		},
 		loadAvailablePatients(json: AvailablePatients) {
-			console.log("AvailablePatients: "+JSON.stringify(json))
 			this.patients = json.availablePatients
 		},
 		loadAvailableMaterial(json: AvailableMaterial) {
diff --git a/frontend/src/stores/Exercise.ts b/frontend/src/stores/Exercise.ts
index 7ec2894a..8bc0c79e 100644
--- a/frontend/src/stores/Exercise.ts
+++ b/frontend/src/stores/Exercise.ts
@@ -37,11 +37,21 @@ export const useExerciseStore = defineStore('exercise', {
 				})
 				return foundPatient
 			}
-		}
+		},
+		getNewPatientId: (state) => {
+			return (): number => {
+				let highestId: number = 0
+				state.areas.forEach((area) => {
+					area.patients.forEach((patient) => {
+						if (patient.patientId > highestId) highestId = patient.patientId
+					})
+				})
+				return highestId + 1
+			}
+		},
 	},
 	actions: {
 		createFromJSON(json: Exercise) {
-			console.log("Exercise: "+JSON.stringify(json))
 			this.exerciseId = json.exerciseId
 			this.areas = json.areas
 		}

From 7701b640edf28de061825043e949249fea759f80 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Fri, 15 Mar 2024 16:03:12 +0100
Subject: [PATCH 09/22] #84 frontend: minor changes

---
 .../pagesResourceCreation/PagePatients.vue    |  8 +++---
 .../pagesResourceCreation/PagePersonnel.vue   |  2 +-
 .../components/widgets/AddPatientPopup.vue    |  9 +-----
 .../components/widgets/PatientCodeList.vue    | 28 +++++++++----------
 4 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index d97a9e1c..e0066c80 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -56,7 +56,7 @@
 			:key="patient.patientName"
 			class="listitem"
 		>
-			<button class="areaButton" @click="editPatient(patient.patientId)">
+			<button class="patientButton" @click="editPatient(patient.patientId)">
 				<div class="patientId">
 					{{ patient.patientId }}
 				</div>
@@ -67,7 +67,7 @@
 			</button>
 			<ToggleSwitchForListItems default="active" />
 		</div>
-		<button id="addAreaButton" @click="addPatient()">
+		<button id="addPatientButton" @click="addPatient()">
 			Patient hinzufügen
 		</button>
 	</div>
@@ -90,7 +90,7 @@
 		margin-top: -1px;
 	}
 
-	.areaButton {
+	.patientButton {
 		position: relative;
 		background-color: #FFFFFF;
 		border: none;
@@ -111,7 +111,7 @@
 		background-color: rgb(243, 244, 246);
 	}
 
-	#addAreaButton {
+	#addPatientButton {
 		text-align: center;
 		position: relative;
 		background-color: #FFFFFF;
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
index 613c31ac..5703321b 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
@@ -2,7 +2,7 @@
 	import {computed} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
 
-    const props = defineProps({
+	const props = defineProps({
 		currentArea: {
 			type: String,
 			default: "Kein Bereich ausgewählt"
diff --git a/frontend/src/components/widgets/AddPatientPopup.vue b/frontend/src/components/widgets/AddPatientPopup.vue
index be03f711..c9e86735 100644
--- a/frontend/src/components/widgets/AddPatientPopup.vue
+++ b/frontend/src/components/widgets/AddPatientPopup.vue
@@ -126,7 +126,7 @@
 		display: flex;
 	}
 
-	#deleteButton, #saveButton {
+	#saveButton {
 		position: relative;
 		color: white;
 		border: 1px solid rgb(209, 213, 219);
@@ -136,13 +136,6 @@
 		padding: .75rem 1rem;
 		text-align: center;
 		margin-top: 10px;
-	}
-
-	#deleteButton {
-		background-color: #ee4035;
-	}
-
-	#saveButton {
 		background-color: #269f42;
 	}
 
diff --git a/frontend/src/components/widgets/PatientCodeList.vue b/frontend/src/components/widgets/PatientCodeList.vue
index 49c110dd..66090793 100644
--- a/frontend/src/components/widgets/PatientCodeList.vue
+++ b/frontend/src/components/widgets/PatientCodeList.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+    import { useAvailablesStore } from "@/stores/Availables"
+  
+    const availablesStore = useAvailablesStore()
+    const availablePatients = availablesStore.patients
+  
+    const emit = defineEmits(['change-patient'])
+  
+    function changePatient(patientCode: number) {
+      emit('change-patient', patientCode)
+    }
+</script>
+
 <template>
 	<div id="list">
 		<button
@@ -12,20 +25,7 @@
 	</div>
 </template>
   
-  <script setup lang="ts">
-    import { useAvailablesStore } from "@/stores/Availables"
-  
-    const availablesStore = useAvailablesStore()
-    const availablePatients = availablesStore.patients
-  
-    const emit = defineEmits(['change-patient'])
-  
-    function changePatient(patientCode: number) {
-      emit('change-patient', patientCode)
-    }
-  </script>
-  
-  <style scoped>
+<style scoped>
     #list {
         display: flex;
     }

From 7cbc020291e33b17eb0548c3c45faea7f931648d Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Mon, 18 Mar 2024 15:56:46 +0100
Subject: [PATCH 10/22] #84 frontend: add requested changes

---
 frontend/src/assets/main.css                  | 18 ++++--
 .../screensTrainer/ScreenResourceCreation.vue |  9 +++
 .../pagesResourceCreation/PagePatients.vue    | 16 +----
 .../components/widgets/AddPatientPopup.vue    | 19 ++----
 .../components/widgets/EditPatientPopup.vue   | 14 ++---
 .../components/widgets/PatientCodeList.vue    | 30 +++------
 .../components/widgets/TriageForListItems.vue | 10 +--
 frontend/src/sockets/SocketTrainer.ts         | 62 +++++++++++++------
 frontend/src/stores/Patient.ts                |  4 --
 9 files changed, 94 insertions(+), 88 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 36769fcb..3219db32 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,5 +1,12 @@
 @import './base.css';
 
+:root {
+  --red: #ee4035;
+  --yellow: #e6cf00;
+  --green: #269f42;
+  --gray: gray;
+}
+
 #app {
   height: 100vh;
   font-weight: normal;
@@ -23,17 +30,18 @@ button:active {
 }
 
 .gray {
-  background-color: gray;
+  background-color: var(--gray);
 }
 
 .red {
-  background-color: red;
+  background-color: var(--red);
 }
 
 .yellow {
-  background-color: yellow;
+  background-color: var(--yellow);
 }
 
 .green {
-  background-color: green;
-}
\ No newline at end of file
+  background-color: var(--green);
+}
+
diff --git a/frontend/src/components/screensTrainer/ScreenResourceCreation.vue b/frontend/src/components/screensTrainer/ScreenResourceCreation.vue
index 16e0d918..b37e947a 100644
--- a/frontend/src/components/screensTrainer/ScreenResourceCreation.vue
+++ b/frontend/src/components/screensTrainer/ScreenResourceCreation.vue
@@ -38,6 +38,9 @@
 </script>
 
 <template>
+	<p v-if="!currentArea" id="noAreaText">
+		Wähle einen Bereich aus
+	</p>
 	<component :is="currentPageComponent" :current-area="currentArea" />
 	<nav>
 		<button id="nav-patients" :class="{ 'selected': currentPage === Pages.PATIENTS }" @click="setPage(Pages.PATIENTS)">
@@ -53,6 +56,12 @@
 </template>
 
 <style scoped>
+	#noAreaText {
+		text-align: center;
+		font-size: 1.8em;
+		margin-top: 40px;
+	}
+
 	nav {
 		width: 100%;
 		height: 60px;
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index e0066c80..96bf9826 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -36,20 +36,17 @@
 		return `${firstName} ${surname}`
 	}
 
-	const newPatientId = ref(Number.NEGATIVE_INFINITY)
 	const newPatientName = ref('No Name')
 
 	function addPatient() {
-		newPatientId.value = exerciseStore.getNewPatientId()
 		newPatientName.value = generateName()
-		currentPatientId.value = newPatientId.value
 		showAddPatientPopup.value = true
 	}
 </script>
 
 <template>
 	<EditPatientPopup v-if="showEditPatientPopup" :patient-id="currentPatientId" @close-popup="showEditPatientPopup=false" />
-	<AddPatientPopup v-if="showAddPatientPopup" :patient-id="newPatientId" :patient-name="newPatientName" @close-popup="showAddPatientPopup=false" />
+	<AddPatientPopup v-if="showAddPatientPopup" :area-name="currentArea" :patient-name="newPatientName" @close-popup="showAddPatientPopup=false" />
 	<div id="list">
 		<div
 			v-for="patient in currentAreaData?.patients"
@@ -58,7 +55,7 @@
 		>
 			<button class="patientButton" @click="editPatient(patient.patientId)">
 				<div class="patientId">
-					{{ patient.patientId }}
+					{{ patient.patientId.toString().padStart(3, '0') }}
 				</div>
 				<TriageForListItems :patient-code="patient.patientCode" />
 				<div class="patientName">
@@ -67,7 +64,7 @@
 			</button>
 			<ToggleSwitchForListItems default="active" />
 		</div>
-		<button id="addPatientButton" @click="addPatient()">
+		<button v-if="currentAreaData" id="addPatientButton" @click="addPatient()">
 			Patient hinzufügen
 		</button>
 	</div>
@@ -104,13 +101,6 @@
 		width: 100%;
 	}
 
-	.settingsButton {
-		height: 50px;
-		width: 50px;
-		border: none;
-		background-color: rgb(243, 244, 246);
-	}
-
 	#addPatientButton {
 		text-align: center;
 		position: relative;
diff --git a/frontend/src/components/widgets/AddPatientPopup.vue b/frontend/src/components/widgets/AddPatientPopup.vue
index c9e86735..edf590ca 100644
--- a/frontend/src/components/widgets/AddPatientPopup.vue
+++ b/frontend/src/components/widgets/AddPatientPopup.vue
@@ -3,7 +3,6 @@
 	import PatientInfo from "./PatientInfo.vue"
 	import { computed, ref } from "vue"
 	import TriageForListItems from "./TriageForListItems.vue"
-	import { useExerciseStore } from "@/stores/Exercise"
 	import socketTrainer from "@/sockets/SocketTrainer"
 	import PatientCodeList from "./PatientCodeList.vue"
 	import {showErrorToast} from "@/App.vue"
@@ -11,9 +10,9 @@
 	const emit = defineEmits(['close-popup'])
 
 	const props = defineProps({
-		patientId: {
-			type: Number,
-			default: Number.NEGATIVE_INFINITY
+		areaName: {
+			type: String,
+			default: 'No Area'
 		},
 		patientName: {
 			type: String,
@@ -21,18 +20,15 @@
 		}
 	})
 
-	const exerciseStore = useExerciseStore()
-
 	function addPatient(){
 		if(!patientCodeChanged) {
 			showErrorToast('Es wurde kein Patientencode ausgewählt')
 			return
 		}
-		const areaName = exerciseStore.getAreaOfPatient(props.patientId)?.toString()
-		socketTrainer.patientAdd(areaName || '', props.patientId, props.patientName, currentPatientCode.value || Number.NEGATIVE_INFINITY)
+		socketTrainer.patientAdd(props.areaName, props.patientName, currentPatientCode.value)
 	}
 
-	const currentPatientCode = ref(exerciseStore.getPatient(props.patientId)?.patientCode)
+	const currentPatientCode = ref()
 
 	const availablesStore = useAvailablesStore()
 
@@ -56,13 +52,11 @@
 	<div class="popup-overlay" @click="emit('close-popup')">
 		<div class="popup" @click.stop="">
 			<div id="leftSide">
+				<h2>Patienten-Datensätze</h2>
 				<PatientCodeList @change-patient="changePatientCode" />
 			</div>
 			<div id="rightSide">
 				<div class="listitem">
-					<div class="patientId">
-						{{ props.patientId }}
-					</div>
 					<TriageForListItems :patient-code="currentPatient?.patientCode" />
 					<div class="patientName">
 						{{ props.patientName }}
@@ -112,7 +106,6 @@
 
 	#leftSide {
 		float: left;
-		display: flex;
 		width: 50%;
 		padding: 10px;
 	}
diff --git a/frontend/src/components/widgets/EditPatientPopup.vue b/frontend/src/components/widgets/EditPatientPopup.vue
index e845be9e..ef8a9066 100644
--- a/frontend/src/components/widgets/EditPatientPopup.vue
+++ b/frontend/src/components/widgets/EditPatientPopup.vue
@@ -47,12 +47,13 @@
 	<div class="popup-overlay" @click="emit('close-popup')">
 		<div class="popup" @click.stop="">
 			<div id="leftSide">
+				<h2>Patienten-Datensätze</h2>
 				<PatientCodeList @change-patient="changePatientCode" />
 			</div>
 			<div id="rightSide">
 				<div class="listitem">
 					<div class="patientId">
-						{{ props.patientId }}
+						{{ props.patientId.toString().padStart(3, '0') }}
 					</div>
 					<TriageForListItems :patient-code="currentPatient?.patientCode" />
 					<div class="patientName">
@@ -106,7 +107,6 @@
 
 	#leftSide {
 		float: left;
-		display: flex;
 		width: 50%;
 		padding: 10px;
 	}
@@ -133,11 +133,11 @@
 	}
 
 	#deleteButton {
-		background-color: #ee4035;
+		background-color: var(--red);
 	}
 
 	#saveButton {
-		background-color: #269f42;
+		background-color: var(--green);
 	}
 
 	.listitem {
@@ -163,14 +163,14 @@
 	}
 	
 	.red {
-		background-color: red;
+		background-color: var(--red);
 	}
 
 	.yellow {
-		background-color: yellow;
+		background-color: var(--yellow);
 	}
 
 	.green {
-		background-color: green;
+		background-color: var(--green);
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/PatientCodeList.vue b/frontend/src/components/widgets/PatientCodeList.vue
index 66090793..d20c8334 100644
--- a/frontend/src/components/widgets/PatientCodeList.vue
+++ b/frontend/src/components/widgets/PatientCodeList.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
     import { useAvailablesStore } from "@/stores/Availables"
+	import '@/assets/main.css'
+	import TriageForListItems from "./TriageForListItems.vue"
   
     const availablesStore = useAvailablesStore()
     const availablePatients = availablesStore.patients
@@ -17,10 +19,9 @@
 			v-for="patient in availablePatients"
 			:key="patient.patientCode"
 			class="availablePatientButton"
-			:class="patient.triage"
 			@click="changePatient(patient.patientCode)"
 		>
-			{{ patient.patientCode }}
+			<TriageForListItems :patient-code="patient.patientCode" />
 		</button>
 	</div>
 </template>
@@ -28,32 +29,19 @@
 <style scoped>
     #list {
         display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
     }
 
     .availablePatientButton {
         position: relative;
-        background-color: #FFFFFF;
-        border: 1px solid rgb(209, 213, 219);
-		display: flex;
+        border: none;
+		padding: 0px;
+		margin-right: 5px;
+		margin-bottom: 5px;
 		align-items: center;
-		margin-top: -1px;
 		font-size: 1.25rem;
-		padding: .75rem 1rem;
-		text-align: left;
 		height: 50px;
-		width: 100%;
-	}
-	
-	.red {
-        background-color: red;
-	}
-
-	.yellow {
-        background-color: yellow;
-	}
-
-	.green {
-        background-color: green;
 	}
   </style>
   
\ No newline at end of file
diff --git a/frontend/src/components/widgets/TriageForListItems.vue b/frontend/src/components/widgets/TriageForListItems.vue
index d1995f0e..3d617a5f 100644
--- a/frontend/src/components/widgets/TriageForListItems.vue
+++ b/frontend/src/components/widgets/TriageForListItems.vue
@@ -12,21 +12,21 @@
 
 	function getTriageColor(patientCode: number) {
 		if(availablesStore.getPatient(patientCode)?.triage){
-			return availablesStore.getPatient(patientCode)?.triage
+			return "var(--"+availablesStore.getPatient(patientCode)?.triage+")"
 		}
-		return "gray"
+		return "var(--gray)"
 	}
 
 	function getPatientCodeLabel(patientCode: number) {
 		if (patientCode === Number.NEGATIVE_INFINITY) {
 			return ""
 		}
-		return patientCode.toString()
+		return patientCode.toString().padStart(3, '0')
 	}
 </script>
 
 <template>
-	<div :class="getTriageColor(props.patientCode)" class="patientCode">
+	<div class="patientCode" :style="{ backgroundColor: getTriageColor(props.patientCode) }">
 		{{ getPatientCodeLabel(props.patientCode) }}
 	</div>
 </template>
@@ -39,6 +39,6 @@
 		padding: .75rem 1rem;
 		display: flex;
 		align-items: center;
-		text-align: center;
+		color: white;
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index 44c72659..a544e3b4 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -118,19 +118,16 @@ class SocketTrainer {
 		}))
 	}
 
-	patientAdd(areaName: string, patientId: number, patientName: string, patientCode: number) {
-		console.log("Add "+patientName)
+	patientAdd(areaName: string, patientName: string, patientCode: number) {
 		this.#sendMessage(JSON.stringify({
 			'messageType': 'patient-add',
 			'areaName': areaName,
-			'patientId': patientId,
 			'patientName': patientName,
 			'patientCode': patientCode
 		}))
 	}
 
 	patientUpdate(patientId: number, patientName: string, patientCode: number) {
-		console.log("Update "+patientName)
 		this.#sendMessage(JSON.stringify({
 			'messageType': 'patient-update',
 			'patientId': patientId,
@@ -140,7 +137,6 @@ class SocketTrainer {
 	}
 
 	patientDelete(patientId: number) {
-		console.log("Delete "+patientId)
 		this.#sendMessage(JSON.stringify({
 			'messageType': 'patient-delete',
 			'patientId': patientId
@@ -156,25 +152,51 @@ export const serverMockEvents = [
 	{id: 'test-passthrough', data: '{"messageType":"test-passthrough","message":"received test-passthrough event"}'},
 	{
 		id: "available-patients",
-		data: '{"messageType":"available-patients","availablePatients":{"availablePatients":[{"patientCode":201,'+
-			'"triage":"red","patientInjury":"Fractured limb",' +
-			'"patientHistory":"No known allergies","patientPersonalDetails":"John Doe, Male, 30 years old",' +
-			'"patientBiometrics":"Height:180cm, Weight: 75kg"},{"patientCode":202,'+
-			'"triage":"green","patientInjury":"Fractured hand",' +
-			'"patientHistory":"No known allergies","patientPersonalDetails":"Jane Doe, Female, 18 years old",' +
-			'"patientBiometrics":"Height:160cm, Weight: 55kg"}]}}'
+		data: '{"messageType":"available-patients","availablePatients":{"availablePatients":['+
+			'{"patientCode":1,'+
+			'"triage":"yellow","patientInjury":"broken arm","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"Female, 30 years old","patientBiometrics":"Height:196cm, Weight: 76kg"},'+
+			'{"patientCode":2,'+
+			'"triage":"green","patientInjury":"twisted ankle","patientHistory":"No known allergies",'+
+			'"patientPersonalDetails":"Male, 47 years old","patientBiometrics":"Height:164cm, Weight: 65kg"},'+
+			'{"patientCode":3,'+
+			'"triage":"red","patientInjury":"head injury","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"Female, 20 years old","patientBiometrics":"Height:192cm, Weight: 77kg"},'+
+			'{"patientCode":4,'+
+			'"triage":"yellow","patientInjury":"sprained wrist","patientHistory":"gastroesophageal reflux disease",'+
+			'"patientPersonalDetails":"Male, 13 years old","patientBiometrics":"Height:165cm, Weight: 54kg"},'+
+			'{"patientCode":5,'+
+			'"triage":"green","patientInjury":"bruised ribs","patientHistory":"No known allergies",'+
+			'"patientPersonalDetails":"Female, 53 years old","patientBiometrics":"Height:180cm, Weight: 71kg"},'+
+			'{"patientCode":6,'+
+			'"triage":"yellow","patientInjury":"shoulder dislocation","patientHistory":"paralyzed",'+
+			'"patientPersonalDetails":"Male, 49 years old","patientBiometrics":"Height:170cm, Weight: 67kg"},'+
+			'{"patientCode":7,'+
+			'"triage":"red","patientInjury":"head trauma","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:162cm, Weight: 67kg"},'+
+			'{"patientCode":8,'+
+			'"triage":"yellow","patientInjury":"bruised ribs","patientHistory":"reflux disease",'+
+			'"patientPersonalDetails":"Male, 43 years old","patientBiometrics":"Height:161cm, Weight: 56kg"},'+
+			'{"patientCode":9,'+
+			'"triage":"green","patientInjury":"sprained wrist","patientHistory":"hearth disease",'+
+			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:182cm, Weight: 75kg"},'+
+			'{"patientCode":10,'+
+			'"triage":"yellow","patientInjury":"shoulder broken","patientHistory":"illness",'+
+			'"patientPersonalDetails":"Male, 39 years old","patientBiometrics":"Height:173cm, Weight: 61kg"}'+
+			']}}'
 	},
 	{
 		id: 'exercise',
 		data: '{"messageType":"exercise","exercise":{"exerciseId":123456,"areas":[' +
-			'{"areaName":"Cardio","patients":[{"patientId":1,"patientName":"John Doe","patientCode":101},{"patientId":2,"patientName":"Jane Doe",' +
-			'"patientCode":102}],"personnel":[{"personnelId":1,"personnelName":"Coach Carter"}],"devices":' +
-			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"Strength Training","patients":' +
-			'[{"patientId":3,"patientName":"Jim Beam","patientCode":201},{"patientId":4,"patientName":"Jill Wine","patientCode":202}],' +
-			'"personnel":[{"personnelId":2,"personnelName":"Coach Taylor"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
-			'{"areaName":"Flexibility","patients":[{"patientId":5,"patientName":"Yoga Mats","patientCode":301},' +
-			'{"patientId":6,"patientName":"Flexi Rods","patientCode":302}],"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
-			'"devices":[{"deviceId":3,"deviceName":"Yoga Mats"}]}]}}'
+			'{"areaName":"Intensiv","patients":[{"patientId":5,"patientName":"Anna Müller","patientCode":1},'+
+			'{"patientId":3,"patientName":"Frank Huber",' +
+			'"patientCode":2}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"devices":' +
+			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"ZNA","patients":' +
+			'[{"patientId":2,"patientName":"Luna Patel","patientCode":3},{"patientId":6,"patientName":"Friedrich Gerhard","patientCode":4}],' +
+			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
+			'{"areaName":"Wagenhalle","patients":[{"patientId":1,"patientName":"Isabelle Busch","patientCode":5},' +
+			'{"patientId":4,"patientName":"Jasper Park","patientCode":6}],"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
+			'"devices":[{"deviceId":3,"deviceName":"Beatmungsgerät"}]}]}}'
 	},
 	{id: 'exercise-start', data: '{"messageType":"exercise-start"}'},
 	{id: 'exercise-stop', data: '{"messageType":"exercise-stop"}'},
diff --git a/frontend/src/stores/Patient.ts b/frontend/src/stores/Patient.ts
index e262b0eb..6880e719 100644
--- a/frontend/src/stores/Patient.ts
+++ b/frontend/src/stores/Patient.ts
@@ -7,10 +7,6 @@ export const usePatientStore = defineStore('patient', {
 		patientName: '',
 		triage: '-',
 		areaName: '',
-		patientInjury: '',
-		patientHistory: '',
-		patientPersonalDetails: '',
-		patientBiometrics: '',
 		airway: '',
 		breathing: '',
 		circulation: '',

From 36ee1f9d5a17678c1c488749922d7d7f39aed4ef Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Mon, 25 Mar 2024 14:38:15 +0100
Subject: [PATCH 11/22] #84 frontend: add triageToColor in utils.ts

---
 .../screensPatient/ScreenInactive.vue         |  2 +-
 .../screensPatient/ScreenStatus.vue           | 51 ++++---------------
 .../components/widgets/AddPatientPopup.vue    | 12 -----
 .../components/widgets/EditPatientPopup.vue   | 12 -----
 .../src/components/widgets/LoginPatient.vue   |  2 +-
 .../components/widgets/TriageForListItems.vue | 12 ++---
 .../src/components/widgets/TriagePopup.vue    | 21 ++++++--
 frontend/src/sockets/MessageData.ts           |  1 +
 frontend/src/sockets/SocketPatient.ts         | 28 +++++-----
 frontend/src/sockets/SocketTrainer.ts         | 32 ++++++------
 frontend/src/stores/Exercise.ts               | 13 +----
 frontend/src/stores/Patient.ts                |  2 +-
 frontend/src/utils.ts                         | 20 ++++++++
 13 files changed, 85 insertions(+), 123 deletions(-)
 create mode 100644 frontend/src/utils.ts

diff --git a/frontend/src/components/screensPatient/ScreenInactive.vue b/frontend/src/components/screensPatient/ScreenInactive.vue
index 5fa2bf33..91d173ee 100644
--- a/frontend/src/components/screensPatient/ScreenInactive.vue
+++ b/frontend/src/components/screensPatient/ScreenInactive.vue
@@ -11,7 +11,7 @@
 				Patient inaktiv
 			</div>
 			<div class="inactive-patient-details">
-				<div>Patient: {{ patientStore.patientName }} | {{ patientStore.patientID }}</div>
+				<div>Patient: {{ patientStore.patientName }} | {{ patientStore.patientId }}</div>
 				<div>Bereich: {{ patientStore.areaName }}</div>
 			</div>
 		</div>
diff --git a/frontend/src/components/screensPatient/ScreenStatus.vue b/frontend/src/components/screensPatient/ScreenStatus.vue
index a027f733..31a0f76e 100644
--- a/frontend/src/components/screensPatient/ScreenStatus.vue
+++ b/frontend/src/components/screensPatient/ScreenStatus.vue
@@ -1,37 +1,25 @@
 <script setup lang="ts">
-	import {computed, ref} from 'vue'
+	import {ref} from 'vue'
 	import {usePatientStore} from '@/stores/Patient'
 	import TriagePopup from '@/components/widgets/TriagePopup.vue'
 	import PatientStatus from '@/components/widgets/PatientStatus.vue'
+	import { triageToColor } from '@/utils'
 
 	const patientStore = usePatientStore()
 
-	const triageColor = ref(computed(() => {
-		switch (patientStore.triage) {
-			case 'G':
-				return 'green'
-			case 'Y':
-				return 'yellow'
-			case 'A':
-			case 'B':
-			case 'C':
-			case 'D':
-			case 'E':
-				return 'red'
-			default:
-				return 'gray'
-		}
-	}))
-
 	const showPopup = ref(false)
 </script>
 
 <template>
 	<nav>
 		<button id="nav-trainer">
-			{{ patientStore.patientID }}
+			{{ patientStore.patientId }}
 		</button>
-		<button id="nav-triage" :class="triageColor" @click="showPopup = true">
+		<button
+			id="nav-triage"
+			:style="{backgroundColor: triageToColor(patientStore.triage)}"
+			@click="showPopup = true"
+		>
 			{{ patientStore.triage }}
 		</button>
 		<button id="nav-exercise-code">
@@ -70,30 +58,11 @@
 		width: 20%;
 		border-left: 4px solid black;
 		border-right: 4px solid black;
+		color: white;
 	}
 
 	#nav-exercise-code {
 		width: 40%;
 		border-left: 4px solid black;
 	}
-
-	/*noinspection CssUnusedSymbol*/
-	.gray {
-		background-color: lightgray;
-	}
-
-	/*noinspection CssUnusedSymbol*/
-	.green {
-		background-color: green;
-	}
-
-	/*noinspection CssUnusedSymbol*/
-	.yellow {
-		background-color: yellow;
-	}
-
-	/*noinspection CssUnusedSymbol*/
-	.red {
-		background-color: red;
-	}
-</style>
\ No newline at end of file
+</style>@/utils
\ No newline at end of file
diff --git a/frontend/src/components/widgets/AddPatientPopup.vue b/frontend/src/components/widgets/AddPatientPopup.vue
index edf590ca..7fdc8d34 100644
--- a/frontend/src/components/widgets/AddPatientPopup.vue
+++ b/frontend/src/components/widgets/AddPatientPopup.vue
@@ -153,16 +153,4 @@
 	.patientId, .patientName {
 		padding: .75rem 1rem;
 	}
-	
-	.red {
-		background-color: red;
-	}
-
-	.yellow {
-		background-color: yellow;
-	}
-
-	.green {
-		background-color: green;
-	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/EditPatientPopup.vue b/frontend/src/components/widgets/EditPatientPopup.vue
index ef8a9066..15a4db03 100644
--- a/frontend/src/components/widgets/EditPatientPopup.vue
+++ b/frontend/src/components/widgets/EditPatientPopup.vue
@@ -161,16 +161,4 @@
 	.patientId, .patientName {
 		padding: .75rem 1rem;
 	}
-	
-	.red {
-		background-color: var(--red);
-	}
-
-	.yellow {
-		background-color: var(--yellow);
-	}
-
-	.green {
-		background-color: var(--green);
-	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/LoginPatient.vue b/frontend/src/components/widgets/LoginPatient.vue
index 0ed78f77..e3d49c01 100644
--- a/frontend/src/components/widgets/LoginPatient.vue
+++ b/frontend/src/components/widgets/LoginPatient.vue
@@ -18,7 +18,7 @@
 			return
 		}
 
-		patientStore.patientID = patientIdNumber
+		patientStore.patientId = patientIdNumber
 
 		const requestBody = {
 			"exerciseId": exerciseIdNumber,
diff --git a/frontend/src/components/widgets/TriageForListItems.vue b/frontend/src/components/widgets/TriageForListItems.vue
index 3d617a5f..a0ab41e5 100644
--- a/frontend/src/components/widgets/TriageForListItems.vue
+++ b/frontend/src/components/widgets/TriageForListItems.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 	import { useAvailablesStore } from '@/stores/Availables'
+	import { triageToColor } from '@/utils'
 
     const props = defineProps({
 		patientCode: {
@@ -10,13 +11,6 @@
 
 	const availablesStore = useAvailablesStore()
 
-	function getTriageColor(patientCode: number) {
-		if(availablesStore.getPatient(patientCode)?.triage){
-			return "var(--"+availablesStore.getPatient(patientCode)?.triage+")"
-		}
-		return "var(--gray)"
-	}
-
 	function getPatientCodeLabel(patientCode: number) {
 		if (patientCode === Number.NEGATIVE_INFINITY) {
 			return ""
@@ -26,7 +20,7 @@
 </script>
 
 <template>
-	<div class="patientCode" :style="{ backgroundColor: getTriageColor(props.patientCode) }">
+	<div class="patientCode" :style="{ backgroundColor: triageToColor(availablesStore.getPatient(patientCode)?.triage) }">
 		{{ getPatientCodeLabel(props.patientCode) }}
 	</div>
 </template>
@@ -41,4 +35,4 @@
 		align-items: center;
 		color: white;
 	}
-</style>
\ No newline at end of file
+</style>@/Utils@/utils
\ No newline at end of file
diff --git a/frontend/src/components/widgets/TriagePopup.vue b/frontend/src/components/widgets/TriagePopup.vue
index a0e985f0..6a5b44a0 100644
--- a/frontend/src/components/widgets/TriagePopup.vue
+++ b/frontend/src/components/widgets/TriagePopup.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-	import {usePatientStore} from '@/stores/Patient'
 	import socketPatient from "@/sockets/SocketPatient"
 	import {ref} from 'vue'
 
 	const emit = defineEmits(['close-popup'])
 
-	const setTriage = (triage: string) => {
-		usePatientStore().triage = triage
+	function setTriage(triage: string) {
 		socketPatient.triage(triage)
 	}
 
@@ -21,6 +19,10 @@
 		{char: 'E', color: 'red'},
 	])
 
+	function getTriageColor(color: string) {
+		return "var(--"+color+")"
+	}
+
 </script>
 
 <template>
@@ -31,7 +33,8 @@
 				<button
 					v-for="triageButton in triageButtons"
 					:key="triageButton.char"
-					:style="{backgroundColor: triageButton.color}"
+					class="triageButton"
+					:style="{backgroundColor: getTriageColor(triageButton.color)}"
 					@click="setTriage(triageButton.char)"
 				>
 					{{ triageButton.char }}
@@ -68,9 +71,17 @@
 		justify-content: center;
 	}
 
-	.button-container > button {
+	.triageButton {
 		width: 50px;
 		height: 50px;
+        position: relative;
+        border: none;
+		padding: 0px;
 		margin: 10px;
+		margin-right: 5px;
+		margin-bottom: 5px;
+		align-items: center;
+		font-size: 1.25rem;
+		color: white;
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
index 2e2c2956..d94c7666 100644
--- a/frontend/src/sockets/MessageData.ts
+++ b/frontend/src/sockets/MessageData.ts
@@ -40,6 +40,7 @@ interface Patient {
 	patientId: number
 	patientName: string
 	patientCode: number
+	triage: string
 }
 
 interface Personnel {
diff --git a/frontend/src/sockets/SocketPatient.ts b/frontend/src/sockets/SocketPatient.ts
index c9b1f02f..7fcfa314 100644
--- a/frontend/src/sockets/SocketPatient.ts
+++ b/frontend/src/sockets/SocketPatient.ts
@@ -46,16 +46,14 @@ class SocketPatient {
 				case 'test-passthrough':
 					showWarningToast(data.message || '')
 					break
-				case 'triage':
-					usePatientStore().triage = data.triage || '-'
-					break
 				case 'state':
 					usePatientStore().loadStatusFromJSON(data.state as State)
 					break
 				case 'exercise':
 					useExerciseStore().createFromJSON(data.exercise as Exercise)
-					usePatientStore().patientName = useExerciseStore().getPatient(usePatientStore().patientID)?.patientName || ''
-					usePatientStore().areaName = useExerciseStore().getAreaOfPatient(usePatientStore().patientID)?.areaName || ''
+					usePatientStore().patientName = useExerciseStore().getPatient(usePatientStore().patientId)?.patientName || ''
+					usePatientStore().areaName = useExerciseStore().getAreaOfPatient(usePatientStore().patientId)?.areaName || ''
+					usePatientStore().triage = useExerciseStore().getPatient(usePatientStore().patientId)?.triage || '-'
 					break
 				case 'exercise-start':
 					setScreen(Screens.STATUS, ScreenPosition.LEFT)
@@ -114,7 +112,6 @@ export default socketPatient
 export const serverMockEvents = [
 	{id: 'failure', data: '{"messageType":"failure","message":"Error encountered"}'},
 	{id: 'test-passthrough', data: '{"messageType":"test-passthrough","message":"received test-passthrough event"}'},
-	{id: 'triage', data: '{"messageType":"triage","triage":"A"}'},
 	{
 		id: 'state',
 		data: '{"messageType":"state","state":{"phaseNumber":"123","airway":"Normal","breathing":"Regular","circulation":"Stable",' +
@@ -123,14 +120,17 @@ export const serverMockEvents = [
 	{
 		id: 'exercise',
 		data: '{"messageType":"exercise","exercise":{"exerciseId":123456,"areas":[' +
-			'{"areaName":"Cardio","patients":[{"patientId":1,"patientName":"John Doe","patientCode":20},{"patientId":2,"patientName":"Jane Doe",' +
-			'"patientCode":21}],"personnel":[{"personnelId":1,"personnelName":"Coach Carter"}],"devices":' +
-			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"Strength Training","patients":' +
-			'[{"patientId":3,"patientName":"Jim Beam","patientCode":12},{"patientId":4,"patientName":"Jill Wine","patientCode":24}],' +
-			'"personnel":[{"personnelId":2,"personnelName":"Coach Taylor"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
-			'{"areaName":"Flexibility","patients":[{"patientId":5,"patientName":"Yoga Mats","patientCode":32},' +
-			'{"patientId":6,"patientName":"Flexi Rods","patientCode":8}],"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
-			'"devices":[{"deviceId":3,"deviceName":"Yoga Mats"}]}]}}'
+			'{"areaName":"Intensiv","patients":[{"patientId":5,"patientName":"Anna Müller","patientCode":1,"triage":"Y"},'+
+			'{"patientId":3,"patientName":"Frank Huber",' +
+			'"patientCode":2,"triage":"G"}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"devices":' +
+			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"ZNA","patients":' +
+			'[{"patientId":2,"patientName":"Luna Patel","patientCode":3,"triage":"R"},' + 
+			'{"patientId":6,"patientName":"Friedrich Gerhard","patientCode":4,"triage":"Y"}],'+
+			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
+			'{"areaName":"Wagenhalle","patients":[{"patientId":1,"patientName":"Isabelle Busch","patientCode":5,"triage":"G"},' +
+			'{"patientId":4,"patientName":"Jasper Park","patientCode":6,"triage":"Y"}],' +
+			'"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
+			'"devices":[{"deviceId":3,"deviceName":"Beatmungsgerät"}]}]}}'
 	},
 	{id: 'exercise-start', data: '{"messageType":"exercise-start"}'},
 	{id: 'exercise-stop', data: '{"messageType":"exercise-stop"}'},
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index a544e3b4..a0bd4593 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -154,48 +154,50 @@ export const serverMockEvents = [
 		id: "available-patients",
 		data: '{"messageType":"available-patients","availablePatients":{"availablePatients":['+
 			'{"patientCode":1,'+
-			'"triage":"yellow","patientInjury":"broken arm","patientHistory":"Asthma",'+
+			'"triage":"Y","patientInjury":"broken arm","patientHistory":"Asthma",'+
 			'"patientPersonalDetails":"Female, 30 years old","patientBiometrics":"Height:196cm, Weight: 76kg"},'+
 			'{"patientCode":2,'+
-			'"triage":"green","patientInjury":"twisted ankle","patientHistory":"No known allergies",'+
+			'"triage":"G","patientInjury":"twisted ankle","patientHistory":"No known allergies",'+
 			'"patientPersonalDetails":"Male, 47 years old","patientBiometrics":"Height:164cm, Weight: 65kg"},'+
 			'{"patientCode":3,'+
-			'"triage":"red","patientInjury":"head injury","patientHistory":"Diabetes",'+
+			'"triage":"R","patientInjury":"head injury","patientHistory":"Diabetes",'+
 			'"patientPersonalDetails":"Female, 20 years old","patientBiometrics":"Height:192cm, Weight: 77kg"},'+
 			'{"patientCode":4,'+
-			'"triage":"yellow","patientInjury":"sprained wrist","patientHistory":"gastroesophageal reflux disease",'+
+			'"triage":"Y","patientInjury":"sprained wrist","patientHistory":"gastroesophageal reflux disease",'+
 			'"patientPersonalDetails":"Male, 13 years old","patientBiometrics":"Height:165cm, Weight: 54kg"},'+
 			'{"patientCode":5,'+
-			'"triage":"green","patientInjury":"bruised ribs","patientHistory":"No known allergies",'+
+			'"triage":"G","patientInjury":"bruised ribs","patientHistory":"No known allergies",'+
 			'"patientPersonalDetails":"Female, 53 years old","patientBiometrics":"Height:180cm, Weight: 71kg"},'+
 			'{"patientCode":6,'+
-			'"triage":"yellow","patientInjury":"shoulder dislocation","patientHistory":"paralyzed",'+
+			'"triage":"Y","patientInjury":"shoulder dislocation","patientHistory":"paralyzed",'+
 			'"patientPersonalDetails":"Male, 49 years old","patientBiometrics":"Height:170cm, Weight: 67kg"},'+
 			'{"patientCode":7,'+
-			'"triage":"red","patientInjury":"head trauma","patientHistory":"Asthma",'+
+			'"triage":"R","patientInjury":"head trauma","patientHistory":"Asthma",'+
 			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:162cm, Weight: 67kg"},'+
 			'{"patientCode":8,'+
-			'"triage":"yellow","patientInjury":"bruised ribs","patientHistory":"reflux disease",'+
+			'"triage":"Y","patientInjury":"bruised ribs","patientHistory":"reflux disease",'+
 			'"patientPersonalDetails":"Male, 43 years old","patientBiometrics":"Height:161cm, Weight: 56kg"},'+
 			'{"patientCode":9,'+
-			'"triage":"green","patientInjury":"sprained wrist","patientHistory":"hearth disease",'+
+			'"triage":"G","patientInjury":"sprained wrist","patientHistory":"hearth disease",'+
 			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:182cm, Weight: 75kg"},'+
 			'{"patientCode":10,'+
-			'"triage":"yellow","patientInjury":"shoulder broken","patientHistory":"illness",'+
+			'"triage":"Y","patientInjury":"shoulder broken","patientHistory":"illness",'+
 			'"patientPersonalDetails":"Male, 39 years old","patientBiometrics":"Height:173cm, Weight: 61kg"}'+
 			']}}'
 	},
 	{
 		id: 'exercise',
 		data: '{"messageType":"exercise","exercise":{"exerciseId":123456,"areas":[' +
-			'{"areaName":"Intensiv","patients":[{"patientId":5,"patientName":"Anna Müller","patientCode":1},'+
+			'{"areaName":"Intensiv","patients":[{"patientId":5,"patientName":"Anna Müller","patientCode":1,"triage":"Y"},'+
 			'{"patientId":3,"patientName":"Frank Huber",' +
-			'"patientCode":2}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"devices":' +
+			'"patientCode":2,"triage":"G"}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"devices":' +
 			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"ZNA","patients":' +
-			'[{"patientId":2,"patientName":"Luna Patel","patientCode":3},{"patientId":6,"patientName":"Friedrich Gerhard","patientCode":4}],' +
+			'[{"patientId":2,"patientName":"Luna Patel","patientCode":3,"triage":"R"},' + 
+			'{"patientId":6,"patientName":"Friedrich Gerhard","patientCode":4,"triage":"Y"}],'+
 			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
-			'{"areaName":"Wagenhalle","patients":[{"patientId":1,"patientName":"Isabelle Busch","patientCode":5},' +
-			'{"patientId":4,"patientName":"Jasper Park","patientCode":6}],"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
+			'{"areaName":"Wagenhalle","patients":[{"patientId":1,"patientName":"Isabelle Busch","patientCode":5,"triage":"G"},' +
+			'{"patientId":4,"patientName":"Jasper Park","patientCode":6,"triage":"Y"}],' +
+			'"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
 			'"devices":[{"deviceId":3,"deviceName":"Beatmungsgerät"}]}]}}'
 	},
 	{id: 'exercise-start', data: '{"messageType":"exercise-start"}'},
diff --git a/frontend/src/stores/Exercise.ts b/frontend/src/stores/Exercise.ts
index 8bc0c79e..23ed34b1 100644
--- a/frontend/src/stores/Exercise.ts
+++ b/frontend/src/stores/Exercise.ts
@@ -37,18 +37,7 @@ export const useExerciseStore = defineStore('exercise', {
 				})
 				return foundPatient
 			}
-		},
-		getNewPatientId: (state) => {
-			return (): number => {
-				let highestId: number = 0
-				state.areas.forEach((area) => {
-					area.patients.forEach((patient) => {
-						if (patient.patientId > highestId) highestId = patient.patientId
-					})
-				})
-				return highestId + 1
-			}
-		},
+		}
 	},
 	actions: {
 		createFromJSON(json: Exercise) {
diff --git a/frontend/src/stores/Patient.ts b/frontend/src/stores/Patient.ts
index 6880e719..197c9105 100644
--- a/frontend/src/stores/Patient.ts
+++ b/frontend/src/stores/Patient.ts
@@ -3,7 +3,7 @@ import {defineStore} from "pinia"
 export const usePatientStore = defineStore('patient', {
 	state: () => ({
 		token: '',
-		patientID: Number.NEGATIVE_INFINITY,
+		patientId: Number.NEGATIVE_INFINITY,
 		patientName: '',
 		triage: '-',
 		areaName: '',
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
new file mode 100644
index 00000000..f73a3739
--- /dev/null
+++ b/frontend/src/utils.ts
@@ -0,0 +1,20 @@
+export function triageToColor(triage?: string): string {
+    let color = 'gray'
+    switch (triage) {
+        case 'R':
+        case 'A':
+        case 'B':
+        case 'C':
+        case 'D':
+        case 'E':
+            color = 'red'
+            break
+        case 'Y':
+            color = 'yellow'
+            break
+        case 'G':
+            color = 'green'
+            break
+    }
+    return "var(--" + color + ")"
+}
\ No newline at end of file

From bbc978245658539aa0a80a271aa47cdb33a7b213 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Mon, 25 Mar 2024 14:53:10 +0100
Subject: [PATCH 12/22] #84 frontend: settingsButton opens the right area

---
 .../components/screensTrainer/ScreenExerciseCreation.vue   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
index 77e120ef..9fbe19f8 100644
--- a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
+++ b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
@@ -23,6 +23,11 @@
 		currentArea.value = areaName
 	}
 
+	function openPopup(areaName: string) {
+		openArea(areaName)
+		showPopup.value = true
+	}
+
 	function addArea(){
 		socketTrainer.areaAdd()
 	}
@@ -43,7 +48,7 @@
 			<button class="areaButton" @click="openArea(area.areaName)">
 				{{ area.areaName }}
 			</button>
-			<button class="settingsButton" @click="showPopup = true">
+			<button class="settingsButton" @click="openPopup(area.areaName)">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					height="24"

From b23f0e7b5defe7bd23043415bddba7d73fef50d5 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Mon, 25 Mar 2024 15:11:27 +0100
Subject: [PATCH 13/22] #84 frontend: saveButton green

---
 frontend/src/components/widgets/AddPatientPopup.vue  | 2 +-
 frontend/src/components/widgets/ButtonMainAction.vue | 5 -----
 frontend/src/components/widgets/PatientInfo.vue      | 6 +++---
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/widgets/AddPatientPopup.vue b/frontend/src/components/widgets/AddPatientPopup.vue
index 7fdc8d34..dcc7d45e 100644
--- a/frontend/src/components/widgets/AddPatientPopup.vue
+++ b/frontend/src/components/widgets/AddPatientPopup.vue
@@ -129,7 +129,7 @@
 		padding: .75rem 1rem;
 		text-align: center;
 		margin-top: 10px;
-		background-color: #269f42;
+		background-color: var(--green);
 	}
 
 	.listitem {
diff --git a/frontend/src/components/widgets/ButtonMainAction.vue b/frontend/src/components/widgets/ButtonMainAction.vue
index 26f42b2d..3915d95c 100644
--- a/frontend/src/components/widgets/ButtonMainAction.vue
+++ b/frontend/src/components/widgets/ButtonMainAction.vue
@@ -24,17 +24,12 @@
 		background-color: #FFFFFF;
 		border: 1px solid rgb(209, 213, 219);
 		border-radius: .5rem;
-		box-sizing: border-box;
-		display: block;
 		width: calc(100% - 2rem);
-		color: #111827;
 		font-size: 1.25rem;
 		line-height: 1.25rem;
 		padding: .75rem 1rem;
 		margin: 1rem;
 		text-align: center;
 		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-		cursor: pointer;
-		vertical-align: bottom;
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/PatientInfo.vue b/frontend/src/components/widgets/PatientInfo.vue
index d423c7c4..eb289c53 100644
--- a/frontend/src/components/widgets/PatientInfo.vue
+++ b/frontend/src/components/widgets/PatientInfo.vue
@@ -6,15 +6,15 @@
 		},
 		history: {
 			type: String,
-			default: 'No Injury'
+			default: 'No History'
 		},
 		personalDetails: {
 			type: String,
-			default: 'No Injury'
+			default: 'No Personal Details'
 		},
 		biometrics: {
 			type: String,
-			default: 'No Injury'
+			default: 'No Biometrics'
 		}
 
 	})

From 94acfebd9294f6f0628240c8214692536df97cf4 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Mon, 25 Mar 2024 17:03:30 +0100
Subject: [PATCH 14/22] #86 frontend: add personnel list, css refactoring

---
 frontend/src/assets/main.css                  | 60 ++++++++++++++++++
 .../screensTrainer/ScreenExerciseCreation.vue | 52 +++------------
 .../pagesResourceCreation/PagePatients.vue    | 63 +++----------------
 .../pagesResourceCreation/PagePersonnel.vue   | 45 ++++++++++---
 .../components/widgets/AddPatientPopup.vue    | 15 +----
 frontend/src/components/widgets/AreaPopup.vue | 14 -----
 .../components/widgets/EditPatientPopup.vue   | 14 -----
 .../src/components/widgets/PersonnelPopup.vue | 51 +++++++++++++++
 .../widgets/ToggleSwitchForListItems.vue      |  2 +-
 .../src/components/widgets/TriagePopup.vue    | 14 -----
 frontend/src/sockets/SocketTrainer.ts         | 16 ++++-
 frontend/src/stores/Exercise.ts               | 11 ++++
 12 files changed, 191 insertions(+), 166 deletions(-)
 create mode 100644 frontend/src/components/widgets/PersonnelPopup.vue

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 3219db32..c2eb69c1 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -45,3 +45,63 @@ button:active {
   background-color: var(--green);
 }
 
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  z-index: 1;
+}
+
+.list {
+  margin-top: 30px;
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+.listItem {
+  position: relative;
+  background-color: #FFFFFF;
+  border: 1px solid rgb(209, 213, 219);
+  display: flex;
+  align-items: center;
+  text-align: left;
+  margin-top: -1px;
+}
+
+.listItemButton {
+  position: relative;
+  background-color: #FFFFFF;
+  border: none;
+  display: flex;
+  align-items: center;
+  font-size: 1.25rem;
+  padding: .75rem 1rem;
+  padding-left: 0;
+  text-align: left;
+  height: 50px;
+  width: 100%;
+}
+
+.listItemAddButton {
+  text-align: center;
+  position: relative;
+  background-color: #FFFFFF;
+  border: 1px solid rgb(209, 213, 219);
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  padding: .75rem 1rem;
+  margin-top: -1px;
+}
+
+.listItemId, .listItemName {
+  padding: .75rem 1rem;
+}
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
index 9fbe19f8..79e6a174 100644
--- a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
+++ b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
@@ -38,15 +38,17 @@
 <template>
 	<AreaPopup v-if="showPopup" :area-name="currentArea" @close-popup="showPopup=false" />
 	<TopBarTrainer />
-	<div id="list">
+	<div class="list">
 		<div
 			v-for="area in areas"
 			:key="area.areaName"
-			class="listitem"
+			class="listItem"
 			:class="{ 'selected': currentArea === area.areaName }"
 		>
-			<button class="areaButton" @click="openArea(area.areaName)">
-				{{ area.areaName }}
+			<button class="listItemButton" @click="openArea(area.areaName)">
+				<div class="listItemName">
+					{{ area.areaName }}
+				</div>
 			</button>
 			<button class="settingsButton" @click="openPopup(area.areaName)">
 				<svg
@@ -59,7 +61,7 @@
 				</svg>
 			</button>
 		</div>
-		<button id="addAreaButton" @click="addArea()">
+		<button class="listItemAddButton" @click="addArea()">
 			Bereich hinzufügen
 		</button>
 	</div>
@@ -70,33 +72,8 @@
 </template>
 
 <style scoped>
-	#list {
+	.list {
 		margin-top: 90px;
-		margin-left: 30px;
-		margin-right: 30px;
-	}
-
-	.listitem {
-		position: relative;
-		background-color: #FFFFFF;
-		border: 1px solid rgb(209, 213, 219);
-		display: flex;
-		align-items: center;
-		text-align: left;
-		margin-top: -1px;
-	}
-
-	.areaButton {
-		position: relative;
-		background-color: #FFFFFF;
-		border: none;
-		display: flex;
-		align-items: center;
-		font-size: 1.25rem;
-		padding: .75rem 1rem;
-		text-align: left;
-		height: 50px;
-		width: 100%;
 	}
 
 	.settingsButton {
@@ -106,19 +83,6 @@
 		background-color: rgb(243, 244, 246);
 	}
 
-	#addAreaButton {
-		text-align: center;
-		position: relative;
-		background-color: #FFFFFF;
-		border: 1px solid rgb(209, 213, 219);
-		box-sizing: border-box;
-		width: 100%;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-		padding: .75rem 1rem;
-		margin-top: -1px;
-	}
-
 	.selected .areaButton {
 		filter: brightness(90%);
 	}
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index 96bf9826..1ef6cb6a 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -47,74 +47,25 @@
 <template>
 	<EditPatientPopup v-if="showEditPatientPopup" :patient-id="currentPatientId" @close-popup="showEditPatientPopup=false" />
 	<AddPatientPopup v-if="showAddPatientPopup" :area-name="currentArea" :patient-name="newPatientName" @close-popup="showAddPatientPopup=false" />
-	<div id="list">
+	<div class="list">
 		<div
 			v-for="patient in currentAreaData?.patients"
 			:key="patient.patientName"
-			class="listitem"
+			class="listItem"
 		>
-			<button class="patientButton" @click="editPatient(patient.patientId)">
-				<div class="patientId">
+			<button class="listItemButton" @click="editPatient(patient.patientId)">
+				<div class="listItemId">
 					{{ patient.patientId.toString().padStart(3, '0') }}
 				</div>
 				<TriageForListItems :patient-code="patient.patientCode" />
-				<div class="patientName">
+				<div class="listItemName">
 					{{ patient.patientName }}
 				</div>
 			</button>
 			<ToggleSwitchForListItems default="active" />
 		</div>
-		<button v-if="currentAreaData" id="addPatientButton" @click="addPatient()">
+		<button v-if="currentAreaData" class="listItemAddButton" @click="addPatient()">
 			Patient hinzufügen
 		</button>
 	</div>
-</template>
-
-<style scoped>
-	#list {
-		margin-top: 30px;
-		margin-left: 30px;
-		margin-right: 30px;
-	}
-
-	.listitem {
-		position: relative;
-		background-color: #FFFFFF;
-		border: 1px solid rgb(209, 213, 219);
-		display: flex;
-		align-items: center;
-		text-align: left;
-		margin-top: -1px;
-	}
-
-	.patientButton {
-		position: relative;
-		background-color: #FFFFFF;
-		border: none;
-		display: flex;
-		align-items: center;
-		font-size: 1.25rem;
-		padding: .75rem 1rem;
-		padding-left: 0;
-		text-align: left;
-		height: 50px;
-		width: 100%;
-	}
-
-	#addPatientButton {
-		text-align: center;
-		position: relative;
-		background-color: #FFFFFF;
-		border: 1px solid rgb(209, 213, 219);
-		box-sizing: border-box;
-		width: 100%;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-		padding: .75rem 1rem;
-		margin-top: -1px;
-	}
-
-	.patientId, .patientName {
-		padding: .75rem 1rem;
-	}
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
index 5703321b..5726920f 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-	import {computed} from 'vue'
+	import {computed, ref} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
+	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
+	import PersonnelPopup from '@/components/widgets/PersonnelPopup.vue'
+	import socketTrainer from '@/sockets/SocketTrainer'
 
-	const props = defineProps({
+    const props = defineProps({
 		currentArea: {
 			type: String,
 			default: "Kein Bereich ausgewählt"
@@ -12,12 +15,38 @@
 	const exerciseStore = useExerciseStore()
 
 	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+
+	const currentPersonnel = ref(Number.NEGATIVE_INFINITY)
+
+	const showPopup = ref(false)
+
+	function openPopup(personnelId: number) {
+		currentPersonnel.value = personnelId
+		showPopup.value = true
+	}
+
+	function addPersonnel() {
+		socketTrainer.personnelAdd(props.currentArea)
+	}
 </script>
 
 <template>
-	<h1>Patienten</h1>
-	{{ currentAreaData?.personnel }}
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file
+	<PersonnelPopup v-if="showPopup" :personnel-id="currentPersonnel" @close-popup="showPopup=false" />
+	<div class="list">
+		<div
+			v-for="personnel in currentAreaData?.personnel"
+			:key="personnel.personnelName"
+			class="listItem"
+		>
+			<button class="listItemButton" @click="openPopup(personnel.personnelId)">
+				<div class="listItemName">
+					{{ personnel.personnelName }}
+				</div>
+			</button>
+			<ToggleSwitchForListItems default="active" />
+		</div>
+		<button v-if="currentAreaData" class="listItemAddButton" @click="addPersonnel()">
+			Personal hinzufügen
+		</button>
+	</div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/AddPatientPopup.vue b/frontend/src/components/widgets/AddPatientPopup.vue
index dcc7d45e..2b265e82 100644
--- a/frontend/src/components/widgets/AddPatientPopup.vue
+++ b/frontend/src/components/widgets/AddPatientPopup.vue
@@ -82,20 +82,6 @@
 </template>
 
 <style scoped>
-	.popup-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-		z-index: 1;
-	}
-
 	.popup {
 		background-color: white;
 		padding: 20px;
@@ -119,6 +105,7 @@
 		display: flex;
 	}
 
+
 	#saveButton {
 		position: relative;
 		color: white;
diff --git a/frontend/src/components/widgets/AreaPopup.vue b/frontend/src/components/widgets/AreaPopup.vue
index 2c148a54..1229f610 100644
--- a/frontend/src/components/widgets/AreaPopup.vue
+++ b/frontend/src/components/widgets/AreaPopup.vue
@@ -27,20 +27,6 @@
 </template>
 
 <style scoped>
-	.popup-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-		z-index: 1;
-	}
-
 	.popup {
 		background-color: white;
 		padding: 20px;
diff --git a/frontend/src/components/widgets/EditPatientPopup.vue b/frontend/src/components/widgets/EditPatientPopup.vue
index 15a4db03..ff966d00 100644
--- a/frontend/src/components/widgets/EditPatientPopup.vue
+++ b/frontend/src/components/widgets/EditPatientPopup.vue
@@ -83,20 +83,6 @@
 </template>
 
 <style scoped>
-	.popup-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-		z-index: 1;
-	}
-
 	.popup {
 		background-color: white;
 		padding: 20px;
diff --git a/frontend/src/components/widgets/PersonnelPopup.vue b/frontend/src/components/widgets/PersonnelPopup.vue
new file mode 100644
index 00000000..7d76b13c
--- /dev/null
+++ b/frontend/src/components/widgets/PersonnelPopup.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+	import socketTrainer from "@/sockets/SocketTrainer"
+	import { useExerciseStore } from "@/stores/Exercise"
+
+	const emit = defineEmits(['close-popup'])
+
+	const props = defineProps({
+		personnelId: {
+			type: Number,
+			default: Number.NEGATIVE_INFINITY
+		}
+	})
+
+	const exerciseStore = useExerciseStore()
+
+	function deletePersonnel(){
+		socketTrainer.personnelDelete(props.personnelId)
+	}
+</script>
+
+<template>
+	<div class="popup-overlay" @click="emit('close-popup')">
+		<div class="popup">
+			<h2>{{ exerciseStore.getPersonnel(props.personnelId)?.personnelName }}</h2>
+			<button id="deleteButton" @click="deletePersonnel()">
+				Personal löschen
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+	.popup {
+		background-color: white;
+		padding: 20px;
+		border-radius: 8px;
+	}
+
+	#deleteButton {
+		position: relative;
+		background-color: #ee4035;
+		color: white;
+		border: 1px solid rgb(209, 213, 219);
+		border-radius: .5rem;
+		width: 100%;
+		font-size: 1.25rem;
+		padding: .75rem 1rem;
+		text-align: center;
+		margin-top: 10px;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/ToggleSwitchForListItems.vue b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
index bd3f2b14..ffe63214 100644
--- a/frontend/src/components/widgets/ToggleSwitchForListItems.vue
+++ b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
@@ -61,6 +61,6 @@ input:checked + .slider {
 }
 
 input:checked + .slider:before {
-	transform: translateX(22px);
+	transform: translateX(23px);
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/TriagePopup.vue b/frontend/src/components/widgets/TriagePopup.vue
index 6a5b44a0..692ec024 100644
--- a/frontend/src/components/widgets/TriagePopup.vue
+++ b/frontend/src/components/widgets/TriagePopup.vue
@@ -45,20 +45,6 @@
 </template>
 
 <style scoped>
-	.popup-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-		z-index: 1;
-	}
-
 	.popup {
 		background-color: white;
 		padding: 20px;
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index a0bd4593..1c5ec95d 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -142,6 +142,20 @@ class SocketTrainer {
 			'patientId': patientId
 		}))
 	}
+
+	personnelAdd(areaName: string) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'personnel-add',
+			'areaName': areaName
+		}))
+	}
+
+	personnelDelete(personnelId: number) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'personnel-delete',
+			'personnelId': personnelId
+		}))
+	}
 }
 
 const socketTrainer = new SocketTrainer('ws://localhost:8000/ws/trainer/?token=')
@@ -197,7 +211,7 @@ export const serverMockEvents = [
 			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
 			'{"areaName":"Wagenhalle","patients":[{"patientId":1,"patientName":"Isabelle Busch","patientCode":5,"triage":"G"},' +
 			'{"patientId":4,"patientName":"Jasper Park","patientCode":6,"triage":"Y"}],' +
-			'"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
+			'"personnel":[{"personnelId":3,"personnelName":"Antonio Fleiker"}],' +
 			'"devices":[{"deviceId":3,"deviceName":"Beatmungsgerät"}]}]}}'
 	},
 	{id: 'exercise-start', data: '{"messageType":"exercise-start"}'},
diff --git a/frontend/src/stores/Exercise.ts b/frontend/src/stores/Exercise.ts
index 23ed34b1..dbfe26cf 100644
--- a/frontend/src/stores/Exercise.ts
+++ b/frontend/src/stores/Exercise.ts
@@ -37,6 +37,17 @@ export const useExerciseStore = defineStore('exercise', {
 				})
 				return foundPatient
 			}
+		},
+		getPersonnel: (state) => {
+			return (personnelId: number): Personnel | null => {
+				let foundPersonnel: Personnel | null = null
+				state.areas.forEach((area) => {
+					area.personnel.forEach((personnel) => {
+						if (personnel.personnelId == personnelId) foundPersonnel = personnel
+					})
+				})
+				return foundPersonnel
+			}
 		}
 	},
 	actions: {

From cbc3595ed6532773cf832b49abd4fddd9ce94177 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Tue, 26 Mar 2024 11:39:59 +0100
Subject: [PATCH 15/22] #87 frontend: add material list and DeleteItemPopup

---
 .../screensTrainer/ScreenExerciseCreation.vue | 10 ++-
 .../pagesResourceCreation/PageMaterial.vue    | 77 +++++++++++++++++--
 .../pagesResourceCreation/PagePersonnel.vue   | 13 +++-
 .../{AreaPopup.vue => DeleteItemPopup.vue}    | 26 +++----
 .../src/components/widgets/PersonnelPopup.vue | 51 ------------
 frontend/src/sockets/MessageData.ts           | 14 ++--
 frontend/src/sockets/SocketTrainer.ts         | 27 +++++--
 7 files changed, 129 insertions(+), 89 deletions(-)
 rename frontend/src/components/widgets/{AreaPopup.vue => DeleteItemPopup.vue} (61%)
 delete mode 100644 frontend/src/components/widgets/PersonnelPopup.vue

diff --git a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
index 79e6a174..5e4ae8f8 100644
--- a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
+++ b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
@@ -6,7 +6,7 @@
 	import TopBarTrainer from "@/components/widgets/TopBarTrainer.vue"
 	import {svg} from "@/assets/Svg"
 	import {setArea} from "@/components/screensTrainer/ScreenResourceCreation.vue"
-	import AreaPopup from '../widgets/AreaPopup.vue'
+	import DeleteItemPopup from '../widgets/DeleteItemPopup.vue'
 
 	const exerciseStore = useExerciseStore()
 
@@ -32,11 +32,15 @@
 		socketTrainer.areaAdd()
 	}
 
+	function deleteArea(){
+		socketTrainer.areaDelete(currentArea.value)
+	}
+
 	const showPopup = ref(false)
 </script>
 
 <template>
-	<AreaPopup v-if="showPopup" :area-name="currentArea" @close-popup="showPopup=false" />
+	<DeleteItemPopup v-if="showPopup" :name="currentArea" @close-popup="showPopup=false" @delete="deleteArea" />
 	<TopBarTrainer />
 	<div class="list">
 		<div
@@ -83,7 +87,7 @@
 		background-color: rgb(243, 244, 246);
 	}
 
-	.selected .areaButton {
+	.selected .listItemButton {
 		filter: brightness(90%);
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
index cdcaac3c..4b73bf7d 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-	import {computed} from 'vue'
+	import {computed, ref} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
+	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
+	import DeleteItemPopup from '@/components/widgets/DeleteItemPopup.vue'
+	import socketTrainer from '@/sockets/SocketTrainer'
 
     const props = defineProps({
 		currentArea: {
@@ -12,12 +15,72 @@
 	const exerciseStore = useExerciseStore()
 
 	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+
+	const currentItem = ref('')
+
+	const showPopup = ref(false)
+
+	function openPopup(materialName: string) {
+		currentItem.value = materialName
+		showPopup.value = true
+	}
+
+	function addMaterial() {
+		//socketTrainer.materialAdd(props.currentArea)
+	}
+
+	function deleteMaterial(){
+		socketTrainer.materialDelete(currentItem.value)
+	}
+
+	const devices = computed(() => {
+		return currentAreaData.value?.material.filter(material => material.materialType === 'device') || []
+	})
+
+	const bloodList = computed(() => {
+		return currentAreaData.value?.material.filter(material => material.materialType === 'blood') || []
+	})
 </script>
 
 <template>
-	<h1>Patienten</h1>
-	{{ currentAreaData?.devices }}
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file
+	<DeleteItemPopup
+		v-if="showPopup"
+		:name="currentItem"
+		@delete="deleteMaterial"
+		@close-popup="showPopup=false"
+	/>
+	<div class="list">
+		<div
+			v-for="device in devices"
+			:key="device.materialName"
+			class="listItem"
+		>
+			<button class="listItemButton" @click="openPopup(device.materialName)">
+				<div class="listItemName">
+					{{ device.materialName }}
+				</div>
+			</button>
+			<ToggleSwitchForListItems default="active" />
+		</div>
+		<button v-if="currentAreaData" class="listItemAddButton" @click="addMaterial()">
+			Gerät hinzufügen
+		</button>
+	</div>
+	<div class="list">
+		<div
+			v-for="blood in bloodList"
+			:key="blood.materialName"
+			class="listItem"
+		>
+			<button class="listItemButton" @click="openPopup(blood.materialName)">
+				<div class="listItemName">
+					{{ blood.materialName }}
+				</div>
+			</button>
+			<ToggleSwitchForListItems default="active" />
+		</div>
+		<button v-if="currentAreaData" class="listItemAddButton" @click="addMaterial()">
+			Blut hinzufügen
+		</button>
+	</div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
index 5726920f..26ef2a72 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
@@ -2,8 +2,8 @@
 	import {computed, ref} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
 	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
-	import PersonnelPopup from '@/components/widgets/PersonnelPopup.vue'
 	import socketTrainer from '@/sockets/SocketTrainer'
+	import DeleteItemPopup from '@/components/widgets/DeleteItemPopup.vue'
 
     const props = defineProps({
 		currentArea: {
@@ -28,10 +28,19 @@
 	function addPersonnel() {
 		socketTrainer.personnelAdd(props.currentArea)
 	}
+
+	function deletePersonnel(){
+		socketTrainer.personnelDelete(currentPersonnel.value)
+	}
 </script>
 
 <template>
-	<PersonnelPopup v-if="showPopup" :personnel-id="currentPersonnel" @close-popup="showPopup=false" />
+	<DeleteItemPopup
+		v-if="showPopup"
+		:name="exerciseStore.getPersonnel(currentPersonnel)?.personnelName"
+		@close-popup="showPopup=false"
+		@delete="deletePersonnel"
+	/>
 	<div class="list">
 		<div
 			v-for="personnel in currentAreaData?.personnel"
diff --git a/frontend/src/components/widgets/AreaPopup.vue b/frontend/src/components/widgets/DeleteItemPopup.vue
similarity index 61%
rename from frontend/src/components/widgets/AreaPopup.vue
rename to frontend/src/components/widgets/DeleteItemPopup.vue
index 1229f610..af4e3c71 100644
--- a/frontend/src/components/widgets/AreaPopup.vue
+++ b/frontend/src/components/widgets/DeleteItemPopup.vue
@@ -1,26 +1,24 @@
 <script setup lang="ts">
-	import socketTrainer from "@/sockets/SocketTrainer"
-
-	const emit = defineEmits(['close-popup'])
+	const emit = defineEmits(['close-popup','delete'])
 
 	const props = defineProps({
-		areaName: {
+		name: {
 			type: String,
-			default: "Kein Bereich ausgewählt"
-		}
+			default: "Kein Name angegeben"
+		},
+        deleteText: {
+            type: String,
+            default: "Löschen"
+        }
 	})
-
-	function deleteArea(){
-		socketTrainer.areaDelete(props.areaName as string)
-	}
 </script>
 
 <template>
 	<div class="popup-overlay" @click="emit('close-popup')">
 		<div class="popup">
-			<h2>{{ props.areaName }}</h2>
-			<button id="deleteButton" @click="deleteArea()">
-				Bereich löschen
+			<h2>{{ props.name }}</h2>
+			<button id="deleteButton" @click="emit('delete')">
+				{{ props.deleteText }}
 			</button>
 		</div>
 	</div>
@@ -39,7 +37,7 @@
 		color: white;
 		border: 1px solid rgb(209, 213, 219);
 		border-radius: .5rem;
-		width: 100%;
+		width: 180px;
 		font-size: 1.25rem;
 		padding: .75rem 1rem;
 		text-align: center;
diff --git a/frontend/src/components/widgets/PersonnelPopup.vue b/frontend/src/components/widgets/PersonnelPopup.vue
deleted file mode 100644
index 7d76b13c..00000000
--- a/frontend/src/components/widgets/PersonnelPopup.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-	import socketTrainer from "@/sockets/SocketTrainer"
-	import { useExerciseStore } from "@/stores/Exercise"
-
-	const emit = defineEmits(['close-popup'])
-
-	const props = defineProps({
-		personnelId: {
-			type: Number,
-			default: Number.NEGATIVE_INFINITY
-		}
-	})
-
-	const exerciseStore = useExerciseStore()
-
-	function deletePersonnel(){
-		socketTrainer.personnelDelete(props.personnelId)
-	}
-</script>
-
-<template>
-	<div class="popup-overlay" @click="emit('close-popup')">
-		<div class="popup">
-			<h2>{{ exerciseStore.getPersonnel(props.personnelId)?.personnelName }}</h2>
-			<button id="deleteButton" @click="deletePersonnel()">
-				Personal löschen
-			</button>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-	.popup {
-		background-color: white;
-		padding: 20px;
-		border-radius: 8px;
-	}
-
-	#deleteButton {
-		position: relative;
-		background-color: #ee4035;
-		color: white;
-		border: 1px solid rgb(209, 213, 219);
-		border-radius: .5rem;
-		width: 100%;
-		font-size: 1.25rem;
-		padding: .75rem 1rem;
-		text-align: center;
-		margin-top: 10px;
-	}
-</style>
\ No newline at end of file
diff --git a/frontend/src/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
index d94c7666..40c6410a 100644
--- a/frontend/src/sockets/MessageData.ts
+++ b/frontend/src/sockets/MessageData.ts
@@ -14,8 +14,8 @@ interface MessageData {
 	patientId?: number
 	personnelName?: string
 	personnelId?: number
-	deviceName?: string
-	deviceId?: number
+	materialName?: string
+	materialId?: number
 	exercise?: Exercise
 	state?: State
 	logEntry?: LogEntry
@@ -33,7 +33,7 @@ interface Area {
 	areaName: string
 	patients: Patient[]
 	personnel: Personnel[]
-	devices: Device[]
+	material: Material[]
 }
 
 interface Patient {
@@ -48,9 +48,9 @@ interface Personnel {
 	personnelName: string
 }
 
-interface Device {
-	deviceId: number
-	deviceName: string
+interface Material {
+	materialName: string
+	materialType: string
 }
 
 interface State {
@@ -70,7 +70,7 @@ interface LogEntry {
 	areaName: string
 	patientId: number
 	personnelId: number
-	deviceId: number
+	materialId: number
 }
 
 interface AvailablePatient {
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index 1c5ec95d..77c31253 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -156,6 +156,21 @@ class SocketTrainer {
 			'personnelId': personnelId
 		}))
 	}
+
+	materialAdd(areaName: string, materialName: string) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'material-add',
+			'areaName': areaName,
+			'materialName': materialName
+		}))
+	}
+
+	materialDelete(materialName: string) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'material-delete',
+			'materialName': materialName
+		}))
+	}
 }
 
 const socketTrainer = new SocketTrainer('ws://localhost:8000/ws/trainer/?token=')
@@ -204,15 +219,17 @@ export const serverMockEvents = [
 		data: '{"messageType":"exercise","exercise":{"exerciseId":123456,"areas":[' +
 			'{"areaName":"Intensiv","patients":[{"patientId":5,"patientName":"Anna Müller","patientCode":1,"triage":"Y"},'+
 			'{"patientId":3,"patientName":"Frank Huber",' +
-			'"patientCode":2,"triage":"G"}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"devices":' +
-			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"ZNA","patients":' +
+			'"patientCode":2,"triage":"G"}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"material":' +
+			'[{"materialName":"Treadmill","materialType":"device"},{"materialName":"Blut 0 positiv","materialType":"blood"}]},'+
+			'{"areaName":"ZNA","patients":' +
 			'[{"patientId":2,"patientName":"Luna Patel","patientCode":3,"triage":"R"},' + 
 			'{"patientId":6,"patientName":"Friedrich Gerhard","patientCode":4,"triage":"Y"}],'+
-			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
+			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],'+
+			'"material":[{"materialName":"Dumbbells","materialType":"device"},{"materialName":"Blut A positiv","materialType":"blood"}]},' +
 			'{"areaName":"Wagenhalle","patients":[{"patientId":1,"patientName":"Isabelle Busch","patientCode":5,"triage":"G"},' +
 			'{"patientId":4,"patientName":"Jasper Park","patientCode":6,"triage":"Y"}],' +
-			'"personnel":[{"personnelId":3,"personnelName":"Antonio Fleiker"}],' +
-			'"devices":[{"deviceId":3,"deviceName":"Beatmungsgerät"}]}]}}'
+			'"personnel":[{"personnelId":3,"personnelName":"Antonio Wilhelm David Fleiker"}],' +
+			'"material":[{"materialName":"Beatmungsgerät","materialType":"device"},{"materialName":"Blut 0 negativ","materialType":"blood"}]}]}}'
 	},
 	{id: 'exercise-start', data: '{"messageType":"exercise-start"}'},
 	{id: 'exercise-stop', data: '{"messageType":"exercise-stop"}'},

From 08efca5af01642ad8d3b8c67264e6d50bd44f925 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Tue, 26 Mar 2024 14:47:17 +0100
Subject: [PATCH 16/22] #87 frontend: add AddMaterialPopup

---
 .../pagesResourceCreation/PageMaterial.vue    | 40 +++++++----
 .../components/widgets/AddMaterialPopup.vue   | 69 +++++++++++++++++++
 frontend/src/sockets/MessageData.ts           | 39 +++++++----
 frontend/src/sockets/SocketTrainer.ts         | 20 +++++-
 frontend/src/stores/Availables.ts             |  6 +-
 5 files changed, 141 insertions(+), 33 deletions(-)
 create mode 100644 frontend/src/components/widgets/AddMaterialPopup.vue

diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
index 4b73bf7d..037b352f 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
@@ -4,6 +4,7 @@
 	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
 	import DeleteItemPopup from '@/components/widgets/DeleteItemPopup.vue'
 	import socketTrainer from '@/sockets/SocketTrainer'
+	import AddMaterialPopup from '@/components/widgets/AddMaterialPopup.vue'
 
     const props = defineProps({
 		currentArea: {
@@ -16,21 +17,24 @@
 
 	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
 
-	const currentItem = ref('')
+	const currentMaterialName = ref('No Material Name')
+	const currentMaterialType = ref('No Material Type')
 
-	const showPopup = ref(false)
+	const showDeletePopup = ref(false)
+	const showAddPopup = ref(false)
 
-	function openPopup(materialName: string) {
-		currentItem.value = materialName
-		showPopup.value = true
+	function openDeletePopup(materialName: string) {
+		currentMaterialName.value = materialName
+		showDeletePopup.value = true
 	}
 
-	function addMaterial() {
-		//socketTrainer.materialAdd(props.currentArea)
+	function openAddPopup(materialType: string) {
+		currentMaterialType.value = materialType
+		showAddPopup.value = true
 	}
 
 	function deleteMaterial(){
-		socketTrainer.materialDelete(currentItem.value)
+		socketTrainer.materialDelete(currentMaterialName.value)
 	}
 
 	const devices = computed(() => {
@@ -44,10 +48,16 @@
 
 <template>
 	<DeleteItemPopup
-		v-if="showPopup"
-		:name="currentItem"
+		v-if="showDeletePopup"
+		:name="currentMaterialName"
 		@delete="deleteMaterial"
-		@close-popup="showPopup=false"
+		@close-popup="showDeletePopup=false"
+	/>
+	<AddMaterialPopup
+		v-if="showAddPopup"
+		:material-type="currentMaterialType"
+		:current-area="props.currentArea"
+		@close-popup="showAddPopup=false"
 	/>
 	<div class="list">
 		<div
@@ -55,14 +65,14 @@
 			:key="device.materialName"
 			class="listItem"
 		>
-			<button class="listItemButton" @click="openPopup(device.materialName)">
+			<button class="listItemButton" @click="openDeletePopup(device.materialName)">
 				<div class="listItemName">
 					{{ device.materialName }}
 				</div>
 			</button>
 			<ToggleSwitchForListItems default="active" />
 		</div>
-		<button v-if="currentAreaData" class="listItemAddButton" @click="addMaterial()">
+		<button v-if="currentAreaData" class="listItemAddButton" @click="openAddPopup('device')">
 			Gerät hinzufügen
 		</button>
 	</div>
@@ -72,14 +82,14 @@
 			:key="blood.materialName"
 			class="listItem"
 		>
-			<button class="listItemButton" @click="openPopup(blood.materialName)">
+			<button class="listItemButton" @click="openDeletePopup(blood.materialName)">
 				<div class="listItemName">
 					{{ blood.materialName }}
 				</div>
 			</button>
 			<ToggleSwitchForListItems default="active" />
 		</div>
-		<button v-if="currentAreaData" class="listItemAddButton" @click="addMaterial()">
+		<button v-if="currentAreaData" class="listItemAddButton" @click="openAddPopup('blood')">
 			Blut hinzufügen
 		</button>
 	</div>
diff --git a/frontend/src/components/widgets/AddMaterialPopup.vue b/frontend/src/components/widgets/AddMaterialPopup.vue
new file mode 100644
index 00000000..30c512ce
--- /dev/null
+++ b/frontend/src/components/widgets/AddMaterialPopup.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+	import socketTrainer from "@/sockets/SocketTrainer"
+	import { useAvailablesStore } from "@/stores/Availables"
+	import { computed ,ref } from "vue"
+
+	const emit = defineEmits(['close-popup'])
+
+	const props = defineProps({
+		materialType: {
+			type: String,
+			default: 'Kein Materialtyp ausgewählt'
+		},
+		currentArea: {
+			type: String,
+			default: 'Kein Bereich ausgewählt'
+		}
+	})
+
+	const title = computed(() => {
+		switch (props.materialType) {
+			case 'device':
+				return 'Gerät hinzufügen'
+			case 'blood':
+				return 'Blut hinzufügen'
+			default:
+				return 'Kein Materialtyp ausgewählt'
+		}
+	})
+
+	const availablesStore = useAvailablesStore()
+	const availableMaterialList = ref(availablesStore.material)
+
+	const availableMaterial = computed(() => {
+		return availableMaterialList.value.filter(availableMaterial => availableMaterial.materialType === props.materialType)
+	})
+
+	function addMaterial(materialName: string){
+		socketTrainer.materialAdd(props.currentArea, materialName)
+		emit('close-popup')
+	}
+</script>
+
+<template>
+	<div class="popup-overlay" @click="emit('close-popup')">
+		<div class="popup" @click.stop="">
+			<h2>{{ title }}</h2>
+			<div class="list">
+				<div
+					v-for="material in availableMaterial"
+					:key="material.materialName"
+					class="listItem"
+				>
+					<button class="listItemButton" @click="addMaterial(material.materialName)">
+						<div class="listItemName">
+							{{ material.materialName }}
+						</div>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style scoped>
+	.popup {
+		background-color: white;
+		padding: 20px;
+		border-radius: 8px;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
index 40c6410a..eed98063 100644
--- a/frontend/src/sockets/MessageData.ts
+++ b/frontend/src/sockets/MessageData.ts
@@ -21,7 +21,7 @@ interface MessageData {
 	logEntry?: LogEntry
 	availablePatients: AvailablePatients
 	availableActions: AvailableActions
-	availableMaterial: AvailableMaterial
+	availableMaterialList: AvailableMaterial
 }
 
 interface Exercise {
@@ -73,29 +73,40 @@ interface LogEntry {
 	materialId: number
 }
 
-interface AvailablePatient {
-	patientCode: number
-	triage: string
-	patientInjury: string
-	patientHistory: string
-	patientPersonalDetails: string
-	patientBiometrics: string
-}
-
 interface Availables {
-	actions: [],
+	actions: AvailableAction[],
 	patients: AvailablePatient[],
-	material: [],
+	material: AvailableMaterial[],
 }
 
 interface AvailableActions {
-	actions: [],
+	availableActions: AvailableAction[],
+}
+
+interface AvailableAction {
+	actionName: string
+	actionDescription: string
+	actionType: string
 }
 
 interface AvailablePatients {
 	availablePatients: AvailablePatient[],
 }
 
+interface AvailablePatient {
+	patientCode: number
+	triage: string
+	patientInjury: string
+	patientHistory: string
+	patientPersonalDetails: string
+	patientBiometrics: string
+}
+
+interface AvailableMaterialList {
+	availableMaterialList: AvailableMaterial[],
+}
+
 interface AvailableMaterial {
-	material: [],
+	materialName: string
+	materialType: string
 }
\ No newline at end of file
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index 77c31253..d526823b 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -51,7 +51,7 @@ class SocketTrainer {
 					useAvailablesStore().loadAvailableActions(data.availableActions as AvailableActions)
 					break
 				case 'available-material':
-					useAvailablesStore().loadAvailableMaterial(data.availableMaterial as AvailableMaterial)
+					useAvailablesStore().loadAvailableMaterial(data.availableMaterialList as unknown as AvailableMaterialList)
 					break
 				case 'available-patients':
 					useAvailablesStore().loadAvailablePatients(data.availablePatients as AvailablePatients)
@@ -214,6 +214,24 @@ export const serverMockEvents = [
 			'"patientPersonalDetails":"Male, 39 years old","patientBiometrics":"Height:173cm, Weight: 61kg"}'+
 			']}}'
 	},
+	{
+		id: "available-material",
+		data: '{"messageType":"available-material","availableMaterialList":{"availableMaterialList":['+
+			'{"materialName":"Beatmungsgerät","materialType":"device"},'+
+			'{"materialName":"Blutdruckmessgerät","materialType":"device"},'+
+			'{"materialName":"Defibrillator","materialType":"device"},'+
+			'{"materialName":"Endoskop","materialType":"device"},'+
+			'{"materialName":"Herz-Lungen-Maschine","materialType":"device"},'+
+			'{"materialName":"Blut 0 negativ","materialType":"blood"},'+
+			'{"materialName":"Blut 0 positiv","materialType":"blood"},'+
+			'{"materialName":"Blut A negativ","materialType":"blood"},'+
+			'{"materialName":"Blut A positiv","materialType":"blood"},'+
+			'{"materialName":"Blut B negativ","materialType":"blood"},'+
+			'{"materialName":"Blut B positiv","materialType":"blood"},'+
+			'{"materialName":"Blut AB negativ","materialType":"blood"},'+
+			'{"materialName":"Blut AB positiv","materialType":"blood"}'+
+			']}}'
+	},
 	{
 		id: 'exercise',
 		data: '{"messageType":"exercise","exercise":{"exerciseId":123456,"areas":[' +
diff --git a/frontend/src/stores/Availables.ts b/frontend/src/stores/Availables.ts
index 377fe3de..c5fd4eba 100644
--- a/frontend/src/stores/Availables.ts
+++ b/frontend/src/stores/Availables.ts
@@ -19,13 +19,13 @@ export const useAvailablesStore = defineStore('availables', {
 	},
 	actions: {
 		loadAvailableActions(json: AvailableActions) {
-			this.actions = json.actions
+			this.actions = json.availableActions
 		},
 		loadAvailablePatients(json: AvailablePatients) {
 			this.patients = json.availablePatients
 		},
-		loadAvailableMaterial(json: AvailableMaterial) {
-			this.material = json.material
+		loadAvailableMaterial(json: AvailableMaterialList) {
+			this.material = json.availableMaterialList
 		}
 	}
 })
\ No newline at end of file

From 16854340667cfdacd92c769b6bc8ad5267eac55b Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Tue, 26 Mar 2024 15:00:29 +0100
Subject: [PATCH 17/22] #86 frontend: translate mock data

---
 frontend/src/sockets/SocketTrainer.ts | 44 +++++++++++++--------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index d526823b..45dd1a49 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -183,35 +183,35 @@ export const serverMockEvents = [
 		id: "available-patients",
 		data: '{"messageType":"available-patients","availablePatients":{"availablePatients":['+
 			'{"patientCode":1,'+
-			'"triage":"Y","patientInjury":"broken arm","patientHistory":"Asthma",'+
-			'"patientPersonalDetails":"Female, 30 years old","patientBiometrics":"Height:196cm, Weight: 76kg"},'+
+			'"triage":"Y","patientInjury":"Gebrochener Arm","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 30 Jahre alt","patientBiometrics":"Größe: 196cm, Gewicht: 76kg"},'+
 			'{"patientCode":2,'+
-			'"triage":"G","patientInjury":"twisted ankle","patientHistory":"No known allergies",'+
-			'"patientPersonalDetails":"Male, 47 years old","patientBiometrics":"Height:164cm, Weight: 65kg"},'+
+			'"triage":"G","patientInjury":"Verdrehter Knöchel","patientHistory":"Keine Allergien",'+
+			'"patientPersonalDetails":"männlich, 47 Jahre alt","patientBiometrics":"Größe: 164cm, Gewicht: 65kg"},'+
 			'{"patientCode":3,'+
-			'"triage":"R","patientInjury":"head injury","patientHistory":"Diabetes",'+
-			'"patientPersonalDetails":"Female, 20 years old","patientBiometrics":"Height:192cm, Weight: 77kg"},'+
+			'"triage":"R","patientInjury":"Kopfverletzung","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"weiblich, 20 Jahre alt","patientBiometrics":"Größe: 192cm, Gewicht: 77kg"},'+
 			'{"patientCode":4,'+
-			'"triage":"Y","patientInjury":"sprained wrist","patientHistory":"gastroesophageal reflux disease",'+
-			'"patientPersonalDetails":"Male, 13 years old","patientBiometrics":"Height:165cm, Weight: 54kg"},'+
+			'"triage":"Y","patientInjury":"Gebprelltes Bein","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"männlich, 13 Jahre alt","patientBiometrics":"Größe: 165cm, Gewicht: 54kg"},'+
 			'{"patientCode":5,'+
-			'"triage":"G","patientInjury":"bruised ribs","patientHistory":"No known allergies",'+
-			'"patientPersonalDetails":"Female, 53 years old","patientBiometrics":"Height:180cm, Weight: 71kg"},'+
+			'"triage":"G","patientInjury":"Butender Arm","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 53 Jahre alt","patientBiometrics":"Größe: 180cm, Gewicht: 71kg"},'+
 			'{"patientCode":6,'+
-			'"triage":"Y","patientInjury":"shoulder dislocation","patientHistory":"paralyzed",'+
-			'"patientPersonalDetails":"Male, 49 years old","patientBiometrics":"Height:170cm, Weight: 67kg"},'+
+			'"triage":"Y","patientInjury":"Verschobene Schulter","patientHistory":"Gehbehindert",'+
+			'"patientPersonalDetails":"männlich, 49 Jahre alt","patientBiometrics":"Größe: 170cm, Gewicht: 67kg"},'+
 			'{"patientCode":7,'+
-			'"triage":"R","patientInjury":"head trauma","patientHistory":"Asthma",'+
-			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:162cm, Weight: 67kg"},'+
+			'"triage":"R","patientInjury":"Kopfverletzung","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 23 Jahre alt","patientBiometrics":"Größe: 162cm, Gewicht: 67kg"},'+
 			'{"patientCode":8,'+
-			'"triage":"Y","patientInjury":"bruised ribs","patientHistory":"reflux disease",'+
-			'"patientPersonalDetails":"Male, 43 years old","patientBiometrics":"Height:161cm, Weight: 56kg"},'+
+			'"triage":"Y","patientInjury":"Verlorener Finger","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"männlich, 43 Jahre alt","patientBiometrics":"Größe: 161cm, Gewicht: 56kg"},'+
 			'{"patientCode":9,'+
-			'"triage":"G","patientInjury":"sprained wrist","patientHistory":"hearth disease",'+
-			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:182cm, Weight: 75kg"},'+
+			'"triage":"G","patientInjury":"Aufgschürfter Ellenbogen","patientHistory":"Bluthochdruck",'+
+			'"patientPersonalDetails":"weiblich, 23 Jahre alt","patientBiometrics":"Größe: 182cm, Gewicht: 75kg"},'+
 			'{"patientCode":10,'+
-			'"triage":"Y","patientInjury":"shoulder broken","patientHistory":"illness",'+
-			'"patientPersonalDetails":"Male, 39 years old","patientBiometrics":"Height:173cm, Weight: 61kg"}'+
+			'"triage":"Y","patientInjury":"Gebrochene Nase","patientHistory":"Grippe",'+
+			'"patientPersonalDetails":"männlich, 39 Jahre alt","patientBiometrics":"Größe: 173cm, Gewicht: 61kg"}'+
 			']}}'
 	},
 	{
@@ -238,12 +238,12 @@ export const serverMockEvents = [
 			'{"areaName":"Intensiv","patients":[{"patientId":5,"patientName":"Anna Müller","patientCode":1,"triage":"Y"},'+
 			'{"patientId":3,"patientName":"Frank Huber",' +
 			'"patientCode":2,"triage":"G"}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"material":' +
-			'[{"materialName":"Treadmill","materialType":"device"},{"materialName":"Blut 0 positiv","materialType":"blood"}]},'+
+			'[{"materialName":"Beatmungsgerät","materialType":"device"},{"materialName":"Blut 0 positiv","materialType":"blood"}]},'+
 			'{"areaName":"ZNA","patients":' +
 			'[{"patientId":2,"patientName":"Luna Patel","patientCode":3,"triage":"R"},' + 
 			'{"patientId":6,"patientName":"Friedrich Gerhard","patientCode":4,"triage":"Y"}],'+
 			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],'+
-			'"material":[{"materialName":"Dumbbells","materialType":"device"},{"materialName":"Blut A positiv","materialType":"blood"}]},' +
+			'"material":[{"materialName":"Defibillator","materialType":"device"},{"materialName":"Blut A positiv","materialType":"blood"}]},' +
 			'{"areaName":"Wagenhalle","patients":[{"patientId":1,"patientName":"Isabelle Busch","patientCode":5,"triage":"G"},' +
 			'{"patientId":4,"patientName":"Jasper Park","patientCode":6,"triage":"Y"}],' +
 			'"personnel":[{"personnelId":3,"personnelName":"Antonio Wilhelm David Fleiker"}],' +

From df2c2fcab2fc6007698f993193c5681276616159 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Tue, 26 Mar 2024 18:07:38 +0100
Subject: [PATCH 18/22] #93 frontend: add static infos on ScreenStatus

---
 .../components/widgets/ButtonMainAction.vue   |  2 -
 .../src/components/widgets/PatientInfo.vue    |  3 +-
 .../src/components/widgets/PatientStatus.vue  | 25 +++++++++
 frontend/src/sockets/SocketPatient.ts         | 56 ++++++++++++++++---
 frontend/src/stores/Patient.ts                | 23 +++++++-
 5 files changed, 97 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/widgets/ButtonMainAction.vue b/frontend/src/components/widgets/ButtonMainAction.vue
index 3915d95c..c8201626 100644
--- a/frontend/src/components/widgets/ButtonMainAction.vue
+++ b/frontend/src/components/widgets/ButtonMainAction.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import {defineEmits, defineProps} from 'vue'
-
 	withDefaults(defineProps<{
 		buttonText: string
 	}>(), {
diff --git a/frontend/src/components/widgets/PatientInfo.vue b/frontend/src/components/widgets/PatientInfo.vue
index eb289c53..0bb03f37 100644
--- a/frontend/src/components/widgets/PatientInfo.vue
+++ b/frontend/src/components/widgets/PatientInfo.vue
@@ -16,13 +16,12 @@
 			type: String,
 			default: 'No Biometrics'
 		}
-
 	})
 </script>
 
 <template>
 	<p class="key">
-		Verletzung
+		Verletzungen
 	</p>{{ props.injury }}
 	<br>
 	<p class="key">
diff --git a/frontend/src/components/widgets/PatientStatus.vue b/frontend/src/components/widgets/PatientStatus.vue
index 77383aab..a49528ff 100644
--- a/frontend/src/components/widgets/PatientStatus.vue
+++ b/frontend/src/components/widgets/PatientStatus.vue
@@ -42,6 +42,30 @@
 				</p>{{ patientStore.skin }}
 			</td>
 		</tr>
+		<tr>
+			<td>
+				<p class="key">
+					Verletzungen
+				</p>{{ patientStore.injury }}
+			</td>
+			<td>
+				<p class="key">
+					Vorerkrankungen
+				</p>{{ patientStore.history }}
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<p class="key">
+					Personalien
+				</p>{{ patientStore.personalDetails }}
+			</td>
+			<td>
+				<p class="key">
+					Biometrie
+				</p>{{ patientStore.biometrics }}
+			</td>
+		</tr>
 	</table>
 </template>
 
@@ -50,6 +74,7 @@
 		border-collapse: collapse;
 		width: 100%;
 		table-layout: fixed;
+		margin: 90px 30px 30px 30px;
 	}
 
 	td {
diff --git a/frontend/src/sockets/SocketPatient.ts b/frontend/src/sockets/SocketPatient.ts
index 7fcfa314..e1cb24a9 100644
--- a/frontend/src/sockets/SocketPatient.ts
+++ b/frontend/src/sockets/SocketPatient.ts
@@ -1,6 +1,7 @@
 import {connection} from "@/stores/Connection"
 import {usePatientStore} from "@/stores/Patient"
 import {useExerciseStore} from "@/stores/Exercise"
+import {useAvailablesStore} from "@/stores/Availables"
 import {showErrorToast, showWarningToast} from "@/App.vue"
 import {ScreenPosition, Screens, setScreen} from "@/components/ModulePatient.vue"
 
@@ -13,6 +14,10 @@ class SocketPatient {
 	}
 
 	connect(): void {
+		const patientStore = usePatientStore()
+		const exerciseStore = useExerciseStore()
+		const availablesStore = useAvailablesStore()
+
 		this.socket = new WebSocket(this.url + usePatientStore().token)
 
 		this.socket.onopen = () => {
@@ -47,13 +52,15 @@ class SocketPatient {
 					showWarningToast(data.message || '')
 					break
 				case 'state':
-					usePatientStore().loadStatusFromJSON(data.state as State)
+					patientStore.loadStatusFromJSON(data.state as State)
+					break
+				case 'available-patients':
+					availablesStore.loadAvailablePatients(data.availablePatients as AvailablePatients)
+					patientStore.initializePatientFromAvailablePatients()
 					break
 				case 'exercise':
-					useExerciseStore().createFromJSON(data.exercise as Exercise)
-					usePatientStore().patientName = useExerciseStore().getPatient(usePatientStore().patientId)?.patientName || ''
-					usePatientStore().areaName = useExerciseStore().getAreaOfPatient(usePatientStore().patientId)?.areaName || ''
-					usePatientStore().triage = useExerciseStore().getPatient(usePatientStore().patientId)?.triage || '-'
+					exerciseStore.createFromJSON(data.exercise as Exercise)
+					patientStore.initializePatientFromExercise()
 					break
 				case 'exercise-start':
 					setScreen(Screens.STATUS, ScreenPosition.LEFT)
@@ -114,8 +121,43 @@ export const serverMockEvents = [
 	{id: 'test-passthrough', data: '{"messageType":"test-passthrough","message":"received test-passthrough event"}'},
 	{
 		id: 'state',
-		data: '{"messageType":"state","state":{"phaseNumber":"123","airway":"Normal","breathing":"Regular","circulation":"Stable",' +
-			'"consciousness":"Alert","pupils":"Reactive","psyche":"Calm","skin":"Warm"}}'
+		data: '{"messageType":"state","state":{"phaseNumber":"123","airway":"Normal","breathing":"Regelmäßig","circulation":"Stabil",' +
+			'"consciousness":"Bewusstlos","pupils":"Geweitet","psyche":"Ruhig","skin":"Blass"}}'
+	},
+	{
+		id: "available-patients",
+		data: '{"messageType":"available-patients","availablePatients":{"availablePatients":['+
+			'{"patientCode":1,'+
+			'"triage":"Y","patientInjury":"broken arm","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"Female, 30 years old","patientBiometrics":"Height:196cm, Weight: 76kg"},'+
+			'{"patientCode":2,'+
+			'"triage":"G","patientInjury":"twisted ankle","patientHistory":"No known allergies",'+
+			'"patientPersonalDetails":"Male, 47 years old","patientBiometrics":"Height:164cm, Weight: 65kg"},'+
+			'{"patientCode":3,'+
+			'"triage":"R","patientInjury":"head injury","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"Female, 20 years old","patientBiometrics":"Height:192cm, Weight: 77kg"},'+
+			'{"patientCode":4,'+
+			'"triage":"Y","patientInjury":"sprained wrist","patientHistory":"gastroesophageal reflux disease",'+
+			'"patientPersonalDetails":"Male, 13 years old","patientBiometrics":"Height:165cm, Weight: 54kg"},'+
+			'{"patientCode":5,'+
+			'"triage":"G","patientInjury":"bruised ribs","patientHistory":"No known allergies",'+
+			'"patientPersonalDetails":"Female, 53 years old","patientBiometrics":"Height:180cm, Weight: 71kg"},'+
+			'{"patientCode":6,'+
+			'"triage":"Y","patientInjury":"shoulder dislocation","patientHistory":"paralyzed",'+
+			'"patientPersonalDetails":"Male, 49 years old","patientBiometrics":"Height:170cm, Weight: 67kg"},'+
+			'{"patientCode":7,'+
+			'"triage":"R","patientInjury":"head trauma","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:162cm, Weight: 67kg"},'+
+			'{"patientCode":8,'+
+			'"triage":"Y","patientInjury":"bruised ribs","patientHistory":"reflux disease",'+
+			'"patientPersonalDetails":"Male, 43 years old","patientBiometrics":"Height:161cm, Weight: 56kg"},'+
+			'{"patientCode":9,'+
+			'"triage":"G","patientInjury":"sprained wrist","patientHistory":"hearth disease",'+
+			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:182cm, Weight: 75kg"},'+
+			'{"patientCode":10,'+
+			'"triage":"Y","patientInjury":"shoulder broken","patientHistory":"illness",'+
+			'"patientPersonalDetails":"Male, 39 years old","patientBiometrics":"Height:173cm, Weight: 61kg"}'+
+			']}}'
 	},
 	{
 		id: 'exercise',
diff --git a/frontend/src/stores/Patient.ts b/frontend/src/stores/Patient.ts
index 197c9105..7d25b4dd 100644
--- a/frontend/src/stores/Patient.ts
+++ b/frontend/src/stores/Patient.ts
@@ -1,9 +1,12 @@
 import {defineStore} from "pinia"
+import {useExerciseStore} from "@/stores/Exercise"
+import { useAvailablesStore } from "./Availables"
 
 export const usePatientStore = defineStore('patient', {
 	state: () => ({
 		token: '',
 		patientId: Number.NEGATIVE_INFINITY,
+		patientCode: Number.NEGATIVE_INFINITY,
 		patientName: '',
 		triage: '-',
 		areaName: '',
@@ -14,7 +17,11 @@ export const usePatientStore = defineStore('patient', {
 		phaseNumber: 0,
 		psyche: '',
 		pupils: '',
-		skin: ''
+		skin: '',
+		injury: '',
+		history: '',
+		personalDetails: '',
+		biometrics: ''
 	}),
 	actions: {
 		loadStatusFromJSON(state: State) {
@@ -26,6 +33,20 @@ export const usePatientStore = defineStore('patient', {
 			this.psyche = state.psyche
 			this.pupils = state.pupils
 			this.skin = state.skin
+		},
+		initializePatientFromExercise() {
+			const exerciseStore = useExerciseStore()
+			this.patientName = exerciseStore.getPatient(this.patientId)?.patientName || ''
+			this.patientCode = exerciseStore.getPatient(this.patientId)?.patientCode || Number.NEGATIVE_INFINITY
+			this.areaName = exerciseStore.getAreaOfPatient(this.patientId)?.areaName || ''
+			this.triage = exerciseStore.getPatient(this.patientId)?.triage || '-'
+		},
+		initializePatientFromAvailablePatients() {
+			const availablesStore = useAvailablesStore()
+			this.injury = availablesStore.getPatient(this.patientCode)?.patientInjury || ''
+			this.history = availablesStore.getPatient(this.patientCode)?.patientHistory || ''
+			this.personalDetails = availablesStore.getPatient(this.patientCode)?.patientPersonalDetails || ''
+			this.biometrics = availablesStore.getPatient(this.patientCode)?.patientBiometrics || ''
 		}
 	}
 })
\ No newline at end of file

From eab8f4ce1c5bc4e1af63790ce74a342a7e2c6f6e Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Tue, 26 Mar 2024 19:05:51 +0100
Subject: [PATCH 19/22] #86 frontend: remove deviceId and materialId

---
 frontend/src/sockets/MessageData.ts   | 2 --
 frontend/src/sockets/SocketPatient.ts | 6 +++---
 frontend/src/sockets/SocketTrainer.ts | 6 +++---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
index eed98063..04844f48 100644
--- a/frontend/src/sockets/MessageData.ts
+++ b/frontend/src/sockets/MessageData.ts
@@ -15,7 +15,6 @@ interface MessageData {
 	personnelName?: string
 	personnelId?: number
 	materialName?: string
-	materialId?: number
 	exercise?: Exercise
 	state?: State
 	logEntry?: LogEntry
@@ -70,7 +69,6 @@ interface LogEntry {
 	areaName: string
 	patientId: number
 	personnelId: number
-	materialId: number
 }
 
 interface Availables {
diff --git a/frontend/src/sockets/SocketPatient.ts b/frontend/src/sockets/SocketPatient.ts
index 7fcfa314..4e680347 100644
--- a/frontend/src/sockets/SocketPatient.ts
+++ b/frontend/src/sockets/SocketPatient.ts
@@ -123,14 +123,14 @@ export const serverMockEvents = [
 			'{"areaName":"Intensiv","patients":[{"patientId":5,"patientName":"Anna Müller","patientCode":1,"triage":"Y"},'+
 			'{"patientId":3,"patientName":"Frank Huber",' +
 			'"patientCode":2,"triage":"G"}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"devices":' +
-			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"ZNA","patients":' +
+			'[{"deviceName":"Treadmill"}]},{"areaName":"ZNA","patients":' +
 			'[{"patientId":2,"patientName":"Luna Patel","patientCode":3,"triage":"R"},' + 
 			'{"patientId":6,"patientName":"Friedrich Gerhard","patientCode":4,"triage":"Y"}],'+
-			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
+			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],"devices":[{"deviceName":"Dumbbells"}]},' +
 			'{"areaName":"Wagenhalle","patients":[{"patientId":1,"patientName":"Isabelle Busch","patientCode":5,"triage":"G"},' +
 			'{"patientId":4,"patientName":"Jasper Park","patientCode":6,"triage":"Y"}],' +
 			'"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
-			'"devices":[{"deviceId":3,"deviceName":"Beatmungsgerät"}]}]}}'
+			'"devices":[{"deviceName":"Beatmungsgerät"}]}]}}'
 	},
 	{id: 'exercise-start', data: '{"messageType":"exercise-start"}'},
 	{id: 'exercise-stop', data: '{"messageType":"exercise-stop"}'},
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index 45dd1a49..beb2a072 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -255,10 +255,10 @@ export const serverMockEvents = [
 		id: 'log-update',
 		data: '{"messageType":"log-update","logEntry":[' +
 			'{"logMessage":"Patient admitted","logTime":' + Date.UTC(2024, 2, 20, 14, 32, 20, 0) +
-			',"areaName":"EmergencyRoom","patientId":123,"personnelId":456,"deviceId":789},' +
+			',"areaName":"EmergencyRoom","patientId":123,"personnelId":456},' +
 			'{"logMessage":"Treatment started","logTime":' + Date.UTC(2024, 2, 20, 14, 32, 46, 0) +
-			',"areaName":"Operating Theater","patientId":123,"personnelId":456,"deviceId":789},' +
+			',"areaName":"Operating Theater","patientId":123,"personnelId":456},' +
 			'{"logMessage":"Patient stabilized","logTime":' + Date.UTC(2024, 2, 20, 14, 33, 8, 0) +
-			',"areaName":"ICU","patientId":123,"personnelId":456,"deviceId":789}]}'
+			',"areaName":"ICU","patientId":123,"personnelId":456}]}'
 	}
 ]

From 267f037d255769c13a22f3081113b1d476f47686 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Tue, 26 Mar 2024 19:17:39 +0100
Subject: [PATCH 20/22] #86 frontend: add "as Material[]"

---
 .../screensTrainer/pagesResourceCreation/PageMaterial.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
index 037b352f..2aa99527 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
@@ -61,7 +61,7 @@
 	/>
 	<div class="list">
 		<div
-			v-for="device in devices"
+			v-for="device in devices as Material[]"
 			:key="device.materialName"
 			class="listItem"
 		>
@@ -78,7 +78,7 @@
 	</div>
 	<div class="list">
 		<div
-			v-for="blood in bloodList"
+			v-for="blood in bloodList as Material[]"
 			:key="blood.materialName"
 			class="listItem"
 		>

From ed18ee1bc1db9fc187a4ad8147a70e483085e357 Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Wed, 27 Mar 2024 10:41:14 +0100
Subject: [PATCH 21/22] #93 frontend: add headers to pateint status and
 translate english mock data

---
 .../src/components/widgets/PatientStatus.vue  | 39 ++++++++++++++++--
 frontend/src/sockets/SocketTrainer.ts         | 40 +++++++++----------
 2 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/widgets/PatientStatus.vue b/frontend/src/components/widgets/PatientStatus.vue
index a49528ff..5d69e5b5 100644
--- a/frontend/src/components/widgets/PatientStatus.vue
+++ b/frontend/src/components/widgets/PatientStatus.vue
@@ -6,6 +6,18 @@
 
 <template>
 	<table>
+		<tr>
+			<td colspan="2">
+				<hr>
+			</td>
+		</tr>
+		<tr>
+			<td colspan="2">
+				<h1>
+					Status
+				</h1>
+			</td>
+		</tr>
 		<tr>
 			<td>
 				<p class="key">
@@ -42,6 +54,18 @@
 				</p>{{ patientStore.skin }}
 			</td>
 		</tr>
+		<tr>
+			<td colspan="2">
+				<hr>
+			</td>
+		</tr>
+		<tr>
+			<td colspan="2">
+				<h1>
+					Info
+				</h1>
+			</td>
+		</tr>
 		<tr>
 			<td>
 				<p class="key">
@@ -66,19 +90,24 @@
 				</p>{{ patientStore.biometrics }}
 			</td>
 		</tr>
+		<tr>
+			<td colspan="2">
+				<hr>
+			</td>
+		</tr>
 	</table>
 </template>
 
 <style scoped>
 	table {
 		border-collapse: collapse;
-		width: 100%;
+		width: 90%;
+		max-width: calc(100% - 60px);
 		table-layout: fixed;
-		margin: 90px 30px 30px 30px;
+		margin: 90px auto 30px auto;
 	}
 
 	td {
-		width: 50%;
 		padding: 10px;
 		vertical-align: top;
 		overflow: hidden;
@@ -87,4 +116,8 @@
 	.key {
 		font-weight: bold;
 	}
+
+	h1 {
+		text-align: center;
+	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index a0bd4593..49ba833e 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -154,35 +154,35 @@ export const serverMockEvents = [
 		id: "available-patients",
 		data: '{"messageType":"available-patients","availablePatients":{"availablePatients":['+
 			'{"patientCode":1,'+
-			'"triage":"Y","patientInjury":"broken arm","patientHistory":"Asthma",'+
-			'"patientPersonalDetails":"Female, 30 years old","patientBiometrics":"Height:196cm, Weight: 76kg"},'+
+			'"triage":"Y","patientInjury":"Gebrochener Arm","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 30 Jahre alt","patientBiometrics":"Größe: 196cm, Gewicht: 76kg"},'+
 			'{"patientCode":2,'+
-			'"triage":"G","patientInjury":"twisted ankle","patientHistory":"No known allergies",'+
-			'"patientPersonalDetails":"Male, 47 years old","patientBiometrics":"Height:164cm, Weight: 65kg"},'+
+			'"triage":"G","patientInjury":"Verdrehter Knöchel","patientHistory":"Keine Allergien",'+
+			'"patientPersonalDetails":"männlich, 47 Jahre alt","patientBiometrics":"Größe: 164cm, Gewicht: 65kg"},'+
 			'{"patientCode":3,'+
-			'"triage":"R","patientInjury":"head injury","patientHistory":"Diabetes",'+
-			'"patientPersonalDetails":"Female, 20 years old","patientBiometrics":"Height:192cm, Weight: 77kg"},'+
+			'"triage":"R","patientInjury":"Kopfverletzung","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"weiblich, 20 Jahre alt","patientBiometrics":"Größe: 192cm, Gewicht: 77kg"},'+
 			'{"patientCode":4,'+
-			'"triage":"Y","patientInjury":"sprained wrist","patientHistory":"gastroesophageal reflux disease",'+
-			'"patientPersonalDetails":"Male, 13 years old","patientBiometrics":"Height:165cm, Weight: 54kg"},'+
+			'"triage":"Y","patientInjury":"Gebprelltes Bein","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"männlich, 13 Jahre alt","patientBiometrics":"Größe: 165cm, Gewicht: 54kg"},'+
 			'{"patientCode":5,'+
-			'"triage":"G","patientInjury":"bruised ribs","patientHistory":"No known allergies",'+
-			'"patientPersonalDetails":"Female, 53 years old","patientBiometrics":"Height:180cm, Weight: 71kg"},'+
+			'"triage":"G","patientInjury":"Butender Arm","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 53 Jahre alt","patientBiometrics":"Größe: 180cm, Gewicht: 71kg"},'+
 			'{"patientCode":6,'+
-			'"triage":"Y","patientInjury":"shoulder dislocation","patientHistory":"paralyzed",'+
-			'"patientPersonalDetails":"Male, 49 years old","patientBiometrics":"Height:170cm, Weight: 67kg"},'+
+			'"triage":"Y","patientInjury":"Verschobene Schulter","patientHistory":"Gehbehindert",'+
+			'"patientPersonalDetails":"männlich, 49 Jahre alt","patientBiometrics":"Größe: 170cm, Gewicht: 67kg"},'+
 			'{"patientCode":7,'+
-			'"triage":"R","patientInjury":"head trauma","patientHistory":"Asthma",'+
-			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:162cm, Weight: 67kg"},'+
+			'"triage":"R","patientInjury":"Kopfverletzung","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 23 Jahre alt","patientBiometrics":"Größe: 162cm, Gewicht: 67kg"},'+
 			'{"patientCode":8,'+
-			'"triage":"Y","patientInjury":"bruised ribs","patientHistory":"reflux disease",'+
-			'"patientPersonalDetails":"Male, 43 years old","patientBiometrics":"Height:161cm, Weight: 56kg"},'+
+			'"triage":"Y","patientInjury":"Verlorener Finger","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"männlich, 43 Jahre alt","patientBiometrics":"Größe: 161cm, Gewicht: 56kg"},'+
 			'{"patientCode":9,'+
-			'"triage":"G","patientInjury":"sprained wrist","patientHistory":"hearth disease",'+
-			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:182cm, Weight: 75kg"},'+
+			'"triage":"G","patientInjury":"Aufgschürfter Ellenbogen","patientHistory":"Bluthochdruck",'+
+			'"patientPersonalDetails":"weiblich, 23 Jahre alt","patientBiometrics":"Größe: 182cm, Gewicht: 75kg"},'+
 			'{"patientCode":10,'+
-			'"triage":"Y","patientInjury":"shoulder broken","patientHistory":"illness",'+
-			'"patientPersonalDetails":"Male, 39 years old","patientBiometrics":"Height:173cm, Weight: 61kg"}'+
+			'"triage":"Y","patientInjury":"Gebrochene Nase","patientHistory":"Grippe",'+
+			'"patientPersonalDetails":"männlich, 39 Jahre alt","patientBiometrics":"Größe: 173cm, Gewicht: 61kg"}'+
 			']}}'
 	},
 	{

From 8dde3aa6e502b6b770be7fea8088c45cf079bc7e Mon Sep 17 00:00:00 2001
From: JoshuaRiewesell <40123349+JoshuaRiewesell@users.noreply.github.com>
Date: Wed, 27 Mar 2024 10:42:39 +0100
Subject: [PATCH 22/22] #93 frontend: translate mock data at SocketPatient

---
 frontend/src/sockets/SocketPatient.ts | 40 +++++++++++++--------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/frontend/src/sockets/SocketPatient.ts b/frontend/src/sockets/SocketPatient.ts
index e1cb24a9..41b66f77 100644
--- a/frontend/src/sockets/SocketPatient.ts
+++ b/frontend/src/sockets/SocketPatient.ts
@@ -128,35 +128,35 @@ export const serverMockEvents = [
 		id: "available-patients",
 		data: '{"messageType":"available-patients","availablePatients":{"availablePatients":['+
 			'{"patientCode":1,'+
-			'"triage":"Y","patientInjury":"broken arm","patientHistory":"Asthma",'+
-			'"patientPersonalDetails":"Female, 30 years old","patientBiometrics":"Height:196cm, Weight: 76kg"},'+
+			'"triage":"Y","patientInjury":"Gebrochener Arm","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 30 Jahre alt","patientBiometrics":"Größe: 196cm, Gewicht: 76kg"},'+
 			'{"patientCode":2,'+
-			'"triage":"G","patientInjury":"twisted ankle","patientHistory":"No known allergies",'+
-			'"patientPersonalDetails":"Male, 47 years old","patientBiometrics":"Height:164cm, Weight: 65kg"},'+
+			'"triage":"G","patientInjury":"Verdrehter Knöchel","patientHistory":"Keine Allergien",'+
+			'"patientPersonalDetails":"männlich, 47 Jahre alt","patientBiometrics":"Größe: 164cm, Gewicht: 65kg"},'+
 			'{"patientCode":3,'+
-			'"triage":"R","patientInjury":"head injury","patientHistory":"Diabetes",'+
-			'"patientPersonalDetails":"Female, 20 years old","patientBiometrics":"Height:192cm, Weight: 77kg"},'+
+			'"triage":"R","patientInjury":"Kopfverletzung","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"weiblich, 20 Jahre alt","patientBiometrics":"Größe: 192cm, Gewicht: 77kg"},'+
 			'{"patientCode":4,'+
-			'"triage":"Y","patientInjury":"sprained wrist","patientHistory":"gastroesophageal reflux disease",'+
-			'"patientPersonalDetails":"Male, 13 years old","patientBiometrics":"Height:165cm, Weight: 54kg"},'+
+			'"triage":"Y","patientInjury":"Gebprelltes Bein","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"männlich, 13 Jahre alt","patientBiometrics":"Größe: 165cm, Gewicht: 54kg"},'+
 			'{"patientCode":5,'+
-			'"triage":"G","patientInjury":"bruised ribs","patientHistory":"No known allergies",'+
-			'"patientPersonalDetails":"Female, 53 years old","patientBiometrics":"Height:180cm, Weight: 71kg"},'+
+			'"triage":"G","patientInjury":"Butender Arm","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 53 Jahre alt","patientBiometrics":"Größe: 180cm, Gewicht: 71kg"},'+
 			'{"patientCode":6,'+
-			'"triage":"Y","patientInjury":"shoulder dislocation","patientHistory":"paralyzed",'+
-			'"patientPersonalDetails":"Male, 49 years old","patientBiometrics":"Height:170cm, Weight: 67kg"},'+
+			'"triage":"Y","patientInjury":"Verschobene Schulter","patientHistory":"Gehbehindert",'+
+			'"patientPersonalDetails":"männlich, 49 Jahre alt","patientBiometrics":"Größe: 170cm, Gewicht: 67kg"},'+
 			'{"patientCode":7,'+
-			'"triage":"R","patientInjury":"head trauma","patientHistory":"Asthma",'+
-			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:162cm, Weight: 67kg"},'+
+			'"triage":"R","patientInjury":"Kopfverletzung","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 23 Jahre alt","patientBiometrics":"Größe: 162cm, Gewicht: 67kg"},'+
 			'{"patientCode":8,'+
-			'"triage":"Y","patientInjury":"bruised ribs","patientHistory":"reflux disease",'+
-			'"patientPersonalDetails":"Male, 43 years old","patientBiometrics":"Height:161cm, Weight: 56kg"},'+
+			'"triage":"Y","patientInjury":"Verlorener Finger","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"männlich, 43 Jahre alt","patientBiometrics":"Größe: 161cm, Gewicht: 56kg"},'+
 			'{"patientCode":9,'+
-			'"triage":"G","patientInjury":"sprained wrist","patientHistory":"hearth disease",'+
-			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:182cm, Weight: 75kg"},'+
+			'"triage":"G","patientInjury":"Aufgschürfter Ellenbogen","patientHistory":"Bluthochdruck",'+
+			'"patientPersonalDetails":"weiblich, 23 Jahre alt","patientBiometrics":"Größe: 182cm, Gewicht: 75kg"},'+
 			'{"patientCode":10,'+
-			'"triage":"Y","patientInjury":"shoulder broken","patientHistory":"illness",'+
-			'"patientPersonalDetails":"Male, 39 years old","patientBiometrics":"Height:173cm, Weight: 61kg"}'+
+			'"triage":"Y","patientInjury":"Gebrochene Nase","patientHistory":"Grippe",'+
+			'"patientPersonalDetails":"männlich, 39 Jahre alt","patientBiometrics":"Größe: 173cm, Gewicht: 61kg"}'+
 			']}}'
 	},
 	{