Draggable waypoints with timing info.

https://github.com/dcs-liberation/dcs_liberation/issues/2039

client/src/api/waypoint.ts

@@ -8,4 +8,5 @@ export interface Waypoint {
   is_movable: boolean;
   should_mark: boolean;
   include_in_path: boolean;
+  timing: string;
 }

client/src/components/flightplan/FlightPlan.tsx

@@ -1,5 +1,6 @@
 import { Flight } from "../../api/flight";
 import WaypointMarker from "../waypointmarker";
+import { ReactElement } from "react";
 import { Polyline } from "react-leaflet";
 
 const BLUE_PATH = "#0084ff";
@@ -39,25 +40,23 @@ function FlightPlanPath(props: FlightPlanProps) {
 }
 
 const WaypointMarkers = (props: FlightPlanProps) => {
-  if (!props.selected || props.flight.waypoints == null) {
+  if (props.selected && props.flight.waypoints == null) {
     return <></>;
   }
 
-  return (
-    <>
-      {props.flight.waypoints
-        .filter((p) => p.should_mark)
-        .map((p, idx) => {
-          return (
-            <WaypointMarker
-              key={idx}
-              number={idx}
-              waypoint={p}
-            ></WaypointMarker>
-          );
-        })}
-    </>
-  );
+  var markers: ReactElement[] = [];
+  props.flight.waypoints?.forEach((p, idx) => {
+    markers.push(
+      <WaypointMarker
+        key={idx}
+        number={idx}
+        waypoint={p}
+        flight={props.flight}
+      />
+    );
+  });
+
+  return <>{markers}</>;
 };
 
 export default function FlightPlan(props: FlightPlanProps) {

client/src/components/waypointmarker/WaypointMarker.tsx

@@ -1,9 +1,11 @@
+import backend from "../../api/backend";
+import { Flight } from "../../api/flight";
 import { Waypoint } from "../../api/waypoint";
 import { Icon } from "leaflet";
 import { Marker as LMarker } from "leaflet";
 import icon from "leaflet/dist/images/marker-icon.png";
 import iconShadow from "leaflet/dist/images/marker-shadow.png";
-import { MutableRefObject, useCallback, useRef } from "react";
+import { MutableRefObject, useCallback, useEffect, useRef } from "react";
 import { Marker, Tooltip, useMap, useMapEvent } from "react-leaflet";
 
 const WAYPOINT_ICON = new Icon({
@@ -15,6 +17,7 @@ const WAYPOINT_ICON = new Icon({
 interface WaypointMarkerProps {
   number: number;
   waypoint: Waypoint;
+  flight: Flight;
 }
 
 const WaypointMarker = (props: WaypointMarkerProps) => {
@@ -50,24 +53,42 @@ const WaypointMarker = (props: WaypointMarkerProps) => {
   }, [map]);
   useMapEvent("zoomend", rebindTooltip);
 
+  useEffect(() => {
+    const waypoint = props.waypoint;
+    marker.current?.setTooltipContent(
+      `${props.number} ${waypoint.name}<br />` +
+        `${waypoint.altitude_ft} ft ${waypoint.altitude_reference}<br />` +
+        waypoint.timing
+    );
+  });
+
   const waypoint = props.waypoint;
   return (
     <Marker
       position={waypoint.position}
       icon={WAYPOINT_ICON}
+      draggable
+      eventHandlers={{
+        dragstart: (e) => {
+          const m: LMarker = e.target;
+          m.setTooltipContent("Waiting to recompute TOT...");
+        },
+        dragend: (e) => {
+          const m: LMarker = e.target;
+          const destination = m.getLatLng();
+          backend.post(
+            `/waypoints/${props.flight.id}/${props.number}/position`,
+            destination
+          );
+        },
+      }}
       ref={(ref) => {
         if (ref != null) {
           marker.current = ref;
         }
       }}
     >
-      <Tooltip position={waypoint.position}>
-        {`${props.number} ${waypoint.name}`}
-        <br />
-        {`${waypoint.altitude_ft} ft ${waypoint.altitude_reference}`}
-        <br />
-        TODO: Timing info
-      </Tooltip>
+      <Tooltip position={waypoint.position} />
     </Marker>
   );
 };