Add websocket handling for selected flights.

client/src/components/flightplan/FlightPlan.tsx

@@ -3,14 +3,25 @@ import { Polyline } from "react-leaflet";
 
 const BLUE_PATH = "#0084ff";
 const RED_PATH = "#c85050";
+const SELECTED_PATH = "#ffff00";
 
 interface FlightPlanProps {
   flight: Flight;
   selected: boolean;
 }
 
+const pathColor = (props: FlightPlanProps) => {
+  if (props.selected) {
+    return SELECTED_PATH;
+  } else if (props.flight.blue) {
+    return BLUE_PATH;
+  } else {
+    return RED_PATH;
+  }
+};
+
 function FlightPlanPath(props: FlightPlanProps) {
-  const color = props.flight.blue ? BLUE_PATH : RED_PATH;
+  const color = pathColor(props);
   const waypoints = props.flight.waypoints;
   if (waypoints == null) {
     return <></>;

client/src/components/flightplanslayer/FlightPlansLayer.tsx

@@ -1,3 +1,4 @@
+import { Flight } from "../../api/flight";
 import FlightPlan from "../flightplan";
 import { LayerGroup } from "react-leaflet";
 import { selectFlights } from "../../api/flightsSlice";
@@ -10,11 +11,29 @@ interface FlightPlansLayerProps {
 export default function FlightPlansLayer(props: FlightPlansLayerProps) {
   const atos = useAppSelector(selectFlights);
   const flights = props.blue ? atos.blue : atos.red;
+  const isNotSelected = (flight: Flight) => {
+    if (atos.selected == null) {
+      return true;
+    }
+    return atos.selected.id !== flight.id;
+  };
+
+  const selectedFlight = atos.selected ? (
+    <FlightPlan key={atos.selected.id} flight={atos.selected} selected={true} />
+  ) : (
+    <></>
+  );
+
   return (
     <LayerGroup>
-      {Object.values(flights).map((flight) => {
-        return <FlightPlan key={flight.id} flight={flight} selected={false} />;
-      })}
+      {Object.values(flights)
+        .filter(isNotSelected)
+        .map((flight) => {
+          return (
+            <FlightPlan key={flight.id} flight={flight} selected={false} />
+          );
+        })}
+      {selectedFlight}
     </LayerGroup>
   );
 }

client/src/components/socketprovider/socketprovider.tsx

@@ -0,0 +1,36 @@
+import { ReactChild, createContext, useEffect, useState } from "react";
+
+import { WEBSOCKET_URL } from "../../api/backend";
+
+const socket = new WebSocket(WEBSOCKET_URL);
+
+export const SocketContext = createContext(socket);
+
+interface SocketProviderProps {
+  children: ReactChild;
+}
+
+export const SocketProvider = (props: SocketProviderProps) => {
+  const [ws, setWs] = useState<WebSocket>(socket);
+  useEffect(() => {
+    const onClose = () => {
+      setWs(new WebSocket(WEBSOCKET_URL));
+    };
+
+    const onError = (error: Event) => {
+      console.log(`Websocket error: ${error}`);
+    };
+
+    ws.addEventListener("close", onClose);
+    ws.addEventListener("error", onError);
+
+    return () => {
+      ws.removeEventListener("close", onClose);
+      ws.removeEventListener("error", onError);
+    };
+  });
+
+  return (
+    <SocketContext.Provider value={ws}>{props.children}</SocketContext.Provider>
+  );
+};