add alert for insufficient points

DFO-Ocean-Navigator · Jan 13, 2025 · b51cd02 · b51cd02
1 parent 4b84dcf
commit b51cd02
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 14 deletions.
diff --git a/oceannavigator/frontend/src/components/DrawingTools.jsx b/oceannavigator/frontend/src/components/DrawingTools.jsx
@@ -1,13 +1,11 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button, ToggleButton } from "react-bootstrap";
 import { faRotateLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { withTranslation } from "react-i18next";
 
 function DrawingTools(props) {
-  const [vectorType, setVectorType] = useState(props.vectorType);
-
   const radios = [
     { name: __("Point"), value: "point" },
     { name: __("Line"), value: "line" },
@@ -16,7 +14,6 @@ function DrawingTools(props) {
 
   const handleRadio = (e) => {
     let type = e.currentTarget.value;
-    setVectorType(type);
     props.action("vectorType", type);
   };
 
@@ -29,13 +26,34 @@ function DrawingTools(props) {
   };
 
   const handleSave = () => {
-    props.action("saveFeature");
+    if (checkFeaturePoints()) {
+      props.action("saveFeature");
+    }
   };
 
-
   const handleClose = () => {
-    props.updateUI({ showDrawingTools: false });
-    props.action("stopDrawing");
+    if (checkFeaturePoints()) {
+      props.action("saveFeature");
+      props.updateUI({ showDrawingTools: false });
+      props.action("stopDrawing");
+    }
+  };
+
+  const checkFeaturePoints = () => {
+    let message = ["Insufficient Points"];
+    if (props.newFeatures.length > 0) {
+      let nCoords = props.newFeatures[0].coords.length;
+      if (props.vectorType === "line" && nCoords < 2) {
+        message.push("Line features require a minimum of 2 vertices.");
+        props.action("showAlert", message);
+        return false;
+      } else if (props.vectorType === "area" && nCoords < 3) {
+        message.push("Area features require a minimum of 3 vertices.");
+        props.action("showAlert", message);
+        return false;
+      }
+    }
+    return true;
   };
 
   return (
@@ -57,9 +75,8 @@ function DrawingTools(props) {
         ))}
       </div>
       <Button className="plot-button" onClick={handleClear}>
-      {__("Clear")}
+        {__("Clear")}
       </Button>
-
       <Button className="undo-button" onClick={handleUndo}>
         <FontAwesomeIcon icon={faRotateLeft} />
       </Button>

diff --git a/oceannavigator/frontend/src/components/MapInputs.jsx b/oceannavigator/frontend/src/components/MapInputs.jsx
@@ -19,7 +19,7 @@ function MapInputs(props) {
       updateUI={props.updateUI}
       action={props.action}
       vectorType={props.vectorType}
-      vectorCoordinates={props.vectorCoordinates}
+      newFeatures={props.newFeatures}
     />
   ) : null;
 

diff --git a/oceannavigator/frontend/src/components/OceanNavigator.jsx b/oceannavigator/frontend/src/components/OceanNavigator.jsx
@@ -1,6 +1,7 @@
 import { nominalTypeHack } from "prop-types";
 import React, { useState, useRef, useEffect } from "react";
-import { Button } from "react-bootstrap";
+import Button from "react-bootstrap/Button";
+import Alert from "react-bootstrap/Alert";
 import Modal from "react-bootstrap/Modal";
 import ReactGA from "react-ga";
 
@@ -73,6 +74,8 @@ function OceanNavigator(props) {
   const [subquery, setSubquery] = useState();
   const [showPermalink, setShowPermalink] = useState(false);
   const [multiSelect, setMultiSelect] = useState(false);
+  const [showAlert, setShowAlert] = useState(false);
+  const [alertMessage, setAlertMessage] = useState([]);
 
   useEffect(() => {
     ReactGA.ga("send", "pageview");
@@ -246,6 +249,10 @@ function OceanNavigator(props) {
         setSubquery(null);
         setShowPermalink(true);
         break;
+      case "showAlert":
+        setShowAlert(true);
+        setAlertMessage(arg);
+        break;
     }
   };
 
@@ -572,7 +579,6 @@ function OceanNavigator(props) {
         features={[...mapFeatures, ...newFeatures]}
         vectorId={vectorId}
         vectorType={vectorType}
-        vectorCoordinates={vectorCoordinates}
         class4Type={class4Type}
         updateState={updateState}
         action={action}
@@ -585,6 +591,7 @@ function OceanNavigator(props) {
         dataset0={dataset0}
         dataset1={dataset1}
         mapSettings={mapSettings}
+        newFeatures={newFeatures}
         updateMapSettings={updateMapSettings}
         updateDataset0={updateDataset0}
         updateDataset1={updateDataset1}
@@ -594,7 +601,6 @@ function OceanNavigator(props) {
         action={action}
         showCompare={true}
         vectorType={vectorType}
-        vectorCoordinates={vectorCoordinates}
       />
       <ToggleLanguage />
       <LinkButton action={action} />
@@ -639,6 +645,16 @@ function OceanNavigator(props) {
           <Button onClick={() => setShowPermalink(false)}>{__("Close")}</Button>
         </Modal.Footer>
       </Modal>
+      {showAlert ? (
+        <Alert
+          variant="warning"
+          onClose={() => setShowAlert(false)}
+          dismissible
+        >
+          <Alert.Heading>{alertMessage[0]}</Alert.Heading>
+          <p>{alertMessage[1]}</p>
+        </Alert>
+      ) : null}
     </div>
   );
 }

diff --git a/oceannavigator/frontend/src/stylesheets/components/_OceanNavigator.scss b/oceannavigator/frontend/src/stylesheets/components/_OceanNavigator.scss
@@ -54,3 +54,11 @@ body {
     }
   }
 }
+
+.alert {
+  z-index: 100;
+  position: absolute;
+  top: 33%;
+  left: 33%;
+  width: 33%;
+}