mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Connection method work

pull/2/head
Sacha Weatherstone 5 years ago
parent
074f9a7210
commit
7f93d51089
8 changed files with 102 additions and 136 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 8
      pnpm-lock.yaml
  3. 49
      src/components/Connection.tsx
  4. 48
      src/components/connection/BLE.tsx
  5. 63
      src/components/connection/Serial.tsx
  6. 38
      src/components/generic/Modal.tsx
  7. 15
      src/components/menu/buttons/DeviceStatus.tsx
  8. 15
      src/core/slices/meshtasticSlice.ts

2
package.json
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",

8
pnpm-lock.yaml
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[email protected][email protected] '@headlessui/react': 1.4[email protected][email protected]
'@meshtastic/meshtasticjs': 0.6.29 '@meshtastic/meshtasticjs': 0.6.30
'@reduxjs/toolkit': 1.6[email protected][email protected] '@reduxjs/toolkit': 1.6[email protected][email protected]
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

49
src/components/Connection.tsx
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>

48
src/components/connection/BLE.tsx
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>
); );
}; };

63
src/components/connection/Serial.tsx
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>
); );
}; };

38
src/components/generic/Modal.tsx
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>
); );
}; };

15
src/components/menu/buttons/DeviceStatus.tsx
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>

15
src/core/slices/meshtasticSlice.ts
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;

Write Preview
Loading…
Cancel
Save