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

added MEasurement-tool, added Dispatch-name auto change

Browse Source
This commit is contained in:
PxlLoewe
2025-06-08 18:15:47 -07:00
parent b553f8107d
commit 448bd94d44
14 changed files with 202 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/dispatch/app/_components/Audio/Audio.tsx
View File

@@ -20,7 +20,6 @@ import { ConnectionQuality } from "livekit-client";
import { ROOMS } from "_data/livekitRooms";
import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
import { useSession } from "next-auth/react";
import { dispatchSocket } from "dispatch/socket";
import { useSounds } from "_components/Audio/useSounds";
export const Audio = () => {

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

@@ -6,7 +6,8 @@ import { Fragment, useEffect, useState } from "react";
import { cn } from "_helpers/cn";
import { asPublicUser } from "@repo/db";
import { useQuery } from "@tanstack/react-query";
import { getConnectedUserAPI } from "_querys/connected-user";
import { getConnectedDispatcherAPI } from "_querys/dispatcher";
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
export const Chat = () => {
const {
@@ -26,20 +27,19 @@ export const Chat = () => {
const [addTabValue, setAddTabValue] = useState<string>("default");
const [message, setMessage] = useState<string>("");
const { data: connectedUser } = useQuery({
queryKey: ["connected-users"],
queryFn: async () => {
const user = await getConnectedUserAPI();
return user.filter((u) => u.userId !== session.data?.user.id);
},
const { data: dispatcher } = useQuery({
queryKey: ["dispatcher"],
queryFn: () => getConnectedDispatcherAPI(),
refetchInterval: 10000,
});
const { data: aircrafts } = useQuery({
queryKey: ["aircrafts"],
queryFn: () => getConnectedAircraftsAPI(),
refetchInterval: 10000,
refetchOnWindowFocus: true,
});
useEffect(() => {
if (!session.data?.user.id) return;
setOwnId(session.data.user.id);
}, [session, setOwnId]);
const filteredDispatcher = dispatcher?.filter((d) => d.userId !== session.data?.user.id);
const filteredAircrafts = aircrafts?.filter((a) => a.userId !== session.data?.user.id);
return (
<div className={cn("dropdown dropdown-right", chatOpen && "dropdown-open")}>
@@ -75,31 +75,36 @@ export const Chat = () => {
value={addTabValue}
onChange={(e) => setAddTabValue(e.target.value)}
>
{!connectedUser?.length && (
{!filteredDispatcher?.length && !filteredAircrafts?.length && (
<option disabled value="default">
Keine Chatpartner gefunden
</option>
)}
{connectedUser?.length && (
<option disabled value="default">
Chatpartner auswählen
</option>
)}
{filteredDispatcher?.length ||
(filteredAircrafts?.length && (
<option disabled value="default">
Chatpartner auswählen
</option>
))}
{[
...(connectedUser?.filter(
(user, idx, arr) => arr.findIndex((u) => u.userId === user.userId) === idx,
) || []),
].map((user) => (
<option key={user.userId} value={user.userId}>
{asPublicUser(user.publicUser).fullName}
{filteredDispatcher?.map((dispatcher) => (
<option key={dispatcher.userId} value={dispatcher.userId}>
{dispatcher.zone} - {asPublicUser(dispatcher.publicUser).fullName}
</option>
))}
{filteredAircrafts?.map((aircraft) => (
<option key={aircraft.userId} value={aircraft.userId}>
{aircraft.Station.bosCallsignShort} -{" "}
{asPublicUser(aircraft.publicUser).fullName}
</option>
))}
</select>
<button
className="btn btn-sm btn-soft btn-primary join-item"
onClick={() => {
const user = connectedUser?.find((user) => user.userId === addTabValue);
const aircraftUser = aircrafts?.find((a) => a.userId === addTabValue);
const dispatcherUser = dispatcher?.find((d) => d.userId === addTabValue);
const user = aircraftUser || dispatcherUser;
if (!user) return;
addChat(addTabValue, asPublicUser(user.publicUser).fullName);
setSelectedChat(addTabValue);

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

@@ -7,8 +7,9 @@ import { toast } from "react-hot-toast";
import { useLeftMenuStore } from "_store/leftMenuStore";
import { asPublicUser } from "@repo/db";
import { useQuery } from "@tanstack/react-query";
import { getConnectedUserAPI } from "_querys/connected-user";
import { getConnectedDispatcherAPI } from "_querys/dispatcher";
import { sendReportAPI } from "_querys/report";
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
export const Report = () => {
const { setChatOpen, setReportTabOpen, reportTabOpen, setOwnId } = useLeftMenuStore();
@@ -22,15 +23,19 @@ export const Report = () => {
setOwnId(session.data.user.id);
}, [session, setOwnId]);
const { data: connectedUser } = useQuery({
queryKey: ["connected-users"],
queryFn: async () => {
const user = await getConnectedUserAPI();
return user.filter((u) => u.userId !== session.data?.user.id);
},
const { data: dispatcher } = useQuery({
queryKey: ["dispatcher"],
queryFn: () => getConnectedDispatcherAPI(),
refetchInterval: 10000,
refetchOnWindowFocus: true,
});
const { data: aircrafts } = useQuery({
queryKey: ["aircrafts"],
queryFn: () => getConnectedAircraftsAPI(),
refetchInterval: 10000,
});
const filteredDispatcher = dispatcher?.filter((d) => d.userId !== session.data?.user.id);
const filteredAircrafts = aircrafts?.filter((a) => a.userId !== session.data?.user.id);
return (
<div className={cn("dropdown dropdown-right", reportTabOpen && "dropdown-open")}>
@@ -60,23 +65,27 @@ export const Report = () => {
value={selectedPlayer}
onChange={(e) => setSelectedPlayer(e.target.value)}
>
{!connectedUser?.length && (
{!filteredDispatcher?.length && !filteredAircrafts?.length && (
<option disabled value="default">
Kein Nutzer verbunden
Keine Nutzer gefunden
</option>
)}
{connectedUser?.length && (
<option disabled value="default">
Kein Nutzer auswählen
{filteredDispatcher?.length ||
(filteredAircrafts?.length && (
<option disabled value="default">
Nutzer auswählen
</option>
))}
{filteredDispatcher?.map((dispatcher) => (
<option key={dispatcher.userId} value={dispatcher.userId}>
{dispatcher.zone} - {asPublicUser(dispatcher.publicUser).fullName}
</option>
)}
{[
...(connectedUser?.filter(
(user, idx, arr) => arr.findIndex((u) => u.userId === user.userId) === idx,
) || []),
].map((user) => (
<option key={user.userId} value={user.userId}>
{asPublicUser(user.publicUser).fullName}
))}
{filteredAircrafts?.map((aircraft) => (
<option key={aircraft.userId} value={aircraft.userId}>
{aircraft.Station.bosCallsignShort} -{" "}
{asPublicUser(aircraft.publicUser).fullName}
</option>
))}
</select>

2
apps/dispatch/app/_components/map/Map.tsx
View File

@@ -10,6 +10,7 @@ import { AircraftLayer } from "_components/map/AircraftMarker";
import { MarkerCluster } from "_components/map/_components/MarkerCluster";
import { useEffect, useRef } from "react";
import { Map as TMap } from "leaflet";
import { DistanceLayer } from "_components/map/Measurement";
const Map = () => {
const ref = useRef<TMap | null>(null);
@@ -49,6 +50,7 @@ const Map = () => {
<MarkerCluster />
<MissionLayer />
<AircraftLayer />
<DistanceLayer />
</MapContainer>
);
};

102
apps/dispatch/app/_components/map/Measurement.tsx Normal file
View File

@@ -0,0 +1,102 @@
import "leaflet.polylinemeasure";
import "leaflet.polylinemeasure/Leaflet.PolylineMeasure.css";
import { useEffect, useRef } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";
export const DistanceLayer = () => {
const map = useMap();
const added = useRef(false);
useEffect(() => {
if (added.current) return;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(L.control as any)
.polylineMeasure({
position: "topleft",
unit: "metres", // Show imperial or metric distances. Values: 'metres', 'landmiles', 'nauticalmiles'
clearMeasurementsOnStop: true, // Clear all the measurements when the control is unselected
showBearings: true, // Whether bearings are displayed within the tooltips
bearingTextIn: "In", // language dependend label for inbound bearings
bearingTextOut: "Out", // language dependend label for outbound bearings
tooltipTextFinish: "Klicken zum <b>Beenden</b><br>",
tooltipTextDelete: "SHIFT+Click zum <b>Löschen</b>",
tooltipTextMove: "Klicken und ziehen zum <b>Verschieben</b><br>",
tooltipTextResume: "<br>CTRL+Click zum <b>Forsetzen</b>",
tooltipTextAdd: "CTRL+Click zum <b>Hinzufügen</b>",
// language dependend labels for point's tooltips
measureControlTitleOn: "Messung starten", // Title for the control going to be switched on
measureControlTitleOff: "Messung beenden", // Title for the control going to be switched off
measureControlLabel: "&#128207", // Label of the Measure control (maybe a unicode symbol)
measureControlClasses: ["pointer"], // Classes to apply to the Measure control
showClearControl: true, // Show a control to clear all the measurements
clearControlTitle: "Messung löschen", // Title text to show on the clear measurements control button
clearControlLabel: "&times", // Label of the Clear control (maybe a unicode symbol)
clearControlClasses: ["pointer"], // Classes to apply to clear control button
unitControlClasses: ["pointer"],
showUnitControl: true, // Show a control to change the units of measurements
unitControlTitle: {
// Title texts to show on the Unit Control
text: "Einheit ändern",
kilometres: "Kilometer",
nauticalmiles: "Nautische Meilen",
},
unitControlLabel: {
// Unit symbols to show in the Unit Control and measurement labels
metres: "m",
kilometres: "km",
feet: "ft",
landmiles: "mi",
nauticalmiles: "nm",
},
tempLine: {
// Styling settings for the temporary dashed line
color: "#00f", // Dashed line color
weight: 2, // Dashed line weight
},
fixedLine: {
// Styling for the solid line
color: "#006", // Solid line color
weight: 2, // Solid line weight
},
arrow: {
// Styling of the midway arrow
color: "#000", // Color of the arrow
},
startCircle: {
// Style settings for circle marker indicating the starting point of the polyline
color: "#000000", // Color of the border of the circle
weight: 1, // Weight of the circle
fillColor: "#000000", // Fill color of the circle
fillOpacity: 1, // Fill opacity of the circle
radius: 3, // Radius of the circle
},
intermedCircle: {
// Style settings for all circle markers between startCircle and endCircle
color: "#000", // Color of the border of the circle
weight: 1, // Weight of the circle
fillColor: "#000000", // Fill color of the circle
fillOpacity: 1, // Fill opacity of the circle
radius: 3, // Radius of the circle
},
currentCircle: {
// Style settings for circle marker indicating the latest point of the polyline during drawing a line
color: "#000000", // Color of the border of the circle
weight: 1, // Weight of the circle
fillColor: "#FFFFFF", // Fill color of the circle
fillOpacity: 1, // Fill opacity of the circle
radius: 3, // Radius of the circle
},
endCircle: {
// Style settings for circle marker indicating the last point of the polyline
color: "#000", // Color of the border of the circle
weight: 1, // Weight of the circle
fillColor: "#ffffff", // Fill color of the circle
fillOpacity: 1, // Fill opacity of the circle
radius: 3, // Radius of the circle
},
})
.addTo(map);
added.current = true;
}, [map]);
return null;
};

31
apps/dispatch/app/_components/map/_components/MissionMarkerTabs.tsx
View File

@@ -18,6 +18,7 @@ import {
SmartphoneNfc,
CheckCheck,
Cross,
Radio,
} from "lucide-react";
import {
getPublicUser,
@@ -41,6 +42,7 @@ import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
import { getOsmAddress } from "_querys/osm";
import { hpgStateToFMSStatus } from "_helpers/hpgStateToFmsStatus";
import { cn } from "_helpers/cn";
const Einsatzdetails = ({
mission,
@@ -428,7 +430,7 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
? [{ label: "Rettungsdienst", value: "RTW", type: "vehicle" as const }]
: []),
...(!mission.hpgPoliceState || mission.hpgPoliceState === "NOT_REQUESTED"
? [{ label: "POLizei", value: "POL", type: "vehicle" as const }]
? [{ label: "Polizei", value: "POL", type: "vehicle" as const }]
: []),
].sort((a, b) => {
// 1. Vehicles first
@@ -443,7 +445,6 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
// 3. Otherwise, sort alphabetically by label
return a.label.localeCompare(b.label);
return 0;
});
useEffect(() => {
@@ -558,25 +559,17 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
}}
value={typeof selectedStation === "string" ? selectedStation : selectedStation?.id}
>
{allStations
?.filter((s) => !mission.missionStationIds.includes(s.id))
?.map((station) => (
<option
key={station.id}
value={station.id}
onClick={() => {
setSelectedStation(station);
}}
>
{station.bosCallsign}
</option>
))}
<option disabled value={"default"}>
Fahrzeuge:
</option>
{stationsOptions.map((option) => (
<option key={option.value} value={option.value}>
<option
key={option.value}
value={option.value}
className={cn(
"flex gap-2",
"isOnline" in option && option?.isOnline && "text-green-500",
)}
>
{option.label}
{"isOnline" in option && option?.isOnline && " (Online)"}
</option>
))}
</select>

2
apps/dispatch/app/_components/navbar/AdminPanel.tsx
View File

@@ -2,7 +2,7 @@
import { PublicUser } from "@repo/db";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getConnectedAircraftsAPI, kickAircraftAPI } from "_querys/aircrafts";
import { getConnectedDispatcherAPI, kickDispatcherAPI } from "_querys/connected-user";
import { getConnectedDispatcherAPI, kickDispatcherAPI } from "_querys/dispatcher";
import { getLivekitRooms, kickLivekitParticipant } from "_querys/livekit";
import { editUserAPI } from "_querys/user";
import { ParticipantInfo } from "livekit-server-sdk";

11
apps/dispatch/app/_querys/connected-user.ts → apps/dispatch/app/_querys/dispatcher.ts
View File

@@ -2,17 +2,6 @@ import { ConnectedAircraft, ConnectedDispatcher, Prisma } from "@repo/db";
import { serverApi } from "_helpers/axios";
import axios from "axios";
export const getConnectedUserAPI = async () => {
const res = await axios.get<(ConnectedAircraft | ConnectedDispatcher)[]>(
"/api/connected-user",
{},
);
if (res.status !== 200) {
throw new Error("Failed to fetch Connected User");
}
return res.data;
};
export const changeDispatcherAPI = async (
id: number,
data: Prisma.ConnectedDispatcherUpdateInput,

14
apps/dispatch/app/_store/audioStore.ts
View File

@@ -9,6 +9,8 @@ import { ConnectionQuality, Participant, Room, RoomEvent, RpcInvocationData } fr
import { pilotSocket } from "pilot/socket";
import { create } from "zustand";
import axios from "axios";
import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
import { changeDispatcherAPI } from "_querys/dispatcher";
let interval: NodeJS.Timeout;
@@ -95,7 +97,7 @@ export const useAudioStore = create<TalkState>((set, get) => ({
},
connect: async (roomName, role) => {
set({ state: "connecting" });
console.log("Connecting to room: ", roomName);
try {
// Clean old room
const connectedRoom = get().room;
@@ -114,7 +116,15 @@ export const useAudioStore = create<TalkState>((set, get) => ({
await room.prepareConnection(url, token);
room
// Connection events
.on(RoomEvent.Connected, () => {
.on(RoomEvent.Connected, async () => {
const dispatchState = useDispatchConnectionStore.getState();
if (dispatchState.status === "connected" && dispatchState.connectedDispatcher?.id) {
changeDispatcherAPI(dispatchState.connectedDispatcher?.id, {
zone: roomName,
});
}
set({ state: "connected", room, message: null });
})
.on(RoomEvent.Disconnected, () => {

2
apps/dispatch/app/dispatch/_components/navbar/_components/Connection.tsx
View File

@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from "react";
import { toast } from "react-hot-toast";
import { useMutation } from "@tanstack/react-query";
import { Prisma } from "@repo/db";
import { changeDispatcherAPI } from "_querys/connected-user";
import { changeDispatcherAPI } from "_querys/dispatcher";
export const ConnectionBtn = () => {
const modalRef = useRef<HTMLDialogElement>(null);

2
apps/dispatch/app/pilot/_components/ConnectedDispatcher.tsx
View File

@@ -2,7 +2,7 @@ import { BADGES, PublicUser } from "@repo/db";
import { useQuery } from "@tanstack/react-query";
import { Badge } from "_components/Badge/Badge";
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
import { getConnectedDispatcherAPI } from "_querys/connected-user";
import { getConnectedDispatcherAPI } from "_querys/dispatcher";
import { Plane, Workflow } from "lucide-react";
export const ConnectedDispatcher = () => {

2
apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx
View File

@@ -2,7 +2,7 @@ import { BADGES, PublicUser } from "@repo/db";
import { useQuery } from "@tanstack/react-query";
import { Badge } from "_components/Badge/Badge";
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
import { getConnectedDispatcherAPI } from "_querys/connected-user";
import { getConnectedDispatcherAPI } from "_querys/dispatcher";
import { Plane, Workflow } from "lucide-react";
export const ConnectedDispatcher = () => {

1
apps/dispatch/package.json
View File

@@ -36,6 +36,7 @@
"i": "^0.3.7",
"jsonwebtoken": "^9.0.2",
"leaflet": "^1.9.4",
"leaflet.polylinemeasure": "^3.0.0",
"livekit-client": "^2.13.3",
"livekit-server-sdk": "^2.13.0",
"lucide-react": "^0.511.0",

8
pnpm-lock.yaml generated
View File

@@ -150,6 +150,9 @@ importers:
leaflet:
specifier: ^1.9.4
version: 1.9.4
leaflet.polylinemeasure:
specifier: ^3.0.0
version: 3.0.0
livekit-client:
specifier: ^2.13.3
version: 2.13.3(@types/dom-mediacapture-record@1.0.22)
@@ -3573,6 +3576,9 @@ packages:
leac@0.6.0:
resolution: {integrity: sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==}
leaflet.polylinemeasure@3.0.0:
resolution: {integrity: sha512-PTTHz7NBJiWmNFetH8hb3leQNM15qoM9Xe7VDKh1Hyat/M+USqFYeoa0A0LAecsqsjUqA63Rzux4SivoyrSFkA==}
leaflet@1.9.4:
resolution: {integrity: sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==}
@@ -9279,6 +9285,8 @@ snapshots:
leac@0.6.0: {}
leaflet.polylinemeasure@3.0.0: {}
leaflet@1.9.4: {}
levn@0.4.1: