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

Updates for telemetry rework

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-04-13 14:29:24 +10:00
parent f0c561a854
commit d84d7d94cc
16 changed files with 994 additions and 1000 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Extensions/Debug.tsx
+3 -1
View File
@@ -10,7 +10,9 @@ export const Debug = (): JSX.Element => {
(state) => state.meshtastic.radio.hardware,
);
const node = useAppSelector((state) =>
state.meshtastic.nodes.find((node) => node.num === hardwareInfo.myNodeNum),
state.meshtastic.nodes.find(
(node) => node.data.num === hardwareInfo.myNodeNum,
),
);
return (
src/pages/Extensions/Info.tsx
+4 -2
View File
@@ -14,7 +14,9 @@ export const Info = (): JSX.Element => {
(state) => state.meshtastic.radio.hardware,
);
const node = useAppSelector((state) =>
state.meshtastic.nodes.find((node) => node.num === hardwareInfo.myNodeNum),
state.meshtastic.nodes.find(
(node) => node.data.num === hardwareInfo.myNodeNum,
),
);
return (
@@ -27,7 +29,7 @@ export const Info = (): JSX.Element => {
<div className="m-auto flex flex-col gap-2">
<Hashicon value={hardwareInfo.myNodeNum.toString()} size={180} />
<div className="text-center text-lg font-medium dark:text-white">
{node?.user?.longName || 'Unknown'}
{node?.data.user?.longName || 'Unknown'}
</div>
</div>
{/* <img
src/pages/Map/index.tsx
+12 -12
View File
@@ -8,10 +8,10 @@ import { RiRoadMapLine } from 'react-icons/ri';
import { Layout } from '@components/layout';
import { MapboxProvider } from '@components/MapBox/MapboxProvider';
import { useAppSelector } from '@hooks/useAppSelector';
import type { Protobuf } from '@meshtastic/meshtasticjs';
import { MapContainer } from '@pages/Map/MapContainer';
import { Marker } from '@pages/Map/Marker';
import { NodeCard } from '@pages/Nodes/NodeCard';
import type { Protobuf } from '@meshtastic/meshtasticjs';
export const Map = (): JSX.Element => {
const [selectedNode, setSelectedNode] = useState<Protobuf.NodeInfo>();
@@ -25,22 +25,22 @@ export const Map = (): JSX.Element => {
<MapboxProvider>
{nodes.map((node) => {
return (
node.position && (
node.data.position && (
<Marker
key={node.num}
key={node.data.num}
center={
new mapboxgl.LngLat(
node.position.longitudeI / 1e7,
node.position.latitudeI / 1e7,
node.data.position.longitudeI / 1e7,
node.data.position.latitudeI / 1e7,
)
}
>
<div
onClick={(): void => {
setSelectedNode(node);
setSelectedNode(node.data);
}}
className={`z-50 rounded-full border-2 bg-opacity-30 ${
node.num === selectedNode?.num
node.data.num === selectedNode?.num
? 'border-green-500 bg-green-500'
: 'border-blue-500 bg-blue-500'
}`}
@@ -66,12 +66,12 @@ export const Map = (): JSX.Element => {
{nodes.map((node) => (
<NodeCard
key={node.num}
node={node}
isMyNode={node.num === myNodeNum}
selected={selectedNode?.num === node.num}
key={node.data.num}
node={node.data}
isMyNode={node.data.num === myNodeNum}
selected={selectedNode?.num === node.data.num}
setSelected={(): void => {
setSelectedNode(node);
setSelectedNode(node.data);
}}
/>
))}
src/pages/Messages/ChannelChat.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ export const ChannelChat = ({
(state) => state.meshtastic.radio.hardware,
).myNodeNum;
const nodes = useAppSelector((state) => state.meshtastic.nodes).filter(
(node) => node.num !== myNodeNum,
(node) => node.data.num !== myNodeNum,
);
const chats = useAppSelector((state) => state.meshtastic.chats);
const channels = useAppSelector(
@@ -80,7 +80,7 @@ export const ChannelChat = ({
<Tooltip
key={nodeId}
content={
nodes.find((node) => node.num === nodeId)?.user
nodes.find((node) => node.data.num === nodeId)?.data.user
?.longName ?? 'UNK'
}
>
src/pages/Messages/index.tsx
+10 -8
View File
@@ -52,11 +52,11 @@ export const Messages = (): JSX.Element => {
<div className="mx-2 border-b border-gray-400 dark:border-gray-600" />
)}
{nodes
.filter((node) => node.num !== myNodeNum)
.filter((node) => node.data.num !== myNodeNum)
.map((node) => (
<DmChat
key={node.num}
node={node}
key={node.data.num}
node={node.data}
selectedIndex={selectedChatIndex}
setSelectedIndex={setSelectedChatIndex}
/>
@@ -81,8 +81,8 @@ export const Messages = (): JSX.Element => {
</span>
) : (
<span className="text-gray-500 dark:text-gray-400">
{nodes.find((node) => node.num === selectedChatIndex)?.user
?.longName ?? 'Unknown'}
{nodes.find((node) => node.data.num === selectedChatIndex)
?.data.user?.longName ?? 'Unknown'}
</span>
)}
</div>
@@ -105,9 +105,11 @@ export const Messages = (): JSX.Element => {
: chats[selectedChatIndex].messages[index - 1].message
.packet.from === message.message.packet.from
}
sender={nodes.find(
(node) => node.num === message.message.packet.from,
)}
sender={
nodes.find(
(node) => node.data.num === message.message.packet.from,
)?.data
}
/>
))}
</div>
src/pages/Nodes/index.tsx
+17 -14
View File
@@ -37,8 +37,8 @@ export const Nodes = (): JSX.Element => {
nodes.map((node, index) => {
tmpNodes.push({
id: node.num.toString(),
data: { label: node.user?.longName ?? `Unknown ${node.num}` },
id: node.data.num.toString(),
data: { label: node.data.user?.longName ?? `Unknown ${node.data.num}` },
position: { x: index * 160 + 500, y: 100 + 500 },
});
});
@@ -50,7 +50,7 @@ export const Nodes = (): JSX.Element => {
const tmpEdges: Edge[] = [];
nodes.map((node, index) => {
if (node.num === myNodeNum) {
if (node.data.num === myNodeNum) {
tmpEdges.push({
id: `e${1}-${myNodeNum}`,
source: '1',
@@ -85,17 +85,17 @@ export const Nodes = (): JSX.Element => {
<>
{nodes.map((node) => (
<SidebarItem
key={node.num}
selected={node.num === selected}
key={node.data.num}
selected={node.data.num === selected}
setSelected={(): void => {
setSelected(node.num);
setSelected(node.data.num);
}}
actions={
<IconButton
nested
onClick={(e): void => {
e.stopPropagation();
setSelected(node.num);
setSelected(node.data.num);
}}
icon={<FiSettings />}
/>
@@ -103,7 +103,7 @@ export const Nodes = (): JSX.Element => {
>
<div className="flex dark:text-white">
<div className="relative m-auto">
{node.num === myNodeNum && (
{node.data.num === myNodeNum && (
<Tooltip content="Your Node">
<m.div
whileHover={{ scale: 1.05 }}
@@ -113,15 +113,18 @@ export const Nodes = (): JSX.Element => {
</m.div>
</Tooltip>
)}
<Hashicon value={node.num.toString()} size={32} />
<Hashicon value={node.data.num.toString()} size={32} />
</div>
</div>
<div className="my-auto mr-auto text-xs font-semibold dark:text-gray-400">
{node.lastHeard
? new Date(node.lastHeard).toLocaleTimeString(undefined, {
hour: '2-digit',
minute: '2-digit',
})
{node.data.lastHeard
? new Date(node.data.lastHeard).toLocaleTimeString(
undefined,
{
hour: '2-digit',
minute: '2-digit',
},
)
: 'Never'}
</div>
</SidebarItem>