saving connection log in DB, added Dispo stats

apps/dispatch/app/_store/connectionStore.ts

@@ -2,7 +2,8 @@ import { create } from "zustand";
 import { socket } from "../dispatch/socket";
 
 interface ConnectionStore {
-	isConnected: boolean;
+	status: "connected" | "disconnected" | "connecting" | "error";
+	message: string;
 	selectedZone: string;
 	connect: (
 		uid: string,
@@ -13,10 +14,12 @@ interface ConnectionStore {
 }
 
 export const useDispatchConnectionStore = create<ConnectionStore>((set) => ({
-	isConnected: false,
+	status: "disconnected",
+	message: "",
 	selectedZone: "LST_01",
 	connect: async (uid, selectedZone, logoffTime) =>
 		new Promise((resolve) => {
+			set({ status: "connecting", message: "" });
 			socket.auth = { uid };
 			set({ selectedZone });
 			socket.connect();
@@ -34,8 +37,24 @@ export const useDispatchConnectionStore = create<ConnectionStore>((set) => ({
 }));
 
 socket.on("connect", () => {
-	useDispatchConnectionStore.setState({ isConnected: true });
+	useDispatchConnectionStore.setState({ status: "connected", message: "" });
 });
+
+socket.on("connect_error", (err) => {
+	useDispatchConnectionStore.setState({
+		status: "error",
+		message: err.message,
+	});
+});
+
 socket.on("disconnect", () => {
-	useDispatchConnectionStore.setState({ isConnected: false });
+	useDispatchConnectionStore.setState({ status: "disconnected", message: "" });
+});
+
+socket.on("force-disconnect", (reason: string) => {
+	console.log("force-disconnect", reason);
+	useDispatchConnectionStore.setState({
+		status: "disconnected",
+		message: reason,
+	});
 });

apps/dispatch/app/dispatch/_components/left/Chat.tsx

@@ -39,10 +39,10 @@ export const Chat = () => {
 			const data = await getConenctedUsers();
 			if (data) {
 				const filteredConnectedUser = data.filter((user) => {
-					/* return (
+					return (
 						user.userId !== session.data?.user.id &&
 						!Object.keys(chats).includes(user.userId)
-					); */
+					);
 
 					return true;
 				});
@@ -65,8 +65,6 @@ export const Chat = () => {
 		};
 	}, [addTabValue, chats, session.data?.user.id]);
 
-	console.log("connectedUser", connectedUser);
-
 	return (
 		<div className={cn("dropdown dropdown-right", chatOpen && "dropdown-open")}>
 			<div className="indicator">

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

@@ -231,8 +231,6 @@ export const MarkerCluster = () => {
 				const avgLng =
 					allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
 
-				console.log(allPos, { avgLat, avgLng });
-
 				return {
 					...c,
 					lat: avgLat,

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

@@ -36,7 +36,7 @@ export const Audio = () => {
 
 	useEffect(() => {
 		const joinRoom = async () => {
-			if (!connection.isConnected) return;
+			if (connection.status != "connected") return;
 			if (state === "connected") return;
 			connect(selectedRoom);
 		};
@@ -46,7 +46,8 @@ export const Audio = () => {
 		return () => {
 			disconnect();
 		};
-	}, [connection.isConnected]);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [connection.status]);
 
 	return (
 		<>

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

@@ -14,15 +14,21 @@ export const ConnectionBtn = () => {
 	const uid = session.data?.user?.id;
 	if (!uid) return null;
 	return (
-		<>
-			{!connection.isConnected ? (
+		<div className="rounded-box bg-base-200 flex justify-center items-center gap-2 p-1">
+			{connection.message.length > 0 && (
+				<span className="mx-2 text-error">{connection.message}</span>
+			)}
+
+			{connection.status === "disconnected" && (
 				<button
-					className="btn btn-soft btn-info"
+					className="btn btn-sm btn-soft btn-info "
 					onClick={() => modalRef.current?.showModal()}
 				>
 					Verbinden
 				</button>
-			) : (
+			)}
+
+			{connection.status == "connected" && (
 				<button
 					className="btn btn-soft btn-success"
 					onClick={() => modalRef.current?.showModal()}
@@ -33,7 +39,7 @@ export const ConnectionBtn = () => {
 
 			<dialog ref={modalRef} className="modal">
 				<div className="modal-box flex flex-col items-center justify-center">
-					{connection.isConnected ? (
+					{connection.status == "connected" ? (
 						<h3 className="text-lg font-bold mb-5">
 							Verbunden als{" "}
 							<span className="text-info">
@@ -58,7 +64,7 @@ export const ConnectionBtn = () => {
 								className="input w-full"
 							/>
 						</label>
-						{!connection.isConnected && (
+						{connection.status == "disconnected" && (
 							<p className="fieldset-label">
 								Du kannst diese Zeit später noch anpassen.
 							</p>
@@ -67,7 +73,7 @@ export const ConnectionBtn = () => {
 					<div className="modal-action flex justify-between w-full">
 						<form method="dialog" className="w-full flex justify-between">
 							<button className="btn btn-soft">Abbrechen</button>
-							{connection.isConnected ? (
+							{connection.status == "connected" ? (
 								<button
 									className="btn btn-soft btn-error"
 									type="submit"
@@ -94,7 +100,7 @@ export const ConnectionBtn = () => {
 					</div>
 				</div>
 			</dialog>
-		</>
+		</div>
 	);
 };
 

apps/dispatch/app/dispatch/_components/pannel/MissionForm.tsx

@@ -97,6 +97,7 @@ export const MissionForm = () => {
 		});
 	}, []);
 
+	console.log(form.formState.errors);
 	return (
 		<form className="space-y-4">
 			{/* Koorinaten Section */}
@@ -159,14 +160,14 @@ export const MissionForm = () => {
 			<div className="form-control">
 				<h2 className="text-lg font-bold mb-2">Rettungsmittel</h2>
 				<Select
-					name="Rettungsmittel"
+					name="missionStationIds"
 					label={""}
 					placeholder="Wähle ein oder mehrere Rettungsmittel aus"
 					isMulti
 					form={form}
 					options={stations.map((s) => ({
 						label: s.bosCallsign,
-						value: s.id,
+						value: s.id.toString(),
 					}))}
 				/>
 			</div>