redux fix for alerts (#632)

* redux fix for alerts

* add min and max altitudes

additionally improve number input in settings

* optimise altitude alert effect

* ensure min altitude alerts are properly initialised

---------

Co-authored-by: Kush Makkapati <kush.makkapati@icloud.com>

Author: bensgilbert

gcs/data/default_settings.json

@@ -36,15 +36,25 @@
     }
   },
   "Dashboard": {
-    "altitudeAlerts": {
-      "description": "Add as many altitude alerts as you want, they'll show when you fall below the set limit",
-      "default": [100, 90, 80],
+    "maxAltitudeAlert": {
+      "description": "You'll be notified when the relative altitude of a drone exceeds this value.",
+      "default": 120,
+      "type": "number",
+      "range": [
+          0,
+          100000
+      ],
+      "display": "Maximum Altitude Alert"
+    },
+    "minAltitudeAlerts": {
+      "description": "You'll be notified when the relative altitude of a drone goes below these values.",
+      "default": [],
       "type": "extendableNumber",
       "range": [
           0,
           100000
       ],
-      "display": "Altitude Alerts"
+      "display": "Minimum Altitude Alerts"
     }
   },
   "Params": {},

gcs/src/components/dashboard/statusBar.jsx

@@ -5,17 +5,24 @@
 
 // Base imports
 import moment from "moment"
-import { cloneElement, useEffect, useState } from "react"
+import { cloneElement, useEffect, useRef, useState } from "react"
 
 // Third party imports
 import { Tooltip } from "@mantine/core"
 import { useInterval } from "@mantine/hooks"
 import { IconClock, IconNetwork, IconNetworkOff } from "@tabler/icons-react"
 
+// Redux
+import { useSelector } from "react-redux"
+import { selectTelemetry } from "../../redux/slices/droneInfoSlice"
+
 // Helper imports
 import { socket } from "../../helpers/socket"
 import GetOutsideVisibilityColor from "../../helpers/outsideVisibility"
-import AlertSection from "./alert"
+import AlertSection, { AlertCategory, AlertSeverity } from "./alert"
+import { useSettings } from "../../helpers/settings"
+
+import { useAlerts } from "./alertProvider"
 
 export function StatusSection({ icon, value, tooltip }) {
   return (
@@ -31,13 +38,59 @@ export function StatusSection({ icon, value, tooltip }) {
 export default function StatusBar(props) {
   const [time, setTime] = useState(moment())
   const updateClock = useInterval(() => setTime(moment()), 1000)
+  const telemetryData = useSelector(selectTelemetry)
 
   // Start clock
   useEffect(() => {
     updateClock.start()
     return updateClock.stop
   }, [])
 
+  // Alerts
+  const { getSetting } = useSettings()
+  const { dispatchAlert, dismissAlert } = useAlerts()
+  const highestAltitudeRef = useRef(0)
+
+  useEffect(() => {
+    const maxAltitude = getSetting("Dashboard.maxAltitudeAlert")
+    if (telemetryData.alt > maxAltitude) {
+      dispatchAlert({
+        category: AlertCategory.Altitude,
+        severity: AlertSeverity.Red,
+        jsx: <>Caution! You've exceeded {maxAltitude}m</>,
+      })
+      return
+    } else {
+      dismissAlert(AlertCategory.Altitude)
+    }
+
+    if (telemetryData.alt > highestAltitudeRef.current) {
+      highestAltitudeRef.current = telemetryData.alt
+      return
+    }
+
+    const minAltitudes = (getSetting("Dashboard.minAltitudeAlerts") ?? []).slice()
+    minAltitudes.sort((a1, a2) => a1 - a2)
+
+    for (const [i, altitude] of minAltitudes.entries()) {
+      if (highestAltitudeRef.current > altitude && telemetryData.alt < altitude) {
+        dispatchAlert({
+          category: AlertCategory.Altitude,
+          severity:
+            i == 0
+              ? AlertSeverity.Red
+              : i == minAltitudes.length - 1
+                ? AlertSeverity.Yellow
+                : AlertSeverity.Orange,
+          jsx: <>Caution! You've fallen below {altitude}m</>,
+        })
+        return
+      }
+    }
+
+    dismissAlert(AlertCategory.Altitude)
+  }, [telemetryData.alt]);
+
   return (
     <div className={`${props.className} flex flex-col items-end`}>
       <div

gcs/src/components/settingsModal.jsx

@@ -102,7 +102,9 @@ function ExtendableNumberSetting({ settingName, range }) {
             <IconTrash size={20} />
           </button>
           <NumberInput
-            value={value}
+            defaultValue={value}
+            min={range ? range[0] : null}
+            max={range ? range[1] : null}
             onChange={(num) => {
               if (!isValidNumber(num, range)) return
               updateValue(id, parseInt(num))

gcs/src/dashboard.jsx

@@ -27,6 +27,7 @@ import { ResizableBox } from "react-resizable"
 
 // Redux
 import { useDispatch, useSelector } from "react-redux"
+import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice"
 import {
   selectAircraftTypeString,
   selectBatteryData,
@@ -35,14 +36,13 @@ import {
   selectGPSRawInt,
   selectNotificationSound,
   selectRSSI,
-  soundPlayed,
+  soundPlayed
 } from "./redux/slices/droneInfoSlice"
-import { selectMessages } from "./redux/slices/statusTextSlice"
 import {
   notificationShown,
   selectNotificationQueue,
 } from "./redux/slices/notificationSlice"
-import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice"
+import { selectMessages } from "./redux/slices/statusTextSlice"
 
 // Helper javascript files
 import { GPS_FIX_TYPES } from "./helpers/mavlinkConstants"
@@ -70,9 +70,6 @@ const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 // Sounds
 import armSound from "./assets/sounds/armed.mp3"
 import disarmSound from "./assets/sounds/disarmed.mp3"
-// import { AlertCategory, AlertSeverity } from "./components/dashboard/alert"
-// import { useAlerts } from "./components/dashboard/alertProvider"
-// import { useSettings } from "./helpers/settings"
 
 export default function Dashboard() {
   const dispatch = useDispatch()
@@ -135,7 +132,7 @@ export default function Dashboard() {
   // Show queued notifications
   useEffect(() => {
     if (notificationQueue.length !== 0) {
-      ;(notificationQueue[0].type === "error"
+      ; (notificationQueue[0].type === "error"
         ? showErrorNotification
         : showSuccessNotification)(notificationQueue[0].message)
       dispatch(notificationShown())
@@ -155,37 +152,6 @@ export default function Dashboard() {
     })
   }
 
-  // NEED TO FIX THIS BEFORE WE MERGE KUSH/BEN
-  // Alerts
-  // const { getSetting } = useSettings()
-  // const { dispatchAlert, dismissAlert } = useAlerts()
-  // const highestAltitudeRef = useRef(0)
-
-  // function updateAltitudeAlert(msg) {
-  //   if (msg.alt > highestAltitudeRef.current)
-  //     return (highestAltitudeRef.current = msg.alt)
-  //   const altitudes = getSetting("Dashboard.altitudeAlerts")
-  //   altitudes.sort((a1, a2) => a1 - a2)
-
-  //   for (const [i, altitude] of altitudes.entries()) {
-  //     if (highestAltitudeRef.current > altitude && msg.alt < altitude) {
-  //       dispatchAlert({
-  //         category: AlertCategory.Altitude,
-  //         severity:
-  //           i == 0
-  //             ? AlertSeverity.Red
-  //             : i == altitudes.length - 1
-  //               ? AlertSeverity.Yellow
-  //               : AlertSeverity.Orange,
-  //         jsx: <>Caution! You've fallen below {altitude}m</>,
-  //       })
-  //       return
-  //     }
-  //   }
-
-  //   dismissAlert(AlertCategory.Altitude)
-  // }
-
   function calcBigTextFontSize() {
     let w = telemetryPanelSize.width
     const BREAKPOINT_SM = 350.0
@@ -248,9 +214,8 @@ export default function Dashboard() {
           />
           <StatusSection
             icon={<IconGps />}
-            value={`(${lat !== undefined ? lat.toFixed(6) : 0}, ${
-              lon !== undefined ? lon.toFixed(6) : 0
-            })`}
+            value={`(${lat !== undefined ? lat.toFixed(6) : 0}, ${lon !== undefined ? lon.toFixed(6) : 0
+              })`}
             tooltip="GPS (lat, lon)"
           />
           <StatusSection