From a001b999d0f0a60ea1d8ba6576177a50cb989d3d Mon Sep 17 00:00:00 2001 From: JustinElms Date: Wed, 15 Jan 2025 19:13:57 +0000 Subject: [PATCH] restore basic enterCoordsWIndow functionality --- .../src/components/EnterCoordsWindow.jsx | 203 ++++++------------ .../src/components/OceanNavigator.jsx | 74 +++++-- 2 files changed, 129 insertions(+), 148 deletions(-) diff --git a/oceannavigator/frontend/src/components/EnterCoordsWindow.jsx b/oceannavigator/frontend/src/components/EnterCoordsWindow.jsx index 7b1bdc471..1718c88f6 100644 --- a/oceannavigator/frontend/src/components/EnterCoordsWindow.jsx +++ b/oceannavigator/frontend/src/components/EnterCoordsWindow.jsx @@ -1,52 +1,39 @@ import React, { useState, useRef } from "react"; import Papa from "papaparse"; -import { Button, ToggleButton } from "react-bootstrap"; +import { Button } from "react-bootstrap"; import Table from "react-bootstrap/Table"; import { X } from "react-bootstrap-icons"; import { withTranslation } from "react-i18next"; -function EnterCoordsWindow(props) { - const [enteredLat, setEnteredLat] = useState(""); - const [enteredLon, setEnteredLon] = useState(""); +function FeatureCard(props) { const [timer, setTimer] = useState(null); - const fileForm = useRef(null); - const fileInput = useRef(null); - - const radios = [ - { name: __("Point"), value: "point" }, - { name: __("Line"), value: "line" }, - { name: __("Area"), value: "area" }, - ]; - const handleRadio = (e) => { - let type = e.currentTarget.value; - props.action("vectorType", type); - }; - - const submitHandler = (e) => { - e.preventDefault(); - if (enteredLat & enteredLon) { - props.action("addPoints", [[enteredLat, enteredLon]]); - setEnteredLat(""); - setEnteredLon(""); + const updateCoordinate = (id, row, col, value) => { + if (!isNaN(value)) { + props.action("updateFeatureCoordinate", id, [row, col], value); } }; - const latChangeHandler = (e) => { - setEnteredLat(parseFloat(e.target.value)); + const updateType = (e) => { + props.action("updateFeatureType", props.feature.id, e.target.value); }; - const lonChangeHandler = (e) => { - setEnteredLon(parseFloat(e.target.value)); + const removeFeature = () => { + props.action("removeFeature", props.feature.id); }; const updateLat = (e) => { clearTimeout(timer); setTimer( setTimeout( - updateCoordinate(parseInt(e.target.id), 0, parseFloat(e.target.value)), + updateCoordinate( + props.feature.id, + parseInt(e.target.id), + 0, + parseFloat(e.target.value) + ), 1000 ) ); @@ -56,32 +43,22 @@ function EnterCoordsWindow(props) { clearTimeout(timer); setTimer( setTimeout( - updateCoordinate(parseInt(e.target.id), 1, parseFloat(e.target.value)), + updateCoordinate( + props.feature.id, + parseInt(e.target.id), + 1, + parseFloat(e.target.value) + ), 1000 ) ); }; - const updateCoordinate = (row, col, value) => { - if (!isNaN(value)) { - props.action("updatePoint", row, col, value) - } - } - - const handleClear = () => { - props.action("clearPoints"); - }; - - const handleUpload = () => { - fileInput.current.click(); + const addRow = () => { + updateCoordinate(props.feature.id, props.feature.coords.length, 0, 0); }; - const handlePlot = () => { - props.action("selectPoints"); - props.updateUI({ modalType: props.vectorType, showModal: true }); - }; - - const tableEntries = props.vectorCoordinates.map((coord, index) => { + const tableEntries = props.feature.coords.map((coord, index) => { return ( @@ -107,7 +84,9 @@ function EnterCoordsWindow(props) { @@ -116,6 +95,47 @@ function EnterCoordsWindow(props) { ); }); + return ( +
+
+ + + +
+
+ + + + + + + + + {tableEntries} +
{"Latitude"}{"Longitude"}
+
+
+ ); +} + +function EnterCoordsWindow(props) { + const fileForm = useRef(null); + const fileInput = useRef(null); + + const tableEntries = props.mapFeatures.map((feature) => { + return ( + + ); + }); + const parseCSV = (e) => { if (e.target.files.length == 1) { const file = e.target.files[0]; @@ -167,92 +187,7 @@ function EnterCoordsWindow(props) { } }; - const plotDisabled = - (props.vectorType === "point" && props.vectorCoordinates.length < 1) || - (props.vectorType === "line" && props.vectorCoordinates.length < 2) || - (props.vectorType === "area" && props.vectorCoordinates.length < 3); - - return ( -
-
- - - - - - - - - {tableEntries} -
{__("Latitude")}{__("Longitude")}
- -
-
- - - - - - -
-
-
- -
-
- {radios.map((radio, idx) => ( - - {radio.name} - - ))} -
- - -
-
- -
-
- ); + return
{tableEntries}
; } export default withTranslation()(EnterCoordsWindow); diff --git a/oceannavigator/frontend/src/components/OceanNavigator.jsx b/oceannavigator/frontend/src/components/OceanNavigator.jsx index 126e9893d..f84b7a602 100644 --- a/oceannavigator/frontend/src/components/OceanNavigator.jsx +++ b/oceannavigator/frontend/src/components/OceanNavigator.jsx @@ -124,6 +124,8 @@ function OceanNavigator(props) { }; const action = (name, arg, arg2, arg3) => { + let featIdx = null; + let updatedFeatures = null; switch (name) { case "startDrawing": setVectorId(null); @@ -135,7 +137,9 @@ function OceanNavigator(props) { case "vectorType": typeRef.current = arg; setVectorType(arg); - setNewFeatures((prevFeatures) => updateFeatType(prevFeatures)); + setNewFeatures((prevFeatures) => + updateFeatType(prevFeatures, typeRef.current) + ); break; case "undoMapFeature": if (newFeatures.length > 0) { @@ -159,10 +163,6 @@ function OceanNavigator(props) { case "addPoints": setVectorCoordinates((prevCoordinates) => [...prevCoordinates, ...arg]); break; - case "removePoint": - let coords = vectorCoordinates.filter((coord, index) => index !== arg); - setVectorCoordinates(coords); - break; case "addNewFeature": setNewFeatures((prevFeatures) => { if (typeRef.current === "point" || prevFeatures.length === 0) { @@ -187,15 +187,61 @@ function OceanNavigator(props) { setMapFeatures((prevFeatures) => [...prevFeatures, ...newFeatures]); setNewFeatures([]); break; - case "updatePoint": - let newCoords = null; - if (!isNaN(arg2) && !isNaN(arg3)) { - newCoords = [...vectorCoordinates]; - newCoords[arg][arg2] = arg3; + case "updateFeatureCoordinate": + featIdx = mapFeatures.findIndex((feat) => { + return feat.id === arg; + }); + + updatedFeatures = [...mapFeatures]; + if (arg2[0] >= updatedFeatures[featIdx].coords.length) { + updatedFeatures[featIdx].coords.push([0, 0]); + } else { + updatedFeatures[featIdx].coords[arg2[0]][arg2[1]] = arg3; + } + setMapFeatures(updatedFeatures); + break; + case "updateFeatureType": + featIdx = mapFeatures.findIndex((feat) => { + return feat.id === arg; + }); + + updatedFeatures = [...mapFeatures]; + let prevType = updatedFeatures[featIdx].type; + let nextType = arg2; + + if (nextType === "point" && prevType !== "point") { + let newFeats = updateFeatType([updatedFeatures[featIdx]], nextType); + updatedFeatures = [ + ...updatedFeatures.slice(0, featIdx), + ...newFeats, + ...updatedFeatures.slice(-featIdx, updatedFeatures.length), + ]; + } else { + updatedFeatures[featIdx].type = arg2; + } + setMapFeatures(updatedFeatures); + break; + case "removeFeature": + featIdx = mapFeatures.findIndex((feat) => { + return feat.id === arg; + }); + + updatedFeatures = [...mapFeatures]; + updatedFeatures.splice(featIdx, 1); + setMapFeatures(updatedFeatures); + break; + case "removeFeatureCoord": + featIdx = mapFeatures.findIndex((feat) => { + return feat.id === arg; + }); + updatedFeatures = [...mapFeatures]; + + if (updatedFeatures[featIdx].coords.length === 1) { + updatedFeatures.splice(featIdx, 1); } else { - newCoords = arg; + updatedFeatures[featIdx].coords.splice(arg2, 1); } - setVectorCoordinates(newCoords); + setMapFeatures(updatedFeatures); break; case "selectPoints": if (!arg) { @@ -340,12 +386,11 @@ function OceanNavigator(props) { }); }; - const updateFeatType = (features) => { + const updateFeatType = (features, nextType) => { let updatedFeat = []; if (features.length > 0) { let prevType = features[0].type; - let nextType = typeRef.current; if ( prevType === "point" && @@ -512,6 +557,7 @@ function OceanNavigator(props) { updateUI={updateUI} vectorType={vectorType} vectorCoordinates={vectorCoordinates} + mapFeatures={mapFeatures} /> ); modalTitle = __("Enter Coordinates");