Adding command structure to map component

usdot-jpo-ode · Aug 14, 2024 · 43d562f · 43d562f
1 parent 1ab3922
commit 43d562f
Show file tree

Hide file tree

Showing 6 changed files with 1,699 additions and 1,546 deletions.
diff --git a/gui/src/components/decoder/decoder-entry.tsx b/gui/src/components/decoder/decoder-entry.tsx
@@ -35,6 +35,7 @@ type DecoderEntryProps = {
   onSelected: (id: string) => void;
   onTextChanged: (id: string, messageText: string) => void;
   onDeleted: (id: string) => void;
+  centerMapOnLocation: (lat: number, long: number) => void;
 };
 
 export const DecoderEntry = (props: DecoderDataEntry & DecoderEntryProps) => {
@@ -103,7 +104,7 @@ export const DecoderEntry = (props: DecoderDataEntry & DecoderEntryProps) => {
 
   const downloadJsonFile = (contents: any, name: string) => {
     const element = document.createElement("a");
-    const file = new Blob([JSON.stringify(contents)], {
+    const file = new Blob([contents], {
       type: "text/plain",
     });
     element.href = URL.createObjectURL(file);
@@ -140,6 +141,21 @@ export const DecoderEntry = (props: DecoderDataEntry & DecoderEntryProps) => {
     }
   };
 
+  const zoomToObject = () => {
+    if (decodedResponse == undefined) return;
+    if (type == "MAP") {
+      const mapPayload = decodedResponse.processedMap;
+      const refPoint = mapPayload?.properties?.refPoint;
+      console.log("refPoint", refPoint);
+      if (refPoint) props.centerMapOnLocation(refPoint?.latitude, refPoint.longitude);
+    } else if (type == "BSM") {
+      const bsmPayload = decodedResponse.bsm;
+      const position = bsmPayload?.payload.data.coreData.position;
+      console.log("position", position);
+      if (position) props.centerMapOnLocation(position?.latitude, position.longitude);
+    }
+  };
+
   return (
     <TableRow>
       <TableCell style={{ backgroundColor: getCellColor(), border: "1px solid white" }}>
@@ -166,6 +182,11 @@ export const DecoderEntry = (props: DecoderDataEntry & DecoderEntryProps) => {
         <IconButton aria-label="download" onClick={handleDownloadClick} style={{ color: getIconColor() }}>
           <DownloadIcon />
         </IconButton>
+        {(type == "BSM" || type == "MAP") && (
+          <IconButton aria-label="map" onClick={zoomToObject} style={{ color: getIconColor() }}>
+            <MapRoundedIcon />
+          </IconButton>
+        )}
         {status === "IN_PROGRESS" && <CircularProgress />}
         <Box>
           <TextField

diff --git a/gui/src/components/decoder/decoder-tables.tsx b/gui/src/components/decoder/decoder-tables.tsx
@@ -26,6 +26,7 @@ type DecoderTableProps = {
   onTextChanged: (id: string, messageText: string, type: DECODER_MESSAGE_TYPE) => void;
   onItemDeleted: (id: string) => void;
   onFileUploaded: (contents: string[], type: DECODER_MESSAGE_TYPE) => void;
+  centerMapOnLocation: (lat: number, long: number) => void;
 };
 
 export const DecoderTables = (props: DecoderTableProps) => {
@@ -151,6 +152,7 @@ export const DecoderTables = (props: DecoderTableProps) => {
                         onSelected={onItemSelected}
                         onTextChanged={(id, text) => onTextChanged(id, text, "MAP")}
                         onDeleted={onItemDeleted}
+                        centerMapOnLocation={props.centerMapOnLocation}
                       />
                     );
                   })}
@@ -197,6 +199,7 @@ export const DecoderTables = (props: DecoderTableProps) => {
                         onSelected={onItemSelected}
                         onTextChanged={(id, text) => onTextChanged(id, text, "SPAT")}
                         onDeleted={onItemDeleted}
+                        centerMapOnLocation={props.centerMapOnLocation}
                       />
                     );
                   })}
@@ -248,6 +251,7 @@ export const DecoderTables = (props: DecoderTableProps) => {
                         onSelected={onItemSelected}
                         onTextChanged={(id, text) => onTextChanged(id, text, "BSM")}
                         onDeleted={onItemDeleted}
+                        centerMapOnLocation={props.centerMapOnLocation}
                       />
                     );
                   })}