From c3a4f81b1c2b560840c0dfcf3f1b18243b49dae8 Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Wed, 15 Dec 2021 21:09:53 +1100 Subject: [PATCH] Update node view and support hosted version --- src/App.tsx | 2 +- src/components/Connection.tsx | 39 ++++++++++++++--------------------- src/core/connection.ts | 3 +++ src/pages/Nodes/Index.tsx | 22 ++++++++++---------- src/pages/Nodes/NodeCard.tsx | 28 +++++++++++++++++++++---- 5 files changed, 54 insertions(+), 40 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d6db1a11..504a27e1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type React from 'react'; import { DeviceStatus } from '@app/components/menu/buttons/DeviceStatus'; import { useAppSelector } from '@app/hooks/redux'; diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx index 1330d55e..ed68c552 100644 --- a/src/components/Connection.tsx +++ b/src/components/Connection.tsx @@ -7,19 +7,13 @@ import { Card } from '@components/generic/Card'; import { Select } from '@components/generic/form/Select'; import { Modal } from '@components/generic/Modal'; import { DeviceStatus } from '@components/menu/buttons/DeviceStatus'; -import { - cleanupListeners, - connection, - connectionUrl, - setConnection, -} from '@core/connection'; +import { connection, connectionUrl, setConnection } from '@core/connection'; import { closeConnectionModal, connType, setConnectionParams, setConnType, } from '@core/slices/appSlice'; -import { resetState } from '@core/slices/meshtasticSlice'; import { Types } from '@meshtastic/meshtasticjs'; import { BLE } from './connection/BLE'; @@ -32,18 +26,20 @@ export const Connection = (): JSX.Element => { const appState = useAppSelector((state) => state.app); React.useEffect(() => { - dispatch( - setConnectionParams({ - type: connType.HTTP, - params: { - address: connectionUrl, - tls: false, - receiveBatchRequests: false, - fetchInterval: 2000, - }, - }), - ); - void setConnection(connType.HTTP); + if (!import.meta.env.VITE_PUBLIC_HOSTED) { + dispatch( + setConnectionParams({ + type: connType.HTTP, + params: { + address: connectionUrl, + tls: false, + receiveBatchRequests: false, + fetchInterval: 2000, + }, + }), + ); + void setConnection(connType.HTTP); + } }, [dispatch]); React.useEffect(() => { @@ -56,7 +52,6 @@ export const Connection = (): JSX.Element => { { dispatch(closeConnectionModal()); }} @@ -84,9 +79,7 @@ export const Connection = (): JSX.Element => { padding={2} border onClick={async (): Promise => { - dispatch(resetState()); await connection.disconnect(); - cleanupListeners(); }} > Disconnect @@ -102,8 +95,6 @@ export const Connection = (): JSX.Element => { optionsEnum={connType} value={appState.connType} onChange={(e): void => { - console.log(e.target.value); - dispatch(setConnType(parseInt(e.target.value))); }} /> diff --git a/src/core/connection.ts b/src/core/connection.ts index d2932973..e8ee91d3 100644 --- a/src/core/connection.ts +++ b/src/core/connection.ts @@ -5,6 +5,7 @@ import { addNode, addPosition, addUser, + resetState, setDeviceStatus, setLastMeshInterraction, setMyNodeInfo, @@ -94,6 +95,8 @@ const registerListeners = (): void => { } if (status === Types.DeviceStatusEnum.DEVICE_DISCONNECTED) { store.dispatch(setReady(false)); + store.dispatch(resetState()); + cleanupListeners(); } }); diff --git a/src/pages/Nodes/Index.tsx b/src/pages/Nodes/Index.tsx index 994dee0b..e61088fa 100644 --- a/src/pages/Nodes/Index.tsx +++ b/src/pages/Nodes/Index.tsx @@ -11,16 +11,17 @@ import { Map } from '@components/Map'; import { NodeCard } from './NodeCard'; export const Nodes = (): JSX.Element => { - const myNodeNum = useAppSelector( - (state) => state.meshtastic.radio.hardware, - ).myNodeNum; + const myNodeInfo = useAppSelector((state) => state.meshtastic.radio.hardware); + const nodes = useAppSelector((state) => state.meshtastic.nodes) .slice() .sort((a, b) => - a.number === myNodeNum + a.number === myNodeInfo.myNodeNum ? 1 : b?.lastHeard.getTime() - a?.lastHeard.getTime(), ); + + const myNode = nodes.find((node) => node.number === myNodeInfo.myNodeNum); const [navOpen, setNavOpen] = React.useState(false); const { breakpoint } = useBreakpoint(); @@ -52,13 +53,12 @@ export const Nodes = (): JSX.Element => { No nodes found. )} - {nodes.map((node) => ( - - ))} + {myNode && } + {nodes + .filter((node) => node.number !== myNodeInfo.myNodeNum) + .map((node) => ( + + ))} diff --git a/src/pages/Nodes/NodeCard.tsx b/src/pages/Nodes/NodeCard.tsx index 12295a19..27d29ec4 100644 --- a/src/pages/Nodes/NodeCard.tsx +++ b/src/pages/Nodes/NodeCard.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { FaSatellite } from 'react-icons/fa'; import { FiCode } from 'react-icons/fi'; +import { GiLightningFrequency } from 'react-icons/gi'; import { MdAccountCircle, MdArrowDropDown, @@ -9,6 +10,7 @@ import { MdGpsFixed, MdGpsNotFixed, MdGpsOff, + MdSdStorage, MdSignalCellularAlt, } from 'react-icons/md'; import TimeAgo from 'timeago-react'; @@ -20,10 +22,10 @@ import { Protobuf } from '@meshtastic/meshtasticjs'; export interface NodeCardProps { node: Node; - isMyNode: boolean; + myNodeInfo?: Protobuf.MyNodeInfo; } -export const NodeCard = ({ node, isMyNode }: NodeCardProps): JSX.Element => { +export const NodeCard = ({ node, myNodeInfo }: NodeCardProps): JSX.Element => { const [snrAverage, setSnrAverage] = React.useState(0); const [satsAverage, setSatsAverage] = React.useState(0); React.useEffect(() => { @@ -51,7 +53,7 @@ export const NodeCard = ({ node, isMyNode }: NodeCardProps): JSX.Element => { className="m-2 rounded-md shadow-md bg-gray-50 dark:bg-gray-700" > - {isMyNode ? ( + {myNodeInfo ? ( ) : (
{
{node.user?.longName}
- {!isMyNode && ( + {!myNodeInfo && ( {node.lastHeard.getTime() ? ( @@ -92,6 +94,24 @@ export const NodeCard = ({ node, isMyNode }: NodeCardProps): JSX.Element => { )} + {myNodeInfo && ( +
+
+ + + Firmware Ver: + + {myNodeInfo.firmwareVersion} +
+
+ + + Freq Bands: + + {myNodeInfo.numBands} +
+
+ )}
{Protobuf.HardwareModel[node.user?.hwModel ?? 0]}