diff --git a/gcs/src/components/navbar.jsx b/gcs/src/components/navbar.jsx index b56fc8e6e..ea0d5fa91 100644 --- a/gcs/src/components/navbar.jsx +++ b/gcs/src/components/navbar.jsx @@ -7,7 +7,6 @@ */ // Base imports -import { useEffect, useState } from "react" import { Link } from "react-router-dom" // Third party imports @@ -23,11 +22,7 @@ import { TextInput, Tooltip, } from "@mantine/core" -import { - useDisclosure, - useLocalStorage, - useSessionStorage, -} from "@mantine/hooks" +import { useSessionStorage } from "@mantine/hooks" import { IconInfoCircle, IconRefresh } from "@tabler/icons-react" // Local imports @@ -36,7 +31,38 @@ import { AddCommand } from "./spotlight/commandHandler.js" // Helper imports import { IconAlertTriangle } from "@tabler/icons-react" import { showErrorNotification } from "../helpers/notification.js" -import { socket } from "../helpers/socket" + +// Redux +import { useDispatch, useSelector } from "react-redux" +import { + ConnectionType, + emitConnectToDrone, + emitDisconnectFromDrone, + emitGetComPorts, + selectBaudrate, + selectComPorts, + selectConnectedToDrone, + selectConnecting, + selectConnectionModal, + selectConnectionStatus, + selectConnectionType, + selectFetchingComPorts, + selectIp, + selectNetworkType, + selectPort, + selectSelectedComPorts, + selectWireless, + setBaudrate, + setConnecting, + setConnectionModal, + setConnectionType, + setIp, + setNetworkType, + setPort, + setSelectedComPorts, + setWireless, +} from "../redux/slices/droneConnectionSlice.js" +import { selectIsConnectedToSocket } from "../redux/slices/socketSlice.js" // Styling imports import { twMerge } from "tailwind-merge" @@ -45,206 +71,73 @@ import tailwindConfig from "../../tailwind.config.js" const tailwindColors = resolveConfig(tailwindConfig).theme.colors export default function Navbar() { + // Redux + const dispatch = useDispatch() + const openedModal = useSelector(selectConnectionModal) + + const connecting = useSelector(selectConnecting) + const connectedToDrone = useSelector(selectConnectedToDrone) + const connectedToSocket = useSelector(selectIsConnectedToSocket) + + const comPorts = useSelector(selectComPorts) + const selectedComPort = useSelector(selectSelectedComPorts) + const fetchingComPorts = useSelector(selectFetchingComPorts) + const wireless = useSelector(selectWireless) + const selectedBaudRate = useSelector(selectBaudrate) + const connectionType = useSelector(selectConnectionType) + const networkType = useSelector(selectNetworkType) + const ip = useSelector(selectIp) + const port = useSelector(selectPort) + const droneConnectionStatusMessage = useSelector(selectConnectionStatus) + // Panel is open/closed - const [opened, { open, close }] = useDisclosure(false) const [outOfDate] = useSessionStorage({ key: "outOfDate" }) const [currentPage] = useSessionStorage({ key: "currentPage", defaultValue: "dashboard", }) - // Connection to drone - const [connecting, setConnecting] = useState(false) - const [connected, setConnected] = useSessionStorage({ - key: "connectedToDrone", - defaultValue: false, - }) - const [wireless, setWireless] = useLocalStorage({ - key: "wirelessConnection", - defaultValue: true, - }) - const [connectedToSocket, setConnectedToSocket] = useSessionStorage({ - key: "socketConnection", - defaultValue: false, - }) - const [selectedBaudRate, setSelectedBaudRate] = useLocalStorage({ - key: "baudrate", - defaultValue: "9600", - }) - - // eslint-disable-next-line no-unused-vars - const [aircraftType, setAircraftType] = useLocalStorage({ - key: "aircraftType", - defaultValue: 0, - }) - - const ConnectionType = { - Serial: "serial", - Network: "network", - } - - const [connectionType, setConnectionType] = useLocalStorage({ - key: "connectionType", - defaultValue: ConnectionType.Serial, - }) - - // Com Ports - const [comPorts, setComPorts] = useState([]) - const [selectedComPort, setSelectedComPort] = useSessionStorage({ - key: "selectedComPort", - defaultValue: null, - }) - const [fetchingComPorts, setFetchingComPorts] = useState(false) - - // Network Connection - const [networkType, setNetworkType] = useLocalStorage({ - key: "networkType", - defaultValue: "tcp", - }) - const [ip, setIp] = useLocalStorage({ - key: "ip", - defaultValue: "127.0.0.1", - }) - const [port, setPort] = useLocalStorage({ - key: "port", - defaultValue: "5760", - }) - - const [droneConnectionStatusMessage, setDroneConnectionStatusMessage] = - useState(null) - - function getComPorts() { - if (!connectedToSocket) return - socket.emit("get_com_ports") - setFetchingComPorts(true) - } - - // Check if connected to drone - useEffect(() => { - if (selectedComPort === null) { - socket.emit("is_connected_to_drone") - } - - socket.on("connect", () => { - setConnectedToSocket(true) - }) - - socket.on("disconnect", () => { - setConnectedToSocket(false) - }) - - // Flag connected/not connected, if not fetch ports - socket.on("is_connected_to_drone", (msg) => { - if (msg) { - setConnected(true) - } else { - setConnected(false) - setConnecting(false) - getComPorts() - } - }) - - // Fetch com ports and list them - socket.on("list_com_ports", (msg) => { - setFetchingComPorts(false) - setComPorts(msg) - if (selectedComPort === null || !msg.includes(selectedComPort)) { - const possibleComPort = msg.find( - (port) => - port.toLowerCase().includes("mavlink") || - port.toLowerCase().includes("ardupilot"), - ) - if (possibleComPort !== undefined) { - setSelectedComPort(possibleComPort) - } else if (msg.length > 0) { - setSelectedComPort(msg[0]) - } - } - }) - - // Flags that the drone is connected - socket.on("connected_to_drone", (data) => { - setAircraftType(data.aircraft_type) - if (data.aircraft_type != 1 && data.aircraft_type != 2) { - showErrorNotification("Aircraft not of type quadcopter or plane") - } - setConnected(true) - setConnecting(false) - close() - }) - - // Flags that the drone is disconnected - socket.on("disconnected_from_drone", () => { - console.log("disconnected_from_drone") - setConnected(false) - }) - - // Handles disconnect trigger - socket.on("disconnect", () => { - setConnected(false) - setConnecting(false) - }) - - // Flags an error with the com port - socket.on("connection_error", (msg) => { - console.log(msg.message) - showErrorNotification(msg.message) - setConnecting(false) - setConnected(false) - }) - - socket.on("drone_connect_status", (msg) => { - setDroneConnectionStatusMessage(msg.message) - }) - - return () => { - socket.off("connect") - socket.off("disconnect") - socket.off("is_connected_to_drone") - socket.off("list_com_ports") - socket.off("connected_to_drone") - socket.off("disconnected_from_drone") - socket.off("disconnect") - socket.off("connection_error") - socket.off("drone_connect_status") - setConnected(false) - } - }, []) - function connectToDrone(type) { if (type === ConnectionType.Serial) { - socket.emit("connect_to_drone", { - port: selectedComPort, - baud: parseInt(selectedBaudRate), - wireless: wireless, - connectionType: type, - }) + dispatch( + emitConnectToDrone({ + port: selectedComPort, + baud: parseInt(selectedBaudRate), + wireless: wireless, + connectionType: type, + }), + ) } else if (type === ConnectionType.Network) { if (ip === "" || port === "") { showErrorNotification("IP Address and Port cannot be empty") return } const networkString = `${networkType}:${ip}:${port}` - socket.emit("connect_to_drone", { - port: networkString, - baud: 115200, - wireless: true, - connectionType: type, - }) + dispatch( + emitConnectToDrone({ + port: networkString, + baud: 115200, + wireless: true, + connectionType: type, + }), + ) } else { return } - setConnecting(true) + + dispatch(setConnecting(true)) } + // All seems to be broken, made a ticket for joe to look into: https://github.com/orgs/Avis-Drone-Labs/projects/10/views/1?pane=issue&itemId=124913361 function disconnect() { - socket.emit("disconnect_from_drone") + dispatch(emitDisconnectFromDrone()) } function connectToDroneFromButton() { - getComPorts() - open() + dispatch(emitGetComPorts()) + dispatch(setConnectionModal(true)) } + AddCommand("connect_to_drone", connectToDroneFromButton) AddCommand("disconnect_from_drone", disconnect) @@ -255,10 +148,10 @@ export default function Navbar() {
{/* Connect to drone modal - should probably be moved into its own component? */} { - close() - setConnecting(false) + dispatch(setConnectionModal(false)) + dispatch(setConnecting(false)) }} title="Connect to aircraft" centered @@ -279,7 +172,10 @@ export default function Navbar() { connectToDrone(connectionType) }} > - + dispatch(setConnectionType(value))} + > Serial Connection @@ -299,11 +195,11 @@ export default function Navbar() { } data={comPorts} value={selectedComPort} - onChange={setSelectedComPort} + onChange={(value) => dispatch(setSelectedComPorts(value))} rightSectionPointerEvents="all" rightSection={} rightSectionProps={{ - onClick: getComPorts, + onClick: () => dispatch(emitGetComPorts()), className: "hover:cursor-pointer hover:bg-transparent/50", }} /> @@ -325,14 +221,14 @@ export default function Navbar() { "250000", ]} value={selectedBaudRate} - onChange={setSelectedBaudRate} + onChange={(value) => dispatch(setBaudrate(value))} />
- setWireless(event.currentTarget.checked) + dispatch(setWireless(event.currentTarget.checked)) } /> @@ -347,7 +243,7 @@ export default function Navbar() { label="Network Connection type" description="Select a network connection type" value={networkType} - onChange={setNetworkType} + onChange={(value) => dispatch(setNetworkType(value))} data={[ { value: "tcp", label: "TCP" }, { value: "udp", label: "UDP" }, @@ -358,7 +254,9 @@ export default function Navbar() { description="Enter the IP Address" placeholder="127.0.0.1" value={ip} - onChange={(event) => setIp(event.currentTarget.value)} + onChange={(event) => + dispatch(setIp(event.currentTarget.value)) + } data-autofocus /> setPort(event.currentTarget.value)} + onChange={(event) => + dispatch(setPort(event.currentTarget.value)) + } />
@@ -377,8 +277,8 @@ export default function Navbar() { variant="filled" color={tailwindColors.red[600]} onClick={() => { - close() - setConnecting(false) + dispatch(setConnectionModal(false)) + dispatch(setConnecting(false)) }} > Close @@ -478,7 +378,7 @@ export default function Navbar() { {/* Connected to message */}

- {connected && ( + {connectedToDrone && ( <> Connected to @@ -496,15 +396,15 @@ export default function Navbar() { {/* Button to connect to drone */} {connectedToSocket ? ( ) : ( diff --git a/gcs/src/config.jsx b/gcs/src/config.jsx index 9ad258571..228d3c4e8 100644 --- a/gcs/src/config.jsx +++ b/gcs/src/config.jsx @@ -9,11 +9,6 @@ import { useEffect, useState } from "react" // 3rd Party Imports import { Tabs } from "@mantine/core" -import { useSessionStorage } from "@mantine/hooks" - -// Styling imports -import resolveConfig from "tailwindcss/resolveConfig" -import tailwindConfig from "../tailwind.config" // Custom component and helpers import FlightModes from "./components/config/flightModes" @@ -28,13 +23,18 @@ import { } from "./helpers/notification" import { socket } from "./helpers/socket" +// Redux +import { useSelector } from "react-redux" +import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice" + +// Styling imports +import resolveConfig from "tailwindcss/resolveConfig" +import tailwindConfig from "../tailwind.config" + const tailwindColors = resolveConfig(tailwindConfig).theme.colors export default function Config() { - const [connected] = useSessionStorage({ - key: "connectedToDrone", - defaultValue: false, - }) + const connected = useSelector(selectConnectedToDrone) // States in the frontend const [activeTab, setActiveTab] = useState(null) diff --git a/gcs/src/graphs.jsx b/gcs/src/graphs.jsx index d8fc0924a..527f8e879 100644 --- a/gcs/src/graphs.jsx +++ b/gcs/src/graphs.jsx @@ -8,11 +8,7 @@ import { useEffect, useRef } from "react" // 3rd Party Imports -import { useLocalStorage, usePrevious, useSessionStorage } from "@mantine/hooks" - -// Styling imports -import resolveConfig from "tailwindcss/resolveConfig" -import tailwindConfig from "../tailwind.config.js" +import { useLocalStorage, usePrevious } from "@mantine/hooks" // Custom components and helpers import GraphPanel from "./components/graphs/graphPanel.jsx" @@ -23,6 +19,13 @@ import { dataFormatters } from "./helpers/dataFormatters.js" import { graphOptions } from "./helpers/realTimeGraphOptions.js" import { socket } from "./helpers/socket" +// Redux +import { useSelector } from "react-redux" +import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice.js" + +// Styling imports +import resolveConfig from "tailwindcss/resolveConfig" +import tailwindConfig from "../tailwind.config.js" const tailwindColors = resolveConfig(tailwindConfig).theme.colors const graphLabelColors = { @@ -40,10 +43,7 @@ const graphColors = { } export default function Graphs() { - const [connected] = useSessionStorage({ - key: "connectedToDrone", - defaultValue: false, - }) + const connected = useSelector(selectConnectedToDrone) const [selectValues, setSelectValues] = useLocalStorage({ key: "graphSelectedValues", diff --git a/gcs/src/missions.jsx b/gcs/src/missions.jsx index ab45ef617..8ada05365 100644 --- a/gcs/src/missions.jsx +++ b/gcs/src/missions.jsx @@ -6,11 +6,7 @@ import { useCallback, useEffect, useRef, useState } from "react" // 3rd Party Imports -import { - useDisclosure, - useLocalStorage, - useSessionStorage, -} from "@mantine/hooks" +import { useDisclosure, useSessionStorage } from "@mantine/hooks" import { ResizableBox } from "react-resizable" import { v4 as uuidv4 } from "uuid" @@ -46,6 +42,11 @@ import { } from "./helpers/notification" import { socket } from "./helpers/socket" +// Redux +import { useSelector } from "react-redux" +import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice" +import { selectAircraftType } from "./redux/slices/droneInfoSlice" + // Tailwind styling import resolveConfig from "tailwindcss/resolveConfig" import tailwindConfig from "../tailwind.config" @@ -70,14 +71,9 @@ function UnwrittenChangesWarning({ unwrittenChanges }) { } export default function Missions() { - // Local Storage - const [connected] = useSessionStorage({ - key: "connectedToDrone", - defaultValue: false, - }) - const [aircraftType] = useLocalStorage({ - key: "aircraftType", - }) + // Redux + const connected = useSelector(selectConnectedToDrone) + const aircraftType = useSelector(selectAircraftType) const [activeTab, setActiveTab] = useState("mission") diff --git a/gcs/src/params.jsx b/gcs/src/params.jsx index ee18e0206..1cd537d87 100644 --- a/gcs/src/params.jsx +++ b/gcs/src/params.jsx @@ -13,7 +13,6 @@ import { useDebouncedValue, useDisclosure, useListState, - useSessionStorage, useToggle, } from "@mantine/hooks" import AutoSizer from "react-virtualized-auto-sizer" @@ -31,11 +30,12 @@ import { } from "./helpers/notification.js" import { socket } from "./helpers/socket.js" +// Redux +import { useSelector } from "react-redux" +import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice.js" + export default function Params() { - const [connected] = useSessionStorage({ - key: "connectedToDrone", - defaultValue: true, - }) + const connected = useSelector(selectConnectedToDrone) // Parameter states const [params, paramsHandler] = useListState([]) diff --git a/gcs/src/redux/middleware/socketMiddleware.js b/gcs/src/redux/middleware/socketMiddleware.js index cf9ba0410..20defb958 100644 --- a/gcs/src/redux/middleware/socketMiddleware.js +++ b/gcs/src/redux/middleware/socketMiddleware.js @@ -9,6 +9,7 @@ import { // drone actions import { + emitGetComPorts, emitGetHomePosition, emitIsConnectedToDrone, emitSetState, @@ -131,6 +132,7 @@ const socketMiddleware = (store) => { // SINCE IT'S MIDDLEWARE, OTHER FUNCTIONS CAN ALSO BE CALLED console.log(`Connected to socket from redux, ${socket.socket.id}`) store.dispatch(socketConnected()) + store.dispatch(emitIsConnectedToDrone()) }) socket.socket.on(SocketEvents.Disconnect, () => { @@ -144,18 +146,6 @@ const socketMiddleware = (store) => { ==================== */ - socket.socket.on("is_connected_to_drone", (msg) => { - if (msg) { - store.dispatch(setConnected(true)) - } else { - store.dispatch(setConnected(false)) - store.dispatch(setConnecting(false)) - // Get com ports? - // check if we're connected - // emit get_com_ports - } - }) - socket.socket.on("connected", () => { store.dispatch(setConnected(true)) }) @@ -165,6 +155,16 @@ const socketMiddleware = (store) => { store.dispatch(setConnecting(false)) }) + socket.socket.on("is_connected_to_drone", (msg) => { + if (msg) { + store.dispatch(setConnected(true)) + } else { + store.dispatch(setConnected(false)) + store.dispatch(setConnecting(false)) + store.dispatch(emitGetComPorts()) + } + }) + // Fetch com ports and list them socket.socket.on("list_com_ports", (msg) => { store.dispatch(setFetchingComPorts(false)) @@ -194,6 +194,11 @@ const socketMiddleware = (store) => { store.dispatch(setConnected(false)) }) + // Setting connection status + socket.socket.on("drone_connect_status", (msg) => { + store.dispatch(setConnectionStatus(msg.message)) + }) + // Flags that the drone is connected socket.socket.on("connected_to_drone", (msg) => { store.dispatch(setDroneAircraftType(msg.aircraft_type)) // There are two aircraftTypes, make sure to not use FLA one haha :D @@ -208,14 +213,9 @@ const socketMiddleware = (store) => { store.dispatch(setConnecting(false)) store.dispatch(setConnectionModal(false)) - store.dispatch(emitSetState({ state: "dashboard" })) // Potential issue with state? + store.dispatch(emitSetState({ state: "dashboard" })) store.dispatch(emitGetHomePosition()) }) - - // Setting connection status - socket.socket.on("drone_connect_status", (msg) => { - store.dispatch(setConnectionStatus(msg.message)) - }) } } diff --git a/gcs/src/redux/slices/droneConnectionSlice.js b/gcs/src/redux/slices/droneConnectionSlice.js index af18a7917..412561788 100644 --- a/gcs/src/redux/slices/droneConnectionSlice.js +++ b/gcs/src/redux/slices/droneConnectionSlice.js @@ -97,13 +97,19 @@ const droneConnectionSlice = createSlice({ state.connection_status = action.payload } }, + setWireless: (state, action) => { + if (action.payload !== state.wireless) { + state.wireless = action.payload + } + }, // Emits emitIsConnectedToDrone: () => { socket.emit("is_connected_to_drone") }, - emitGetComPorts: () => { + emitGetComPorts: (state) => { socket.emit("get_com_ports") + state.fetching_com_ports = true }, emitDisconnectFromDrone: () => { console.log("Disconnecting from drone") @@ -138,6 +144,7 @@ const droneConnectionSlice = createSlice({ selectPort: (state) => state.port, selectConnectionModal: (state) => state.connection_modal, selectConnectionStatus: (state) => state.connection_status, + selectWireless: (state) => state.wireless, }, }) @@ -155,6 +162,7 @@ export const { setPort, setConnectionModal, setConnectionStatus, + setWireless, // Emitters emitIsConnectedToDrone, @@ -178,6 +186,7 @@ export const { selectPort, selectConnectionModal, selectConnectionStatus, + selectWireless, } = droneConnectionSlice.selectors export default droneConnectionSlice diff --git a/gcs/src/redux/store.js b/gcs/src/redux/store.js index 89dca63cf..ef815cbad 100644 --- a/gcs/src/redux/store.js +++ b/gcs/src/redux/store.js @@ -4,7 +4,14 @@ import socketSlice from "./slices/socketSlice" import droneInfoSlice from "./slices/droneInfoSlice" import socketMiddleware from "./middleware/socketMiddleware" -import droneConnectionSlice from "./slices/droneConnectionSlice" +import droneConnectionSlice, { + setBaudrate, + setConnectionType, + setIp, + setNetworkType, + setPort, + setWireless, +} from "./slices/droneConnectionSlice" import missionInfoSlice from "./slices/missionSlice" import statusTextSlice from "./slices/statusTextSlice" import notificationSlice from "./slices/notificationSlice" @@ -19,6 +26,11 @@ const rootReducer = combineSlices( notificationSlice, ) +// Get the persisted state, we only want to take a couple of things from here. +const persistedState = localStorage.getItem("reduxState") + ? JSON.parse(localStorage.getItem("reduxState")) + : {} + export const store = configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => { @@ -28,3 +40,49 @@ export const store = configureStore({ }).concat([socketMiddleware]) }, }) + +let droneConnection = persistedState.droneConnection +if (droneConnection !== undefined) { + if (droneConnection.wireless !== undefined) { + store.dispatch(setWireless(droneConnection.wireless)) + } + if (droneConnection.baudrate !== undefined) { + store.dispatch(setBaudrate(droneConnection.baudrate)) + } + if (droneConnection.connection_type !== undefined) { + store.dispatch(setConnectionType(droneConnection.connection_type)) + } + if (droneConnection.network_type !== undefined) { + store.dispatch(setNetworkType(droneConnection.network_type)) + } + if (droneConnection.ip !== undefined) { + store.dispatch(setIp(droneConnection.ip)) + } + if (droneConnection.port !== undefined) { + store.dispatch(setPort(droneConnection.port)) + } +} + +// Update states when a new message comes in, probably inefficient +// TODO: In the future we should check to see if the variables have changed before updating +store.subscribe(() => { + let store_mut = store.getState() + let local_storage = window.localStorage + let session_storage = window.sessionStorage + local_storage.setItem("reduxState", JSON.stringify(store.getState())) + + // Drone connection + local_storage.setItem( + "wirelessConnection", + store_mut.droneConnection.wireless, + ) + local_storage.setItem("baudrate", store_mut.droneConnection.baudrate) + local_storage.setItem( + "connectionType", + store_mut.droneConnection.connection_type, + ) + local_storage.setItem("networkType", store_mut.droneConnection.network_type) + local_storage.setItem("ip", store_mut.droneConnection.ip) + local_storage.setItem("port", store_mut.droneConnection.port) + session_storage.setItem("connectedToDrone", store_mut.droneConnection.connected) +}) diff --git a/gcs/src/redux/subscribers/localStorageSubscriber.js b/gcs/src/redux/subscribers/localStorageSubscriber.js index 11e572838..0dc2ec006 100644 --- a/gcs/src/redux/subscribers/localStorageSubscriber.js +++ b/gcs/src/redux/subscribers/localStorageSubscriber.js @@ -1,34 +1,36 @@ -// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -// !! THIS IS CURRENT BROKEN, I DON'T THINK WE NEED IT !! -// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! +// THIS FILE IS NEVER CALLED, KEEPING FOR THE TIME BEING IN CASE WE NEED TO REVERT IT // subscribe to store updates // and save to local storage any values that have changed -import { store } from "../store" +// import { store } from "../store" -store.subscribe(() => { - // create a mutable copy of the store - let store_mut = store.getState() +// store.subscribe(() => { +// // create a mutable copy of the store +// let store_mut = store.getState() - // droneConnection - // may need to serialize the stored variables +// // droneConnection +// // may need to serialize the stored variables - // PERFORMANCE WAY BE BAD - // POTENTIALLY ADD CHECK TO SEE IF THESE VARIABLES HAVE EVEN BEEN MODIFIED IN THE STORE - window.localStorage.setItem( - "wirelessConnection", - store_mut.droneConnection.wireless, - ) - window.localStorage.setItem("baudrate", store_mut.droneConnection.baudrate) - window.localStorage.setItem( - "connectionType", - store_mut.droneConnection.connectionType, - ) - window.localStorage.setItem( - "networkType", - store_mut.droneConnection.networkType, - ) - window.localStorage.setItem("ip", store_mut.droneConnection.ip) - window.localStorage.setItem("port", store_mut.droneConnection.port) -}) +// // PERFORMANCE WAY BE BAD +// // POTENTIALLY ADD CHECK TO SEE IF THESE VARIABLES HAVE EVEN BEEN MODIFIED IN THE STORE +// window.localStorage.setItem( +// "wirelessConnection", +// store_mut.droneConnection.wireless, +// ) +// window.localStorage.setItem("baudrate", store_mut.droneConnection.baudrate) +// window.localStorage.setItem( +// "connectionType", +// store_mut.droneConnection.connection_type, +// ) +// window.localStorage.setItem( +// "networkType", +// store_mut.droneConnection.network_type, +// ) +// window.localStorage.setItem("ip", store_mut.droneConnection.ip) +// window.localStorage.setItem("port", store_mut.droneConnection.port) +// window.localStorage.setItem( +// "connectedToDrone", +// store_mut.droneConnection.connected, +// ) +// })