hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Connection method work

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-11-22 15:56:45 +11:00
parent 074f9a7210
commit 7f93d51089
8 changed files with 102 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -13,7 +13,7 @@
}, },
"dependencies": { "dependencies": {
"@headlessui/react": "^1.4.2", "@headlessui/react": "^1.4.2",
"@meshtastic/meshtasticjs": "^0.6.29", "@meshtastic/meshtasticjs": "^0.6.30",
"@reduxjs/toolkit": "^1.6.2", "@reduxjs/toolkit": "^1.6.2",
"boring-avatars": "^1.5.8", "boring-avatars": "^1.5.8",
"i18next": "^21.5.2", "i18next": "^21.5.2",
pnpm-lock.yaml
Generated
+4 -4
View File
@@ -2,7 +2,7 @@ lockfileVersion: 5.3
specifiers: specifiers:
'@headlessui/react': ^1.4.2 '@headlessui/react': ^1.4.2
'@meshtastic/meshtasticjs': ^0.6.29 '@meshtastic/meshtasticjs': ^0.6.30
'@reduxjs/toolkit': ^1.6.2 '@reduxjs/toolkit': ^1.6.2
'@types/react': ^17.0.35 '@types/react': ^17.0.35
'@types/react-dom': ^17.0.11 '@types/react-dom': ^17.0.11
@@ -52,7 +52,7 @@ specifiers:
dependencies: dependencies:
'@headlessui/react': 1.4.2_react-dom@17.0.2+react@17.0.2 '@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 '@reduxjs/toolkit': 1.6.2_react-redux@7.2.6+react@17.0.2
boring-avatars: 1.5.8 boring-avatars: 1.5.8
i18next: 21.5.2 i18next: 21.5.2
@@ -1359,8 +1359,8 @@ packages:
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
dev: true dev: true
/@meshtastic/meshtasticjs/0.6.29: /@meshtastic/meshtasticjs/0.6.30:
resolution: {integrity: sha512-XcfHTGlWBLgdfXCK81U/ilDpepyId/OEvXRNiEerg40m9pD7FaNlqPnAKRhvoeOl56VQdKtCpsiWJdeknSI4tw==} resolution: {integrity: sha512-gxlu4ifju60Dwruz6UbREiZ73uCibtJOQdml28lzvsmTHY2vsEXfRiAoo2AvQFmTpoySJMJWrFzBQvK7RCqbtA==}
dependencies: dependencies:
'@protobuf-ts/runtime': 2.0.7 '@protobuf-ts/runtime': 2.0.7
sub-events: 1.8.9 sub-events: 1.8.9
src/components/Connection.tsx
+26 -23
View File
@@ -6,6 +6,7 @@ import { Button } from '@components/generic/Button';
import { Card } from '@components/generic/Card'; import { Card } from '@components/generic/Card';
import { Select } from '@components/generic/form/Select'; import { Select } from '@components/generic/form/Select';
import { Modal } from '@components/generic/Modal'; import { Modal } from '@components/generic/Modal';
import { DeviceStatus } from '@components/menu/buttons/DeviceStatus';
import { import {
cleanupListeners, cleanupListeners,
connection, connection,
@@ -18,6 +19,7 @@ import {
setConnectionParams, setConnectionParams,
setConnType, setConnType,
} from '@core/slices/appSlice'; } from '@core/slices/appSlice';
import { resetState } from '@core/slices/meshtasticSlice';
import { Types } from '@meshtastic/meshtasticjs'; import { Types } from '@meshtastic/meshtasticjs';
import { BLE } from './connection/BLE'; import { BLE } from './connection/BLE';
@@ -61,32 +63,28 @@ export const Connection = (): JSX.Element => {
> >
<Card> <Card>
<div className="w-full max-w-3xl p-10"> <div className="w-full max-w-3xl p-10">
<div className="flex justify-between w-full bg-gray-100 rounded-md"> <div className="flex justify-between w-full border rounded-md">
<div className="p-2"> <div className="p-2">
<h1> <DeviceStatus />
{`Connected to: ${
state.nodes.find(
(node) => node.number === state.radio.hardware.myNodeNum,
)?.user?.longName ?? 'Unknown'
}`}
</h1>
<p>{`Via: ${connType[appState.connType]}`}</p>
</div> </div>
<div className="p-2 my-auto"> <div className="p-2 my-auto">
{state.deviceStatus === {state.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? ( Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? (
<Button <Button
padding={2}
border border
onClick={async (): Promise<void> => { onClick={async (): Promise<void> => {
await setConnection(); await setConnection(appState.connType);
}} }}
> >
Connect Connect
</Button> </Button>
) : ( ) : (
<Button <Button
padding={2}
border border
onClick={async (): Promise<void> => { onClick={async (): Promise<void> => {
dispatch(resetState());
await connection.disconnect(); await connection.disconnect();
cleanupListeners(); cleanupListeners();
}} }}
@@ -96,19 +94,24 @@ export const Connection = (): JSX.Element => {
)} )}
</div> </div>
</div> </div>
<form className="space-y-2"> {state.deviceStatus ===
<Select Types.DeviceStatusEnum.DEVICE_DISCONNECTED && (
label="Method" <form className="space-y-2">
optionsEnum={connType} <Select
value={appState.connType} label="Method"
onChange={(e): void => { optionsEnum={connType}
dispatch(setConnType(e.target.value as unknown as connType)); value={appState.connType}
}} onChange={(e): void => {
/> console.log(e.target.value);
{appState.connType === connType.HTTP && <HTTP />}
{appState.connType === connType.BLE && <BLE />} dispatch(setConnType(parseInt(e.target.value)));
{appState.connType === connType.SERIAL && <Serial />} }}
</form> />
{appState.connType === connType.HTTP && <HTTP />}
{appState.connType === connType.BLE && <BLE />}
{appState.connType === connType.SERIAL && <Serial />}
</form>
)}
</div> </div>
</Card> </Card>
</Modal> </Modal>
src/components/connection/BLE.tsx
+13 -35
View File
@@ -3,7 +3,6 @@ import React from 'react';
import { FiCheck } from 'react-icons/fi'; import { FiCheck } from 'react-icons/fi';
import { connType } from '@app/core/slices/appSlice'; import { connType } from '@app/core/slices/appSlice';
import { Button } from '@components/generic/Button';
import { IconButton } from '@components/generic/IconButton'; import { IconButton } from '@components/generic/IconButton';
import { ble, setConnection } from '@core/connection'; import { ble, setConnection } from '@core/connection';
@@ -20,45 +19,24 @@ export const BLE = (): JSX.Element => {
}, [updateBleDeviceList]); }, [updateBleDeviceList]);
return ( return (
<div> <div className="space-y-2">
<div className="flex space-x-2"> {bleDevices.map((device, index) => (
<Button type="button" border onClick={updateBleDeviceList}> <div
Refresh List
</Button>
<Button
type="button"
border
onClick={async (): Promise<void> => { onClick={async (): Promise<void> => {
await ble.getDevice(); await setConnection(connType.BLE);
}} }}
className="flex justify-between p-2 bg-gray-700 rounded-md"
key={index}
> >
New Device <div className="my-auto">{device.name}</div>
</Button> <IconButton
</div>
<div className="space-y-2">
<div>Previously connected devices</div>
{bleDevices.map((device, index) => (
<div
onClick={async (): Promise<void> => { onClick={async (): Promise<void> => {
await setConnection(connType.BLE, { await setConnection(connType.BLE);
device: device,
});
}} }}
className="flex justify-between p-2 bg-gray-700 rounded-md" icon={<FiCheck />}
key={index} />
> </div>
<div className="my-auto">{device.name}</div> ))}
<IconButton
onClick={async (): Promise<void> => {
await setConnection(connType.BLE, {
device: device,
});
}}
icon={<FiCheck />}
/>
</div>
))}
</div>
</div> </div>
); );
}; };
src/components/connection/Serial.tsx
+24 -39
View File
@@ -1,14 +1,15 @@
import React from 'react'; import React from 'react';
import { FiCheck } from 'react-icons/fi'; 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 { IconButton } from '@components/generic/IconButton';
import { serial, setConnection } from '@core/connection'; import { serial, setConnection } from '@core/connection';
import { connType } from '@core/slices/appSlice'; import { connType } from '@core/slices/appSlice';
export const Serial = (): JSX.Element => { export const Serial = (): JSX.Element => {
const dispatch = useAppDispatch();
const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]); const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
const updateSerialDeviceList = React.useCallback(async (): Promise<void> => { const updateSerialDeviceList = React.useCallback(async (): Promise<void> => {
@@ -21,45 +22,29 @@ export const Serial = (): JSX.Element => {
}, [updateSerialDeviceList]); }, [updateSerialDeviceList]);
return ( return (
<div> <div className="space-y-2">
<div className="flex space-x-2"> {serialDevices.map((device, index) => (
<Button type="button" border onClick={updateSerialDeviceList}> <div
Refresh List className="flex justify-between p-2 bg-gray-700 rounded-md"
</Button> key={index}
<Button
type="button"
border
onClick={async (): Promise<void> => {
console.log(await serial.getPort());
}}
> >
New Device <div className="flex gap-4 my-auto">
</Button> <p>
</div> Vendor: <small>{device.getInfo().usbVendorId}</small>
<div className="space-y-2"> </p>
<div>Previously connected devices</div> <p>
{serialDevices.map((device, index) => ( Device: <small>{device.getInfo().usbProductId}</small>
<div </p>
className="flex justify-between p-2 bg-gray-700 rounded-md"
key={index}
>
<div className="my-auto">
{device.getInfo().usbProductId}
{device.getInfo().usbVendorId}
</div>
<IconButton
onClick={async (): Promise<void> => {
await setConnection(connType.SERIAL, {
// @ts-ignore tmp
device: device,
});
}}
icon={<FiCheck />}
/>
<JSONPretty data={device.getInfo()} />
</div> </div>
))} <IconButton
</div> onClick={async (): Promise<void> => {
dispatch(setConnType(parseInt(e.target.value)));
await setConnection(connType.SERIAL);
}}
icon={<FiCheck />}
/>
</div>
))}
</div> </div>
); );
}; };
src/components/generic/Modal.tsx
+18 -20
View File
@@ -20,26 +20,24 @@ export const Modal = ({
}: ModalProps): JSX.Element => { }: ModalProps): JSX.Element => {
const darkMode = useAppSelector((state) => state.app.darkMode); const darkMode = useAppSelector((state) => state.app.darkMode);
return ( return (
<> <Dialog
<Dialog as="div"
as="div" className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}
className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`} open={open}
open={open} onClose={onClose}
onClose={onClose} >
> <Dialog.Overlay className="fixed w-full h-full backdrop-filter backdrop-blur-sm" />
<Dialog.Overlay className="fixed w-full h-full backdrop-filter backdrop-blur-sm" /> <div className="text-center ">
<div className="text-center "> <span
<span className="inline-block h-screen align-middle "
className="inline-block h-screen align-middle " aria-hidden="true"
aria-hidden="true" >
> &#8203;
&#8203; </span>
</span> <div className={`inline-block align-middle ${className}`} {...props}>
<div className={`inline-block align-middle ${className}`} {...props}> {children}
{children}
</div>
</div> </div>
</Dialog> </div>
</> </Dialog>
); );
}; };
src/components/menu/buttons/DeviceStatus.tsx
+9 -6
View File
@@ -1,14 +1,15 @@
import type React from 'react'; 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 { useAppDispatch, useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button'; import { Button } from '@components/generic/Button';
import { openConnectionModal } from '@core/slices/appSlice'; import { connType, openConnectionModal } from '@core/slices/appSlice';
import { Types } from '@meshtastic/meshtasticjs'; import { Types } from '@meshtastic/meshtasticjs';
export const DeviceStatus = (): JSX.Element => { export const DeviceStatus = (): JSX.Element => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const appState = useAppSelector((state) => state.app);
const state = useAppSelector((state) => state.meshtastic); const state = useAppSelector((state) => state.meshtastic);
const ready = useAppSelector((state) => state.meshtastic.ready); const ready = useAppSelector((state) => state.meshtastic.ready);
@@ -41,13 +42,15 @@ export const DeviceStatus = (): JSX.Element => {
<div className="my-auto"> <div className="my-auto">
{state.nodes.find( {state.nodes.find(
(node) => node.number === state.radio.hardware.myNodeNum, (node) => node.number === state.radio.hardware.myNodeNum,
)?.user?.longName ?? 'Unknown'} )?.user?.longName ?? 'Disconnected'}
</div> </div>
<div className="py-2"> <div className="py-2">
{ready ? ( {appState.connType === connType.BLE ? (
<FiWifi className="w-5 h-5" /> <FiBluetooth className="w-5 h-5" />
) : appState.connType === connType.SERIAL ? (
<FiCpu className="w-5 h-5" />
) : ( ) : (
<FiWifiOff className="w-5 h-5 animate-pulse" /> <FiWifi className="w-5 h-5" />
)} )}
</div> </div>
</div> </div>
src/core/slices/meshtasticSlice.ts
+7 -8
View File
@@ -43,7 +43,6 @@ interface MeshtasticState {
radio: Radio; radio: Radio;
hostOverrideEnabled: boolean; hostOverrideEnabled: boolean;
hostOverride: string; hostOverride: string;
connectionType: connType;
} }
const initialState: MeshtasticState = { const initialState: MeshtasticState = {
@@ -61,7 +60,6 @@ const initialState: MeshtasticState = {
hostOverrideEnabled: hostOverrideEnabled:
localStorage.getItem('hostOverrideEnabled') === 'true' ?? false, localStorage.getItem('hostOverrideEnabled') === 'true' ?? false,
hostOverride: localStorage.getItem('hostOverride') ?? '', hostOverride: localStorage.getItem('hostOverride') ?? '',
connectionType: parseInt(localStorage.getItem('connectionType') ?? '0'),
}; };
export const meshtasticSlice = createSlice({ export const meshtasticSlice = createSlice({
@@ -184,12 +182,12 @@ export const meshtasticSlice = createSlice({
// connection.disconnect(); // connection.disconnect();
} }
}, },
setConnectionType: (state, action: PayloadAction<connType>) => { resetState: (state) => {
state.connectionType = action.payload; state.deviceStatus = Types.DeviceStatusEnum.DEVICE_DISCONNECTED;
localStorage.setItem('connectionType', String(action.payload)); state.nodes = [];
if (state.connectionType !== action.payload) { state.radio = initialState.radio;
// connection.disconnect(); state.ready = false;
} state.lastMeshInterraction = 0;
}, },
}, },
}); });
@@ -208,6 +206,7 @@ export const {
ackMessage, ackMessage,
setHostOverrideEnabled, setHostOverrideEnabled,
setHostOverride, setHostOverride,
resetState,
} = meshtasticSlice.actions; } = meshtasticSlice.actions;
export default meshtasticSlice.reducer; export default meshtasticSlice.reducer;