Crud waypoints

src/api/endpoints.ts

@@ -1,7 +1,7 @@
 import { Waypoint } from "../types/Waypoint";
 import api from "./api";
-
-// TODO: Implement new endpoint logic
+import { AxiosResponse } from "axios";
+import { deserializeWaypoints, serializeWaypointForGCOM } from "./formatters";
 
 export const armDrone = async (arm: boolean) => {
     return await api.post("/drone/arm", { arm });
@@ -11,14 +11,34 @@ export const takeoffDrone = async (altitude?: number) => {
     return await api.post("/drone/takeoff", { altitude });
 };
 
-export const postWaypointsToDrone = async (waypoints: Waypoint[]) => {
-    return await api.post("/drone/queue", waypoints);
-};
-
 export const getGCOM = async (): Promise<Waypoint[]> => {
     return (await api.get("/drone/queue")) as Waypoint[];
 };
 
 export const getRoute = async (): Promise<Waypoint[]> => {
     return (await api.get("/route")) as Waypoint[];
 };
+
+export const getWaypointsQuery = async (): Promise<Waypoint[]> => {
+    const response = await api.get("/waypoint");
+    const waypoints = deserializeWaypoints(response.data);
+    return waypoints;
+};
+
+export const createWaypointQuery = async (waypoint: Waypoint): Promise<AxiosResponse> => {
+    const serializedWaypoint = serializeWaypointForGCOM(waypoint);
+    return api.post("/waypoint/", serializedWaypoint);
+};
+
+export const updateWaypointQuery = async (waypoint: Waypoint): Promise<AxiosResponse> => {
+    const serializedWaypoint = serializeWaypointForGCOM(waypoint);
+    return api.patch(`/waypoint/${waypoint.id}/`, serializedWaypoint);
+};
+
+export const deleteWaypointQuery = async (id: string): Promise<AxiosResponse> => {
+    return api.delete(`/waypoint/${id}/`);
+};
+
+export const reorderWaypointsQuery = async (waypointIds: string[]): Promise<AxiosResponse> => {
+    return api.post("/waypoint/reorder", waypointIds);
+};

src/api/formatters.ts

@@ -0,0 +1,39 @@
+import { Waypoint } from "../types/Waypoint";
+
+export const serializeWaypointForGCOM = (waypoint: Waypoint) => {
+    return {
+        name: waypoint.name,
+        latitude: waypoint.lat,
+        longitude: waypoint.long,
+        altitude: waypoint.alt,
+        radius: waypoint.radius,
+        order: waypoint.order,
+        route: 1,
+    };
+};
+
+export const deserializeWaypoints = (
+    waypoints: Array<{
+        id: string;
+        name: string;
+        latitude: number;
+        longitude: number;
+        altitude: number;
+        radius: number;
+        pass_radius: number;
+        pass_option: number;
+        order: number;
+        route: number;
+    }>,
+): Waypoint[] => {
+    return waypoints
+        .sort((a, b) => a.order - b.order)
+        .map((wp) => ({
+            id: wp.id,
+            name: wp.name,
+            lat: wp.latitude,
+            long: wp.longitude,
+            alt: wp.altitude,
+            radius: wp.radius,
+        }));
+};

src/components/Map/WaypointCreationMap.tsx

@@ -1,19 +1,15 @@
 // Honestly its just easier to have this in a separate file rather than having it be in with MapView.tsx
 
-import { Place } from "@mui/icons-material";
+import { AddHomeWork, Place } from "@mui/icons-material";
 import { Fragment, useState } from "react";
 import { Layer, LayerProps, Map, MapLayerMouseEvent, Marker, Source } from "react-map-gl/maplibre";
-import {
-    addToQueuedWaypoints,
-    editWaypointAtIndex,
-    selectMapCenterCoords,
-    selectQueuedWaypoints,
-} from "../../store/slices/appSlice";
+import { selectMapCenterCoords, selectWaypoints } from "../../store/slices/appSlice";
 import { useAppDispatch, useAppSelector } from "../../store/store";
 import WaypointItem from "../WaypointItem";
 import { roundTo } from "../../utils/routeTo";
 import { Box } from "@mui/material";
-import { WaypointEditState } from "../../types/Waypoint";
+import { Waypoint, WaypointEditState } from "../../types/Waypoint";
+import { useWaypoints } from "../../utils/useWaypoints";
 
 type DraggedMarker = {
     long: number;
@@ -23,20 +19,27 @@ type DraggedMarker = {
 
 type CreationMapProps = {
     handleDelete: (index: number) => void;
-    handleEdit: (index: number) => void;
-    editState: WaypointEditState;
+    startEditing: (index: number) => void;
+    submitWaypoint: (wp: Waypoint) => void;
+    setEditingCoords: (coords: { lat: number; long: number }) => void;
+    editingIndex: number;
 };
 
-export default function WaypointCreationMap({ handleDelete, handleEdit, editState }: CreationMapProps) {
+export default function WaypointCreationMap({
+    handleDelete,
+    startEditing,
+    editingIndex,
+    setEditingCoords,
+    submitWaypoint,
+}: CreationMapProps) {
     const coords = useAppSelector(selectMapCenterCoords);
-    const clientWPQueue = useAppSelector(selectQueuedWaypoints);
-    const dispatch = useAppDispatch();
-    const [selectedWaypoints, setSelectedWaypoints] = useState<boolean[]>(clientWPQueue.map(() => false));
+    const { waypoints } = useWaypoints();
+    const [selectedWaypoints, setSelectedWaypoints] = useState<boolean[]>(waypoints?.map(() => false) || []);
     const [draggedMarkerData, setDraggedMarkerData] = useState<DraggedMarker | null>(null);
 
     const routeData: GeoJSON.GeoJSON = {
         type: "LineString",
-        coordinates: clientWPQueue.map((waypoint) => [waypoint.long, waypoint.lat]),
+        coordinates: waypoints?.map((waypoint) => [waypoint.long, waypoint.lat]) || [],
     };
     const routeStyle: LayerProps = {
         id: "mps-route",
@@ -49,13 +52,15 @@ export default function WaypointCreationMap({ handleDelete, handleEdit, editStat
 
     const createNewWaypoint = (event: MapLayerMouseEvent) => {
         if (event.originalEvent.detail !== 2) return;
-        dispatch(
-            addToQueuedWaypoints({
-                id: "-1",
-                lat: roundTo(event.lngLat.lat, 7),
-                long: roundTo(event.lngLat.lng, 7),
-            }),
-        );
+        const wp = {
+            lat: roundTo(event.lngLat.lat, 7),
+            long: roundTo(event.lngLat.lng, 7),
+            alt: 0,
+            radius: 123123,
+            name: "New Waypoint",
+            id: "-1",
+        };
+        submitWaypoint(wp);
         setSelectedWaypoints((prev) => [...prev, false]);
     };
 
@@ -77,15 +82,15 @@ export default function WaypointCreationMap({ handleDelete, handleEdit, editStat
             mapStyle={
                 window.navigator.onLine
                     ? "https://api.maptiler.com/maps/basic-v2/style.json?key=ioE7W2lCif3DO9oj1YJh"
-                    : "./src/mapStyles/osmbright.json"
+                    : "http://localhost:8000/api/map-tiles/osmbright"
             }
             onClick={createNewWaypoint}
             doubleClickZoom={false}
             style={{
                 minHeight: "500px",
             }}
         >
-            {clientWPQueue.map((waypoint, i) => {
+            {waypoints?.map((waypoint, i) => {
                 return (
                     <Fragment key={i}>
                         <Marker
@@ -94,24 +99,27 @@ export default function WaypointCreationMap({ handleDelete, handleEdit, editStat
                                 e.originalEvent.stopPropagation();
                                 handleSelectWaypoint(i);
                             }}
+                            onDragStart={(e) => {
+                                startEditing(i);
+                            }}
                             onDrag={(e) => {
+                                setEditingCoords({
+                                    lat: e.lngLat.lat,
+                                    long: e.lngLat.lng,
+                                });
                                 setDraggedMarkerData({
                                     long: e.lngLat.lng,
                                     lat: e.lngLat.lat,
                                     index: i,
                                 });
                             }}
                             onDragEnd={() => {
-                                dispatch(
-                                    editWaypointAtIndex({
-                                        index: i,
-                                        waypoint: {
-                                            ...waypoint,
-                                            lat: roundTo(draggedMarkerData!.lat, 7),
-                                            long: roundTo(draggedMarkerData!.long, 7),
-                                        },
-                                    }),
-                                );
+                                const wp = {
+                                    ...waypoint,
+                                    lat: roundTo(draggedMarkerData!.lat, 7),
+                                    long: roundTo(draggedMarkerData!.long, 7),
+                                };
+                                submitWaypoint(wp);
                                 setDraggedMarkerData(null);
                             }}
                             latitude={
@@ -172,7 +180,7 @@ export default function WaypointCreationMap({ handleDelete, handleEdit, editStat
                                         width: "220px",
                                         top: "10px",
                                         border: "4px solid",
-                                        borderColor: i === editState.index ? "primary.main" : "transparent",
+                                        borderColor: i === editingIndex ? "primary.main" : "transparent",
                                     }}
                                     waypoint={waypoint}
                                     handleDelete={() => {
@@ -182,7 +190,6 @@ export default function WaypointCreationMap({ handleDelete, handleEdit, editStat
                                             return prev;
                                         });
                                     }}
-                                    handleEdit={() => handleEdit(i)}
                                 />
                             </Marker>
                         )}

src/components/WaypointItem.tsx

@@ -64,71 +64,6 @@ export default function WaypointItem({ waypoint, sx, handleDelete, handleEdit }:
                     {waypoint.alt}
                 </Typography>
             </Typography>
-            {waypoint.command && (
-                <Typography variant="body1">
-                    Command{" "}
-                    <Typography
-                        component="span"
-                        sx={{
-                            color: (theme) => theme.palette.primary.main,
-                        }}
-                    >
-                        {waypoint.command}
-                    </Typography>
-                </Typography>
-            )}
-            {waypoint.param1 && (
-                <Typography variant="body1">
-                    Param1{" "}
-                    <Typography
-                        component="span"
-                        sx={{
-                            color: (theme) => theme.palette.primary.main,
-                        }}
-                    >
-                        {waypoint.param1}
-                    </Typography>
-                </Typography>
-            )}
-            {waypoint.param2 && (
-                <Typography variant="body1">
-                    Param2{" "}
-                    <Typography
-                        component="span"
-                        sx={{
-                            color: (theme) => theme.palette.primary.main,
-                        }}
-                    >
-                        {waypoint.param2}
-                    </Typography>
-                </Typography>
-            )}
-            {waypoint.param3 && (
-                <Typography variant="body1">
-                    Param3{" "}
-                    <Typography
-                        component="span"
-                        sx={{
-                            color: (theme) => theme.palette.primary.main,
-                        }}
-                    >
-                        {waypoint.param3}
-                    </Typography>
-                </Typography>
-            )}
-            {waypoint.param4 && (
-                <Typography variant="body1">
-                    Param4{" "}
-                    <Typography
-                        component="span"
-                        sx={{
-                            color: (theme) => theme.palette.primary.main,
-                        }}
-                    >
-                        {waypoint.param4}
-                    </Typography>
-                </Typography>
-            )}
             {waypoint.remarks && <Typography color="grey">Remarks -- {waypoint.remarks}</Typography>}
         </Paper>
     );