Added KML Logic to Frontend

src/api/endpoints.ts

@@ -1,5 +1,7 @@
 import { Waypoint } from "../types/Waypoint";
 import api from "./api";
+import { AxiosResponse } from "axios";
+import { CoordinateOfInterest } from "../types/Coords.ts";
 
 // TODO: Implement new endpoint logic
 
@@ -22,3 +24,6 @@ export const getGCOM = async (): Promise<Waypoint[]> => {
 export const getRoute = async (): Promise<Waypoint[]> => {
     return (await api.get("/route")) as Waypoint[];
 };
+export const getCoordinatesOfInterest = async (): Promise<CoordinateOfInterest[]> => {
+    return (await api.get("/drone/get_coordinates")) as CoordinateOfInterest[];
+};

src/components/DroneStatus/MPSControlSection.tsx

@@ -1,15 +1,50 @@
 import { Box, Button, Modal, Paper, TextField, Typography } from "@mui/material";
 import { useState } from "react";
-import { armDrone, getRoute, takeoffDrone } from "../../api/endpoints.ts";
+import api from "../../api/api.ts";
+import { armDrone, getCoordinatesOfInterest, getRoute, takeoffDrone } from "../../api/endpoints.ts";
 import { manualUpdateMPSQueue } from "../../store/slices/dataSlice.ts";
-
+import { CoordinateOfInterest } from "../../types/Coords.ts";
+
 export default function MPSControlSection() {
     const [clientSideState, setClientSideState] = useState({
         armed: false,
         takeoffAltitude: 0,
     });
     const [modalState, setModalState] = useState(false);
 
+    function makeKMLFile(coordsOfInterest: Promise<CoordinateOfInterest[]>) {
+        coordsOfInterest.then((coords) => {
+            const kmlContent = `<?xml version="1.0" encoding="UTF-8"?>
+            <kml xmlns="http://www.opengis.net/kml/2.2">
+               <Document>
+                  <name>Coordinates of Interest</name>
+                  ${coords
+                      .map(
+                          (cord, index) => `
+                        <Placemark>
+                           <name>${cord.name || `Location ${index + 1}`}</name>
+                           <description>${cord.description || `Description for Location ${index + 1}`}</description>
+                           <Point>
+                              <coordinates>${cord.long},${cord.lat},0</coordinates>
+                           </Point>
+                        </Placemark>`,
+                      )
+                      .join("")}
+               </Document>
+            </kml>`;
+
+            const blob = new Blob([kmlContent], { type: "application/vnd.google-earth.kml+xml" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = "coordinates_of_interest.kml";
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        });
+    }
+
     return (
         <Box
             sx={{
@@ -76,7 +111,7 @@ export default function MPSControlSection() {
                     variant="contained"
                     color="error"
                     onClick={() => {
-                        takeoffDrone(clientSideState.takeoffAltitude);
+                        api.post("/drone/takeoff", { altitude: clientSideState.takeoffAltitude });
                     }}
                 >
                     Takeoff
@@ -116,6 +151,18 @@ export default function MPSControlSection() {
                     >
                         Fetch MPS Data
                     </Button>
+                    <Button
+                        sx={{
+                            flexGrow: 1,
+                        }}
+                        variant="outlined"
+                        color="info"
+                        onClick={() => {
+                            makeKMLFile(getCoordinatesOfInterest());
+                        }}
+                    >
+                        Generate KML File
+                    </Button>
                     {/* <Box
                         sx={{
                             display: "flex",

src/types/Coords.ts

@@ -7,3 +7,10 @@ export type StringCoords = {
     lat: string;
     long: string;
 };
+
+export type CoordinateOfInterest = {
+    lat: number;
+    long: number;
+    name: string;
+    description: string;
+};