Feat/135 targetrename

README.md

@@ -65,6 +65,12 @@ Then, to make sure you have the protobufs git submodule loaded, run the followin
 make install-protos
 ```
 
+Lastly, we want to make sure we pull our protos submodule.
+```sh
+git submodule update --init --recursive // First time only
+git submodule update --recursive --remote
+```
+
 This should be all of the first time setup you need. 
 
 ## Build

houston/src/pages/Input.tsx

@@ -5,7 +5,7 @@ import {useMapEvents, Polygon, Polyline} from "react-leaflet"
 import './Input.css';
 import TuasMap from '../components/TuasMap';
 import { LatLng } from 'leaflet';
-import { Bottle, BottleDropIndex, GPSCoord, Mission, ODLCColor, ODLCShape } from '../protos/obc.pb';
+import { Bottle, BottleDropIndex, GPSCoord, Mission, ODLCObjects} from '../protos/obc.pb';
 import MyModal from '../components/MyModal';
 import UpdateMapCenter from '../components/UpdateMapCenter';
 import { useMyModal } from '../components/UseMyModal';
@@ -278,93 +278,38 @@ function BottleInputForm(
     {bottleAssignments, setBottleAssignments}:
     {bottleAssignments: Bottle[], setBottleAssignments: React.Dispatch<SetStateAction<Bottle[]>>}
 ) {
-    /**
-     * @returns Every possible ODLC Color represented as an <option> HTML element, to be 
-     * placed inside of a <select> element.
-     */
-    function mapColorsToOptions() {
-        return (Object.keys(ODLCColor) as unknown as Array<ODLCColor>)
-            .filter((color) => {
-                return isNaN(Number(color));
-            })
-            .map((color) => {
-                return (<>
-                    <option key={color} value={color}>{color}</option>
-                </>);
-            });
-    }
-    /**
-     * @returns Every possible ODLC Shape represented as an <option> HTML element, to be 
-     * placed inside of a <select> element.
-     */
-    function mapShapesToOptions() {
-        return (Object.keys(ODLCShape) as unknown as Array<ODLCShape>)
-            .filter((shape) => {
-                return isNaN(Number(shape));
-            })
-            .map((shape) => {
-                return (<>
-                    <option key={shape} value={shape}>{shape}</option>
-                </>);
-            });
-    }
+
+/**
+ * Maps the keys of the `ODLCObjects` object to an array of JSX `<option>` elements.
+ * Filters out numeric keys before mapping.
+ * @returns An array of JSX `<option>` elements.
+ */
+function mapObjectsToOptions() {
+    return (Object.keys(ODLCObjects) as unknown as Array<ODLCObjects>)
+        .filter((object) => {
+            return isNaN(Number(object)); // Filters out numeric keys
+        })
+        .map((object) => {
+            return (
+                <>
+                    <option key={object} value={object}>{object}</option>
+                </>
+            );
+        });
+}
 
     const bottleInput = (bottle: Bottle) => {
         return (
             <>
                 <fieldset key={bottle.Index}>
                     <legend>Bottle {bottle.Index.toString()}</legend>
                     <label>
-                       Mannequin 
-                        <input
-                            type="checkbox"
-                            defaultChecked={bottle.IsMannikin}
-                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                                bottle.IsMannikin = e.currentTarget.checked;
-                                // force state change so inputs below get rerendered as disabled
-                                setBottleAssignments(bottleAssignments.map(e => e));    
-                            }}
-                            />
-                    </label>
-                    <label>
-                        Alphanumeric: 
-                        <input 
-                            maxLength={1} 
-                            defaultValue={bottle.Alphanumeric}
-                            disabled={bottle.IsMannikin}
-                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                                bottle.Alphanumeric = e.currentTarget.value;
-                            }}
-                            />
-                    </label>
-                    <label>
-                        Alphanumeric Color:
-                        <select onChange={(e: ChangeEvent<HTMLSelectElement>) => {
-                            bottle.AlphanumericColor = e.currentTarget.value as unknown as ODLCColor;
-                        }}
-                            disabled={bottle.IsMannikin}
-                            >
-                            {mapColorsToOptions()}
-                        </select>
-                    </label>
-                    <label>
-                        Shape: 
+                        Object: 
                         <select onChange={(e: ChangeEvent<HTMLSelectElement>) => {
-                            bottle.Shape = e.currentTarget.value as unknown as ODLCShape;
-                        }} 
-                            disabled={bottle.IsMannikin}
-                            >
-                            {mapShapesToOptions()}
-                        </select>
-                    </label>
-                    <label>
-                        Shape Color: 
-                        <select onChange={(e: ChangeEvent<HTMLSelectElement>) => {
-                            bottle.ShapeColor = e.currentTarget.value as unknown as ODLCColor;
+                            bottle.Object = e.currentTarget.value as unknown as ODLCObjects;
                         }}
-                            disabled={bottle.IsMannikin}
                             >
-                            {mapColorsToOptions()}
+                            {mapObjectsToOptions()}
                         </select>
                     </label>
                 </fieldset>
@@ -376,12 +321,7 @@ function BottleInputForm(
         const bottles = [];
         for (let i = BottleDropIndex.A; i <= BottleDropIndex.E; i++) {
             const bottle = {
-                Alphanumeric: "",
-                AlphanumericColor: ODLCColor.UnspecifiedColor,
-                Shape: ODLCShape.UnspecifiedShape,
-                ShapeColor: ODLCColor.UnspecifiedColor,
                 Index: i,
-                IsMannikin: false
             } as Bottle;
             bottles.push(bottle);
         }
@@ -777,4 +717,5 @@ function Input() {
     );
 }
 
-export default Input;
+export default Input;
+

houston/src/pages/Report.tsx

@@ -6,7 +6,7 @@ import L from 'leaflet';
 import Button from '@mui/material-next/Button';
 import { red, blue, green, yellow, purple, grey } from '@mui/material/colors';
 import { post_targets, pull_targets } from "../utilities/pull_targets.ts";
-import { MatchedTarget, IdentifiedTarget, Bottle, ODLCColor, ODLCShape, GPSCoord, oDLCShapeToJSON, oDLCColorToJSON, BottleDropIndex } from '../protos/obc.pb';
+import { MatchedTarget, IdentifiedTarget, Bottle, GPSCoord, oDLCObjectsToJSON, BottleDropIndex, ODLCObjects } from '../protos/obc.pb';
 
 type UpdateItemFunction = () => void;
 
@@ -28,7 +28,7 @@ const button_colors = [red[300], blue[300], green[500], yellow[700], purple[300]
  * @param props props
  * @param props.item image to be displayed
  * @param props.matchedItems array of items that we are comparing against
- * @param props.updateMatched function to update matched items
+ * param props.updateMatched function to update matched items
  * @returns image container
  */
 function Image({item, matchedItems}: ImageProps) {
@@ -43,7 +43,7 @@ function Image({item, matchedItems}: ImageProps) {
         }
 
         // not using protobuf cause that shit is NOT working...
-        let json = {} as any;
+        const json: { [key: string]: typeof item.id } = {};
         json[`${bottleIndex}`] = item.id;
 
         const res = await post_targets(json);
@@ -65,9 +65,7 @@ function Image({item, matchedItems}: ImageProps) {
         <div className="image-container" style={backgroundColor}>
             <img src={`data:image/png;base64,${item.Picture}`} alt="target" className="image" />
             <p className="image-data-lat-long">[{item.coordinate?.Latitude}, {item.coordinate?.Longitude}]</p>
-            {item.Alphanumeric !== "null" ?<p className="image-data"><b>Bottle Letter:</b> {item.Alphanumeric}</p> : null}
-            <p className="image-data"><b>Alphanumeric:</b> {oDLCColorToJSON(item.AlphanumericColor)} {item.Alphanumeric}</p>
-            <p className="image-data"><b>Shape:</b> {oDLCColorToJSON(item.ShapeColor)} {oDLCShapeToJSON(item.Shape)}</p>
+            <p className="image-data"><b>Object:</b> {oDLCObjectsToJSON(item.Object)}</p>
             <Button 
                 className='button' 
                 size="small" 
@@ -82,9 +80,7 @@ function Image({item, matchedItems}: ImageProps) {
         <div className="image-container">
             <img src={`data:image/png;base64,${item.Picture}`} alt="target" className="image" />
             <p className="image-data-lat-long">[{item.coordinate?.Latitude}, {item.coordinate?.Longitude}]</p>
-            {item.Alphanumeric !== "null" ?<p className="image-data"><b>Bottle Letter:</b> {item.Alphanumeric}</p> : null}
-            <p className="image-data"><b>Alphanumeric:</b> {oDLCColorToJSON(item.AlphanumericColor)} {item.Alphanumeric}</p>
-            <p className="image-data"><b>Shape:</b> {oDLCColorToJSON(item.ShapeColor)} {oDLCShapeToJSON(item.Shape)}</p>
+            <p className="image-data"><b>Objects:</b> {oDLCObjectsToJSON(item.Object)} </p>
             <Button 
                 className='button' 
                 size="small" 
@@ -112,9 +108,7 @@ function BottleImage({item, matchedItems} : BottleProps) {
         <div className="image-container" style={backgroundColor}>
             <p className="image-data"><b>Bottle Letter:</b> {item.Index}</p>
             {/* not using function to parse item.Index cause that is being passed down as a string not the bespoke enum */}
-            <p className="image-data"><b>Alphanumeric:</b> {oDLCColorToJSON(item.AlphanumericColor)} {item.Alphanumeric}</p>
-            <p className="image-data"><b>Shape:</b> {oDLCColorToJSON(item.ShapeColor)} {oDLCShapeToJSON(item.Shape)}</p>
-            <p className="image-data"><b>Is Mannikin:</b> {item.IsMannikin ? "Yes" : "No"}</p>
+            <p className="image-data"><b>Object:</b> {oDLCObjectsToJSON(item.Object)} </p>
             <p className="image-data"><b>Target ID:</b> {matchedItems[matchIndex].Target?.id}</p>
         </div>
     )
@@ -129,21 +123,13 @@ const dummyItem : IdentifiedTarget = {
         Longitude: 103.8894,
         Altitude:  0,
     }),
-    AlphanumericColor: ODLCColor.Blue,
-    Alphanumeric:      "A",
-    Shape:             ODLCShape.Circle,
-    ShapeColor:        ODLCColor.Red,
-    IsMannikin:        false,
+    Object: ODLCObjects.Mattress,
 };
 
 const dummyItem1: MatchedTarget = {
     Bottle: Bottle.fromJSON({
-        Alphanumeric: "A",
-        AlphanumericColor: ODLCColor.Blue,
-        Shape: ODLCShape.Circle,
-        ShapeColor: ODLCColor.Red,
         Index: BottleDropIndex.A,
-        IsMannikin: false,
+        Object: ODLCObjects.Airplane,
     }),
     Target: dummyItem,
 };
@@ -241,12 +227,12 @@ function Report() {
             <TuasMap className={'report-page-map'} lat={lat} lng={lng}>
                 {matchedArray.map((marker) => (
                     <Marker key={marker.Target!.id} position={[marker.Target!.coordinate?.Latitude || lat, marker.Target!.coordinate?.Longitude || lng]} icon={matchedIcons[matchedArray.indexOf(marker)]}>
-                        <Popup>{oDLCColorToJSON(marker.Target!.AlphanumericColor)} {marker.Target!.Alphanumeric} {oDLCColorToJSON(marker.Target!.ShapeColor)} {oDLCShapeToJSON(marker.Target!.Shape)}</Popup>
+                        <Popup> {oDLCObjectsToJSON(marker.Target!.Object)}</Popup>
                     </Marker>
                 ))}
                 {unmatchedArray.map((marker) => (
                     <Marker key={marker.id} position={[marker.coordinate?.Latitude || lat, marker.coordinate?.Longitude || lng]} icon={unmatchedIcons[unmatchedArray.indexOf(marker)]}>
-                        <Popup>{oDLCColorToJSON(marker.AlphanumericColor)} {marker.Alphanumeric} {oDLCColorToJSON(marker.ShapeColor)} {oDLCShapeToJSON(marker.Shape)}</Popup>
+                        <Popup>{oDLCObjectsToJSON(marker.Object)}</Popup>
                     </Marker>
                 ))}
             </TuasMap>

houston/src/utilities/pull_targets.ts

@@ -39,7 +39,7 @@ export async function pull_targets(setFoundItemArray: React.Dispatch<React.SetSt
  * @param targets array of matched targets
  * @returns boolean
  */
-export async function post_targets(targets: any) {
+export async function post_targets(targets: { [key: string]: number}) {  
     console.log(targets);
 
     // should probably update function signature to already take in this format but whatever