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

WIP

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-05-31 20:44:46 +10:00
parent 58de82b8d7
commit 78bdb2b519
10 changed files with 209 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+10 -9
View File
@@ -2,11 +2,11 @@ import React from 'react';
import type {
IBLEConnection,
IHTTPConnection,
ISerialConnection,
} from '@meshtastic/meshtasticjs';
import {
Client,
IHTTPConnection,
Protobuf,
SettingsManager,
Types,
@@ -50,8 +50,9 @@ const App = (): JSX.Element => {
);
const [channels, setChannels] = React.useState([] as Protobuf.Channel[]);
const [nodes, setNodes] = React.useState<Types.NodeInfoPacket[]>([]);
const [connection, setConnection] =
React.useState<ISerialConnection | IHTTPConnection | IBLEConnection>();
const [connection, setConnection] = React.useState<
ISerialConnection | IHTTPConnection | IBLEConnection
>(new IHTTPConnection());
const [isReady, setIsReady] = React.useState<boolean>(false);
const [lastMeshInterraction, setLastMeshInterraction] =
React.useState<number>(0);
@@ -100,7 +101,7 @@ const App = (): JSX.Element => {
React.useEffect(() => {
console.log('UPDATING');
const deviceStatusEvent = connection?.onDeviceStatusEvent.subscribe(
const deviceStatusEvent = connection.onDeviceStatusEvent.subscribe(
(status) => {
setDeviceStatus(status);
if (status === Types.DeviceStatusEnum.DEVICE_CONFIGURED) {
@@ -109,9 +110,9 @@ const App = (): JSX.Element => {
},
);
const myNodeInfoEvent =
connection?.onMyNodeInfoEvent.subscribe(setMyNodeInfo);
connection.onMyNodeInfoEvent.subscribe(setMyNodeInfo);
const nodeInfoPacketEvent = connection?.onNodeInfoPacketEvent.subscribe(
const nodeInfoPacketEvent = connection.onNodeInfoPacketEvent.subscribe(
(node) => {
if (
nodes.findIndex(
@@ -129,7 +130,7 @@ const App = (): JSX.Element => {
},
);
const adminPacketEvent = connection?.onAdminPacketEvent.subscribe(
const adminPacketEvent = connection.onAdminPacketEvent.subscribe(
(adminMessage) => {
switch (adminMessage.data.variant.oneofKind) {
case 'getChannelResponse':
@@ -144,7 +145,7 @@ const App = (): JSX.Element => {
},
);
const meshHeartbeat = connection?.onMeshHeartbeat.subscribe(
const meshHeartbeat = connection.onMeshHeartbeat.subscribe(
setLastMeshInterraction,
);
@@ -154,7 +155,7 @@ const App = (): JSX.Element => {
nodeInfoPacketEvent?.unsubscribe();
adminPacketEvent?.unsubscribe();
meshHeartbeat?.unsubscribe();
connection?.disconnect();
connection.disconnect();
};
}, [connection, nodes]);
src/Main.tsx
+3 -3
View File
@@ -14,7 +14,7 @@ import MessageBox from './components/MessageBox';
import Sidebar from './components/Sidebar';
interface MainProps {
connection?: ISerialConnection | IHTTPConnection | IBLEConnection;
connection: ISerialConnection | IHTTPConnection | IBLEConnection;
myNodeInfo: Protobuf.MyNodeInfo;
nodes: Types.NodeInfoPacket[];
channels: Protobuf.Channel[];
@@ -33,7 +33,7 @@ const Main = (props: MainProps): JSX.Element => {
const [sidebarOpen, setSidebarOpen] = useState<boolean>(false);
React.useEffect(() => {
const textPacketEvent = props.connection?.onTextPacketEvent.subscribe(
const textPacketEvent = props.connection.onTextPacketEvent.subscribe(
(message) => {
setMessages((messages) => [
...messages,
@@ -45,7 +45,7 @@ const Main = (props: MainProps): JSX.Element => {
}, [props.connection]);
React.useEffect(() => {
const routingPacketEvent = props.connection?.onRoutingPacketEvent.subscribe(
const routingPacketEvent = props.connection.onRoutingPacketEvent.subscribe(
(routingPacket) => {
setMessages(
messages.map((message) => {
src/components/Header.tsx
+5 -7
View File
@@ -21,11 +21,9 @@ interface HeaderProps {
status: Types.DeviceStatusEnum;
IsReady: boolean;
LastMeshInterraction: number;
connection?: IHTTPConnection | ISerialConnection | IBLEConnection;
connection: IHTTPConnection | ISerialConnection | IBLEConnection;
setConnection: React.Dispatch<
React.SetStateAction<
IHTTPConnection | ISerialConnection | IBLEConnection | undefined
>
React.SetStateAction<IHTTPConnection | ISerialConnection | IBLEConnection>
>;
}
@@ -44,7 +42,7 @@ const Header = (props: HeaderProps): JSX.Element => {
activeConnection === 'serial' ? 'bg-green-300' : 'bg-gray-300'
}`}
onClick={() => {
props.connection?.disconnect();
props.connection.disconnect();
const connection = new ISerialConnection();
connection.connect({});
setActiveConnection('serial');
@@ -58,7 +56,7 @@ const Header = (props: HeaderProps): JSX.Element => {
activeConnection === 'http' ? 'bg-green-300' : 'bg-gray-300'
}`}
onClick={() => {
props.connection?.disconnect();
props.connection.disconnect();
const connection = new IHTTPConnection();
connection.connect({
address:
@@ -80,7 +78,7 @@ const Header = (props: HeaderProps): JSX.Element => {
activeConnection === 'ble' ? 'bg-green-300' : 'bg-gray-300'
}`}
onClick={() => {
props.connection?.disconnect();
props.connection.disconnect();
const connection = new IBLEConnection();
connection.connect({});
setActiveConnection('ble');
src/components/MessageBox.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ export interface MessageBoxProps {
translations: languageTemplate;
sidebarOpen: boolean;
setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
connection?: ISerialConnection | IHTTPConnection | IBLEConnection;
connection: ISerialConnection | IHTTPConnection | IBLEConnection;
isReady: boolean;
}
@@ -21,7 +21,7 @@ const MessageBox = (props: MessageBoxProps): JSX.Element => {
const [currentMessage, setCurrentMessage] = React.useState('');
const sendMessage = () => {
if (props.isReady) {
props.connection?.sendText(currentMessage, undefined, true);
props.connection.sendText(currentMessage, undefined, true);
setCurrentMessage('');
}
};
src/components/Sidebar.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ interface SidebarProps {
isReady: boolean;
nodes: Types.NodeInfoPacket[];
channels: Protobuf.Channel[];
connection?: ISerialConnection | IHTTPConnection | IBLEConnection;
connection: ISerialConnection | IHTTPConnection | IBLEConnection;
language: LanguageEnum;
setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
translations: languageTemplate;
src/components/Sidebar/Device/Index.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ import Settings from './Settings';
interface DeviceProps {
isReady: boolean;
connection?: ISerialConnection | IHTTPConnection | IBLEConnection;
connection: ISerialConnection | IHTTPConnection | IBLEConnection;
translations: languageTemplate;
}
src/components/Sidebar/Device/Settings.tsx
+39 -17
View File
@@ -1,13 +1,17 @@
import React from 'react';
import { ObservableResource, useObservableSuspense } from 'observable-hooks';
import { useForm } from 'react-hook-form';
import JSONPretty from 'react-json-pretty';
import { Subject } from 'rxjs';
import { filter } from 'rxjs/operators';
import { SaveIcon } from '@heroicons/react/outline';
import type {
IBLEConnection,
IHTTPConnection,
ISerialConnection,
Types,
} from '@meshtastic/meshtasticjs';
import { Protobuf } from '@meshtastic/meshtasticjs';
@@ -15,27 +19,44 @@ import type { languageTemplate } from '../../../../src/App';
export interface SettingsProps {
isReady: boolean;
connection?: ISerialConnection | IHTTPConnection | IBLEConnection;
connection: ISerialConnection | IHTTPConnection | IBLEConnection;
translations: languageTemplate;
}
const Settings = (props: SettingsProps): JSX.Element => {
React.useEffect(() => {
const adminPacketEvent = props.connection?.onAdminPacketEvent.subscribe(
(adminMessage) => {
switch (adminMessage.data.variant.oneofKind) {
case 'getRadioResponse':
if (adminMessage.data.variant.getRadioResponse.preferences) {
setPreferences(
adminMessage.data.variant.getRadioResponse.preferences,
);
}
}
},
);
export interface SettingsPropsNew {
isReady: boolean;
connection: ISerialConnection | IHTTPConnection | IBLEConnection;
translations: languageTemplate;
adminPacketResource: ObservableResource<Types.AdminPacket, Types.AdminPacket>;
}
return () => adminPacketEvent?.unsubscribe();
}, []);
const Settings = (props: SettingsProps): JSX.Element => {
// const adminPacketResource = useSuspense(props.connection.onAdminPacketEvent);
const tmp$ = new Subject<Types.AdminPacket>().pipe(
filter(
(adminPacket) =>
adminPacket.data.variant.oneofKind === 'getRadioResponse',
),
);
// const tmp$ = props.connection.onAdminPacketEvent;
const adminPacketResource = new ObservableResource(tmp$);
return (
<React.Suspense fallback={<div>Loading....</div>}>
<SettingsForm
connection={props.connection}
isReady={props.isReady}
translations={props.translations}
adminPacketResource={adminPacketResource}
/>
</React.Suspense>
);
};
const SettingsForm = (props: SettingsPropsNew): JSX.Element => {
// const adminPacket: Types.AdminPacket = props.adminPacketResource.data.read();
const adminPacket = useObservableSuspense(props.adminPacketResource);
const [preferences, setPreferences] =
React.useState<Protobuf.RadioConfig_UserPreferences>();
@@ -47,6 +68,7 @@ const Settings = (props: SettingsProps): JSX.Element => {
const onSubmit = handleSubmit((data) => console.log(data));
return (
<form onSubmit={onSubmit}>
<div>{JSON.stringify(adminPacket)}</div>
<div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
<div className="my-auto">{props.translations.device_region_title}</div>
<div className="flex shadow-md rounded-md ml-2">