87 n00 material list

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>

frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue

@@ -1,6 +1,10 @@
 <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'
+	import AddMaterialPopup from '@/components/widgets/AddMaterialPopup.vue'
 
     const props = defineProps({
 		currentArea: {
@@ -12,12 +16,81 @@
 	const exerciseStore = useExerciseStore()
 
 	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+
+	const currentMaterialName = ref('No Material Name')
+	const currentMaterialType = ref('No Material Type')
+
+	const showDeletePopup = ref(false)
+	const showAddPopup = ref(false)
+
+	function openDeletePopup(materialName: string) {
+		currentMaterialName.value = materialName
+		showDeletePopup.value = true
+	}
+
+	function openAddPopup(materialType: string) {
+		currentMaterialType.value = materialType
+		showAddPopup.value = true
+	}
+
+	function deleteMaterial(){
+		socketTrainer.materialDelete(currentMaterialName.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>
+	<DeleteItemPopup
+		v-if="showDeletePopup"
+		:name="currentMaterialName"
+		@delete="deleteMaterial"
+		@close-popup="showDeletePopup=false"
+	/>
+	<AddMaterialPopup
+		v-if="showAddPopup"
+		:material-type="currentMaterialType"
+		:current-area="props.currentArea"
+		@close-popup="showAddPopup=false"
+	/>
+	<div class="list">
+		<div
+			v-for="device in devices"
+			:key="device.materialName"
+			class="listItem"
+		>
+			<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="openAddPopup('device')">
+			Gerät hinzufügen
+		</button>
+	</div>
+	<div class="list">
+		<div
+			v-for="blood in bloodList"
+			:key="blood.materialName"
+			class="listItem"
+		>
+			<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="openAddPopup('blood')">
+			Blut hinzufügen
+		</button>
+	</div>
+</template>

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"

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>

frontend/src/components/widgets/AreaPopup.vue → 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;