Added Marker for mission

apps/dispatch/app/(dispatch)/_components/map/BaseMaps.tsx

@@ -7,7 +7,11 @@ export const BaseMaps = () => {
 			<TileLayer
 				attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-				className="invert-100"
+			/>
+			<TileLayer
+				attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+				className="invert-100 grayscale"
 			/>
 		</>
 	);

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

@@ -4,6 +4,7 @@ import { useMapStore } from "_store/mapStore";
 import { MapContainer } from "react-leaflet";
 import { BaseMaps } from "(dispatch)/_components/map/BaseMaps";
 import { ContextMenu } from "(dispatch)/_components/map/ContextMenu";
+import { MissionMarkers } from "(dispatch)/_components/map/MissionMarkers";
 
 export default ({}) => {
 	const { map } = useMapStore();
@@ -12,6 +13,7 @@ export default ({}) => {
 		<MapContainer className="flex-1" center={map.center} zoom={map.zoom}>
 			<BaseMaps />
 			<ContextMenu />
+			<MissionMarkers />
 		</MapContainer>
 	);
 };

apps/dispatch/app/(dispatch)/_components/map/MissionMarkers.tsx

@@ -0,0 +1,72 @@
+import { MissionOptionalDefaults } from "@repo/db/zod";
+import { useMissionsStore } from "_store/missionsStore";
+import { Icon, Marker as LMarker } from "leaflet";
+import { House, Route } from "lucide-react";
+import { RefObject, useEffect, useRef, useState } from "react";
+import { Marker, Popup, useMap } from "react-leaflet";
+
+export const MissionMarker = ({
+	mission,
+}: {
+	mission: MissionOptionalDefaults;
+}) => {
+	const [zoom, setZoom] = useState(0);
+	const map = useMap();
+	const markerRef = useRef<LMarker<any>>(null);
+
+	useEffect(() => {
+		markerRef.current?.openPopup();
+
+		const handleZoom = () => {
+			setZoom(map.getZoom());
+		};
+		map.on("zoom", handleZoom);
+		return () => {
+			map.off("zoom", handleZoom);
+		};
+	}, [map]);
+
+	return (
+		<div>
+			<Marker
+				ref={markerRef}
+				position={[mission.addressLat, mission.addressLng]}
+				icon={
+					new Icon({
+						iconUrl: "/icons/MissionIcon.png",
+						iconSize: zoom < 8 ? [30, 30] : [50, 50],
+						popupAnchor: [0, 0],
+					})
+				}
+			>
+				<Popup>
+					<div className="absolute z-1000 opacity-100 pointer-events-auto w-[500px] text-white">
+						<div className="bg-amber-600 pt-2 flex gap-1">
+							<div className="p-2 bg-amber-700">
+								<House className="text-sm" />
+							</div>
+							<div className="p-2">
+								<Route />
+							</div>
+							<div className="bg-red-600 flex justify-center items-center text-2xl p-2">
+								{mission.missionCategory}
+							</div>
+						</div>
+					</div>
+				</Popup>
+			</Marker>
+		</div>
+	);
+};
+
+export const MissionMarkers = () => {
+	const { missions } = useMissionsStore();
+
+	return (
+		<>
+			{missions.map((mission) => (
+				<MissionMarker key={mission.id} mission={mission} />
+			))}
+		</>
+	);
+};

apps/dispatch/app/_store/missionsStore.ts

@@ -1,27 +1,9 @@
+import { MissionOptionalDefaults } from "@repo/db/zod";
 import { create } from "zustand";
 
-interface Mission {
-	id: string;
-	addressLat: number;
-	addressLng: number;
-	addressStreet: string;
-	addressCity: string;
-	addressZip: string;
-	missionCategory: string;
-	missionKeyword: string;
-	missionSummary: string;
-	missionPatientInfo: string;
-	missionAdditionalInfo: string;
-	hpgAmbulanceState?: "ready" | "arrived" | "onway";
-	hpgFireEngineState?: "ready" | "arrived" | "onway";
-	hpgPoliceState?: "ready" | "arrived" | "onway";
-	hpgLocationLat?: number;
-	hpgLocationLng?: number;
-}
-
 interface MissionStore {
-	missions: Mission[];
-	setMissions: (missions: Mission[]) => void;
+	missions: MissionOptionalDefaults[];
+	setMissions: (missions: MissionOptionalDefaults[]) => void;
 }
 
 export const useMissionsStore = create<MissionStore>((set) => ({
@@ -34,9 +16,9 @@ export const useMissionsStore = create<MissionStore>((set) => ({
 			addressCity: "Berlin",
 			addressZip: "10178",
 			missionAdditionalInfo: "Additional info",
-			missionCategory: "Category",
-			missionKeyword: "Keyword",
-			missionPatientInfo: "Patient info",
+			missionCategory: "AB_Atmung",
+			missionKeyword: "Zunehmende Atemnot",
+			missionPatientInfo: "M/10",
 			missionSummary: "Summary",
 		},
 	],

apps/dispatch/app/globals.css

@@ -2,3 +2,24 @@
 @plugin "daisyui" {
 	themes: dark, nord;
 }
+
+.leaflet-popup-tip-container {
+	display: none;
+}
+.leaflet-popup-content-wrapper {
+	background: transparent !important;
+	pointer-events: none !important;
+}
+
+.leaflet-popup-content {
+	width: 0 !important;
+	margin: 0 !important;
+}
+.leaflet-popup {
+	left: 0 !important;
+	top: 0 !important;
+}
+
+.leaflet-popup-close-button {
+	display: none;
+}

packages/database/prisma/schema/mission.prisma

@@ -0,0 +1,24 @@
+model Mission {
+    id                    String    @id @default(uuid())
+    addressLat            Float
+    addressLng            Float
+    addressStreet         String
+    addressCity           String
+    addressZip            String
+    missionCategory       String
+    missionKeyword        String
+    missionSummary        String
+    missionPatientInfo    String
+    missionAdditionalInfo String
+    hpgAmbulanceState     HpgState? @default(ready)
+    hpgFireEngineState    HpgState? @default(ready)
+    hpgPoliceState        HpgState? @default(ready)
+    hpgLocationLat        Float?    @default(0)
+    hpgLocationLng        Float?    @default(0)
+}
+
+enum HpgState {
+    ready
+    arrived
+    onway
+}