PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

added onClick events for marker-cluster #4

Merged
PxlLoewe merged 6 commits from 3-fix-aircraftmarkers-missionmarkers into main 2025-04-30 04:46:28 +00:00
Conversation 2 Commits 6 Files Changed 11 +104 -115
11 changed files with 104 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/dispatch/app/_components/SmartPopup.tsx
View File

@@ -24,7 +24,7 @@ export const useSmartPopup = () => {
export const calculateAnchor = (
id: string,
mode: "popup" | "marker",
ignoreMarker?: boolean,
options?: { ignoreMarker?: boolean; ignoreCluster?: boolean },
) => {
const otherMarkers = document.querySelectorAll(".map-collision");
// get markers and check if they are overlapping
@@ -36,8 +36,9 @@ export const calculateAnchor = (
if (!otherMarkers || !ownMarker) return "topleft";
const marksersInCluster = Array.from(otherMarkers).filter((marker) => {
if (mode === "popup" && marker.id === `marker-${id}`) return false;
if (ignoreMarker && marker.id.startsWith("marker")) return false;
if (mode === "popup" && marker.id === `marker-domain-${id}`) return false;
if (options?.ignoreMarker && marker.id.includes("marker")) return false;
if (options?.ignoreCluster && marker.id.includes("cluster")) return false;
const rect1 = (marker as HTMLElement).getBoundingClientRect();
const rect2 = (ownMarker as HTMLElement).getBoundingClientRect();
@@ -76,12 +77,6 @@ export const calculateAnchor = (
centerOfOverlappingMarkers.x /= markersPosition.length;
centerOfOverlappingMarkers.y /= markersPosition.length;
if (id == "2") {
console.log("markersInCluser", marksersInCluster);
console.log("ownMarkerPosition", ownMarkerPosition);
console.log("centerOfOverlappingMarkers", centerOfOverlappingMarkers);
}
if (marksersInCluster.length > 1) {
if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
@@ -107,24 +102,25 @@ export interface SmartPopupRef {
}
export const SmartPopup = (
props: PopupProps & { ignoreMarker?: boolean } & RefAttributes<LPopup> & {
props: PopupProps &
RefAttributes<LPopup> & {
options?: { ignoreMarker?: boolean; ignoreCluster?: boolean };
smartPopupRef?: Ref<SmartPopupRef>;
id: string;
wrapperClassName?: string;
},
) => {
const [showContent, setShowContent] = useState(false);
const { smartPopupRef, id, className, wrapperClassName, ignoreMarker } =
props;
const { smartPopupRef, id, className, wrapperClassName, options } = props;
const [anchor, setAnchor] = useState<
"topleft" | "topright" | "bottomleft" | "bottomright"
>("topleft");
const handleConflict = useCallback(() => {
const newAnchor = calculateAnchor(id, "popup", ignoreMarker);
const newAnchor = calculateAnchor(id, "popup", options);
setAnchor(newAnchor);
}, [id, ignoreMarker]);
}, [id, options]);
useImperativeHandle(smartPopupRef, () => ({
handleConflict,

1
apps/dispatch/app/_store/mapStore.ts
View File

@@ -1,4 +1,3 @@
import { popup } from "leaflet";
import { create } from "zustand";
interface MapStore {

12
apps/dispatch/app/_store/missionsStore.ts
View File

@@ -3,6 +3,7 @@ import { MissionOptionalDefaults } from "@repo/db/zod";
import { serverApi } from "helpers/axios";
import { create } from "zustand";
import { toast } from "react-hot-toast";
import axios from "axios";
interface MissionStore {
missions: Mission[];
@@ -17,15 +18,8 @@ export const useMissionsStore = create<MissionStore>((set) => ({
missions: [],
setMissions: (missions) => set({ missions }),
createMission: async (mission) => {
const res = await fetch("/api/mission", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(mission),
});
if (!res.ok) return new Error("Failed to create mission");
const data = await res.json();
const { data } = await serverApi.put<Mission>("/mission", mission);
set((state) => ({ missions: [...state.missions, data] }));
return data;
},

32
apps/dispatch/app/_store/reportStore.ts
View File

@@ -1,32 +0,0 @@
import { create } from "zustand";
import { PrismaClient } from "@prisma/client";
interface ReportStore {
ownId: null | string;
reportOpen: boolean;
setReportOpen: (open: boolean) => void;
setOwnId: (id: string) => void;
}
export const useReportStore = create<ReportStore>((set) => ({
ownId: null,
reportOpen: false,
setReportOpen: (open: boolean) => set({ reportOpen: open }),
setOwnId: (id: string) => set({ ownId: id }),
}));
const prisma = new PrismaClient();
export const sendReport = async (receiverId: string, message: string) => {
try {
await prisma.reportMessage.create({
data: {
receiverId,
message,
},
});
} catch (error) {
console.error("Failed to send report:", error);
throw error;
}
};

14
apps/dispatch/app/dispatch/_components/left/Chat.tsx
View File

@@ -5,17 +5,11 @@ import { useSession } from "next-auth/react";
import { Fragment, useEffect, useRef, useState } from "react";
import { Dispatcher } from "dispatch/_components/navbar/_components/action";
import { cn } from "helpers/cn";
import { useReportStore } from "_store/reportStore";
import { serverApi } from "helpers/axios";
export const getDispatcher = async () => {
const res = await serverApi.get<Dispatcher[]>(`/dispatcher`);
return res.data;
};
import { getDispatcher } from "pilot/_components/navbar/action";
export const Chat = () => {
const { setReportOpen } = useReportStore();
const {
setReportTabOpen,
chatOpen,
setChatOpen,
sendMessage,
@@ -65,7 +59,7 @@ export const Chat = () => {
console.log("cleared");
}
};
}, [addTabValue, chats]);
}, [addTabValue, chats, session.data?.user.id]);
return (
<div className={cn("dropdown dropdown-right", chatOpen && "dropdown-open")}>
@@ -76,7 +70,7 @@ export const Chat = () => {
<button
className="btn btn-soft btn-sm btn-primary"
onClick={() => {
setReportOpen(false);
setReportTabOpen(false);
setChatOpen(!chatOpen);
if (selectedChat) {
setChatNotification(selectedChat, false);

4
apps/dispatch/app/dispatch/_components/left/Report.tsx
View File

@@ -4,9 +4,9 @@ import { useSession } from "next-auth/react";
import { useEffect, useRef, useState } from "react";
import { Dispatcher } from "dispatch/_components/navbar/_components/action";
import { cn } from "helpers/cn";
import { useLeftMenuStore } from "_store/leftMenuStore";
import { getDispatcher } from "dispatch/_components/left/Chat";
import { serverApi } from "helpers/axios";
import { getDispatcher } from "pilot/_components/navbar/action";
import { useLeftMenuStore } from "_store/leftMenuStore";
export const Report = () => {
const { setChatOpen, setReportTabOpen, reportTabOpen, setOwnId } =

12
apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx
View File

@@ -224,7 +224,6 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
};
const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
const aircrafts = useAircraftsStore((state) => state.aircrafts);
const [hideMarker, setHideMarker] = useState(false);
const map = useMap();
const markerRef = useRef<LMarker>(null);
@@ -266,7 +265,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
>("topleft");
const handleConflict = useCallback(() => {
const newAnchor = calculateAnchor(aircraft.id, "marker");
const newAnchor = calculateAnchor(`aircraft-${aircraft.id}`, "marker");
setAnchor(newAnchor);
}, [aircraft.id]);
@@ -296,7 +295,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
) => {
return `<div
id="marker-${aircraft.id}"
id="marker-aircraft-${aircraft.id}"
class="${cn(
"relative w-auto transform inline-flex items-center gap-2 px-2 z-100",
anchor.includes("right") && "-translate-x-full",
@@ -332,7 +331,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
data-id="${aircraft.id}"
data-anchor-lat="${aircraft.location.lat}"
data-anchor-lng="${aircraft.location.lng}"
id="marker-domain-${aircraft.id}"
id="marker-domain-aircraft-${aircraft.id}"
class="${cn(
"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
anchor.includes("left") && "-translate-x-1/2",
@@ -356,7 +355,10 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
/>
{openAircraftMarker.some((m) => m.id === aircraft.id) && !hideMarker && (
<SmartPopup
id={aircraft.id}
options={{
ignoreCluster: true,
}}
id={`aircraft-${aircraft.id}`}
ref={popupRef}
position={[aircraft.location.lat, aircraft.location.lng]}
autoClose={false}

14
apps/dispatch/app/dispatch/_components/map/MissionMarkers.tsx
View File

@@ -258,7 +258,10 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
>("topleft");
const handleConflict = useCallback(() => {
const newAnchor = calculateAnchor(mission.id.toString(), "marker");
const newAnchor = calculateAnchor(
`mission-${mission.id.toString()}`,
"marker",
);
setAnchor(newAnchor);
}, [mission.id]);
@@ -288,7 +291,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
) => {
return `<div
id="marker-${mission.id}"
id="marker-mission-${mission.id}"
class="${cn(
"relative w-auto transform inline-flex items-center gap-2 px-2 z-100",
anchor.includes("right") && "-translate-x-full",
@@ -318,7 +321,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
data-anchor-lat="${mission.addressLat}"
data-anchor-lng="${mission.addressLng}"
data-id="${mission.id}"
id="marker-domain-${mission.id}"
id="marker-domain-mission-${mission.id}"
class="${cn(
"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
anchor.includes("left") && "-translate-x-1/2",
@@ -342,7 +345,10 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
/>
{openMissionMarker.some((m) => m.id === mission.id) && !hideMarker && (
<SmartPopup
id={mission.id.toString()}
options={{
ignoreCluster: true,
}}
id={`mission-${mission.id.toString()}`}
ref={popupRef}
position={[mission.addressLat, mission.addressLng]}
autoClose={false}

99
apps/dispatch/app/dispatch/_components/map/_components/MarkerCluster.tsx
View File

@@ -1,6 +1,7 @@
import { Mission } from "@repo/db";
import { SmartPopup, useSmartPopup } from "_components/SmartPopup";
import { Aircraft, useAircraftsStore } from "_store/aircraftsStore";
import { useMapStore } from "_store/mapStore";
import { useMissionsStore } from "_store/missionsStore";
import {
FMS_STATUS_COLORS,
@@ -22,6 +23,10 @@ const PopupContent = ({
missions: Mission[];
}) => {
const { anchor } = useSmartPopup();
const { setOpenAircraftMarker, setOpenMissionMarker } = useMapStore(
(state) => state,
);
const map = useMap();
let borderColor = "";
@@ -33,7 +38,9 @@ const PopupContent = ({
}
} else if (anchor.includes("bottom")) {
if (aircrafts.length > 0) {
borderColor = FMS_STATUS_TEXT_COLORS[aircrafts[0]!.fmsStatus] || "white";
borderColor =
FMS_STATUS_TEXT_COLORS[aircrafts[aircrafts.length - 1]!.fmsStatus] ||
"white";
} else if (missions.length > 0) {
borderColor = MISSION_STATUS_TEXT_COLORS[missions[0]!.state];
}
@@ -44,7 +51,7 @@ const PopupContent = ({
<div className="relative flex flex-col text-white min-w-[200px]">
<div
className={cn(
"absolute w-[calc(100%+2px)] h-4 z-99",
"absolute w-[calc(100%+2px)] h-4 z-99 pointer-events-none",
anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
)}
@@ -69,9 +76,26 @@ const PopupContent = ({
)}
style={{
backgroundColor: MISSION_STATUS_COLORS[mission.state],
cursor: "pointer",
}}
>
<span className="mx-2 my-0.5">
<span
className="mx-2 my-0.5 flex-1 cursor-pointer"
onClick={() => {
setOpenMissionMarker({
open: [
{
id: mission.id,
tab: "home",
},
],
close: [],
});
map.setView([mission.addressLat, mission.addressLng], 12, {
animate: true,
});
}}
>
{mission.missionKeywordAbbreviation}
</span>
</div>
@@ -79,10 +103,24 @@ const PopupContent = ({
{aircrafts.map((aircraft) => (
<div
key={aircraft.id}
className="relative w-auto inline-flex items-center gap-2 text-nowrap"
className="relative w-auto inline-flex items-center gap-2 text-nowrap cursor-pointer"
style={{
backgroundColor: FMS_STATUS_COLORS[aircraft.fmsStatus],
}}
onClick={() => {
setOpenAircraftMarker({
open: [
{
id: aircraft.id,
tab: "aircraft",
},
],
close: [],
});
map.setView([aircraft.location.lat, aircraft.location.lng], 12, {
animate: true,
});
}}
>
<span
className="mx-2 my-0.5 text-gt font-bold"
@@ -178,36 +216,34 @@ export const MarkerCluster = () => {
}
});
setCluster((prev) => {
return prev.map((c) => {
const aircraftPos = c.aircrafts.map((a) => [
a.location.lat,
a.location.lng,
]);
const missionPos = c.missions.map((m) => [
m.addressLat,
m.addressLng,
]);
const allPos = [...aircraftPos, ...missionPos];
const clusterWithAvgPos = newCluster.map((c) => {
const aircraftPos = c.aircrafts.map((a) => [
a.location.lat,
a.location.lng,
]);
const missionPos = c.missions.map((m) => [m.addressLat, m.addressLng]);
const allPos = [...aircraftPos, ...missionPos];
// Calculate the average position of all markers in the cluster
const avgLat =
allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
const avgLng =
allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
// Calculate the average position of all markers in the cluster
return {
...c,
lat: avgLat,
lng: avgLng,
};
});
const avgLat =
allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
const avgLng =
allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
console.log(allPos, { avgLat, avgLng });
return {
...c,
lat: avgLat,
lng: avgLng,
};
});
if (zoom >= 9) {
setCluster([]);
} else {
setCluster(newCluster);
setCluster(clusterWithAvgPos);
}
};
handleZoom();
@@ -220,17 +256,18 @@ export const MarkerCluster = () => {
<>
{cluster.map((c, i) => (
<SmartPopup
ignoreMarker
options={{
ignoreMarker: true,
}}
id={`cluster-${i}`}
wrapperClassName="relative"
key={i}
position={[c.lat, c.lng]}
autoPan={false}
autoClose={false}
className="w-[202px]"
>
<div>
<PopupContent aircrafts={c.aircrafts} missions={c.missions} />
</div>
<PopupContent aircrafts={c.aircrafts} missions={c.missions} />
</SmartPopup>
))}
</>

7
apps/dispatch/app/dispatch/_components/navbar/_components/action.ts
View File

@@ -9,10 +9,3 @@ export interface Dispatcher {
name: string;
socketId: string;
}
export const getDispatcher = async () => {
const res = await fetch(`
${process.env.NEXT_PUBLIC_DISPATCH_SERVER_URL}/dispatcher`);
const data = await res.json();
return data as Dispatcher[];
};

BIN
grafana/grafana.db
View File

Binary file not shown.