This commit is contained in:
PxlLoewe
2025-07-24 16:13:17 -07:00
9 changed files with 249 additions and 104 deletions

View File

@@ -8,6 +8,8 @@ import { editUserAPI, getUserAPI } from "_querys/user";
import { useSession } from "next-auth/react";
import { useAudioStore } from "_store/audioStore";
import toast from "react-hot-toast";
import { useMapStore } from "_store/mapStore";
import { set } from "date-fns";
export const SettingsBtn = () => {
const session = useSession();
@@ -41,6 +43,7 @@ export const SettingsBtn = () => {
});
const { setSettings: setAudioSettings } = useAudioStore((state) => state);
const { setUserSettings: setUserSettings } = useMapStore((state) => state);
useEffect(() => {
if (user) {
@@ -56,8 +59,11 @@ export const SettingsBtn = () => {
radioVolume: user.settingsRadioVolume || 0.8,
autoCloseMapPopup: user.settingsAutoCloseMapPopup || false,
});
setUserSettings({
settingsAutoCloseMapPopup: user.settingsAutoCloseMapPopup || false,
});
}
}, [user, setSettings, setAudioSettings]);
}, [user, setSettings, setAudioSettings, setUserSettings]);
const setSettingsPartial = (newSettings: Partial<typeof settings>) => {
setSettings((prev) => ({
@@ -178,15 +184,19 @@ export const SettingsBtn = () => {
</div>
<div className="flex w-full justify-center">
<div className="divider w-full">
<div>
<legend className="fieldset-legend">Login options</legend>
<label className="label">
<input type="checkbox" defaultChecked className="toggle" />
Remember me
</label>
</div>
<div className="divider w-full">Disponenten Einstellungen</div>
</div>
<div className="flex w-full items-center gap-2">
<input
type="checkbox"
className="toggle"
checked={settings.autoCloseMapPopup}
onChange={(e) => {
setSettingsPartial({ autoCloseMapPopup: e.target.checked });
}}
/>
Popups automatisch schließen
</div>
<div className="modal-action flex justify-between">
@@ -213,6 +223,7 @@ export const SettingsBtn = () => {
settingsMicDevice: settings.micDeviceId,
settingsMicVolume: settings.micVolume,
settingsRadioVolume: settings.radioVolume,
settingsAutoCloseMapPopup: settings.autoCloseMapPopup,
},
});
setAudioSettings({
@@ -220,6 +231,9 @@ export const SettingsBtn = () => {
micVolume: settings.micVolume,
radioVolume: settings.radioVolume,
});
setUserSettings({
settingsAutoCloseMapPopup: settings.autoCloseMapPopup,
});
modalRef.current?.close();
toast.success("Einstellungen gespeichert");
}}

View File

@@ -15,10 +15,19 @@ export const HPGnotificationToast = ({
}) => {
const handleClick = () => {
toast.dismiss(t.id);
if (mapStore.userSettings.settingsAutoCloseMapPopup) {
mapStore.setOpenMissionMarker({
open: [{ id: event.data.mission.id, tab: "home" }],
close: mapStore.openMissionMarker?.map((m) => m.id) || [],
});
} else {
mapStore.setOpenMissionMarker({
open: [{ id: event.data.mission.id, tab: "home" }],
close: [],
});
}
mapStore.setMap({
center: [event.data.mission.addressLat, event.data.mission.addressLng],
zoom: 14,
@@ -29,7 +38,7 @@ export const HPGnotificationToast = ({
return (
<BaseNotification icon={<Cross />} className="flex flex-row">
<div className="flex-1">
<h1 className="text-red-500 font-bold">HPG validierung fehlgeschlagen</h1>
<h1 className="font-bold text-red-500">HPG validierung fehlgeschlagen</h1>
<p>{event.message}</p>
</div>
<div className="ml-11">
@@ -43,7 +52,7 @@ export const HPGnotificationToast = ({
return (
<BaseNotification icon={<Check />} className="flex flex-row">
<div className="flex-1">
<h1 className="text-green-600 font-bold">HPG validierung erfolgreich</h1>
<h1 className="font-bold text-green-600">HPG validierung erfolgreich</h1>
<p className="text-sm">{event.message}</p>
</div>
<div className="ml-11">

View File

@@ -65,6 +65,17 @@ export const MissionAutoCloseToast = ({
lng: mission.addressLng,
},
});
if (mapStore.userSettings.settingsAutoCloseMapPopup) {
mapStore.setOpenMissionMarker({
open: [
{
id: mission.id,
tab: "home",
},
],
close: mapStore.openMissionMarker?.map((m) => m.id) || [],
});
} else {
mapStore.setOpenMissionMarker({
open: [
{
@@ -74,6 +85,7 @@ export const MissionAutoCloseToast = ({
],
close: [],
});
}
toast.dismiss(t.id);
}}
>

View File

@@ -47,7 +47,10 @@ export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) =>
}
}, []);
const [aircraftDataAcurate, setAircraftDataAccurate] = useState(false);
const mapStore = useMapStore((s) => s);
//const mapStore = useMapStore((s) => s);
const { openAircraftMarker, setOpenAircraftMarker, userSettings, setMap } = useMapStore(
(store) => store,
);
const { data: connectedAircrafts } = useQuery({
queryKey: ["aircrafts"],
@@ -129,11 +132,18 @@ export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) =>
className="mr-1 cursor-pointer font-bold underline"
onClick={() => {
if (!connectedAircraft.posLat || !connectedAircraft.posLng) return;
mapStore.setOpenAircraftMarker({
if (userSettings.settingsAutoCloseMapPopup) {
setOpenAircraftMarker({
open: [{ id: connectedAircraft.id, tab: "fms" }],
close: openAircraftMarker?.map((m) => m.id) || [],
});
} else {
setOpenAircraftMarker({
open: [{ id: connectedAircraft.id, tab: "fms" }],
close: [],
});
mapStore.setMap({
}
setMap({
center: [connectedAircraft.posLat, connectedAircraft.posLng],
zoom: 14,
});

View File

@@ -54,7 +54,14 @@ export const SituationBoard = () => {
queryKey: ["aircrafts"],
queryFn: () => getConnectedAircraftsAPI(),
});
const { setOpenAircraftMarker, setOpenMissionMarker, setMap } = useMapStore((state) => state);
const {
setOpenAircraftMarker,
setOpenMissionMarker,
setMap,
userSettings,
openAircraftMarker,
openMissionMarker,
} = useMapStore((state) => state);
return (
<div className={cn("dropdown dropdown-top", situationTabOpen && "dropdown-open")}>
@@ -112,6 +119,17 @@ export const SituationBoard = () => {
mission.state === "draft" && "missionListItem",
)}
onDoubleClick={() => {
if (userSettings.settingsAutoCloseMapPopup) {
setOpenMissionMarker({
open: [
{
id: mission.id,
tab: "home",
},
],
close: openMissionMarker?.map((m) => m.id) || [],
});
} else {
setOpenMissionMarker({
open: [
{
@@ -121,6 +139,7 @@ export const SituationBoard = () => {
],
close: [],
});
}
setMap({
center: {
lat: mission.addressLat,
@@ -161,45 +180,57 @@ export const SituationBoard = () => {
</tr>
</thead>
<tbody>
{connectedAircrafts?.map((station) => (
{connectedAircrafts?.map((aircraft) => (
<tr
className="cursor-pointer"
key={station.id}
key={aircraft.id}
onDoubleClick={() => {
if (userSettings.settingsAutoCloseMapPopup) {
setOpenAircraftMarker({
open: [
{
id: station.id,
id: aircraft.id,
tab: "home",
},
],
close: openAircraftMarker?.map((m) => m.id) || [],
});
} else {
setOpenAircraftMarker({
open: [
{
id: aircraft.id,
tab: "home",
},
],
close: [],
});
if (station.posLat === null || station.posLng === null) return;
}
if (aircraft.posLat === null || aircraft.posLng === null) return;
setMap({
center: {
lat: station.posLat,
lng: station.posLng,
lat: aircraft.posLat,
lng: aircraft.posLng,
},
zoom: 14,
});
}}
>
<td>{station.Station.bosCallsignShort}</td>
<td>{aircraft.Station.bosCallsignShort}</td>
<td
className="font-lg text-center font-semibold"
style={{
color: FMS_STATUS_TEXT_COLORS[station.fmsStatus],
backgroundColor: FMS_STATUS_COLORS[station.fmsStatus],
color: FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus],
backgroundColor: FMS_STATUS_COLORS[aircraft.fmsStatus],
}}
>
{station.fmsStatus}
{aircraft.fmsStatus}
</td>
<td className="whitespace-nowrap">
{station.posLng || !station.posLat ? (
<>{findLeitstelleForPosition(station.posLng!, station.posLat!)}</>
{aircraft.posLng || !aircraft.posLat ? (
<>{findLeitstelleForPosition(aircraft.posLng!, aircraft.posLat!)}</>
) : (
station.Station.bosRadioArea
aircraft.Station.bosRadioArea
)}
</td>
</tr>

View File

@@ -17,6 +17,7 @@ import { getConnectedAircraftPositionLogAPI, getConnectedAircraftsAPI } from "_q
import { getMissionsAPI } from "_querys/missions";
import { FMS_STATUS_COLORS, FMS_STATUS_TEXT_COLORS } from "_helpers/fmsStatusColors";
import { usePilotConnectionStore } from "_store/pilot/connectionStore";
import { useSession } from "next-auth/react";
const AircraftPopupContent = ({
aircraft,
@@ -72,7 +73,7 @@ const AircraftPopupContent = ({
}
}, [currentTab, aircraft, mission]);
const { setOpenAircraftMarker, setMap } = useMapStore((state) => state);
const { setOpenAircraftMarker, setMap, openAircraftMarker } = useMapStore((state) => state);
const { anchor } = useSmartPopup();
return (
<>
@@ -229,7 +230,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: ConnectedAircraft & { Station:
const markerRef = useRef<LMarker>(null);
const popupRef = useRef<LPopup>(null);
const { openAircraftMarker, setOpenAircraftMarker } = useMapStore((store) => store);
const { openAircraftMarker, setOpenAircraftMarker, userSettings } = useMapStore((store) => store);
const { data: positionLog } = useQuery({
queryKey: ["positionlog", aircraft.id],
queryFn: () =>
@@ -248,6 +249,17 @@ const AircraftMarker = ({ aircraft }: { aircraft: ConnectedAircraft & { Station:
open: [],
close: [aircraft.id],
});
} else {
if (userSettings.settingsAutoCloseMapPopup) {
setOpenAircraftMarker({
open: [
{
id: aircraft.id,
tab: "home",
},
],
close: openAircraftMarker?.map((m) => m.id) || [],
});
} else {
setOpenAircraftMarker({
open: [
@@ -259,13 +271,14 @@ const AircraftMarker = ({ aircraft }: { aircraft: ConnectedAircraft & { Station:
close: [],
});
}
}
};
const marker = markerRef.current;
marker?.on("click", handleClick);
return () => {
marker?.off("click", handleClick);
};
}, [aircraft.id, openAircraftMarker, setOpenAircraftMarker]);
}, [aircraft.id, openAircraftMarker, setOpenAircraftMarker, userSettings]);
const [anchor, setAnchor] = useState<"topleft" | "topright" | "bottomleft" | "bottomright">(
"topleft",

View File

@@ -230,7 +230,7 @@ const MissionMarker = ({
refetchInterval: 10000,
});
const { openMissionMarker, setOpenMissionMarker } = useMapStore((store) => store);
const { openMissionMarker, setOpenMissionMarker, userSettings } = useMapStore((store) => store);
const needsAction =
HPGValidationRequired(mission.missionStationIds, aircrafts, mission.hpgMissionString) &&
@@ -245,6 +245,17 @@ const MissionMarker = ({
open: [],
close: [mission.id],
});
} else {
if (userSettings.settingsAutoCloseMapPopup) {
setOpenMissionMarker({
open: [
{
id: mission.id,
tab: "home",
},
],
close: openMissionMarker?.map((m) => m.id) || [],
});
} else {
setOpenMissionMarker({
open: [
@@ -256,13 +267,14 @@ const MissionMarker = ({
close: [],
});
}
}
};
const markerCopy = markerRef.current;
markerCopy?.on("click", handleClick);
return () => {
markerCopy?.off("click", handleClick);
};
}, [mission.id, openMissionMarker, setOpenMissionMarker]);
}, [mission.id, openMissionMarker, setOpenMissionMarker, userSettings]);
const [anchor, setAnchor] = useState<"topleft" | "topright" | "bottomleft" | "bottomright">(
"topleft",

View File

@@ -21,7 +21,13 @@ const PopupContent = ({
missions: Mission[];
}) => {
const { anchor } = useSmartPopup();
const { setOpenAircraftMarker, setOpenMissionMarker } = useMapStore((state) => state);
const {
setOpenAircraftMarker,
setOpenMissionMarker,
openAircraftMarker,
openMissionMarker,
userSettings,
} = useMapStore((state) => state);
const map = useMap();
let borderColor = "";
@@ -77,6 +83,17 @@ const PopupContent = ({
<span
className="mx-2 my-0.5 flex-1 cursor-pointer"
onClick={() => {
if (userSettings.settingsAutoCloseMapPopup) {
setOpenMissionMarker({
open: [
{
id: mission.id,
tab: "home",
},
],
close: openMissionMarker?.map((m) => m.id) || [],
});
} else {
setOpenMissionMarker({
open: [
{
@@ -86,6 +103,7 @@ const PopupContent = ({
],
close: [],
});
}
map.setView([mission.addressLat, mission.addressLng], 12, {
animate: true,
});
@@ -104,15 +122,27 @@ const PopupContent = ({
backgroundColor: FMS_STATUS_COLORS[aircraft.fmsStatus],
}}
onClick={() => {
if (userSettings.settingsAutoCloseMapPopup) {
setOpenAircraftMarker({
open: [
{
id: aircraft.id,
tab: "aircraft",
tab: "home",
},
],
close: openAircraftMarker?.map((m) => m.id) || [],
});
} else {
setOpenAircraftMarker({
open: [
{
id: aircraft.id,
tab: "home",
},
],
close: [],
});
}
map.setView([aircraft.posLat!, aircraft.posLng!], 12, {
animate: true,
});

View File

@@ -39,6 +39,10 @@ export interface MapStore {
[aircraftId: string]: "home" | "fms" | "aircraft" | "mission" | "chat";
};
setAircraftTab: (aircraftId: number, tab: MapStore["aircraftTabs"][number]) => void;
userSettings: {
settingsAutoCloseMapPopup: boolean;
};
setUserSettings: (settings: Partial<MapStore["userSettings"]>) => void;
}
export const useMapStore = create<MapStore>((set, get) => ({
@@ -102,4 +106,14 @@ export const useMapStore = create<MapStore>((set, get) => ({
},
})),
missionTabs: {},
userSettings: {
settingsAutoCloseMapPopup: false,
},
setUserSettings: (settings) =>
set((state) => ({
userSettings: {
...state.userSettings,
...settings,
},
})),
}));