Nachalarmieren select

Alarmieren aus Einsatz erstellen Maske
Map-Tiles
SDS sound: Status J
SDS Nachricht: public-User
Audio: Es kann nur ein Nutzer gleichzeitig Funken
Select in Report und Chat: default value -> OnChange

apps/dispatch/app/_components/map/Map.tsx

@@ -1,5 +1,6 @@
 "use client";
 import "leaflet/dist/leaflet.css";
+import "./mapStyles.css";
 import { useMapStore } from "_store/mapStore";
 import { MapContainer } from "react-leaflet";
 import { BaseMaps } from "_components/map/BaseMaps";
@@ -39,7 +40,7 @@ const Map = () => {
 	return (
 		<MapContainer
 			ref={ref}
-			className="flex-1"
+			className="flex-1 bg-base-200"
 			center={map.center}
 			zoom={map.zoom}
 			fadeAnimation={false}

apps/dispatch/app/_components/map/_components/AircraftMarkerTabs.tsx

@@ -397,7 +397,9 @@ const SDSTab = ({
 														stationId: aircraft.Station.id,
 														station: aircraft.Station,
 														message: note,
-														user: getPublicUser(session.data!.user),
+														user: getPublicUser(session.data!.user, {
+															ignorePrivacy: true,
+														}),
 													},
 												},
 											})

apps/dispatch/app/_components/map/_components/MissionMarkerTabs.tsx

@@ -341,10 +341,10 @@ const Patientdetails = ({ mission }: { mission: Mission }) => {
 
 const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 	const queryClient = useQueryClient();
-	const [selectedStation, setSelectedStation] = useState<Station | "RTW" | "POL" | "FW" | null>(
+	const [selectedStation, setSelectedStation] = useState<number | "RTW" | "POL" | "FW" | null>(
 		null,
 	);
-	const { data: conenctedAircrafts } = useQuery({
+	const { data: connectedAircrafts } = useQuery({
 		queryKey: ["aircrafts"],
 		queryFn: getConnectedAircraftsAPI,
 	});
@@ -383,17 +383,6 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 		queryFn: () => getStationsAPI(),
 	});
 
-	useEffect(() => {
-		if (allStations) {
-			const stationsNotItMission = allStations.filter(
-				(s) => !mission.missionStationIds.includes(s.id),
-			);
-			if (stationsNotItMission[0]) {
-				setSelectedStation(stationsNotItMission[0]);
-			}
-		}
-	}, [allStations, mission.missionStationIds]);
-
 	const sendAlertMutation = useMutation({
 		mutationKey: ["missions"],
 		mutationFn: ({
@@ -421,7 +410,7 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 				label: station.bosCallsign,
 				value: station.id,
 				type: "station" as const,
-				isOnline: !!conenctedAircrafts?.find((a) => a.stationId === station.id),
+				isOnline: !!connectedAircrafts?.find((a) => a.stationId === station.id),
 			})) || []),
 		...(!mission.hpgFireEngineState || mission.hpgFireEngineState === "NOT_REQUESTED"
 			? [{ label: "Feuerwehr", value: "FW", type: "vehicle" as const }]
@@ -447,18 +436,6 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 		return a.label.localeCompare(b.label);
 	});
 
-	useEffect(() => {
-		const firstOption = stationsOptions[0];
-		if (!firstOption) {
-			setSelectedStation(null);
-		} else if (firstOption.type === "station") {
-			const station = allStations?.find((s) => s.id === firstOption.value);
-			setSelectedStation(station ?? null);
-		} else {
-			setSelectedStation(firstOption.value as "RTW" | "POL" | "FW");
-		}
-	}, [stationsOptions, allStations]);
-
 	const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";
 
 	const HPGVehicle = ({ state, name }: { state: HpgState; name: string }) => (
@@ -506,7 +483,7 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 			</div>
 			<ul className="space-y-2 max-h-[300px] overflow-y-auto overflow-x-auto">
 				{missionStations?.map((station, index) => {
-					const connectedAircraft = conenctedAircrafts?.find(
+					const connectedAircraft = connectedAircrafts?.find(
 						(aircraft) => aircraft.stationId === station.id,
 					);
 
@@ -550,15 +527,15 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 						<select
 							className="select select-sm select-primary select-bordered flex-1"
 							onChange={(e) => {
-								const selected = allStations?.find((s) => s.id.toString() === e.target.value);
-								if (selected) {
-									setSelectedStation(selected);
-								} else {
-									setSelectedStation(e.target.value as "RTW" | "POL" | "FW");
-								}
+								const value = e.target.value;
+								const parsedValue = !isNaN(Number(value)) ? parseInt(value, 10) : value;
+								setSelectedStation(parsedValue as number | "RTW" | "POL" | "FW" | null);
 							}}
-							value={typeof selectedStation === "string" ? selectedStation : selectedStation?.id}
+							value={selectedStation || "default"}
 						>
+							<option disabled value={"default"}>
+								Rettungsmittel auswählen
+							</option>
 							{stationsOptions.map((option) => (
 								<option
 									key={option.value}
@@ -582,18 +559,18 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 										vehicleName: selectedStation,
 									});
 								} else {
-									if (!selectedStation?.id) return;
+									if (!selectedStation) return;
 									await updateMissionMutation.mutateAsync({
 										id: mission.id,
 										missionEdit: {
 											missionStationIds: {
-												push: selectedStation?.id,
+												push: selectedStation,
 											},
 										},
 									});
 									await sendAlertMutation.mutate({
 										id: mission.id,
-										stationId: selectedStation?.id ?? 0,
+										stationId: selectedStation,
 									});
 								}
 							}}

apps/dispatch/app/_components/map/mapStyles.css

@@ -1,106 +1,3 @@
-.no-pointer {
-    cursor: unset;
-}
-.pointer {
-    cursor: pointer;
-}
-
-.leaflet-tooltip-aircraft {
-    padding: 0 !important;
-    border: 0 !important;
-    border-radius: 0 !important;
-    color: rgb(254, 254, 254) !important;
-    left: 35px !important;
-    top: 40px !important;
-    border: none !important;
-    box-shadow: none !important;
-}
-
-.leaflet-popup-content-wrapper {
-    background-color: var(--dark-background);
-}
-
-@keyframes fade-in {
-    from {
-        right: -20%;
-        opacity: 0;
-    }
-    to {
-        right: 0;
-        opacity: 1;
-    }
-}
-
-@keyframes fade-out {
-    from {
-        right: 0;
-        opacity: 1;
-    }
-    to {
-        right: -20%;
-        opacity: 0;
-    }
-}
-
-.leaflet-tooltip-aircraft:before {
-    padding: 0 !important;
-    border: 0 !important;
-    border-radius: 0 !important;
-    color: rgb(255, 255, 255) !important;
-    left: 0px !important;
-    top: 0px !important;
-    border: none !important;
-    box-shadow: none !important;
-}
-
-.custom-tooltip-bg {
-    background: transparent !important;
-}
-
-.custom-tooltip-bg:before {
-    background: transparent !important;
-}
-
-.no-pointer {
-    cursor: unset;
-}
-
-.pointer {
-    cursor: pointer;
-}
-
-.leaflet-tooltip-aircraft {
-    padding: 0 !important;
-    border: 0 !important;
-    background-color: var(--surface) !important;
-    color: var(--on-surface) !important;
-}
-
-.leaflet-tooltip-aircraft:before {
-    border-bottom-color: var(--dark-surface) !important;
-}
-
-.modal-box {
-    position: fixed;
-    bottom: 50%;
-    right: 50px;
-    background-color: rgba(255, 255, 255, 0.75);
-    border: 5px solid #243671;
-    border-radius: 8px;
-    padding: 10px;
-    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    max-width: 300px;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    text-align: center;
-}
-
-.modal-box-close {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    font-size: 18px;
-    cursor: pointer;
-    color: #243671;
+.leaflet-container {
+	background: var(--color-base-200) !important;
 }