You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
5.1 KiB
138 lines
5.1 KiB
import type React from "react";
|
|
|
|
import toast from "react-hot-toast";
|
|
import { base16 } from "rfc4648";
|
|
|
|
import { IconButton } from "@app/components/IconButton.js";
|
|
import { Mono } from "@app/components/Mono.js";
|
|
import { useDevice } from "@core/providers/useDevice.js";
|
|
import { Hashicon } from "@emeraldpay/hashicon-react";
|
|
import {
|
|
ArrowPathRoundedSquareIcon,
|
|
EllipsisHorizontalIcon,
|
|
} from "@heroicons/react/24/outline";
|
|
import { Protobuf } from "@meshtastic/meshtasticjs";
|
|
|
|
export const PeersPage = (): JSX.Element => {
|
|
const { connection, nodes } = useDevice();
|
|
|
|
return (
|
|
<div className="w-full overflow-y-auto">
|
|
<div className="overflow-hidden ring-1 ring-black ring-opacity-5">
|
|
<table className="min-w-full divide-y divide-gray-300">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
className="py-3.5 pr-3 pl-6 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
Name
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
Model
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
MAC Address
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
Versions
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
Last Heard
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
SNR
|
|
</th>
|
|
<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
|
<span className="sr-only">Edit</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white">
|
|
{nodes.map((node, index) => (
|
|
<tr
|
|
key={index}
|
|
className={index % 2 === 0 ? undefined : "bg-gray-50"}
|
|
>
|
|
<td className="flex gap-2 whitespace-nowrap py-2 pr-3 pl-6 text-sm font-medium text-gray-900">
|
|
<Hashicon size={24} value={node.data.num.toString()} />
|
|
<span className="my-auto">{node.data.user?.longName}</span>
|
|
</td>
|
|
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
|
<span className="rounded-md bg-slate-200 p-1">
|
|
<Mono>
|
|
{Protobuf.HardwareModel[node.data.user?.hwModel ?? 0]}
|
|
</Mono>
|
|
</span>
|
|
</td>
|
|
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
|
<Mono>
|
|
{base16
|
|
.stringify(node.data.user?.macaddr ?? [])
|
|
.match(/.{1,2}/g)
|
|
?.join(":") ?? ""}
|
|
</Mono>
|
|
</td>
|
|
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
|
{node.metadata ? (
|
|
<>
|
|
<Mono>{node.metadata.firmwareVersion}</Mono>
|
|
<span className="text-black">/</span>
|
|
<Mono>{node.metadata.deviceStateVersion}</Mono>
|
|
</>
|
|
) : (
|
|
<IconButton
|
|
size="sm"
|
|
variant="secondary"
|
|
onClick={() => {
|
|
if (connection) {
|
|
void toast.promise(
|
|
connection.getMetadata(node.data.num),
|
|
{
|
|
loading: "Requesting Metadata...",
|
|
success: "Recieved Metadata",
|
|
error: "No response received",
|
|
}
|
|
);
|
|
}
|
|
}}
|
|
icon={<ArrowPathRoundedSquareIcon className="h-4" />}
|
|
/>
|
|
)}
|
|
</td>
|
|
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
|
{new Date(node.data.lastHeard).toLocaleTimeString()}
|
|
</td>
|
|
<td className="whitespace-nowrap py-2 text-sm text-gray-500">
|
|
<Mono>{node.data.snr}db</Mono>
|
|
</td>
|
|
<td className="relative whitespace-nowrap pl-3 pr-4 text-right text-sm font-medium">
|
|
<IconButton
|
|
size="sm"
|
|
variant="secondary"
|
|
icon={<EllipsisHorizontalIcon className="h-4" />}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|