From 39bb89dab32dbc8baf8377771d0b05a8f4bc39e8 Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Mon, 14 Feb 2022 12:47:31 +1100 Subject: [PATCH] WIP --- package.json | 2 +- pnpm-lock.yaml | 8 ++-- src/components/Connection.tsx | 86 +++++++++++++++++----------------- src/pages/Extensions/Index.tsx | 13 ++++- src/pages/Extensions/Logs.tsx | 62 ++++++++++++++++++++++++ 5 files changed, 121 insertions(+), 50 deletions(-) create mode 100644 src/pages/Extensions/Logs.tsx diff --git a/package.json b/package.json index ade987b6..95b5261c 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "react-hook-form": "^7.27.0", "react-icons": "^4.3.1", "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-redux": "^7.2.6", "react-use-clipboard": "^1.0.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8bf3e93e..68136565 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,7 +40,7 @@ specifiers: react-hook-form: ^7.27.0 react-icons: ^4.3.1 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-redux: ^7.2.6 react-use-clipboard: ^1.0.7 @@ -75,7 +75,7 @@ dependencies: react-hook-form: 7.27.0_react@17.0.2 react-icons: 4.3.1_react@17.0.2 react-json-pretty: 2.2.0_react-dom@17.0.2+react@17.0.2 - react-multi-select-component: 4.2.1_react-dom@17.0.2+react@17.0.2 + react-multi-select-component: 4.2.2_react-dom@17.0.2+react@17.0.2 react-qr-code: 2.0.3_react@17.0.2 react-redux: 7.2.6_react-dom@17.0.2+react@17.0.2 react-use-clipboard: 1.0.7_react-dom@17.0.2+react@17.0.2 @@ -4875,8 +4875,8 @@ packages: react-dom: 17.0.2_react@17.0.2 dev: false - /react-multi-select-component/4.2.1_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-wRteBq1pqKLlYX/ob8I1aBapPokQiRzOJzVqJDVVTHb0Ap/QWXVE4OXE2xwhVf3qmmYvOguvOKQQbQiEYxhONA==} + /react-multi-select-component/4.2.2_react-dom@17.0.2+react@17.0.2: + resolution: {integrity: sha512-FvlHp1a4LzwJr121mq4q8NnO4l9HgDo7Z9gk4uCzhRygc78QmqoEcgKEwfcfaQKJp2HAZw4b31P87ex2mLK38A==} peerDependencies: react: ^16 || ^17 react-dom: ^16 || ^17 diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx index 5d44eb53..73585d79 100644 --- a/src/components/Connection.tsx +++ b/src/components/Connection.tsx @@ -57,52 +57,50 @@ export const Connection = (): JSX.Element => { }} > -
- {state.deviceStatus === - Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? ( -
- { + dispatch(setConnType(parseInt(e.target.value))); }} - > - Disconnect - - )} -
- )} -
- {state.logs.map((log, index) => ( -
-
- [ - {log.date.toLocaleTimeString(undefined, { - hour: '2-digit', - minute: '2-digit', - })} - ] -
-
{log.message}
+ /> + {appState.connType === connType.HTTP && } + {appState.connType === connType.BLE && } + {appState.connType === connType.SERIAL && }
- ))} + ) : ( +
+ Connecting... + {state.deviceStatus === + Types.DeviceStatusEnum.DEVICE_CONNECTED && ( + + )} +
+ )} +
+
+
+ {state.logs.map((log, index) => ( +
+
[{log.date.toISOString()}]
+
[{log.emitter}]
+
{log.message}
+
+ ))} +
diff --git a/src/pages/Extensions/Index.tsx b/src/pages/Extensions/Index.tsx index 0367f3fa..8c7f08c0 100644 --- a/src/pages/Extensions/Index.tsx +++ b/src/pages/Extensions/Index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { FiFile, FiInfo } from 'react-icons/fi'; +import { MdSubject } from 'react-icons/md'; import { RiPinDistanceFill } from 'react-icons/ri'; import { VscExtensions } from 'react-icons/vsc'; @@ -9,10 +10,11 @@ import { ExternalSection } from '@app/components/layout/Sidebar/sections/Externa import { FileBrowser } from './FileBrowser'; import { Info } from './Info'; +import { Logs } from './Logs'; export const Extensions = (): JSX.Element => { const [selectedExtension, setSelectedExtension] = React.useState< - 'info' | 'fileBrowser' | 'rangeTest' + 'info' | 'logs' | 'fileBrowser' | 'rangeTest' >('info'); return ( @@ -28,6 +30,13 @@ export const Extensions = (): JSX.Element => { icon={} title="Node Info" /> + { + setSelectedExtension('logs'); + }} + icon={} + title="Logs" + /> { setSelectedExtension('fileBrowser'); @@ -48,6 +57,8 @@ export const Extensions = (): JSX.Element => {
{selectedExtension === 'info' && } + {selectedExtension === 'logs' && } + {selectedExtension === 'fileBrowser' && }
diff --git a/src/pages/Extensions/Logs.tsx b/src/pages/Extensions/Logs.tsx new file mode 100644 index 00000000..ffe5b1d5 --- /dev/null +++ b/src/pages/Extensions/Logs.tsx @@ -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 ( +
+
+ {logs.map((log, index) => ( +
+
+ {log.date.toISOString()} +
+
[{log.emitter}]
+
+ [{Protobuf.LogRecord_Level[log.level]}] +
+
+ {stringToColour(log.emitter)} +
+
{log.message}
+
+ ))} +
+
+ ); +};