Convert params to redux

gcs/src/components/config/flightModes.jsx

@@ -178,7 +178,7 @@ export default function FlightModes() {
             {flightModes.map((flightModeNumber, idx) => (
               <Select
                 key={idx}
-                label={`Flight mode ${idx}`}
+                label={`Flight mode ${idx + 1}`}
                 description={`PWM: ${FLIGHT_MODE_PWM_VALUES[idx][0]}${FLIGHT_MODE_PWM_VALUES[idx][1] === undefined ? "+" : `-${FLIGHT_MODE_PWM_VALUES[idx][1]}`}`}
                 value={flightModeNumber.toString()}
                 onChange={(value) => changeFlightMode(idx, value)}

gcs/src/components/dashboard/statusBar.jsx

@@ -14,7 +14,10 @@ import { IconClock, IconNetwork, IconNetworkOff } from "@tabler/icons-react"
 
 // Redux
 import { useSelector } from "react-redux"
-import { selectBatteryData, selectTelemetry } from "../../redux/slices/droneInfoSlice"
+import {
+  selectBatteryData,
+  selectTelemetry,
+} from "../../redux/slices/droneInfoSlice"
 
 // Helper imports
 import { socket } from "../../helpers/socket"
@@ -101,8 +104,11 @@ export default function StatusBar(props) {
     const batteryAlertPercentages = getSetting("Dashboard.batteryAlert") ?? []
     batteryAlertPercentages.sort((a1, a2) => a1 - a2)
 
-    batteryData.forEach(battery => {
-      for (const [i, batteryAlertPercentage] of batteryAlertPercentages.entries()) {
+    batteryData.forEach((battery) => {
+      for (const [
+        i,
+        batteryAlertPercentage,
+      ] of batteryAlertPercentages.entries()) {
         if (battery.battery_remaining < batteryAlertPercentage) {
           dispatchAlert({
             category: AlertCategory.Battery,
@@ -112,9 +118,13 @@ export default function StatusBar(props) {
                 : i == batteryAlertPercentages.length - 1
                   ? AlertSeverity.Yellow
                   : AlertSeverity.Orange,
-            jsx: <>Caution! You've dropped below {batteryAlertPercentage}% battery</>
+            jsx: (
+              <>
+                Caution! You've dropped below {batteryAlertPercentage}% battery
+              </>
+            ),
           })
-          return;
+          return
         }
       }
     })

gcs/src/components/params/autopilotRebootModal.jsx

@@ -6,15 +6,27 @@
 import { Button, Loader, Modal } from "@mantine/core"
 
 // Styling imports
-import tailwindConfig from "../../../tailwind.config.js"
 import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
-export default function AutopilotRebootModal({ rebootData, opened, onClose }) {
+// Redux
+import { useDispatch, useSelector } from "react-redux"
+import {
+  selectAutoPilotRebootModalOpen,
+  selectRebootData,
+  setAutoPilotRebootModalOpen,
+} from "../../redux/slices/paramsSlice.js"
+
+export default function AutopilotRebootModal() {
+  const dispatch = useDispatch()
+  const rebootData = useSelector(selectRebootData)
+  const opened = useSelector(selectAutoPilotRebootModalOpen)
+
   return (
     <Modal
       opened={opened}
-      onClose={onClose}
+      onClose={() => dispatch(setAutoPilotRebootModalOpen(false))}
       title="Rebooting autopilot"
       closeOnClickOutside={false}
       closeOnEscape={false}
@@ -36,7 +48,7 @@ export default function AutopilotRebootModal({ rebootData, opened, onClose }) {
                   {rebootData.message} You will need to reconnect.
                 </p>
                 <Button
-                  onClick={close}
+                  onClick={() => dispatch(setAutoPilotRebootModalOpen(false))}
                   color={tailwindColors.red[600]}
                   className="mt-4"
                 >

gcs/src/components/params/paramsToolbar.jsx

@@ -15,28 +15,48 @@ import {
   IconTool,
 } from "@tabler/icons-react"
 
-// Custom helper, component and data imports
-import { socket } from "../../helpers/socket.js"
-
 // Styling imports
-import tailwindConfig from "../../../tailwind.config.js"
 import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
-export default function ParamsToolbar({
-  searchValue,
-  modifiedParams,
-  showModifiedParams,
-  refreshCallback,
-  rebootCallback,
-  modifiedCallback,
-  searchCallback,
-}) {
-  /**
-   * Sets all the modified parameters to their new values on the drone
-   */
-  function saveModifiedParams() {
-    socket.emit("set_multiple_params", modifiedParams)
+// Redux
+import { useDispatch, useSelector } from "react-redux"
+import {
+  emitRebootAutopilot,
+  emitRefreshParams,
+  emitSetMultipleParams,
+  resetParamState,
+  selectModifiedParams,
+  selectParamSearchValue,
+  selectShowModifiedParams,
+  setAutoPilotRebootModalOpen,
+  setFetchingVars,
+  setModifiedParams,
+  setParams,
+  setParamSearchValue,
+  setShownParams,
+  toggleShowModifiedParams,
+} from "../../redux/slices/paramsSlice.js"
+
+export default function ParamsToolbar() {
+  const dispatch = useDispatch()
+  const modifiedParams = useSelector(selectModifiedParams)
+  const showModifiedParams = useSelector(selectShowModifiedParams)
+  const searchValue = useSelector(selectParamSearchValue)
+
+  function refreshCallback() {
+    dispatch(setParams([]))
+    dispatch(setModifiedParams([]))
+    dispatch(setShownParams([]))
+    dispatch(emitRefreshParams())
+    dispatch(setFetchingVars(true))
+  }
+
+  function rebootCallback() {
+    dispatch(emitRebootAutopilot())
+    dispatch(setAutoPilotRebootModalOpen(true))
+    dispatch(resetParamState())
   }
 
   return (
@@ -47,7 +67,7 @@ export default function ParamsToolbar({
       >
         <Button
           size="sm"
-          onClick={modifiedCallback}
+          onClick={() => dispatch(toggleShowModifiedParams())}
           color={tailwindColors.orange[600]}
         >
           {" "}
@@ -63,14 +83,16 @@ export default function ParamsToolbar({
         className="w-1/3"
         placeholder="Search by parameter name"
         value={searchValue}
-        onChange={(event) => searchCallback(event.currentTarget.value)}
+        onChange={(event) =>
+          dispatch(setParamSearchValue(event.currentTarget.value))
+        }
       />
 
       <Button
         size="sm"
         rightSection={<IconPencil size={14} />}
         disabled={!modifiedParams.length}
-        onClick={saveModifiedParams}
+        onClick={() => dispatch(emitSetMultipleParams(modifiedParams))}
         color={tailwindColors.green[600]}
       >
         {" "}

gcs/src/components/params/row.jsx

@@ -6,8 +6,6 @@
 // Custom components, helpers and data
 import RowItem from "./rowItem"
 
-export const Row = ({ data, index, style }) => {
-  const param = data.params[index]
-
-  return <RowItem param={param} style={style} onChange={data.onChange} />
+export const Row = ({ index, style }) => {
+  return <RowItem index={index} style={style} />
 }

gcs/src/components/params/rowItem.jsx

@@ -6,19 +6,49 @@
 import { memo, useEffect, useState } from "react"
 
 // 3rd party imports
-import { ScrollArea, Tooltip } from "@mantine/core"
-import { useLocalStorage } from "@mantine/hooks"
+import { ActionIcon, ScrollArea, Tooltip } from "@mantine/core"
 
 // Custom components, helpers and data
 import apmParamDefsCopter from "../../../data/gen_apm_params_def_copter.json"
 import apmParamDefsPlane from "../../../data/gen_apm_params_def_plane.json"
 import ValueInput from "./valueInput"
 
-const RowItem = memo(({ param, style, onChange }) => {
-  const [aircraftType] = useLocalStorage({
-    key: "aircraftType",
-  })
+// Redux
+import { IconArrowBack, IconInfoCircle } from "@tabler/icons-react"
+import { useDispatch, useSelector } from "react-redux"
+import { selectAircraftType } from "../../redux/slices/droneInfoSlice"
+import {
+  deleteModifiedParam,
+  selectModifiedParams,
+  selectShownParams,
+  selectSingleParam,
+} from "../../redux/slices/paramsSlice"
+
+const RowItem = memo(({ index, style }) => {
+  const dispatch = useDispatch()
+  const aircraftType = useSelector(selectAircraftType)
+  const shownParams = useSelector(selectShownParams)
+  const modifiedParams = useSelector(selectModifiedParams)
   const [paramDef, setParamDef] = useState({})
+  const param = shownParams[index]
+  const paramPreviousValue = useSelector((state) =>
+    selectSingleParam(state, param.param_id),
+  )
+  const hasBeenModified = modifiedParams.find(
+    (item) => item.param_id === param.param_id,
+  )
+
+  function removeModified(param) {
+    let initial_value = modifiedParams.find(
+      (item) => item.param_id === param.param_id,
+    ).initial_value
+    dispatch(
+      deleteModifiedParam({
+        param_id: param.param_id,
+        initial_value: initial_value,
+      }),
+    )
+  }
 
   useEffect(() => {
     if (aircraftType === 1) {
@@ -30,16 +60,48 @@ const RowItem = memo(({ param, style, onChange }) => {
 
   return (
     <div style={style} className="flex flex-row items-center space-x-4">
-      <Tooltip label={paramDef?.DisplayName}>
-        <p className="w-56">{param.param_id}</p>
-      </Tooltip>
-
-      <ValueInput
-        param={param}
-        paramDef={paramDef}
-        onChange={onChange}
-        className="w-3/12"
-      />
+      <div className="flex flex-row w-2/12 gap-x-2">
+        <Tooltip label={paramDef?.DisplayName ?? null} position="top-start">
+          <p>{param.param_id}</p>
+        </Tooltip>
+
+        {paramDef?.Values && paramDef?.Range && (
+          <Tooltip
+            className="self-center"
+            label={
+              <div className="text-wrap max-w-80">
+                {Object.keys(paramDef?.Values).map((key) => {
+                  return (
+                    <p key={key}>
+                      {key}: {paramDef?.Values[key]}
+                    </p>
+                  )
+                })}
+              </div>
+            }
+          >
+            <IconInfoCircle size={20} />
+          </Tooltip>
+        )}
+      </div>
+
+      <div className="flex items-end w-4/12 justify-between gap-x-4">
+        <ValueInput index={index} paramDef={paramDef} className="grow" />
+        {hasBeenModified && (
+          <Tooltip
+            label={`Reset to previous value of ${paramPreviousValue.param_value}`}
+          >
+            <ActionIcon
+              size="lg"
+              color="red"
+              variant="light"
+              onClick={() => removeModified(param)}
+            >
+              <IconArrowBack />
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </div>
 
       <div className="w-1/2">
         <ScrollArea.Autosize className="max-h-24">