From 7f93d510890c8ab3b6d9ef1fb34b209153ba71f9 Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Mon, 22 Nov 2021 15:56:45 +1100 Subject: [PATCH] Connection method work --- package.json | 2 +- pnpm-lock.yaml | 8 +-- src/components/Connection.tsx | 49 ++++++++------- src/components/connection/BLE.tsx | 48 ++++----------- src/components/connection/Serial.tsx | 63 ++++++++------------ src/components/generic/Modal.tsx | 38 ++++++------ src/components/menu/buttons/DeviceStatus.tsx | 15 +++-- src/core/slices/meshtasticSlice.ts | 15 +++-- 8 files changed, 102 insertions(+), 136 deletions(-) diff --git a/package.json b/package.json index c31233cc..dfed106e 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@headlessui/react": "^1.4.2", - "@meshtastic/meshtasticjs": "^0.6.29", + "@meshtastic/meshtasticjs": "^0.6.30", "@reduxjs/toolkit": "^1.6.2", "boring-avatars": "^1.5.8", "i18next": "^21.5.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d76d08a3..e8587d9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,7 +2,7 @@ lockfileVersion: 5.3 specifiers: '@headlessui/react': ^1.4.2 - '@meshtastic/meshtasticjs': ^0.6.29 + '@meshtastic/meshtasticjs': ^0.6.30 '@reduxjs/toolkit': ^1.6.2 '@types/react': ^17.0.35 '@types/react-dom': ^17.0.11 @@ -52,7 +52,7 @@ specifiers: dependencies: '@headlessui/react': 1.4.2_react-dom@17.0.2+react@17.0.2 - '@meshtastic/meshtasticjs': 0.6.29 + '@meshtastic/meshtasticjs': 0.6.30 '@reduxjs/toolkit': 1.6.2_react-redux@7.2.6+react@17.0.2 boring-avatars: 1.5.8 i18next: 21.5.2 @@ -1359,8 +1359,8 @@ packages: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true - /@meshtastic/meshtasticjs/0.6.29: - resolution: {integrity: sha512-XcfHTGlWBLgdfXCK81U/ilDpepyId/OEvXRNiEerg40m9pD7FaNlqPnAKRhvoeOl56VQdKtCpsiWJdeknSI4tw==} + /@meshtastic/meshtasticjs/0.6.30: + resolution: {integrity: sha512-gxlu4ifju60Dwruz6UbREiZ73uCibtJOQdml28lzvsmTHY2vsEXfRiAoo2AvQFmTpoySJMJWrFzBQvK7RCqbtA==} dependencies: '@protobuf-ts/runtime': 2.0.7 sub-events: 1.8.9 diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx index c6dd267b..1330d55e 100644 --- a/src/components/Connection.tsx +++ b/src/components/Connection.tsx @@ -6,6 +6,7 @@ import { Button } from '@components/generic/Button'; import { Card } from '@components/generic/Card'; import { Select } from '@components/generic/form/Select'; import { Modal } from '@components/generic/Modal'; +import { DeviceStatus } from '@components/menu/buttons/DeviceStatus'; import { cleanupListeners, connection, @@ -18,6 +19,7 @@ import { setConnectionParams, setConnType, } from '@core/slices/appSlice'; +import { resetState } from '@core/slices/meshtasticSlice'; import { Types } from '@meshtastic/meshtasticjs'; import { BLE } from './connection/BLE'; @@ -61,32 +63,28 @@ export const Connection = (): JSX.Element => { >
-
+
-

- {`Connected to: ${ - state.nodes.find( - (node) => node.number === state.radio.hardware.myNodeNum, - )?.user?.longName ?? 'Unknown' - }`} -

-

{`Via: ${connType[appState.connType]}`}

+
{state.deviceStatus === Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? ( ) : (
-
- { + console.log(e.target.value); + + dispatch(setConnType(parseInt(e.target.value))); + }} + /> + {appState.connType === connType.HTTP && } + {appState.connType === connType.BLE && } + {appState.connType === connType.SERIAL && } + + )}
diff --git a/src/components/connection/BLE.tsx b/src/components/connection/BLE.tsx index 5f3edb20..79250cd7 100644 --- a/src/components/connection/BLE.tsx +++ b/src/components/connection/BLE.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { FiCheck } from 'react-icons/fi'; import { connType } from '@app/core/slices/appSlice'; -import { Button } from '@components/generic/Button'; import { IconButton } from '@components/generic/IconButton'; import { ble, setConnection } from '@core/connection'; @@ -20,45 +19,24 @@ export const BLE = (): JSX.Element => { }, [updateBleDeviceList]); return ( -
-
- - -
-
-
Previously connected devices
- {bleDevices.map((device, index) => ( -
{device.name}
+ => { - await setConnection(connType.BLE, { - device: device, - }); + await setConnection(connType.BLE); }} - className="flex justify-between p-2 bg-gray-700 rounded-md" - key={index} - > -
{device.name}
- => { - await setConnection(connType.BLE, { - device: device, - }); - }} - icon={} - /> -
- ))} -
+ icon={} + /> +
+ ))} ); }; diff --git a/src/components/connection/Serial.tsx b/src/components/connection/Serial.tsx index 58dbb6dd..7cb3e73e 100644 --- a/src/components/connection/Serial.tsx +++ b/src/components/connection/Serial.tsx @@ -1,14 +1,15 @@ import React from 'react'; import { FiCheck } from 'react-icons/fi'; -import JSONPretty from 'react-json-pretty'; -import { Button } from '@components/generic/Button'; +import { useAppDispatch } from '@app/hooks/redux'; import { IconButton } from '@components/generic/IconButton'; import { serial, setConnection } from '@core/connection'; import { connType } from '@core/slices/appSlice'; export const Serial = (): JSX.Element => { + const dispatch = useAppDispatch(); + const [serialDevices, setSerialDevices] = React.useState([]); const updateSerialDeviceList = React.useCallback(async (): Promise => { @@ -21,45 +22,29 @@ export const Serial = (): JSX.Element => { }, [updateSerialDeviceList]); return ( -
-
- - -
-
-
Previously connected devices
- {serialDevices.map((device, index) => ( -
-
- {device.getInfo().usbProductId} - {device.getInfo().usbVendorId} -
- => { - await setConnection(connType.SERIAL, { - // @ts-ignore tmp - device: device, - }); - }} - icon={} - /> - +
+

+ Vendor: {device.getInfo().usbVendorId} +

+

+ Device: {device.getInfo().usbProductId} +

- ))} -
+ => { + dispatch(setConnType(parseInt(e.target.value))); + await setConnection(connType.SERIAL); + }} + icon={} + /> +
+ ))}
); }; diff --git a/src/components/generic/Modal.tsx b/src/components/generic/Modal.tsx index a90aef6a..f1df40d8 100644 --- a/src/components/generic/Modal.tsx +++ b/src/components/generic/Modal.tsx @@ -20,26 +20,24 @@ export const Modal = ({ }: ModalProps): JSX.Element => { const darkMode = useAppSelector((state) => state.app.darkMode); return ( - <> - - -
- -
- {children} -
+ + +
+ +
+ {children}
-
- +
+ ); }; diff --git a/src/components/menu/buttons/DeviceStatus.tsx b/src/components/menu/buttons/DeviceStatus.tsx index 31002021..2145c2fa 100644 --- a/src/components/menu/buttons/DeviceStatus.tsx +++ b/src/components/menu/buttons/DeviceStatus.tsx @@ -1,14 +1,15 @@ import type React from 'react'; -import { FiWifi, FiWifiOff } from 'react-icons/fi'; +import { FiBluetooth, FiCpu, FiWifi } from 'react-icons/fi'; import { useAppDispatch, useAppSelector } from '@app/hooks/redux'; import { Button } from '@components/generic/Button'; -import { openConnectionModal } from '@core/slices/appSlice'; +import { connType, openConnectionModal } from '@core/slices/appSlice'; import { Types } from '@meshtastic/meshtasticjs'; export const DeviceStatus = (): JSX.Element => { const dispatch = useAppDispatch(); + const appState = useAppSelector((state) => state.app); const state = useAppSelector((state) => state.meshtastic); const ready = useAppSelector((state) => state.meshtastic.ready); @@ -41,13 +42,15 @@ export const DeviceStatus = (): JSX.Element => {
{state.nodes.find( (node) => node.number === state.radio.hardware.myNodeNum, - )?.user?.longName ?? 'Unknown'} + )?.user?.longName ?? 'Disconnected'}
- {ready ? ( - + {appState.connType === connType.BLE ? ( + + ) : appState.connType === connType.SERIAL ? ( + ) : ( - + )}
diff --git a/src/core/slices/meshtasticSlice.ts b/src/core/slices/meshtasticSlice.ts index 9132c459..86016f88 100644 --- a/src/core/slices/meshtasticSlice.ts +++ b/src/core/slices/meshtasticSlice.ts @@ -43,7 +43,6 @@ interface MeshtasticState { radio: Radio; hostOverrideEnabled: boolean; hostOverride: string; - connectionType: connType; } const initialState: MeshtasticState = { @@ -61,7 +60,6 @@ const initialState: MeshtasticState = { hostOverrideEnabled: localStorage.getItem('hostOverrideEnabled') === 'true' ?? false, hostOverride: localStorage.getItem('hostOverride') ?? '', - connectionType: parseInt(localStorage.getItem('connectionType') ?? '0'), }; export const meshtasticSlice = createSlice({ @@ -184,12 +182,12 @@ export const meshtasticSlice = createSlice({ // connection.disconnect(); } }, - setConnectionType: (state, action: PayloadAction) => { - state.connectionType = action.payload; - localStorage.setItem('connectionType', String(action.payload)); - if (state.connectionType !== action.payload) { - // connection.disconnect(); - } + resetState: (state) => { + state.deviceStatus = Types.DeviceStatusEnum.DEVICE_DISCONNECTED; + state.nodes = []; + state.radio = initialState.radio; + state.ready = false; + state.lastMeshInterraction = 0; }, }, }); @@ -208,6 +206,7 @@ export const { ackMessage, setHostOverrideEnabled, setHostOverride, + resetState, } = meshtasticSlice.actions; export default meshtasticSlice.reducer;