41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import type React from 'react';
|
|
|
|
import Avatar from 'boring-avatars';
|
|
|
|
import { useAppSelector } from '@app/hooks/redux';
|
|
import { PageLayout } from '@components/templates/PageLayout';
|
|
import { Protobuf } from '@meshtastic/meshtasticjs';
|
|
|
|
import { Node } from './Node';
|
|
|
|
export const Nodes = (): JSX.Element => {
|
|
const nodes = useAppSelector((state) => state.meshtastic.nodes);
|
|
const users = useAppSelector((state) => state.meshtastic.users);
|
|
return (
|
|
<PageLayout
|
|
title="Nodes"
|
|
emptyMessage="No nodes discovered yet..."
|
|
sidebarItems={nodes.map((node) => {
|
|
const user = users.find((user) => user.packet.from === node.num)?.data;
|
|
return {
|
|
title: user ? user.longName : node.num.toString(),
|
|
description: user
|
|
? Protobuf.HardwareModel[user.hwModel]
|
|
: 'Unknown Hardware',
|
|
icon: (
|
|
<Avatar
|
|
size={30}
|
|
name={user ? user.longName : node.num.toString()}
|
|
variant="beam"
|
|
colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
|
|
/>
|
|
),
|
|
};
|
|
})}
|
|
panels={nodes.map((node, index) => (
|
|
<Node key={index} node={node} />
|
|
))}
|
|
/>
|
|
);
|
|
};
|