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

WIP

pull/21/head
Sacha Weatherstone 4 years ago
parent
10be79267e
commit
39bb89dab3
5 changed files with 121 additions and 50 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. 86
      src/components/Connection.tsx
  4. 13
      src/pages/Extensions/Index.tsx
  5. 62
      src/pages/Extensions/Logs.tsx

2
package.json
View File

@ -28,7 +28,7 @@
"react-hook-form": "^7.27.0", "react-hook-form": "^7.27.0",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"react-json-pretty": "^2.2.0", "react-json-pretty": "^2.2.0",
"react-multi-select-component": "^4.2.1", "react-multi-select-component": "^4.2.2",
"react-qr-code": "^2.0.3", "react-qr-code": "^2.0.3",
"react-redux": "^7.2.6", "react-redux": "^7.2.6",
"react-use-clipboard": "^1.0.7", "react-use-clipboard": "^1.0.7",

8
pnpm-lock.yaml
View File

@ -40,7 +40,7 @@ specifiers:
react-hook-form: ^7.27.0 react-hook-form: ^7.27.0
react-icons: ^4.3.1 react-icons: ^4.3.1
react-json-pretty: ^2.2.0 react-json-pretty: ^2.2.0
react-multi-select-component: ^4.2.1 react-multi-select-component: ^4.2.2
react-qr-code: ^2.0.3 react-qr-code: ^2.0.3
react-redux: ^7.2.6 react-redux: ^7.2.6
react-use-clipboard: ^1.0.7 react-use-clipboard: ^1.0.7
@ -75,7 +75,7 @@ dependencies:
react-hook-form: 7.27[email protected] react-hook-form: 7.27[email protected]
react-icons: 4.3[email protected] react-icons: 4.3[email protected]
react-json-pretty: 2.2[email protected][email protected] react-json-pretty: 2.2[email protected][email protected]
react-multi-select-component: 4.2.1[email protected][email protected] react-multi-select-component: 4.2.2[email protected][email protected]
react-qr-code: 2.0[email protected] react-qr-code: 2.0[email protected]
react-redux: 7.2[email protected][email protected] react-redux: 7.2[email protected][email protected]
react-use-clipboard: 1.0[email protected][email protected] react-use-clipboard: 1.0[email protected][email protected]
@ -4875,8 +4875,8 @@ packages:
react-dom: 17.0[email protected] react-dom: 17.0[email protected]
dev: false dev: false
/react-multi-select-component/4.2.1[email protected][email protected]: /react-multi-select-component/4.2.2[email protected][email protected]:
resolution: {integrity: sha512-wRteBq1pqKLlYX/ob8I1aBapPokQiRzOJzVqJDVVTHb0Ap/QWXVE4OXE2xwhVf3qmmYvOguvOKQQbQiEYxhONA==} resolution: {integrity: sha512-FvlHp1a4LzwJr121mq4q8NnO4l9HgDo7Z9gk4uCzhRygc78QmqoEcgKEwfcfaQKJp2HAZw4b31P87ex2mLK38A==}
peerDependencies: peerDependencies:
react: ^16 || ^17 react: ^16 || ^17
react-dom: ^16 || ^17 react-dom: ^16 || ^17

86
src/components/Connection.tsx
View File

@ -57,52 +57,50 @@ export const Connection = (): JSX.Element => {
}} }}
> >
<Card> <Card>
<div className="flex w-full max-w-3xl justify-between p-10"> <div className="flex w-full max-w-3xl gap-2 p-2">
{state.deviceStatus === <div className="w-1/2">
Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? ( {state.deviceStatus ===
<div className="space-y-2"> Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? (
<Select <div className="space-y-2">
label="Connection Method" <Select
optionsEnum={connType} label="Connection Method"
value={appState.connType} optionsEnum={connType}
onChange={(e): void => { value={appState.connType}
dispatch(setConnType(parseInt(e.target.value))); onChange={(e): void => {
}} dispatch(setConnType(parseInt(e.target.value)));
/>
{appState.connType === connType.HTTP && <HTTP />}
{appState.connType === connType.BLE && <BLE />}
{appState.connType === connType.SERIAL && <Serial />}
</div>
) : (
<div>
<span>Connecting...</span>
{state.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED && (
<Button
border
onClick={async (): Promise<void> => {
await connection.disconnect();
}} }}
> />
Disconnect {appState.connType === connType.HTTP && <HTTP />}
</Button> {appState.connType === connType.BLE && <BLE />}
)} {appState.connType === connType.SERIAL && <Serial />}
</div> </div>
)} ) : (
<div className="rounded-md bg-secondaryDark p-2"> <div>
{state.logs.map((log, index) => ( <span>Connecting...</span>
<div className="flex"> {state.deviceStatus ===
<div> Types.DeviceStatusEnum.DEVICE_CONNECTED && (
[ <Button
{log.date.toLocaleTimeString(undefined, { border
hour: '2-digit', onClick={async (): Promise<void> => {
minute: '2-digit', await connection.disconnect();
})} }}
] >
</div> Disconnect
<div key={index}>{log.message}</div> </Button>
)}
</div> </div>
))} )}
</div>
<div className="w-1/2 ">
<div className="h-96 overflow-y-auto rounded-md bg-secondaryDark p-2">
{state.logs.map((log, index) => (
<div key={index} className="flex">
<div>[{log.date.toISOString()}]</div>
<div>[{log.emitter}]</div>
<div key={index}>{log.message}</div>
</div>
))}
</div>
</div> </div>
</div> </div>
</Card> </Card>

13
src/pages/Extensions/Index.tsx
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { FiFile, FiInfo } from 'react-icons/fi'; import { FiFile, FiInfo } from 'react-icons/fi';
import { MdSubject } from 'react-icons/md';
import { RiPinDistanceFill } from 'react-icons/ri'; import { RiPinDistanceFill } from 'react-icons/ri';
import { VscExtensions } from 'react-icons/vsc'; import { VscExtensions } from 'react-icons/vsc';
@ -9,10 +10,11 @@ import { ExternalSection } from '@app/components/layout/Sidebar/sections/Externa
import { FileBrowser } from './FileBrowser'; import { FileBrowser } from './FileBrowser';
import { Info } from './Info'; import { Info } from './Info';
import { Logs } from './Logs';
export const Extensions = (): JSX.Element => { export const Extensions = (): JSX.Element => {
const [selectedExtension, setSelectedExtension] = React.useState< const [selectedExtension, setSelectedExtension] = React.useState<
'info' | 'fileBrowser' | 'rangeTest' 'info' | 'logs' | 'fileBrowser' | 'rangeTest'
>('info'); >('info');
return ( return (
@ -28,6 +30,13 @@ export const Extensions = (): JSX.Element => {
icon={<FiInfo />} icon={<FiInfo />}
title="Node Info" title="Node Info"
/> />
<ExternalSection
onClick={(): void => {
setSelectedExtension('logs');
}}
icon={<MdSubject />}
title="Logs"
/>
<ExternalSection <ExternalSection
onClick={(): void => { onClick={(): void => {
setSelectedExtension('fileBrowser'); setSelectedExtension('fileBrowser');
@ -48,6 +57,8 @@ export const Extensions = (): JSX.Element => {
<div className="w-full"> <div className="w-full">
{selectedExtension === 'info' && <Info />} {selectedExtension === 'info' && <Info />}
{selectedExtension === 'logs' && <Logs />}
{selectedExtension === 'fileBrowser' && <FileBrowser />} {selectedExtension === 'fileBrowser' && <FileBrowser />}
</div> </div>
</Layout> </Layout>

62
src/pages/Extensions/Logs.tsx
View File

@ -0,0 +1,62 @@
import React from 'react';
import { useAppSelector } from '@app/hooks/useAppSelector';
import { Protobuf } from '@meshtastic/meshtasticjs';
export const Logs = (): JSX.Element => {
const logs = useAppSelector((state) => state.meshtastic.logs);
const logColor = (level: Protobuf.LogRecord_Level): string => {
switch (level) {
case Protobuf.LogRecord_Level.UNSET:
return 'text-blue-500';
case Protobuf.LogRecord_Level.CRITICAL:
return 'text-blue-500';
case Protobuf.LogRecord_Level.ERROR:
return 'text-blue-500';
case Protobuf.LogRecord_Level.WARNING:
return 'text-blue-500';
case Protobuf.LogRecord_Level.INFO:
return 'text-blue-500';
case Protobuf.LogRecord_Level.DEBUG:
return 'text-blue-500';
case Protobuf.LogRecord_Level.TRACE:
return 'text-blue-500';
}
};
const stringToColour = (str: string) => {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let colour = '#';
for (let i = 0; i < 3; i++) {
const value = (hash >> (i * 8)) & 0xff;
colour += ('00' + value.toString(16)).substr(-2);
}
return colour;
};
return (
<div className="flex h-full w-full select-none flex-col gap-4 p-4">
<div className="flex w-full select-none flex-col gap-2 overflow-y-auto rounded-md p-4 shadow-md dark:bg-primaryDark">
{logs.map((log, index) => (
<div key={index} className="flex gap-2">
<div className="text-sm font-light dark:text-gray-400">
{log.date.toISOString()}
</div>
<div>[{log.emitter}]</div>
<div className={`text-sm font-medium ${logColor(log.level)}`}>
[{Protobuf.LogRecord_Level[log.level]}]
</div>
<div style={{ color: stringToColour(log.emitter) }}>
{stringToColour(log.emitter)}
</div>
<div>{log.message}</div>
</div>
))}
</div>
</div>
);
};
Write Preview
Loading…
Cancel
Save