{
terminalText.map((str, i) => ,
- setMapData: React.Dispatch>>,
- }
-) {
- // add extra left column for the X button
- headings = ["---"].concat(headings);
-
- return (
- <>
-
-
-
-
- )
-}
-
-/**
- * Form that contains all of the controls for entering flight boundary, search boundary,
- * and waypoint data for the mission
- * @returns Map Input Form
- */
-
-/**
- * Component which renders all of the form input relating to the map.
- * Delagates the actual displaying of table data to >,
- mapData: Map,
- setMapData: React.Dispatch>>,
- }
-) {
-
- return (
- <>
-
-
- );
-}
-
-/**
- * Form that handles all the input for entering bottle loading information
- * on the plane for the mission
- * @param props props
- * @param props.bottleAssignments The list of current entered bottle assignments
- * @param props.setBottleAssignments State setter for props.bottleAssignments
- * @returns Bottle Input Form
- */
-function BottleInputForm(
- {bottleAssignments, setBottleAssignments}:
- {bottleAssignments: Bottle[], setBottleAssignments: React.Dispatch>}
-) {
- /**
- * @returns Every possible ODLC Color represented as an
{str}
) diff --git a/houston/src/pages/Input.css b/houston/src/pages/Input.css index 48ce86e2..e69de29b 100644 --- a/houston/src/pages/Input.css +++ b/houston/src/pages/Input.css @@ -1,74 +0,0 @@ -main.input-page { - display: flex; - flex-direction: row; - flex: 1; -} - -main.input-page .input-map { - /* take up left 2/3 of screen */ - flex: 2; -} - -main.input-page .right-container { - width: 50dvw; -} - -main.input-page .right-container .tuas-form { - padding: 1rem; -} - -main.input-page .tuas-form table{ - border-collapse: collapse; -} - -main.input-page .tuas-form thead { - color: var(--highlight); - background-color: var(--dark-bg); -} - -main.input-page .tuas-form tbody { - background-color: var(--light-text); - color: var(--dark-text); -} - -main.input-page .tuas-form td { - text-align: center; -} - -main.input-page .tuas-form input { - width: fit-content; -} - -main.input-page .button-container { - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: center; -} - -main.input-page .button-container > input { - margin-right: 1rem; -} - - -main.input-page .button-container input:nth-child(3){ - margin-right: auto; -} - -main.input-page .add-btn:hover { - background-color: var(--success-text) !important; -} - -main.input-page .del-btn:hover { - background-color: var(--failure-text) !important; -} - -main.input-page .bottle-form-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -main.input-page input[type="button"] { - border-radius: 8px; -} \ No newline at end of file diff --git a/houston/src/pages/Input.tsx b/houston/src/pages/Input.tsx index 73d8b432..ec8ec316 100644 --- a/houston/src/pages/Input.tsx +++ b/houston/src/pages/Input.tsx @@ -1,545 +1,14 @@ -import { SetStateAction, useState, useEffect, ChangeEvent } from 'react'; - -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'; - - -enum MapMode { - FlightBound, - SearchBound, - Waypoint -} - -enum ShapeType { - Line, - Polygon -} - -interface MapModeConfig { - color: string, - headings: string[], - type: ShapeType, -} - -const getModeConfig = (mapMode: MapMode) => { - switch (mapMode) { - case MapMode.FlightBound: - return { - color: "red", - headings: ["Latitude", "Longitude"], - type: ShapeType.Polygon - } as MapModeConfig; - case MapMode.SearchBound: - return { - color: "blue", - headings: ["Latitude", "Longitude"], - type: ShapeType.Polygon - } as MapModeConfig; - case MapMode.Waypoint: - return { - color: "yellow", - headings: ["Latitude", "Longitude", "Altitude"], - type: ShapeType.Line - } as MapModeConfig; - } -} /** - * Component which takes in all the state for the current map mode and data, - * and renders the table containing all of the values for the current mode. - * @param props Props - * @param props.headings Array for the heading values of the current map mode - * e.g. ["Latitude", "Longitude", "Altitude"] for Waypoint mode - * @param props.mapMode Current mode of the map - * @param props.mapData Current lat/lng/alt data points of the map, per map mode - * @param props.setMapData setter for props.mapData - * @returns FormTable - */ -function FormTable( - {headings, mapMode, mapData, setMapData}: - { - headings: string[], - mapMode: MapMode, - mapData: Map| {str} | )} -|
|---|---|
| - { - const data = mapData.get(mapMode); - - setMapData(mapData => { - if (data !== undefined) { - const temp = (data.slice(0, i).concat(data.slice(i+1))); - console.log(temp); - return new Map(mapData.set(mapMode, temp)); - } else { - return mapData; // should never happen - } - }); - }} - /> - | - { - row.map((num, j) => { - return ( -- { - const newArr = mapData.get(mapMode); - if (newArr == undefined) { - return; - } - newArr[i][j] = Number(e.target.value); - setMapData(new Map(mapData.set(mapMode, newArr))); - }} - /> - | - ) - }) - } -