#90 frontend: add confirm decline result to actions + toast

hpi-sam · Mar 27, 2024 · 629bfbb · 629bfbb
1 parent 3f137e3
commit 629bfbb
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 7 deletions.
diff --git a/frontend/src/assets/Svg.ts b/frontend/src/assets/Svg.ts
@@ -6,5 +6,6 @@ export const svg = {
 		" 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14" +
 		" 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5" +
 		" 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13" +
-		" 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"
+		" 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z",
+	closeIcon: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
 }
diff --git a/frontend/src/components/widgets/ActionConfig.vue b/frontend/src/components/widgets/ActionConfig.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+	import {svg} from '@/assets/Svg'
+	import socketPatient from '@/sockets/SocketPatient'
+	import { ref } from 'vue'
+
 	const emit = defineEmits(['close-action'])
 
 	const props = defineProps({
@@ -7,19 +11,40 @@
 			default: "Kein Name angegeben"
 		}
 	})
+
+	function addAction() {
+		socketPatient.actionAdd(props.currentAction)
+		newActionsAllowed.value = false
+		emit('close-action')
+	}
+
+</script>
+<script lang="ts">
+	const newActionsAllowed = ref(true)
+
+	export function allowNewActions() {
+		newActionsAllowed.value = true
+	}
 </script>
 
 <template>
 	<div class="flex-container">
 		<div>
 			<h1>{{ props.currentAction }}</h1>
 			<button class="close-button" @click="emit('close-action')">
-				X
+				<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+					<path :d="svg.closeIcon" />
+				</svg>
+			</button>
+		</div>
+		<div>
+			<h3 v-if="!newActionsAllowed" class="waiting-text">
+				Warte bis wieder neue Aktionen angeordnet werden können.
+			</h3>
+			<button class="add-action-button" :disabled="!newActionsAllowed" @click="addAction()">
+				Aktion anordnen
 			</button>
 		</div>
-		<button class="main-button">
-			Aktion ausführen
-		</button>
 	</div>
 </template>
 
@@ -50,10 +75,9 @@
 		height: 3rem;
 		font-size: 1.25rem;
 		line-height: 1.25rem;
-		padding: .75rem 1rem;
 		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 	}
-	.main-button {
+	.add-action-button {
 		align-self: center;
 		background-color: #FFFFFF;
 		border: 1px solid rgb(209, 213, 219);
@@ -66,4 +90,7 @@
 		text-align: center;
 		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 	}
+	.waiting-text {
+		text-align: center;
+	}
 </style>
diff --git a/frontend/src/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
@@ -21,6 +21,7 @@ interface MessageData {
 	availablePatients: AvailablePatients
 	availableActions: AvailableActions
 	availableMaterialList: AvailableMaterial
+	actionDeclinationReason?: string
 }
 
 interface Exercise {

diff --git a/frontend/src/sockets/SocketPatient.ts b/frontend/src/sockets/SocketPatient.ts
@@ -4,6 +4,7 @@ import {useExerciseStore} from "@/stores/Exercise"
 import {useAvailablesStore} from "@/stores/Availables"
 import {showErrorToast, showWarningToast} from "@/App.vue"
 import {ScreenPosition, Screens, setScreen} from "@/components/ModulePatient.vue"
+import { allowNewActions } from "@/components/widgets/ActionConfig.vue"
 
 class SocketPatient {
 	private readonly url: string
@@ -79,6 +80,18 @@ class SocketPatient {
 				case 'information':
 					console.log('Patient Websocket ToDo: handle information event ', data)
 					break
+				case 'action-confirmation':
+					allowNewActions()
+					console.log('Patient Websocket ToDo: handle action-confirmation event ', data)
+					break
+				case 'action-declination':
+					allowNewActions()
+					showErrorToast('Aktion '+ data.actionName +'konnte nicht angeordnet werden:\n ' + data.actionDeclinationReason)
+					console.log('Patient Websocket ToDo: handle action-declination event ', data)
+					break
+				case 'action-result':
+					console.log('Patient Websocket ToDo: handle action-result event ', data)
+					break
 				default:
 					showErrorToast('Unbekannten Nachrichtentypen erhalten:' + data.messageType)
 					console.error('Patient received unknown message type:', data.messageType, 'with data:', data)
@@ -198,4 +211,17 @@ export const serverMockEvents = [
 		data: '{"messageType":"information","patientInjury":"Fractured limb","patientHistory":"No known allergies",' +
 			'"patientPersonalDetails":"John Doe, Male, 30 years old","patientBiometrics":"Height: 180cm, Weight: 75kg"}'
 	},
+	{
+		id: 'action-confirmation',
+		data: '{"messageType":"action-confirmation","actionName":"Stabile Seitenlage","actionId":"123"}'
+	},
+	{
+		id: 'action-declination',
+		data: '{"messageType":"action-declination","actionName":"Stabile Seitenlage","actionDeclinationReason":"Es fehlen die nötigen Ressourcen."}'
+	},
+	{
+		id: 'action-result',
+		data: '{"messageType":"action-result","actionName":"Blutprobe untersuchen","actionId":"125",'+
+			'"actionResult":"Der Patient hat eine Blutgruppe von 0+."}'
+	}
 ]