Merge remote-tracking branch 'origin/main' into 108-m01-add-basic-triage

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;
@@ -20,4 +27,81 @@ button:hover {
 button:active {
   cursor: pointer;
   filter: brightness(90%);
+}
+
+.gray {
+  background-color: var(--gray);
+}
+
+.red {
+  background-color: var(--red);
+}
+
+.yellow {
+  background-color: var(--yellow);
+}
+
+.green {
+  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;
 }

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>

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>
+</style>@/utils

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()
 
@@ -23,27 +23,38 @@
 		currentArea.value = areaName
 	}
 
+	function openPopup(areaName: string) {
+		openArea(areaName)
+		showPopup.value = true
+	}
+
 	function addArea(){
 		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 id="list">
+	<div class="list">
 		<div
 			v-for="area in areas"
 			:key="area.areaName"
-			class="listitem"
-			@click="openArea(area.areaName)"
+			class="listItem"
+			:class="{ 'selected': currentArea === area.areaName }"
 		>
-			<button class="areaButton">
-				{{ area.areaName }}
+			<button class="listItemButton" @click="openArea(area.areaName)">
+				<div class="listItemName">
+					{{ area.areaName }}
+				</div>
 			</button>
-			<button class="settingsButton" @click="showPopup = true">
+			<button class="settingsButton" @click="openPopup(area.areaName)">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					height="24"
@@ -54,7 +65,7 @@
 				</svg>
 			</button>
 		</div>
-		<button id="addAreaButton" @click="addArea()">
+		<button class="listItemAddButton" @click="addArea()">
 			Bereich hinzufügen
 		</button>
 	</div>
@@ -65,33 +76,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 {
@@ -101,16 +87,7 @@
 		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 .listItemButton {
+		filter: brightness(90%);
 	}
 </style>

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,10 @@
 </script>
 
 <template>
-	<h1>ResourceCreation</h1>
-	{{ currentAreaData }}
-	<component :is="currentPageComponent" />
+	<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)">
 			Patienten
@@ -60,6 +56,12 @@
 </template>
 
 <style scoped>
+	#noAreaText {
+		text-align: center;
+		font-size: 1.8em;
+		margin-top: 40px;
+	}
+
 	nav {
 		width: 100%;
 		height: 60px;