Added soem things

apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx

@@ -30,6 +30,7 @@ import { ConnectedAircraft, Station } from "@repo/db";
 import { useQuery } from "@tanstack/react-query";
 import { getConnectedAircraftsAPI } from "querys/aircrafts";
 import { getMissionsAPI } from "querys/missions";
+import { checkSimulatorConnected } from "helpers/simulatorConnected";
 
 export const FMS_STATUS_COLORS: { [key: string]: string } = {
 	"0": "rgb(140,10,10)",
@@ -394,7 +395,7 @@ const AircraftMarker = ({
 
 	return (
 		<Fragment key={aircraft.id}>
-			{aircraft.simulatorConnected && (
+			{checkSimulatorConnected(aircraft.lastHeartbeat) && (
 				<Marker
 					ref={markerRef}
 					position={[aircraft.posLat!, aircraft.posLng!]}
@@ -433,6 +434,7 @@ export const AircraftLayer = () => {
 	const { data: aircrafts } = useQuery({
 		queryKey: ["aircrafts"],
 		queryFn: getConnectedAircraftsAPI,
+		refetchInterval: 10000,
 	});
 
 	return (

apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx

@@ -22,7 +22,6 @@ import {
 	Mountain,
 	Navigation,
 	RadioTower,
-	SirenIcon,
 	Sunset,
 	TextSearch,
 } from "lucide-react";

apps/dispatch/app/dispatch/_components/map/_components/MarkerCluster.tsx

@@ -11,6 +11,7 @@ import {
 	MISSION_STATUS_TEXT_COLORS,
 } from "dispatch/_components/map/MissionMarkers";
 import { cn } from "helpers/cn";
+import { checkSimulatorConnected } from "helpers/simulatorConnected";
 import { getConnectedAircraftsAPI } from "querys/aircrafts";
 import { getMissionsAPI } from "querys/missions";
 import { useEffect, useState } from "react";
@@ -102,7 +103,7 @@ const PopupContent = ({
 					</div>
 				))}
 				{aircrafts
-					.filter((a) => a.simulatorConnected)
+					.filter((a) => checkSimulatorConnected(a.lastHeartbeat))
 					.map((aircraft) => (
 						<div
 							key={aircraft.id}
@@ -169,7 +170,7 @@ export const MarkerCluster = () => {
 			const zoom = map.getZoom();
 			let newCluster: typeof cluster = [];
 			aircrafts
-				?.filter((a) => a.simulatorConnected)
+				?.filter((a) => checkSimulatorConnected(a.lastHeartbeat))
 				.forEach((aircraft) => {
 					const lat = aircraft.posLat!;
 					const lng = aircraft.posLng!;

apps/dispatch/app/dispatch/_components/navbar/Navbar.tsx

@@ -2,7 +2,7 @@
 
 import { Connection } from "./_components/Connection";
 import { ThemeSwap } from "./_components/ThemeSwap";
-import { Audio } from "./_components/Audio";
+import { Audio } from "../../../_components/Audio";
 import { useState } from "react";
 import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 import Link from "next/link";

apps/dispatch/app/dispatch/_components/navbar/_components/Audio.tsx

@@ -1,143 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
-import {
-	Disc,
-	Mic,
-	PlugZap,
-	ServerCrash,
-	ShieldQuestion,
-	Signal,
-	SignalLow,
-	SignalMedium,
-	WifiOff,
-	ZapOff,
-} from "lucide-react";
-import { useAudioStore } from "_store/audioStore";
-import { cn } from "helpers/cn";
-import { ConnectionQuality } from "livekit-client";
-import { ROOMS } from "_data/livekitRooms";
-
-export const Audio = () => {
-	const connection = useDispatchConnectionStore();
-	const {
-		isTalking,
-		toggleTalking,
-		connect,
-		state,
-		connectionQuality,
-		disconnect,
-		remoteParticipants,
-		room,
-		message,
-	} = useAudioStore();
-	const [selectedRoom, setSelectedRoom] = useState<string>("LST_01");
-
-	useEffect(() => {
-		const joinRoom = async () => {
-			if (connection.status != "connected") return;
-			if (state === "connected") return;
-			connect(selectedRoom);
-		};
-
-		joinRoom();
-
-		return () => {
-			disconnect();
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [connection.status]);
-
-	return (
-		<>
-			<div className="bg-base-200 rounded-box flex items-center gap-2 p-1">
-				{state === "error" && (
-					<div className="h-4 flex items-center">{message}</div>
-				)}
-				<button
-					onClick={() => {
-						if (state === "connected") toggleTalking();
-						if (state === "error" || state === "disconnected")
-							connect(selectedRoom);
-					}}
-					className={cn(
-						"btn btn-sm btn-soft border-none hover:bg-inherit",
-						!isTalking && "bg-transparent hover:bg-sky-400/20",
-						isTalking && "bg-red-500 hover:bg-red-600",
-						state === "disconnected" && "bg-red-500 hover:bg-red-500",
-						state === "error" && "bg-red-500 hover:bg-red-500",
-						state === "connecting" &&
-							"bg-yellow-500 hover:bg-yellow-500 cursor-default",
-					)}
-				>
-					{state === "connected" && <Mic className="w-5 h-5" />}
-					{state === "disconnected" && <WifiOff className="w-5 h-5" />}
-					{state === "connecting" && <PlugZap className="w-5 h-5" />}
-					{state === "error" && <ServerCrash className="w-5 h-5" />}
-				</button>
-
-				{state === "connected" && (
-					<details className="dropdown relative z-[1050]">
-						<summary className="dropdown btn btn-ghost flex items-center gap-1">
-							{connectionQuality === ConnectionQuality.Excellent && (
-								<Signal className="w-5 h-5" />
-							)}
-							{connectionQuality === ConnectionQuality.Good && (
-								<SignalMedium className="w-5 h-5" />
-							)}
-							{connectionQuality === ConnectionQuality.Poor && (
-								<SignalLow className="w-5 h-5" />
-							)}
-							{connectionQuality === ConnectionQuality.Lost && (
-								<ZapOff className="w-5 h-5" />
-							)}
-							{connectionQuality === ConnectionQuality.Unknown && (
-								<ShieldQuestion className="w-5 h-5" />
-							)}
-							<div className="badge badge-sm badge-soft badge-success">
-								{remoteParticipants}
-							</div>
-						</summary>
-						<ul className="menu dropdown-content bg-base-200 rounded-box z-[1050] w-52 p-2 shadow-sm">
-							{ROOMS.map((r) => (
-								<li key={r}>
-									<button
-										className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
-										onClick={() => {
-											if (selectedRoom === r) return;
-											setSelectedRoom(r);
-											connect(r);
-										}}
-									>
-										{room?.name === r && (
-											<Disc
-												className="text-success text-sm absolute left-2"
-												width={15}
-											/>
-										)}
-										<span className="flex-1 text-center">{r}</span>
-									</button>
-								</li>
-							))}
-							<li>
-								<button
-									className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
-									onClick={() => {
-										disconnect();
-									}}
-								>
-									<WifiOff
-										className="text-error text-sm absolute left-2"
-										width={15}
-									/>
-									<span className="flex-1 text-center">Disconnect</span>
-								</button>
-							</li>
-						</ul>
-					</details>
-				)}
-			</div>
-		</>
-	);
-};

apps/dispatch/app/dispatch/_components/navbar/_components/Connection.tsx

@@ -93,7 +93,9 @@ export const ConnectionBtn = () => {
 									}}
 									className="btn btn-soft btn-info"
 								>
-									Verbinden
+									{connection.status == "disconnected"
+										? "Verbinden"
+										: connection.status}
 								</button>
 							)}
 						</form>