103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
import { Prisma, StationStatus } from "@repo/db";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { BaseNotification } from "_components/customToasts/BaseNotification";
|
|
import { FMS_STATUS_COLORS } from "_helpers/fmsStatusColors";
|
|
import { editConnectedAircraftAPI, getConnectedAircraftsAPI } from "_querys/aircrafts";
|
|
import { getStationsAPI } from "_querys/stations";
|
|
import { useMapStore } from "_store/mapStore";
|
|
import { X } from "lucide-react";
|
|
import { Toast, toast } from "react-hot-toast";
|
|
|
|
const QUICK_RESPONSE: Record<string, string[]> = {
|
|
"5": ["J", "c"],
|
|
};
|
|
|
|
export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) => {
|
|
const mapStore = useMapStore((s) => s);
|
|
|
|
const { data: connectedAircrafts } = useQuery({
|
|
queryKey: ["aircrafts"],
|
|
queryFn: () => getConnectedAircraftsAPI(),
|
|
refetchInterval: 10000,
|
|
});
|
|
const { data: stations } = useQuery({
|
|
queryKey: ["stations"],
|
|
queryFn: () => getStationsAPI(),
|
|
});
|
|
|
|
const queryClient = useQueryClient();
|
|
const changeAircraftMutation = useMutation({
|
|
mutationFn: async ({
|
|
id,
|
|
update,
|
|
}: {
|
|
id: number;
|
|
update: Prisma.ConnectedAircraftUpdateInput;
|
|
}) => {
|
|
await editConnectedAircraftAPI(id, update);
|
|
queryClient.invalidateQueries({
|
|
queryKey: ["aircrafts"],
|
|
});
|
|
},
|
|
});
|
|
|
|
const connectedAircraft = connectedAircrafts?.find((a) => a.id === event.data?.aircraftId);
|
|
const station = stations?.find((s) => s.id === event.data?.stationId);
|
|
|
|
if (!connectedAircraft || !station) return null;
|
|
return (
|
|
<BaseNotification>
|
|
<div className="flex flex-row gap-14 items-center">
|
|
<p>
|
|
<span
|
|
className="underline mr-1 cursor-pointer font-bold"
|
|
onClick={() => {
|
|
if (!connectedAircraft.posLat || !connectedAircraft.posLng) return;
|
|
mapStore.setOpenAircraftMarker({
|
|
open: [{ id: connectedAircraft.id, tab: "fms" }],
|
|
close: [],
|
|
});
|
|
mapStore.setMap({
|
|
center: [connectedAircraft.posLat, connectedAircraft.posLng],
|
|
zoom: 14,
|
|
});
|
|
}}
|
|
>
|
|
{station.bosCallsign}
|
|
</span>
|
|
sendet Status {connectedAircraft.fmsStatus}
|
|
</p>
|
|
<div className="flex gap-2 items-center">
|
|
{QUICK_RESPONSE[String(connectedAircraft.fmsStatus)]?.map((status) => (
|
|
<button
|
|
key={status}
|
|
className={
|
|
"flex justify-center items-center min-w-10 min-h-10 cursor-pointer text-lg font-bold"
|
|
}
|
|
style={{
|
|
backgroundColor: FMS_STATUS_COLORS[status],
|
|
color: "white",
|
|
}}
|
|
onClick={async () => {
|
|
await changeAircraftMutation.mutateAsync({
|
|
id: connectedAircraft.id,
|
|
update: {
|
|
fmsStatus: status,
|
|
},
|
|
});
|
|
toast.remove(t.id);
|
|
toast.success(`Status auf ${status} geändert`);
|
|
}}
|
|
>
|
|
{status}
|
|
</button>
|
|
))}
|
|
<button className="btn btn-ghost btn-sm" onClick={() => toast.remove(t.id)}>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</BaseNotification>
|
|
);
|
|
};
|