80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
"use client";
|
|
import { usePannelStore } from "_store/pannelStore";
|
|
import { Marker } from "react-leaflet";
|
|
import L from "leaflet";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { getMissionsAPI } from "_querys/missions";
|
|
import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
|
|
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
|
|
import { useMapStore } from "_store/mapStore";
|
|
import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
|
|
|
|
export const MapAdditionals = () => {
|
|
const { isOpen, missionFormValues } = usePannelStore((state) => state);
|
|
const dispatcherConnectionState = useDispatchConnectionStore((state) => state.status);
|
|
const { data: missions = [] } = useQuery({
|
|
queryKey: ["missions"],
|
|
queryFn: () =>
|
|
getMissionsAPI({
|
|
OR: [{ state: "draft" }, { state: "running" }],
|
|
}),
|
|
refetchInterval: 10_000,
|
|
});
|
|
const mapStore = useMapStore((state) => state);
|
|
|
|
const { data: aircrafts } = useQuery({
|
|
queryKey: ["aircrafts"],
|
|
queryFn: () => getConnectedAircraftsAPI(),
|
|
refetchInterval: 10000,
|
|
});
|
|
|
|
const markersNeedingAttention = missions.filter(
|
|
(m) =>
|
|
HPGValidationRequired(m.missionStationIds, aircrafts, m.hpgMissionString) &&
|
|
m.hpgValidationState === "POSITION_AMANDED" &&
|
|
m.state === "draft" &&
|
|
m.hpgLocationLat &&
|
|
dispatcherConnectionState === "connected" &&
|
|
m.hpgLocationLng,
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{missionFormValues?.addressLat && missionFormValues?.addressLng && isOpen && (
|
|
<Marker
|
|
position={[missionFormValues.addressLat, missionFormValues.addressLng]}
|
|
icon={L.icon({
|
|
iconUrl: "/icons/mapMarker.png",
|
|
iconSize: [40, 40],
|
|
iconAnchor: [20, 35],
|
|
})}
|
|
interactive={false}
|
|
/>
|
|
)}
|
|
{markersNeedingAttention.map((mission) => (
|
|
<Marker
|
|
key={mission.id}
|
|
position={[mission.hpgLocationLat!, mission.hpgLocationLng!]}
|
|
icon={L.icon({
|
|
iconUrl: "/icons/mapMarker.png",
|
|
iconSize: [40, 40],
|
|
iconAnchor: [20, 35],
|
|
})}
|
|
eventHandlers={{
|
|
click: () =>
|
|
mapStore.setOpenMissionMarker({
|
|
open: [
|
|
{
|
|
id: mission.id,
|
|
tab: "home",
|
|
},
|
|
],
|
|
close: [],
|
|
}),
|
|
}}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
};
|